add render for hoshi points

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

@@ -5,6 +5,34 @@ import Point from "../Point/Point";
 const Board = (props) => {
   const { game, user, dispatch, board, meta } = props;
   const sizeFlag = `Game__board--size-${game.boardSize}`;
+  const hoshiPoints = {
+    9: { "3-3": true, "7-7": true, "3-7": true, "7-3": true },
+    13: {
+      "7-7": true,
+      "10-7": true,
+      "7-4": true,
+      "7-10": true,
+      "4-7": true,
+      "4-4": true,
+      "10-10": true,
+      "4-10": true,
+      "10-4": true,
+    },
+    19: {
+      "10-10": true,
+      "16-10": true,
+      "10-4": true,
+      "10-16": true,
+      "4-10": true,
+      "4-4": true,
+      "16-16": true,
+      "4-16": true,
+      "16-4": true,
+    },
+  };
+
+  const isHoshi = (posX, posY) =>
+    hoshiPoints[game.boardSize][`${posX}-${posY}`];
 
   const renderPoints = (boardSize) => {
     let i = 0,
@@ -18,10 +46,10 @@ const Board = (props) => {
           posX={posX}
           posY={posY}
           pointData={board[`${posX}-${posY}`]}
-          // point={board[posX][posY]}
           dispatch={dispatch}
           user={user}
           meta={meta}
+          hoshi={isHoshi(posX, posY)}
           {...props}
         />
       );

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

@@ -2,7 +2,7 @@ import React from "react";
 import "./Point.scss";
 
 const Point = (props) => {
-  const { posX, posY, user, game, meta, dispatch, pointData } = props;
+  const { posX, posY, user, game, meta, dispatch, pointData, hoshi } = props;
   const turn =
     meta && meta.turn
       ? meta.turn > 0
@@ -55,7 +55,10 @@ const Point = (props) => {
       className={`board__point ${xFlag()} ${yFlag()}`}
       onClick={(e) => clickHandle(e)}
     >
-      <div className="board__point__stone" data-stone={stone()}>
+      <div
+        className={`board__point__stone ${hoshi ? "hoshi" : ""}`}
+        data-stone={stone()}
+      >
         <div className="board__point__dot" data-dot={dot()}></div>
       </div>
     </div>

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

@@ -5,6 +5,9 @@ div.board__point {
   margin: auto;
   padding: 0;
   vertical-align: middle;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 div.board__point--top {
@@ -43,11 +46,14 @@ div.board__point__stone {
   width: 85%;
   height: 85%;
   border-radius: 50%;
-  margin: auto;
   vertical-align: middle;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  &.hoshi {
+    background: radial-gradient(circle farthest-corner at center, #000 0%, #000 14%, rgba(0,0,0,0) 15%);
+    z-index: 3;
+  }
 }
 
 div.board__point div.board__point__stone div.board__point__dot {