add item display

site/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     HelloWorld: typeof import('./src/components/HelloWorld.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']
   }
 }

site/src/components/Player.vue

@@ -1,8 +1,14 @@
 <template>
-    <v-container class="fill-height">
-        <v-row :class="rowClass">
+    <v-container>
+        <v-row :class="closeClass">
             <PlayerHP :hp="props.stats.hp" />
         </v-row>
+        <v-row>
+            <v-col cols="4"></v-col>
+            <v-col cols="8">
+                <PlayerItems :items="props.stats.items" />
+            </v-col>
+        </v-row>
     </v-container>
 </template>
 
@@ -17,5 +23,6 @@ export interface Props {
 
 const props = defineProps<Props>();
 
-const rowClass = computed(() => ({ 'd-flex': true, 'justify-end': props.dealer, 'justify-start': !props.dealer }));
+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 }));
 </script>

site/src/components/PlayerItems.vue

@@ -0,0 +1,28 @@
+<template>
+    <v-container>
+        <v-row v-for="r in 4">
+            <v-col v-for="c in 2" cols="4">
+                <v-btn :disabled="!props.items[itemIndex(r, c)]" @click="emit('item', itemIndex(r, c))">
+                    {{ props.items[itemIndex(r, c)] }}
+                </v-btn>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+    items: string[];
+}
+
+export interface Emits {
+    (e: 'item', k: number): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+function itemIndex(r: number, c: number): number {
+    return (r - 1) * 2 + (c - 1);
+}
+</script>