display end game territory dot

This commit is contained in:
sorrelbri 2020-06-16 22:29:52 -07:00
parent e40fa63274
commit b1d43b5b02
5 changed files with 59 additions and 16 deletions

View file

@ -40,12 +40,18 @@ const Board = (props) => {
while (i < boardSize * boardSize) {
const posX = Math.floor(i / boardSize) + 1;
const posY = (i % boardSize) + 1;
const pointData = board[`${posX}-${posY}`];
const dotData =
meta?.turn && pointData
? game.turn || meta.turn
: meta?.territory[`${posX}-${posY}`];
boardPoints.push(
<Point
key={`${posX}-${posY}`}
posX={posX}
posY={posY}
pointData={board[`${posX}-${posY}`]}
pointData={pointData}
dotData={dotData}
dispatch={dispatch}
user={user}
meta={meta}

View file

@ -2,7 +2,17 @@ import React from "react";
import "./Point.scss";
const Point = (props) => {
const { posX, posY, user, game, meta, dispatch, pointData, hoshi } = props;
const {
posX,
posY,
user,
game,
meta,
dispatch,
pointData,
dotData,
hoshi,
} = props;
const turn =
meta && meta.turn
? meta.turn > 0
@ -19,12 +29,6 @@ const Point = (props) => {
return "none";
};
const dot = () => {
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`;
@ -50,6 +54,22 @@ const Point = (props) => {
dispatch(action);
};
const getDot = () => {
if (meta?.turn === 0) {
switch (dotData) {
case -1:
return "white";
case 1:
return "black";
case "d":
return "dame";
default:
return 0;
}
}
return dotData;
};
return (
<div
className={`board__point ${xFlag()} ${yFlag()}`}
@ -59,7 +79,7 @@ const Point = (props) => {
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={getDot()}></div>
</div>
</div>
);

View file

@ -85,11 +85,23 @@ div.board__point__stone{
}
}
div.board__point:hover {
div.board__point__dot[data-dot="1"] {
div.board__point {
div.board__point__dot[data-dot="dame"] {
background: purple;
}
div.board__point__dot[data-dot="black"] {
background: black;
}
div.board__point__dot[data-dot="-1"] {
div.board__point__dot[data-dot="white"] {
background: white;
}
&:hover {
div.board__point__dot[data-dot="1"] {
background: black;
}
div.board__point__dot[data-dot="-1"] {
background: white;
}
}
}

View file

@ -117,7 +117,6 @@ const Game = (props) => {
dispatch={dispatch}
game={state.active.game}
meta={state.meta}
record={state.active.record}
user={state.user}
board={state.board}
/>

View file

@ -21,12 +21,18 @@ export const gamesReducer = (state, action) => {
}
case "UPDATE_BOARD": {
const { gameRecord, pass, turn, winner, playerState } = action.body.meta;
const {
gameRecord,
pass,
turn,
winner,
playerState,
territory,
} = action.body.meta;
return {
...state,
board: action.body.board,
territory: action.body.territory,
meta: { gameRecord, pass, turn, winner, playerState },
meta: { gameRecord, pass, turn, winner, playerState, territory },
};
}