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

Auto-Carousel, Standings mit Spieler, Runden-Tracker, Item-Rail links, sinnvoller Item-Pool

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
team3
2026-07-23 06:18:07 +02:00
parent 885bf28fd4
commit 76acd026ec
9 changed files with 169 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/OpponentList.vue
View File

@@ -1,31 +1,32 @@
<script setup>
import { ref } from 'vue'
defineProps({ opponents: { type: Array, required: true } })
defineProps({ players: { type: Array, required: true } })
const expanded = ref(null)
</script>
<template>
<aside class="opponents">
<h3>Gegner</h3>
<h3>Spieler</h3>
<div
v-for="o in opponents"
:key="o.name"
v-for="p in players"
:key="p.name"
class="opp"
:class="{ dead: !o.alive }"
@click="expanded = expanded === o.name ? null : o.name"
:class="{ dead: !p.alive, me: p.is_player }"
@click="!p.is_player && (expanded = expanded === p.name ? null : p.name)"
>
<div class="row">
<span class="oname">{{ o.name }}</span>
<span class="arch">{{ o.archetype }}</span>
<span v-if="o.alive" class="hp">{{ o.hp }}</span>
<span v-else class="placement">#{{ o.placement }}</span>
<span class="oname">{{ p.name }}</span>
<span v-if="p.archetype" class="arch">{{ p.archetype }}</span>
<span v-if="p.alive" class="strength" title="Boardstärke">⚡ {{ p.score }}</span>
<span v-if="p.alive" class="hp">{{ p.hp }}</span>
<span v-else class="placement">#{{ p.placement }}</span>
</div>
<div v-if="o.alive" class="hpbar"><div :style="{ width: o.hp + '%' }" /></div>
<div v-if="expanded === o.name && o.alive" class="scout">
<div>Level {{ o.level }} · Stärke {{ o.score }}</div>
<div v-if="p.alive" class="hpbar"><div :style="{ width: p.hp + '%' }" /></div>
<div v-if="expanded === p.name && p.alive && p.board.length" class="scout">
<div>Level {{ p.level }}</div>
<div class="units">
<img
v-for="(u, i) in o.board"
v-for="(u, i) in p.board"
:key="i"
:src="u.icon"
:alt="u.name"
@@ -41,10 +42,13 @@ const expanded = ref(null)
.opponents { display: flex; flex-direction: column; gap: 6px; }
h3 { font-size: 12px; text-transform: uppercase; color: #8a92a8; margin-bottom: 2px; }
.opp { background: #161b29; border-radius: 6px; padding: 6px 8px; cursor: pointer; }
.opp.me { border: 1px solid #7de3d4; cursor: default; }
.opp.dead { opacity: 0.4; }
.row { display: flex; align-items: center; gap: 6px; }
.oname { flex: 1; font-weight: 600; }
.me .oname { color: #7de3d4; }
.arch { color: #7d86a0; font-size: 11px; }
.strength { color: #e5a531; font-size: 12px; font-weight: 600; }
.hp { font-weight: 700; color: #7de37d; }
.placement { color: #8a92a8; }
.hpbar { height: 4px; background: #232a3d; border-radius: 2px; margin-top: 4px; }