display end game territory dot

packages/play-node-go/src/components/GameUI/Board/Board.js

@@ -40,12 +40,18 @@ const Board = (props) => {
     while (i < boardSize * boardSize) {
       const posX = Math.floor(i / boardSize) + 1;
       const posY = (i % boardSize) + 1;
+      const pointData = board[`${posX}-${posY}`];
+      const dotData =
+        meta?.turn && pointData
+          ? game.turn || meta.turn
+          : meta?.territory[`${posX}-${posY}`];
       boardPoints.push(
         <Point
           key={`${posX}-${posY}`}
           posX={posX}
           posY={posY}
-          pointData={board[`${posX}-${posY}`]}
+          pointData={pointData}
+          dotData={dotData}
           dispatch={dispatch}
           user={user}
           meta={meta}

packages/play-node-go/src/components/GameUI/Point/Point.js

@@ -2,7 +2,17 @@ import React from "react";
 import "./Point.scss";
 
 const Point = (props) => {
-  const { posX, posY, user, game, meta, dispatch, pointData, hoshi } = props;
+  const {
+    posX,
+    posY,
+    user,
+    game,
+    meta,
+    dispatch,
+    pointData,
+    dotData,
+    hoshi,
+  } = props;
   const turn =
     meta && meta.turn
       ? meta.turn > 0
@@ -19,12 +29,6 @@ const Point = (props) => {
     return "none";
   };
 
-  const dot = () => {
-    if (pointData === "l") {
-      return game.turn || meta.turn;
-    }
-  };
-
   const xFlag = () => {
     if (posX === 1) return `board__point--top`;
     if (posX === game.boardSize) return `board__point--bottom`;
@@ -50,6 +54,22 @@ const Point = (props) => {
     dispatch(action);
   };
 
+  const getDot = () => {
+    if (meta?.turn === 0) {
+      switch (dotData) {
+        case -1:
+          return "white";
+        case 1:
+          return "black";
+        case "d":
+          return "dame";
+        default:
+          return 0;
+      }
+    }
+    return dotData;
+  };
+
   return (
     <div
       className={`board__point ${xFlag()} ${yFlag()}`}
@@ -59,7 +79,7 @@ const Point = (props) => {
         className={`board__point__stone ${hoshi ? "hoshi" : ""}`}
         data-stone={stone()}
       >
-        <div className="board__point__dot" data-dot={dot()}></div>
+        <div className="board__point__dot" data-dot={getDot()}></div>
       </div>
     </div>
   );

packages/play-node-go/src/components/GameUI/Point/Point.scss

@@ -85,11 +85,23 @@ div.board__point__stone{
   }
 }
 
-div.board__point:hover {
-  div.board__point__dot[data-dot="1"] {
+div.board__point {
+  div.board__point__dot[data-dot="dame"] {
+    background: purple;
+  }
+  div.board__point__dot[data-dot="black"] {
     background: black;
   }
-  div.board__point__dot[data-dot="-1"] {
+  div.board__point__dot[data-dot="white"] {
     background: white;
   }
+
+  &:hover {
+    div.board__point__dot[data-dot="1"] {
+      background: black;
+    }
+    div.board__point__dot[data-dot="-1"] {
+      background: white;
+    }
+  }
 }

packages/play-node-go/src/pages/Game/Game.js

@@ -117,7 +117,6 @@ const Game = (props) => {
           dispatch={dispatch}
           game={state.active.game}
           meta={state.meta}
-          record={state.active.record}
           user={state.user}
           board={state.board}
         />

packages/play-node-go/src/reducers/games/reducer.games.js

@@ -21,12 +21,18 @@ export const gamesReducer = (state, action) => {
     }
 
     case "UPDATE_BOARD": {
-      const { gameRecord, pass, turn, winner, playerState } = action.body.meta;
+      const {
+        gameRecord,
+        pass,
+        turn,
+        winner,
+        playerState,
+        territory,
+      } = action.body.meta;
       return {
         ...state,
         board: action.body.board,
-        territory: action.body.territory,
-        meta: { gameRecord, pass, turn, winner, playerState },
+        meta: { gameRecord, pass, turn, winner, playerState, territory },
       };
     }