From 97242a22354f5fd3b9d3f042bc0d489cb12d8623 Mon Sep 17 00:00:00 2001
From: sorrelbri <sorrel.bri.june@gmail.com>
Date: Sat, 6 Jun 2020 16:54:48 -0700
Subject: [PATCH] add render for hoshi points

---
 .../src/components/GameUI/Board/Board.js      | 30 ++++++++++++++++++-
 .../src/components/GameUI/Point/Point.js      |  7 +++--
 .../src/components/GameUI/Point/Point.scss    |  8 ++++-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/packages/play-node-go/src/components/GameUI/Board/Board.js b/packages/play-node-go/src/components/GameUI/Board/Board.js
index c32c68d..0d5ce97 100644
--- a/packages/play-node-go/src/components/GameUI/Board/Board.js
+++ b/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}
         />
       );
diff --git a/packages/play-node-go/src/components/GameUI/Point/Point.js b/packages/play-node-go/src/components/GameUI/Point/Point.js
index bb51f8a..85d82a8 100644
--- a/packages/play-node-go/src/components/GameUI/Point/Point.js
+++ b/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>
diff --git a/packages/play-node-go/src/components/GameUI/Point/Point.scss b/packages/play-node-go/src/components/GameUI/Point/Point.scss
index 410b12d..0a4b38e 100644
--- a/packages/play-node-go/src/components/GameUI/Point/Point.scss
+++ b/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 {