diff --git a/packages/vue-client/src/components/variant_descriptions/variant_description.consts.ts b/packages/vue-client/src/components/variant_descriptions/variant_description.consts.ts new file mode 100644 index 00000000..8ae53107 --- /dev/null +++ b/packages/vue-client/src/components/variant_descriptions/variant_description.consts.ts @@ -0,0 +1,40 @@ +export const badukDescriptionShort = + "Traditional game of Baduk a.k.a. Go, Weiqi\n Surround stones to capture them\n Secure more territory + captures to win"; +export const badukWithAbstractBoardDescriptionShort = + "Baduk with varying board patterns"; +export const phantomDescriptionShort = + "Baduk but other players stones are invisible"; +export const parallelDescriptionShort = "Multiplayer Baduk with parallel moves"; +export const captureDescriptionShort = + "Baduk but the first player who captures a stone wins"; +export const chessDescriptionShort = + "Baduk with different types of stones\n the goal is to capture a specific stone"; +export const tetrisDescriptionShort = + "Baduk but players can't play Tetris shapes"; +export const pyramidDescriptionShort = + "Baduk with pyramid scoring\n Center is worth most points, edge the least"; +export const thueMorseDescriptionShort = + "Baduk with move order according to Thue-Morse sequence"; +export const freezeDescriptionShort = + "Baduk but after an Atari, stones can't be captured"; +export const fractionalDescriptionShort = + "Multiplayer Baduk with multicolored stones and parallel moves"; +export const keimaDescriptionShort = + "Baduk but players play two moves that must form a Keima (Knight's move) shape"; +export const oneColorDescriptionShort = "Baduk with obfuscated stone colors"; + +export const variant_short_description_map: { [variant: string]: string } = { + baduk: badukDescriptionShort, + badukWithAbstractBoard: badukWithAbstractBoardDescriptionShort, + phantom: phantomDescriptionShort, + parallel: parallelDescriptionShort, + capture: captureDescriptionShort, + chess: chessDescriptionShort, + tetris: tetrisDescriptionShort, + pyramid: pyramidDescriptionShort, + "thue-morse": thueMorseDescriptionShort, + freeze: freezeDescriptionShort, + fractional: fractionalDescriptionShort, + keima: keimaDescriptionShort, + "one color": oneColorDescriptionShort, +}; diff --git a/packages/vue-client/src/views/GameView.vue b/packages/vue-client/src/views/GameView.vue index 17cb84b1..4086c51c 100644 --- a/packages/vue-client/src/views/GameView.vue +++ b/packages/vue-client/src/views/GameView.vue @@ -15,6 +15,7 @@ import type { import { computed, reactive, ref, watchEffect } from "vue"; import { board_map } from "@/board_map"; import { socket } from "../requests"; +import { variant_short_description_map } from "../components/variant_descriptions/variant_description.consts"; const props = defineProps<{ gameId: string }>(); @@ -48,6 +49,9 @@ const specialMoves = computed(() => : makeGameObject(gameResponse.variant, gameResponse.config).specialMoves() ); const variantGameView = computed(() => board_map[gameResponse.variant]); +const variantDescriptionShort = computed( + () => variant_short_description_map[gameResponse.variant] ?? "" +); watchEffect(async () => { // TODO: provide a cleanup function to cancel the request. Object.assign(gameResponse, await requests.get(`/games/${props.gameId}`)); @@ -174,6 +178,21 @@ const createTimeControlPreview = ( /> + +