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) { while (i < boardSize * boardSize) {
const posX = Math.floor(i / boardSize) + 1; const posX = Math.floor(i / boardSize) + 1;
const posY = (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( boardPoints.push(
<Point <Point
key={`${posX}-${posY}`} key={`${posX}-${posY}`}
posX={posX} posX={posX}
posY={posY} posY={posY}
pointData={board[`${posX}-${posY}`]} pointData={pointData}
dotData={dotData}
dispatch={dispatch} dispatch={dispatch}
user={user} user={user}
meta={meta} meta={meta}

View file

@ -2,7 +2,17 @@ import React from "react";
import "./Point.scss"; import "./Point.scss";
const Point = (props) => { 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 = const turn =
meta && meta.turn meta && meta.turn
? meta.turn > 0 ? meta.turn > 0
@ -19,12 +29,6 @@ const Point = (props) => {
return "none"; return "none";
}; };
const dot = () => {
if (pointData === "l") {
return game.turn || meta.turn;
}
};
const xFlag = () => { const xFlag = () => {
if (posX === 1) return `board__point--top`; if (posX === 1) return `board__point--top`;
if (posX === game.boardSize) return `board__point--bottom`; if (posX === game.boardSize) return `board__point--bottom`;
@ -50,6 +54,22 @@ const Point = (props) => {
dispatch(action); 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 ( return (
<div <div
className={`board__point ${xFlag()} ${yFlag()}`} className={`board__point ${xFlag()} ${yFlag()}`}
@ -59,7 +79,7 @@ const Point = (props) => {
className={`board__point__stone ${hoshi ? "hoshi" : ""}`} className={`board__point__stone ${hoshi ? "hoshi" : ""}`}
data-stone={stone()} data-stone={stone()}
> >
<div className="board__point__dot" data-dot={dot()}></div> <div className="board__point__dot" data-dot={getDot()}></div>
</div> </div>
</div> </div>
); );

View file

@ -85,11 +85,23 @@ div.board__point__stone{
} }
} }
div.board__point:hover { div.board__point {
div.board__point__dot[data-dot="1"] { div.board__point__dot[data-dot="dame"] {
background: purple;
}
div.board__point__dot[data-dot="black"] {
background: black; background: black;
} }
div.board__point__dot[data-dot="-1"] { div.board__point__dot[data-dot="white"] {
background: 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} dispatch={dispatch}
game={state.active.game} game={state.active.game}
meta={state.meta} meta={state.meta}
record={state.active.record}
user={state.user} user={state.user}
board={state.board} board={state.board}
/> />

View file

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