display end game territory dot
This commit is contained in:
parent
e40fa63274
commit
b1d43b5b02
5 changed files with 59 additions and 16 deletions
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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 },
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue