bebe/bamort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

display skills structured like in Moam

Browse Source
This commit is contained in:
Frank
2025-01-18 20:59:35 +01:00
parent d11e3244cb
commit bf8eade29d
1 changed files with 74 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/SkillView.vue
+74 -11
View File
@@ -1,37 +1,100 @@
<template>
<div class="cd-view">
<h2>{{ character.name }}'s Fertigkeiten</h2>
<div class="cd-list">
<table class="cd-table">
<div class="tables-container">
<div class="table-wrapper-left">
<h2 style="line-height: 1.5; margin-top: 5px;"><!-- {{ character.name }}'s -->Fertigkeiten</h2>
<table class="cd-table">
<thead>
<tr>
<th>{{ $t('skill.name') }}</th>
<th>{{ $t('skill.description') }}</th>
<th>{{ $t('skill.value') }}</th>
<th>{{ $t('skill.bonus') }}</th>
<th>{{ $t('skill.pp') }}</th>
<th>{{ $t('skill.note') }}</th>
<th class="cd-table-header" width="60%">{{ $t('skill.name') }}</th>
<th class="cd-table-header" width="35">{{ $t('skill.value') }}</th>
<th class="cd-table-header" width="35">{{ $t('skill.bonus') }}</th>
<th class="cd-table-header" width="35">{{ $t('skill.pp') }}</th>
<!-- <th class="cd-table-header">{{ $t('skill.description') }}</th>-->
<th class="cd-table-header" width="30%">{{ $t('skill.note') }}</th>
</tr>
</thead>
<tbody>
<template v-for="skill in character.fertigkeiten">
<template v-for="skills,categorie in character.categorizedskills">
<tr>
<td colspan="6">{{ categorie || '-' }}</td>
</tr>
<template v-for="skill in skills">
<tr>
<td>{{ skill.name || '-' }}</td>
<td>{{ skill.fertigkeitswert || '-' }}</td>
<td>{{ skill.bonus || '0' }}</td>
<td>{{ skill.pp || '0' }}</td>
<!-- <td>{{ skill.beschreibung || '-' }}</td>-->
<td>{{ skill.bemerkung || '-' }}</td>
</tr>
</template>
</template>
<tr>
<td class="cd-table-header" colspan="5">Waffenfertigkeiten</td>
</tr>
<template v-for="skill in character.waffenfertigkeiten">
<tr>
<td>{{ skill.name || '-' }}</td>
<td>{{ skill.beschreibung || '-' }}</td>
<td>{{ skill.fertigkeitswert || '-' }}</td>
<td>{{ skill.bonus || '0' }}</td>
<td>{{ skill.pp || '0' }}</td>
<!-- <td>{{ skill.beschreibung || '-' }}</td> -->
<td>{{ skill.bemerkung || '-' }}</td>
</tr>
</template>
</tbody>
</table>
</table>
</div>
<div class="table-wrapper-right">
<h2 style="line-height: 1.5; margin-top: 5px;"> Angeborene Fertigkeiten</h2>
<table class="cd-table">
<thead>
<tr>
<th class="cd-table-header" width="80%">{{ $t('skill.name') }}</th>
<th class="cd-table-header" width="35">{{ $t('skill.value') }}</th>
</tr>
</thead>
<tbody>
<template v-for="skill in character.InnateSkills">
<tr>
<td>{{ skill.name || '-' }}</td>
<td>{{ skill.fertigkeitswert || '-' }}</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div> <!--- end cd-list-->
</div> <!--- end character -datasheet-->
</template>
<style>
.tables-container {
display: flex;
gap: 1rem;
width: 100%;
}
.table-wrapper-left {
flex: 6;
min-width: 0; /* Prevent table from overflowing */
}
.table-wrapper-right {
flex: 4;
min-width: 0; /* Prevent table from overflowing */
}
.cd-table {
width: 100%;
}
.cd-table-header {
background-color: #1da766;
font-weight: bold;
}
</style>