inline player hp component

site/components.d.ts

@@ -10,7 +10,6 @@ declare module 'vue' {
     Game: typeof import('./src/components/Game.vue')['default']
     GameStatus: typeof import('./src/components/GameStatus.vue')['default']
     Player: typeof import('./src/components/Player.vue')['default']
-    PlayerHP: typeof import('./src/components/PlayerHP.vue')['default']
     PlayerItems: typeof import('./src/components/PlayerItems.vue')['default']
     TheLanding: typeof import('./src/components/TheLanding.vue')['default']
     TheLogin: typeof import('./src/components/TheLogin.vue')['default']

site/src/components/Player.vue

@@ -2,7 +2,9 @@
     <v-container>
         <v-row :class="closeClass">
             <v-sheet v-if="props.dealer && stats.cuffs" class="mr-4 text-button" :elevation="2">CUFFED</v-sheet>
-            <PlayerHP :hp="props.stats.hp" />
+            <v-sheet :elevation="2" width="100" height="30" class="text-center">
+                {{ hpText }}
+            </v-sheet>
             <v-sheet v-if="!props.dealer && stats.cuffs" class="ml-4 text-button" :elevation="2">CUFFED</v-sheet>
         </v-row>
         <v-row class="d-flex flex-fill">
@@ -39,5 +41,6 @@ const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 const closeClass = computed(() => ({ 'd-flex': true, 'justify-end': props.dealer, 'justify-start': !props.dealer }));
-const farClass = computed(() => ({ 'd-flex': true, 'justify-end': !props.dealer, 'justify-start': props.dealer }));
+
+const hpText = computed(() => '⚡'.repeat(props.stats.hp) || ' ');
 </script>

site/src/components/PlayerHP.vue

@@ -1,17 +0,0 @@
-<template>
-    <v-sheet :elevation="2" width="100" height="30" class="text-center">
-        {{ text }}
-    </v-sheet>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-export interface Props {
-    hp: number;
-}
-
-const props = defineProps<Props>();
-
-const text = computed(() => '⚡'.repeat(props.hp) || ' ');
-</script>