studio
/
shotgun
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

disable item buttons you can't use

This commit is contained in:
Branden J Brown 2024-01-30 21:50:41 -06:00
parent 72304fab0b
commit cceaa5635f
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/src/components/Game.vue
View File

@ -10,12 +10,12 @@
<v-row> <v-row>
<v-col cols="6"> <v-col cols="6">
<!-- dealer --> <!-- dealer -->
<Player :stats="props.game.players[0]" :dealer="true" /> <Player :stats="props.game.players[0]" :dealer="true" :disabled="!props.dealer || !myTurn" />
</v-col> </v-col>
<v-divider vertical /> <v-divider vertical />
<v-col cols="6"> <v-col cols="6">
<!-- challenger --> <!-- challenger -->
<Player :stats="props.game.players[1]" :dealer="false" /> <Player :stats="props.game.players[1]" :dealer="false" :disabled="props.dealer || !myTurn" />
</v-col> </v-col>
</v-row> </v-row>
<v-row v-if="myTurn" class="py-4"> <v-row v-if="myTurn" class="py-4">

16
site/src/components/Player.vue
View File

@ -6,7 +6,7 @@
<v-row> <v-row>
<v-col cols="4"></v-col> <v-col cols="4"></v-col>
<v-col cols="8"> <v-col cols="8">
<PlayerItems :items="props.stats.items" /> <PlayerItems :items="props.stats.items" :disabled="props.disabled" />
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
@ -17,8 +17,18 @@ import { computed } from 'vue';
import { Player } from '@/lib/game'; import { Player } from '@/lib/game';
export interface Props { 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>(); const props = defineProps<Props>();

7
site/src/components/PlayerItems.vue
View File

@ -2,7 +2,7 @@
<v-container> <v-container>
<v-row v-for="r in 4"> <v-row v-for="r in 4">
<v-col v-for="c in 2" cols="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)] }} {{ props.items[itemIndex(r, c)] }}
</v-btn> </v-btn>
</v-col> </v-col>
@ -13,6 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
export interface Props { export interface Props {
items: string[]; items: string[];
disabled: boolean;
} }
export interface Emits { export interface Emits {
@ -26,7 +27,7 @@ function itemIndex(r: number, c: number): number {
return (r - 1) * 2 + (c - 1); return (r - 1) * 2 + (c - 1);
} }
function itemElev(item: string): number { function btnDisabled(r: number, c: number): boolean {
return item ? 8 : 0; return props.disabled || !props.items[itemIndex(r, c)];
} }
</script> </script>