oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add render for hoshi points

Browse source
This commit is contained in:
sorrelbri 2020-06-06 16:54:48 -07:00
parent f010d5d9ee
commit 97242a2235
3 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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}
/>
);

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

@ -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>

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

@ -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 {