marek/tft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Augments: Tier aus Icon-Suffix, eine Stufe pro Runde, Evergreen-Pool, Beschreibungen gerendert, Karten-UI

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
team3
2026-07-23 09:03:59 +02:00
parent c450841822
commit f53f1e5c14
8 changed files with 112 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/App.vue
View File

@@ -59,9 +59,16 @@ const standings = computed(() => {
<div v-if="s.augment_offer.length" class="augments">
<h3>Augment wählen</h3>
<div class="offer">
<button v-for="(a, i) in s.augment_offer" :key="a.api_name" @click="store.pickAugment(i)">
<button
v-for="(a, i) in s.augment_offer"
:key="a.api_name"
class="augcard"
:class="'tier' + (a.tier || 2)"
@click="store.pickAugment(i)"
>
<img v-if="a.icon" :src="a.icon" :alt="a.name" />
{{ a.name }}
<span class="augname">{{ a.name }}</span>
<span class="augdesc">{{ a.desc }}</span>
</button>
</div>
</div>
@@ -171,9 +178,20 @@ header {
}
.augments { background: #1d2438; border-radius: 8px; padding: 10px 14px; }
.augments h3 { font-size: 12px; text-transform: uppercase; color: #8a92a8; margin-bottom: 6px; }
.offer { display: flex; gap: 8px; }
.offer button { display: flex; align-items: center; gap: 8px; flex: 1; }
.offer img { width: 28px; height: 28px; }
.offer { display: flex; gap: 10px; }
.augcard {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 12px;
text-align: center;
border-width: 2px;
}
.augcard img { width: 44px; height: 44px; }
.augname { font-weight: 700; font-size: 14px; }
.augdesc { font-size: 12px; color: #aab2c8; line-height: 1.35; }
.augcard.tier1 { border-color: #b9bec9; }
.augcard.tier2 { border-color: #e8c35a; }
.augcard.tier3 { border-color: #b153d8; box-shadow: 0 0 10px #b153d855; }
main {
flex: 1; min-height: 0;