Merge pull request #159 from govariantsteam/variant_descriptions

Add short Variant description in game view

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,
+};

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 = (
       />
     </div>
   </div>
+
+  <div id="variant-info">
+    <div>
+      <span class="info-label">Variant:</span>
+      <span class="info-attribute">
+        {{ gameResponse.variant ?? "unknown" }}
+      </span>
+    </div>
+
+    <div>
+      <span class="info-label">Description:</span>
+      <span class="info-attribute">{{ variantDescriptionShort }}</span>
+    </div>
+  </div>
+
   <div>
     <button
       v-for="(value, key) in specialMoves"
@@ -189,6 +208,11 @@ const createTimeControlPreview = (
 </template>
 
 <style scoped>
+.info-label {
+  font-weight: bold;
+  margin-right: 0.5em;
+}
+
 pre {
   text-align: left;
 }