add styling for ko and legal move on hover

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

@@ -1,17 +1,17 @@
-import React from 'react';
-import './Board.scss';
-import Point from '../Point/Point';
+import React from "react";
+import "./Board.scss";
+import Point from "../Point/Point";
 
 const Board = (props) => {
   const { game, user, dispatch, board, meta } = props;
-  const sizeFlag = `Game__board--size-${ game.boardSize }`
+  const sizeFlag = `Game__board--size-${game.boardSize}`;
 
-  const renderPoints = boardSize => {
-    let i = 0, boardPoints = [];
+  const renderPoints = (boardSize) => {
+    let i = 0,
+      boardPoints = [];
     while (i < boardSize * boardSize) {
-      const posX = Math.floor(i/boardSize) + 1;
-      const posY = i % boardSize + 1;
-      console.log(board[`${posX}-${posY}`])
+      const posX = Math.floor(i / boardSize) + 1;
+      const posY = (i % boardSize) + 1;
       boardPoints.push(
         <Point
           key={`${posX}-${posY}`}
@@ -24,16 +24,17 @@ const Board = (props) => {
           meta={meta}
           {...props}
         />
-      ); i++;
+      );
+      i++;
     }
     return boardPoints;
-  }
+  };
 
   return (
     <div className={`Game__board ${sizeFlag}`}>
-      { game.id ? renderPoints(game.boardSize) : <></> }
+      {game.id ? renderPoints(game.boardSize) : <></>}
     </div>
   );
-}
+};
 
 export default Board;

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

@@ -1,58 +1,65 @@
-import React from 'react';
-import './Point.scss';
+import React from "react";
+import "./Point.scss";
 
 const Point = (props) => {
   const { posX, posY, user, game, meta, dispatch, pointData } = props;
-  const turn = meta && meta.turn ? meta.turn > 0 ? 'black' : 'white' : game.turn > 0 ? 'black' : 'white';
+  const turn =
+    meta && meta.turn
+      ? meta.turn > 0
+        ? "black"
+        : "white"
+      : game.turn > 0
+      ? "black"
+      : "white";
 
   const stone = () => {
-    if (pointData === 1) return 'black'
-    if (pointData === -1) return 'white'
-    return 'none'
-  }
+    if (pointData === 1) return "black";
+    if (pointData === -1) return "white";
+    if (pointData === "k") return "ko";
+    return "none";
+  };
 
   const dot = () => {
-    if (pointData === 'l') return game.turn;
+    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`
-    return '';
-  }
+    if (posX === 1) return `board__point--top`;
+    if (posX === game.boardSize) return `board__point--bottom`;
+    return "";
+  };
   const yFlag = () => {
-    if ( posY === 1 ) return `board__point--left`
-    if ( posY === game.boardSize ) return `board__point--right`
-    return '';
-  }
+    if (posY === 1) return `board__point--left`;
+    if (posY === game.boardSize) return `board__point--right`;
+    return "";
+  };
   const clickHandle = (e) => {
     const action = {
-      type: 'SOCKET',
-      message: 'MAKE_MOVE',
+      type: "SOCKET",
+      message: "MAKE_MOVE",
       body: {
         user,
         game,
         room: game.room,
         board: {},
-        move: { player: turn, pos: { x: posX, y: posY } }
-      }
-    }
+        move: { player: turn, pos: { x: posX, y: posY } },
+      },
+    };
     dispatch(action);
-  }
+  };
 
   return (
     <div
       className={`board__point ${xFlag()} ${yFlag()}`}
-      onClick={e => clickHandle(e)}
-    >
-      <div className="board__point__stone" 
-        data-stone={stone()}
+      onClick={(e) => clickHandle(e)}
     >
+      <div className="board__point__stone" data-stone={stone()}>
         <div className="board__point__dot" data-dot={dot()}></div>
       </div>
-
     </div>
   );
-}
+};
 
 export default Point;

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

@@ -58,13 +58,32 @@ div.board__point div.board__point__stone div.board__point__dot {
   vertical-align: middle;
 }
 
-div.board__point__stone[data-stone="white"] {
+div.board__point__stone{
+  &[data-stone="white"] {
     background: radial-gradient(farthest-side at 55% 40%, white 0%, rgb(200,200,200) 65%, rgb(100,100,100) 90%, rgb(68, 50, 0) 100%);
     box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.5);
-}
+  }
 
-div.board__point__stone[data-stone="black"] {
+  &[data-stone="black"] {
     background-color: black;
     background: radial-gradient(farthest-side at 55% 40%, rgb(220,220,220) 0%, rgb(60,60,60) 45%, rgb(15,15,15) 90%, rgb(5, 5, 0) 100%);
     box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.75);
+  }
+
+  &[data-stone="ko"] {
+    background-color: transparent;
+    border: .5vmin solid rgba(200,20,50,0.8);
+    border-radius: 0%;
+    height: 60%;
+    width: 60%;
+  }
+}
+
+div.board__point:hover {
+  div.board__point__dot[data-dot="1"] {
+    background: black;
+  }
+  div.board__point__dot[data-dot="-1"] {
+    background: white;
+  }
 }