display a message indicating game state changes

site/src/App.vue

@@ -25,14 +25,16 @@ const themeIcon = computed(() => dark.value ? 'mdi-moon-waxing-crescent' : 'mdi-
 
 const playing = ref(false);
 
-const testGame: Game = {
+const testGame = ref<Game>({
 	players: [
-		{ hp: 4, items: ['🔍', '', '', '', '', '', '', ''] },
-		{ hp: 3, items: ['🔍', '🔍', '', '', '', '', '', ''] },
+		{ hp: 4, items: ['🔍', '🔪', '', '', '', '', '', ''] },
+		{ hp: 3, items: ['👮', '🚬', '', '', '', '', '', ''] },
 	],
 	round: 1,
 	dealer: true,
 	damage: 1,
-	previous: true,
-};
+	previous: null,
+	live: 3,
+	blank: 4,
+});
 </script>

site/src/components/GameStatus.vue

@@ -1,14 +1,19 @@
 <template>
+    <v-container>
+        <v-row v-if="gameOn" class="d-flex justify-center">
             <v-sheet class="d-flex justify-center mt-2" :elevation="2">
-        <v-row v-if="gameOn">
                 <v-chip v-for="c of roundChips" class="ma-4" :variant="c.variant">{{ c.text }}</v-chip>
-        </v-row>
             </v-sheet>
+        </v-row>
+        <v-row class="d-flex flex-fill justify-center">
+            <v-alert :text="msg" class="mt-2 text-button" density="compact"></v-alert>
+        </v-row>
+    </v-container>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { Game } from '@/lib/game';
+import { computed, ref, watch } from 'vue';
+import type { Game } from '@/lib/game';
 
 export interface Props {
     game: Game;
@@ -24,4 +29,22 @@ const roundChips = computed(() => [
     { text: "II", variant: props.game.round === 2 ? 'elevated' : undefined },
     { text: "III", variant: props.game.round === 3 ? 'elevated' : undefined },
 ] as const)
+
+// TODO(zeph): this probably should just be handled by the server and sent in the dto
+const msg = ref<string>('');
+watch(props.game, (now, was) => {
+    if (now.live != null && was?.live == null) {
+        msg.value = `THE SHOTGUN CONTAINS ${now.live} LIVE AND ${now.blank} BLANK SHELLS`;
+    } else if (was == null) {
+        msg.value = 'THE GAME BEGINS';
+    } else if (now.damage === 2 && was.damage !== 2) {
+        msg.value = 'THE BARREL HAS BEEN SHORTENED';
+    } else if (now.shell != null && was.shell == null) {
+        msg.value = `THE CURRENT SHELL IS ${now.shell ? 'LIVE' : 'BLANK'}`;
+    } else if (now.previous != null && was.previous == null) {
+        msg.value = `A ${now.previous ? 'LIVE' : 'BLANK'} SHELL CLATTERS ON THE TABLE`;
+    } else {
+        msg.value = 'THE GAME CONTINUES';
+    }
+}, { immediate: true })
 </script>