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

display a message indicating game state changes

Browse Source
This commit is contained in:
Branden J Brown 2024-01-30 22:39:24 -06:00
parent cceaa5635f
commit 3f0b57f87d
2 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/src/App.vue
View File

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

37
site/src/components/GameStatus.vue
View File

@ -1,14 +1,19 @@
<template> <template>
<v-sheet class="d-flex justify-center mt-2" :elevation="2"> <v-container>
<v-row v-if="gameOn"> <v-row v-if="gameOn" class="d-flex justify-center">
<v-chip v-for="c of roundChips" class="ma-4" :variant="c.variant">{{ c.text }}</v-chip> <v-sheet class="d-flex justify-center mt-2" :elevation="2">
<v-chip v-for="c of roundChips" class="ma-4" :variant="c.variant">{{ c.text }}</v-chip>
</v-sheet>
</v-row> </v-row>
</v-sheet> <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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed, ref, watch } from 'vue';
import { Game } from '@/lib/game'; import type { Game } from '@/lib/game';
export interface Props { export interface Props {
game: Game; game: Game;
@ -24,4 +29,22 @@ const roundChips = computed(() => [
{ text: "II", variant: props.game.round === 2 ? 'elevated' : undefined }, { text: "II", variant: props.game.round === 2 ? 'elevated' : undefined },
{ text: "III", variant: props.game.round === 3 ? 'elevated' : undefined }, { text: "III", variant: props.game.round === 3 ? 'elevated' : undefined },
] as const) ] as const)
</script>
// 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>