Merge pull request #371 from govariantsteam/last_move_indicator_in_ui…

…_transform

Last move indicator in UI transform

packages/shared/src/variants/baduk.ts

@@ -14,6 +14,7 @@ import {
   LegacyBadukConfig,
   NewBadukConfig,
   NewGridBadukConfig,
+  equals_placement,
   isGridBadukConfig,
   isLegacyBadukConfig,
   mapBoard,
@@ -289,8 +290,14 @@ export class Baduk extends AbstractGame<NewBadukConfig, BadukState> {
           return [];
       }
     };
-    const stoneTransform = (color: Color): MulticolorStone => {
-      return { colors: colorTransform(color) };
+    const stoneTransform = (
+      color: Color,
+      idx: number | CoordinateLike,
+    ): MulticolorStone => {
+      return {
+        colors: colorTransform(color),
+        ...(equals_placement(gamestate.last_move, idx) && { annotation: "CR" }),
+      };
     };
 
     return {

packages/shared/src/variants/baduk_utils.ts

@@ -3,6 +3,7 @@ import {
   BoardPattern,
   GridBoardConfig,
 } from "../lib/abstractBoard/boardFactory";
+import { Coordinate, CoordinateLike } from "../lib/coordinate";
 import { Grid } from "../lib/grid";
 import { BadukConfig } from "./baduk";
 
@@ -64,25 +65,29 @@ export function mapToNewConfig<ConfigT extends LegacyBadukConfig>(
 }
 
 export type BoardShape = "1d" | "2d" | "flatten-2d-to-1d";
-export function mapBoard<T, S>(board: T[], f: (x: T) => S, shape: "1d"): S[];
+export function mapBoard<T, S>(
+  board: T[],
+  f: (x: T, idx: number | CoordinateLike) => S,
+  shape: "1d",
+): S[];
 export function mapBoard<T, S>(
   board: T[][],
-  f: (x: T) => S,
+  f: (x: T, idx: number | CoordinateLike) => S,
   shape: "2d",
 ): S[][];
 export function mapBoard<T, S>(
   board: T[][],
-  f: (x: T) => S,
+  f: (x: T, idx: number | CoordinateLike) => S,
   shape: "flatten-2d-to-1d",
 ): S[];
 export function mapBoard<T, S>(
   board: T[][],
-  f: (x: T) => S,
+  f: (x: T, idx: number | CoordinateLike) => S,
   shape: BoardShape,
 ): S[] | S[][];
 export function mapBoard<T, S>(
   board: T[] | T[][],
-  f: (x: T) => S,
+  f: (x: T, idx: number | CoordinateLike) => S,
   shape: BoardShape,
 ) {
   switch (shape) {
@@ -96,3 +101,23 @@ export function mapBoard<T, S>(
       return (board as T[][]).flat().map(f);
   }
 }
+
+/**
+ * Checks whether a string-encoded move is a stone placement at a certain place.
+ * @param move The string-encoded move to check
+ * @param idx An identifier for an intersection on the go board. If it is of type number,
+ * then we assume that we work with a graph board. In case of type CoordinateLike, we assume
+ * a rectangular board.
+ */
+export function equals_placement(
+  move: string,
+  idx: number | CoordinateLike,
+): boolean {
+  if (["", "pass", "resign", "timeout"].includes(move)) {
+    return false;
+  }
+  if (typeof idx === "number") {
+    return idx === Number(move);
+  }
+  return Coordinate.fromSgfRepr(move).equals(idx);
+}

packages/shared/src/variants/s_fractional.ts

@@ -4,7 +4,12 @@ import {
   createBoard,
   createGraph,
 } from "../lib/abstractBoard/boardFactory";
-import { isGridBadukConfig, mapBoard, NewBadukConfig } from "./baduk_utils";
+import {
+  equals_placement,
+  isGridBadukConfig,
+  mapBoard,
+  NewBadukConfig,
+} from "./baduk_utils";
 import { AbstractGame } from "../abstract_game";
 import { Baduk, BadukBoard } from "./baduk";
 import { Intersection } from "../lib/abstractBoard/intersection";
@@ -301,8 +306,14 @@ export class SFractional extends AbstractGame<
   } {
     const boardShape = isGridBadukConfig(config) ? "2d" : "flatten-2d-to-1d";
 
-    const stoneTransform = (colors: PlacementColors): MulticolorStone => {
-      return { colors: colors };
+    const stoneTransform = (
+      colors: PlacementColors,
+      idx: number | CoordinateLike,
+    ): MulticolorStone => {
+      return {
+        colors: colors,
+        ...(equals_placement(gamestate.lastMove, idx) && { annotation: "CR" }),
+      };
     };
     const scoreTransform = (color: string): string[] | null =>
       color === "" ? null : [color];

packages/vue-client/src/components/IntersectionAnnotation.vue

@@ -24,9 +24,10 @@ const r = computed(() => props.r * 0.6);
       :r="r"
       :cx="props.cx"
       :cy="props.cy"
-      stroke="black"
+      stroke="#dbdbdb"
       stroke-width="0.1"
       fill="none"
+      class="mix"
     />
   </g>
   <g v-if="props.annotation === 'MA'">
@@ -48,3 +49,8 @@ const r = computed(() => props.r * 0.6);
     />
   </g>
 </template>
+<style scoped>
+.mix {
+  mix-blend-mode: difference;
+}
+</style>

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

@@ -95,16 +95,16 @@ const viewBox = computed(() => {
       />
     </g>
     <g>
-      <IntersectionAnnotation
-        v-for="(intersection, index) in intersections.filter(
-          (_, idx) => props.board.at(idx)?.annotation,
-        )"
-        :key="index"
-        :cx="intersection.position.X"
-        :cy="intersection.position.Y"
-        :r="0.48"
-        :annotation="props.board.at(index)?.annotation!"
-      />
+      <template v-for="(intersection, index) in intersections">
+        <IntersectionAnnotation
+          v-if="props.board.at(index)?.annotation"
+          :key="index"
+          :cx="intersection.position.X"
+          :cy="intersection.position.Y"
+          :r="0.48"
+          :annotation="props.board.at(index)?.annotation!"
+        />
+      </template>
     </g>
     <g v-if="score_board">
       <template v-for="(intersection, index) in intersections" :key="index">