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

Shop-Topbar: Level/XP/Odds links, Lock rechts; Shine nur bei eigenem Champion

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
team3
2026-07-23 05:58:07 +02:00
parent 50c3f2857e
commit 885bf28fd4
4 changed files with 50 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.vue
View File

@@ -20,10 +20,6 @@ const kindLabel = { pvp: 'PvP', pve: 'PvE', carousel: 'Carousel' }
<header>
<span class="round">Runde {{ s.round.label }} · {{ kindLabel[s.round.kind] }}</span>
<span class="stat">❤️ {{ s.player.hp }}</span>
<span class="stat">
Lvl {{ s.player.level }}
<template v-if="s.player.xp_needed !== null">({{ s.player.xp }}/{{ s.player.xp_needed }})</template>
</span>
<span class="score">Boardstärke {{ s.player.score }}</span>
<button class="fight" :disabled="s.over" @click="store.next()">
{{ s.round.kind === 'pvp' ? 'Kampf' : 'Weiter' }} ▶

68
frontend/src/components/Shop.vue
View File

@@ -1,19 +1,48 @@
<script setup>
import { store } from '../store.js'
const costColors = ['#8a8f9d', '#4caf6e', '#4a90d9', '#b153d8', '#e5a531']
function owned(api) {
return [...store.state.board, ...store.state.bench].some((u) => u.api_name === api)
}
</script>
<template>
<div class="shopwrap">
<div class="topbar">
<span class="pill gold">🪙 {{ store.state.player.gold }}</span>
<span
v-if="store.state.player.streak !== 0"
class="pill streak"
:class="store.state.player.streak > 0 ? 'hot' : 'cold'"
>
<span class="flame">🔥</span> {{ Math.abs(store.state.player.streak) }}
</span>
<div class="tleft">
<span class="lvl">Lvl. {{ store.state.player.level }}</span>
<span v-if="store.state.player.xp_needed !== null" class="xp">
{{ store.state.player.xp }}/{{ store.state.player.xp_needed }}
</span>
<span class="odds">
<span
v-for="(p, i) in store.state.shop_odds"
:key="i"
:style="{ color: costColors[i] }"
>● {{ p }}%</span>
</span>
</div>
<div class="tcenter">
<span class="pill gold">🪙 {{ store.state.player.gold }}</span>
<span
v-if="store.state.player.streak !== 0"
class="pill streak"
:class="store.state.player.streak > 0 ? 'hot' : 'cold'"
>
<span class="flame">🔥</span> {{ Math.abs(store.state.player.streak) }}
</span>
</div>
<div class="tright">
<button
class="lock"
:class="{ locked: store.state.shop_locked }"
:title="store.state.shop_locked ? 'Shop entsperren' : 'Shop sperren'"
@click="store.act({ action: 'lock' })"
>
{{ store.state.shop_locked ? '🔒' : '🔓' }}
</button>
</div>
</div>
<div class="shoprow">
@@ -47,7 +76,7 @@ const costColors = ['#8a8f9d', '#4caf6e', '#4a90d9', '#b153d8', '#e5a531']
>
<template v-if="s">
<div class="art" :style="{ backgroundImage: `url(${s.icon})` }" />
<div class="shine" />
<div v-if="owned(s.api_name)" class="shine" />
<div v-if="s.upgrade" class="starhint">
<span v-for="n in s.upgrade" :key="n">★</span>
</div>
@@ -63,15 +92,6 @@ const costColors = ['#8a8f9d', '#4caf6e', '#4a90d9', '#b153d8', '#e5a531']
</template>
</div>
</div>
<button
class="lock"
:class="{ locked: store.state.shop_locked }"
:title="store.state.shop_locked ? 'Shop entsperren' : 'Shop sperren'"
@click="store.act({ action: 'lock' })"
>
{{ store.state.shop_locked ? '🔒' : '🔓' }}
</button>
</div>
</div>
</template>
@@ -79,7 +99,13 @@ const costColors = ['#8a8f9d', '#4caf6e', '#4a90d9', '#b153d8', '#e5a531']
<style scoped>
.shopwrap { display: flex; flex-direction: column; gap: 6px; }
.topbar { display: flex; justify-content: center; gap: 10px; }
.topbar { display: flex; align-items: center; gap: 10px; }
.tleft { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.tcenter { display: flex; gap: 10px; }
.tright { flex: 1; display: flex; justify-content: flex-end; }
.lvl { font-weight: 800; font-size: 15px; }
.xp { color: #8a92a8; font-size: 12px; }
.odds { display: flex; gap: 8px; font-size: 12px; font-weight: 600; margin-left: 8px; }
.pill {
background: #161b29;
border: 1px solid #3a4460;
@@ -175,8 +201,8 @@ const costColors = ['#8a8f9d', '#4caf6e', '#4a90d9', '#b153d8', '#e5a531']
.ccost { color: #ffd75e; font-weight: 700; }
.lock {
width: 44px;
font-size: 17px;
font-size: 15px;
padding: 3px 10px;
background: #141927;
}
.lock.locked { border-color: #ffd75e; background: #2a2618; }