Merge pull request #264 from govariantsteam/add_board_patterns_to_baduk

graph boards for quantum

packages/shared/src/variants/quantum.ts

@@ -5,6 +5,7 @@ import { Baduk, BadukBoard, BadukConfig, Color } from "./baduk";
 import {
   NewBadukConfig,
   NewGridBadukConfig,
+  isGridBadukConfig,
   isLegacyBadukConfig,
   mapToNewConfig,
 } from "./baduk_utils";
@@ -53,6 +54,21 @@ export class QuantumGo extends AbstractGame<NewBadukConfig, QuantumGoState> {
     super(isLegacyBadukConfig(config) ? mapToNewConfig(config) : config);
   }
 
+  private decodeMove(move: string): Coordinate {
+    if (isGridBadukConfig(this.config)) {
+      return Coordinate.fromSgfRepr(move);
+    }
+    // graph boards encode moves with the unique identifier number
+    return new Coordinate(Number(move), 0);
+  }
+
+  private encodeMove(pos: Coordinate): string {
+    if (isGridBadukConfig(this.config)) {
+      return pos.toSgfRepr();
+    }
+    return pos.x.toString();
+  }
+
   playMove(player: number, move: string): void {
     if (move === "resign") {
       this.phase = "gameover";
@@ -89,7 +105,7 @@ export class QuantumGo extends AbstractGame<NewBadukConfig, QuantumGoState> {
       return;
     }
 
-    const pos = Coordinate.fromSgfRepr(move);
+    const pos = this.decodeMove(move);
     // TODO: add a Dimensions class (#216) and look at that instead of
     // building a grid for no reason
     if (
@@ -120,7 +136,7 @@ export class QuantumGo extends AbstractGame<NewBadukConfig, QuantumGoState> {
           new BadukHelper({ ...this.config, komi: 0 }),
         ];
         // We can assume this exists because it is filled in the first round.
-        const first = this.quantum_stones[0].toSgfRepr();
+        const first = this.encodeMove(this.quantum_stones[0]);
         // move 0
         this.subgames[0].play(0, first);
         this.subgames[1].play(0, move);
@@ -145,7 +161,7 @@ export class QuantumGo extends AbstractGame<NewBadukConfig, QuantumGoState> {
         }
         const quantum_captures = this.subgames.map((game, idx) =>
           game
-            .play(player, moves[idx].toSgfRepr())
+            .play(player, this.encodeMove(moves[idx]))
             .map(this.mappedCapture.bind(this)),
         );
         this.subgames[0].clear(quantum_captures[1]);

packages/vue-client/src/components/boards/QuantumBoard.vue

@@ -4,28 +4,40 @@ import { Color, type CoordinateLike } from "@ogfcommunity/variants-shared";
 
 <script setup lang="ts">
 import MulticolorGridBoard from "./MulticolorGridBoard.vue";
+import MulticolorGraphBoard from "./MulticolorGraphBoard.vue";
 import {
   Coordinate,
   type QuantumGoState,
-  GridBadukConfig,
   getWidthAndHeight,
+  BadukConfig,
+  isGridBadukConfig,
 } from "@ogfcommunity/variants-shared";
 import { Grid } from "@ogfcommunity/variants-shared";
 import { computed } from "vue";
 
 const props = defineProps<{
-  config: GridBadukConfig;
+  config: BadukConfig;
   gamestate: QuantumGoState;
 }>();
 
-const board_dimensions = computed(() => getWidthAndHeight(props.config));
+const gridConfig = computed(() =>
+  isGridBadukConfig(props.config) ? props.config : undefined,
+);
+
+const graphConfig = computed(() =>
+  !isGridBadukConfig(props.config) ? props.config : undefined,
+);
+
+const board_dimensions = computed(() =>
+  gridConfig.value ? getWidthAndHeight(gridConfig.value) : undefined,
+);
 
 const emit = defineEmits<{
-  (e: "move", pos: string): void;
+  (e: "move", move: string): void;
 }>();
 
-function positionClicked(pos: Coordinate) {
-  emit("move", pos.toSgfRepr());
+function emitMove(move: string) {
+  emit("move", move);
 }
 
 function board_with_quantum_stones(
@@ -65,21 +77,78 @@ const board_1 = computed(() => {
     props.gamestate.quantum_stones.map((pos) => Coordinate.fromSgfRepr(pos)),
   );
 });
+
+function graph_board_with_quantum_stones(
+  board: Color[],
+  quantum_stones: Array<CoordinateLike>,
+) {
+  const ret_board = board.map((color) => {
+    switch (color) {
+      case Color.BLACK:
+        return { colors: ["black"], annotation: undefined };
+      case Color.WHITE:
+        return { colors: ["white"], annotation: undefined };
+      case Color.EMPTY:
+        return null;
+    }
+  });
+
+  quantum_stones.forEach((stone) => {
+    ret_board.at(stone.x)?.colors.push("green");
+  });
+
+  return ret_board;
+}
+
+const graph_boards = computed(() => {
+  const sequence_0 = props.gamestate.boards.at(0)?.at(0) ?? [];
+  const sequence_1 = props.gamestate.boards.at(1)?.at(0) ?? [];
+
+  return {
+    board_0: graph_board_with_quantum_stones(
+      sequence_0,
+      props.gamestate.quantum_stones.map((pos) => Coordinate.fromSgfRepr(pos)),
+    ),
+    board_1: graph_board_with_quantum_stones(
+      sequence_1,
+      props.gamestate.quantum_stones.map((pos) => Coordinate.fromSgfRepr(pos)),
+    ),
+  };
+});
 </script>
 
 <template>
-  <div style="width: 50%; height: 100%; display: inline-block">
-    <MulticolorGridBoard
-      :board="board_0"
-      :board_dimensions="board_dimensions"
-      @click="positionClicked"
-    />
-  </div>
-  <div style="width: 50%; height: 100%; display: inline-block">
-    <MulticolorGridBoard
-      :board="board_1"
-      :board_dimensions="board_dimensions"
-      @click="positionClicked"
-    />
-  </div>
+  <template v-if="gridConfig">
+    <div style="width: 50%; height: 100%; display: inline-block">
+      <MulticolorGridBoard
+        :board="board_0"
+        :board_dimensions="board_dimensions!"
+        @click="emitMove($event.toSgfRepr())"
+      />
+    </div>
+    <div style="width: 50%; height: 100%; display: inline-block">
+      <MulticolorGridBoard
+        :board="board_1"
+        :board_dimensions="board_dimensions!"
+        @click="emitMove($event.toSgfRepr())"
+      />
+    </div>
+  </template>
+
+  <template v-if="graphConfig">
+    <div style="width: 50%; height: 100%; display: inline-block">
+      <MulticolorGraphBoard
+        :board="graph_boards.board_0"
+        :board_config="graphConfig!.board"
+        @click="emitMove($event.toString())"
+      />
+    </div>
+    <div style="width: 50%; height: 100%; display: inline-block">
+      <MulticolorGraphBoard
+        :board="graph_boards.board_1"
+        :board_config="graphConfig!.board"
+        @click="emitMove($event.toString())"
+      />
+    </div>
+  </template>
 </template>

packages/vue-client/src/config_form_map.ts

@@ -20,5 +20,5 @@ export const config_form_map: {
   keima: GridBadukConfigForm,
   "one color": BadukConfigForm,
   drift: DriftGoConfigFormVue,
-  quantum: GridBadukConfigForm,
+  quantum: BadukConfigForm,
 };