From cceaa5635f1d09778d79a075c56bcab6efe00278 Mon Sep 17 00:00:00 2001
From: Branden J Brown <zephyrtronium@gmail.com>
Date: Tue, 30 Jan 2024 21:50:41 -0600
Subject: [PATCH] disable item buttons you can't use

---
 site/src/components/Game.vue        |  4 ++--
 site/src/components/Player.vue      | 16 +++++++++++++---
 site/src/components/PlayerItems.vue |  7 ++++---
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/site/src/components/Game.vue b/site/src/components/Game.vue
index c3beb43..fb55c90 100644
--- a/site/src/components/Game.vue
+++ b/site/src/components/Game.vue
@@ -10,12 +10,12 @@
                 <v-row>
                     <v-col cols="6">
                         <!-- dealer -->
-                        <Player :stats="props.game.players[0]" :dealer="true" />
+                        <Player :stats="props.game.players[0]" :dealer="true" :disabled="!props.dealer || !myTurn" />
                     </v-col>
                     <v-divider vertical />
                     <v-col cols="6">
                         <!-- challenger -->
-                        <Player :stats="props.game.players[1]" :dealer="false" />
+                        <Player :stats="props.game.players[1]" :dealer="false" :disabled="props.dealer || !myTurn" />
                     </v-col>
                 </v-row>
                 <v-row v-if="myTurn" class="py-4">
diff --git a/site/src/components/Player.vue b/site/src/components/Player.vue
index 3444c9d..a7e55ad 100644
--- a/site/src/components/Player.vue
+++ b/site/src/components/Player.vue
@@ -6,7 +6,7 @@
         <v-row>
             <v-col cols="4"></v-col>
             <v-col cols="8">
-                <PlayerItems :items="props.stats.items" />
+                <PlayerItems :items="props.stats.items" :disabled="props.disabled" />
             </v-col>
         </v-row>
     </v-container>
@@ -17,8 +17,18 @@ import { computed } from 'vue';
 import { Player } from '@/lib/game';
 
 export interface Props {
-    stats: Player
-    dealer: boolean
+    /**
+     * The status of the player to show.
+     */
+    stats: Player;
+    /**
+     * Whether this is the dealer's side, for alignment.
+     */
+    dealer: boolean;
+    /**
+     * Whether the controls are disabled.
+     */
+    disabled: boolean;
 }
 
 const props = defineProps<Props>();
diff --git a/site/src/components/PlayerItems.vue b/site/src/components/PlayerItems.vue
index 970d795..cd07e29 100644
--- a/site/src/components/PlayerItems.vue
+++ b/site/src/components/PlayerItems.vue
@@ -2,7 +2,7 @@
     <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)]" :elevation="itemElev(props.items[itemIndex(r, c)])" @click="emit('item', itemIndex(r, c))">
+                <v-btn :disabled="btnDisabled(r, c)" @click="emit('item', itemIndex(r, c))" variant="outlined">
                     {{ props.items[itemIndex(r, c)] }}
                 </v-btn>
             </v-col>
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 export interface Props {
     items: string[];
+    disabled: boolean;
 }
 
 export interface Emits {
@@ -26,7 +27,7 @@ function itemIndex(r: number, c: number): number {
     return (r - 1) * 2 + (c - 1);
 }
 
-function itemElev(item: string): number {
-    return item ? 8 : 0;
+function btnDisabled(r: number, c: number): boolean {
+    return props.disabled || !props.items[itemIndex(r, c)];
 }
 </script>