add render for hoshi points
This commit is contained in:
parent
f010d5d9ee
commit
97242a2235
3 changed files with 41 additions and 4 deletions
|
@ -5,6 +5,34 @@ import Point from "../Point/Point";
|
||||||
const Board = (props) => {
|
const Board = (props) => {
|
||||||
const { game, user, dispatch, board, meta } = props;
|
const { game, user, dispatch, board, meta } = props;
|
||||||
const sizeFlag = `Game__board--size-${game.boardSize}`;
|
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) => {
|
const renderPoints = (boardSize) => {
|
||||||
let i = 0,
|
let i = 0,
|
||||||
|
@ -18,10 +46,10 @@ const Board = (props) => {
|
||||||
posX={posX}
|
posX={posX}
|
||||||
posY={posY}
|
posY={posY}
|
||||||
pointData={board[`${posX}-${posY}`]}
|
pointData={board[`${posX}-${posY}`]}
|
||||||
// point={board[posX][posY]}
|
|
||||||
dispatch={dispatch}
|
dispatch={dispatch}
|
||||||
user={user}
|
user={user}
|
||||||
meta={meta}
|
meta={meta}
|
||||||
|
hoshi={isHoshi(posX, posY)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React from "react";
|
||||||
import "./Point.scss";
|
import "./Point.scss";
|
||||||
|
|
||||||
const Point = (props) => {
|
const Point = (props) => {
|
||||||
const { posX, posY, user, game, meta, dispatch, pointData } = props;
|
const { posX, posY, user, game, meta, dispatch, pointData, hoshi } = props;
|
||||||
const turn =
|
const turn =
|
||||||
meta && meta.turn
|
meta && meta.turn
|
||||||
? meta.turn > 0
|
? meta.turn > 0
|
||||||
|
@ -55,7 +55,10 @@ const Point = (props) => {
|
||||||
className={`board__point ${xFlag()} ${yFlag()}`}
|
className={`board__point ${xFlag()} ${yFlag()}`}
|
||||||
onClick={(e) => clickHandle(e)}
|
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 className="board__point__dot" data-dot={dot()}></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,6 +5,9 @@ div.board__point {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.board__point--top {
|
div.board__point--top {
|
||||||
|
@ -43,11 +46,14 @@ div.board__point__stone {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
height: 85%;
|
height: 85%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: auto;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
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 {
|
div.board__point div.board__point__stone div.board__point__dot {
|
||||||
|
|
Loading…
Reference in a new issue