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

display messages according to game dto action

This commit is contained in:
Branden J Brown 2024-02-03 12:39:32 -06:00
parent 21606cd3cd
commit 016d297f10
1 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<v-container>
<v-row v-if="gameOn" class="d-flex justify-center">
<v-row class="d-flex justify-center">
<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>
@ -8,6 +8,11 @@
<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-row v-if="shellList.length > 0">
<v-sheet class="d-flex justify-center mt-2" :elevation="2">
{{ shellList }}
</v-sheet>
</v-row>
</v-container>
</template>
@ -21,30 +26,51 @@ export interface Props {
const props = defineProps<Props>();
// TODO(zeph): simplify this condition, this should just come in the game state
const gameOn = computed(() => props.game.round < 3 || props.game.players.every((p) => p.hp > 0))
const roundChips = computed(() => [
{ text: "I", variant: props.game.round === 1 ? 'elevated' : undefined },
{ text: "II", variant: props.game.round === 2 ? 'elevated' : undefined },
{ text: "III", variant: props.game.round === 3 ? 'elevated' : undefined },
] as const)
] 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';
const actionMessages: Record<Game["action"], (game: Game) => string> = {
Start: () => "THE MATCH BEGINS",
Shoot: (game) => game.previous ? "THE PAIN..." : "A BLANK CLATTERS ON THE TABLE",
GameEnd: () => "THE DEALER RELOADS THE SHOTGUN",
BeerGameEnd: () => "THE LAST SHELL CLATTERS ON THE TABLE",
ChallengerWins: (game) => game.round < 3 ? "THE DEALER FALLS... BRIEFLY" : "THE DEALER FALLS... FOREVER",
DealerWins: () => "THE CHALLENGER FALLS",
Lens: (game) => `THE ${game.dealer ? "DEALER" : "CHALLENGER"} PEERS INTO THE CHAMBER`,
Cig: (game) => `THE ${game.dealer ? "DEALER" : "CHALLENGER"} TAKES A DRAG`,
Beer: (game) => `THE ${game.dealer ? "DEALER" : "CHALLENGER"} TAKES A SIP AND A ${game.previous ? "LIVE SHELL" : "BLANK"} CLATTERS ON THE TABLE`,
Cuff: (game) => `THE ${game.dealer ? "DEALER" : "CHALLENGER"} HANDS CUFFS ACROSS THE TABLE`,
Knife: (game) => `THE ${game.dealer ? "DEALER" : "CHALLENGER"} CUTS THE BARREL SHORT`,
DealerConcedes: () => `THE DEALER SUDDENLY TURNS TO DUST`,
ChallengerConcedes: () => `THE CHALLENGER SUDDENLY TURNS TO DUST`,
}
const msg = computed(() => {
const f = actionMessages[props.game.action];
if (f == null) {
return "THE SERVER MISBEHAVES... WHAT?";
}
return f(props.game);
});
const shellList = ref<string[]>([]);
watch(props.game, (game) => {
if (game.live == null || game.blank == null) {
shellList.value = [];
return;
}
const l = [...Array(game.live).fill('🟥'), ...Array(game.blank).fill('🟦')];
shuffle(l);
shellList.value = [...l, ...Array(8 - game.live - game.blank).fill('⬛')];
});
function shuffle<Elem>(l: Elem[]) {
for (let i = l.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * i);
[l[i], l[j]] = [l[j], l[i]];
}
}
}, { immediate: true })
</script>