small css changes

2024-05-03 17:00:31 +02:00
parent 823baa4034
commit 77f44ec1db
6 changed files with 108 additions and 55 deletions
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { Player } from '~/netcode/Player';
+
+
+export interface Props {
+    player: Player
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+
+    <div class="turn_icon">
+        <img src="/images/heal.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.heal_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/damage.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.damage_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/gold.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.gold_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/champion-shield.png" />
+        <span class="turn_icon_number">
+            {{ player.team.health }}
+        </span>
+    </div>
+
+</template>
+
+<style scoped>
+.turn_icon {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.turn_icon img {
+    height: 50px;
+}
+
+.turn_icon_number {
+    position: absolute;
+    text-shadow: white 0 0 1px;
+}
+</style>