M10: Vue frontend — traits, shop, bench, opponents, strength meter

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/OpponentList.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue'
+defineProps({ opponents: { type: Array, required: true } })
+const expanded = ref(null)
+</script>
+
+<template>
+  <aside class="opponents">
+    <h3>Gegner</h3>
+    <div
+      v-for="o in opponents"
+      :key="o.name"
+      class="opp"
+      :class="{ dead: !o.alive }"
+      @click="expanded = expanded === o.name ? null : o.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>
+      </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 class="units">
+          <img
+            v-for="(u, i) in o.board"
+            :key="i"
+            :src="u.icon"
+            :alt="u.name"
+            :title="`${u.name} ${'★'.repeat(u.stars)}`"
+          />
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.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.dead { opacity: 0.4; }
+.row { display: flex; align-items: center; gap: 6px; }
+.oname { flex: 1; font-weight: 600; }
+.arch { color: #7d86a0; font-size: 11px; }
+.hp { font-weight: 700; color: #7de37d; }
+.placement { color: #8a92a8; }
+.hpbar { height: 4px; background: #232a3d; border-radius: 2px; margin-top: 4px; }
+.hpbar div { height: 100%; background: #4caf6e; border-radius: 2px; }
+.scout { margin-top: 6px; font-size: 12px; color: #aab2c8; }
+.units { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
+.units img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; }
+</style>