add game controls

site/src/components/Game.vue

@@ -18,6 +18,21 @@
                         <Player :stats="props.game.players[1]" :dealer="false" />
                     </v-col>
                 </v-row>
+                <v-row v-if="myTurn" class="py-4">
+                    <v-col cols="1"></v-col>
+                    <v-col cols="5">
+                        <v-btn block>SHOOT {{ dealerTarget }}</v-btn>
+                    </v-col>
+                    <v-col cols="5">
+                        <v-btn block>SHOOT {{ challTarget }}</v-btn>
+                    </v-col>
+                </v-row>
+                <v-row v-else class="py-4">
+                    <v-col cols="3"></v-col>
+                    <v-col cols="6">
+                        <v-btn block disabled>THE {{ currentTurn }} IS CONSIDERING</v-btn>
+                    </v-col>
+                </v-row>
             </v-sheet>
         </v-row>
     </v-container>
@@ -25,11 +40,24 @@
 
 <script setup lang="ts">
 import type { Game } from '@/lib/game';
+import { computed } from 'vue';
 
 export interface Props {
+    /**
+     * Game state to display.
+     */
     game: Game;
+    /**
+     * Whether this client is connected as the dealer.
+     */
     dealer: boolean;
 }
 
 const props = defineProps<Props>();
+
+const myTurn = computed(() => props.dealer === props.game.dealer);
+const currentTurn = computed(() => props.game.dealer ? 'DEALER' : 'CHALLENGER');
+
+const dealerTarget = computed(() => props.dealer ? 'YOURSELF' : 'THE DEALER');
+const challTarget = computed(() => props.dealer ? 'THE CHALLENGER' : 'YOURSELF');
 </script>

site/src/lib/game.ts

@@ -61,3 +61,10 @@ export interface GameStart {
      */
     dealer: boolean;
 }
+
+/**
+ * Commands sent to the server.
+ */
+export interface Action {
+    action: "quit" | "across" | "self" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7";
+}