onStoneClick(game.uuid, id)
+ }
+
+ onMouseDown={!onStoneMove || !stone ? null :
+ (e) => setMove([id, e.clientX, e.clientY])
+ }
+
+ onMouseUp={!onStoneMove || !moveId ? null :
+ () => { onStoneMove(game.uuid, [moveId, id]); setMove([0, 0, 0]) }
+ }
+ >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ const BlackTile = () => {
+ return
+ }
-
-
-
-
-
+ const movingStone = board[moveId];
+
+ return (
+
e.buttons ? setMove([moveId, e.clientX, e.clientY]) : setMove([0, 0, 0])
+ }
+ >
+
+ {!movingStone ? null :
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ )
}
const blackMan = { color: Color.black, type: 'MAN' };
diff --git a/webapp/src/container/Games.jsx b/webapp/src/container/Games.jsx
index 5ec55f0..472e172 100644
--- a/webapp/src/container/Games.jsx
+++ b/webapp/src/container/Games.jsx
@@ -6,6 +6,7 @@ import NewGame from './games/view/NewGame';
import { GameProposalSelector, ActiveGameSelector, GameArchiveSelector } from './games/view/GameSelector';
import { Create, Accept, Reject, Cancel, DrawRequest, DrawAccept, DrawReject, Surrender, Backward, Forward } from './games/ActionPanel';
import GameBoard from './games/GameBoard';
+import { nextStone } from '../components/Checkers';
import Message2Opponent from './games/Message2Opponent';
import Counter from '../components/Counter';
@@ -26,11 +27,7 @@ export default function Games({ context: { gamesReducer, gamesApi }, players })
{/*
*/}
-
dispatchGames({ type: 'nextNewGame', board })}
- onActiveGameMove={(uuid, from, to) => console.log(uuid, 'move', from, '->', to)}
- />
+
@@ -113,6 +110,27 @@ function ActionPanel({ gamesApi }) {
)
}
+function GameBoardRoutes({ gamesReducer, gamesApi, username }) {
+ const [games, dispatchGames] = gamesReducer;
+
+ const onStoneClick = (uuid, cellId) => {
+ let board = { ...games.newGame.board };
+ board[cellId] = nextStone(board[cellId]);
+ dispatchGames({ type: 'nextNewGame', board });
+ }
+
+ const onStoneMove = (uuid, move) => console.log(uuid, 'move', move);
+
+ return (
+
+ } />
+ } />
+ } />
+ } />
+
+ )
+}
+
function countGames(gamesList) {
var awaiting = {
diff --git a/webapp/src/container/games/GameBoard.css b/webapp/src/container/games/GameBoard.css
index 2c90743..85bd13c 100644
--- a/webapp/src/container/games/GameBoard.css
+++ b/webapp/src/container/games/GameBoard.css
@@ -6,7 +6,6 @@
}
.GameBoard .Tile {
- font-size: 200%;
line-height: 34px;
height: 34px;
width: 34px;
@@ -14,6 +13,10 @@
margin-top: -1px;
}
+.GameBoard .Board .Stone {
+ font-size: 200%;
+}
+
.GameBoard .Tile.white.interactive:hover {
background-color:azure;
}
diff --git a/webapp/src/container/games/GameBoard.jsx b/webapp/src/container/games/GameBoard.jsx
index bd3ecb7..e1e1ffd 100644
--- a/webapp/src/container/games/GameBoard.jsx
+++ b/webapp/src/container/games/GameBoard.jsx
@@ -1,58 +1,37 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
import { useLocation, matchPath } from 'react-router-dom';
import { GamesContext } from '../../context/games';
-import { Color, Player, Board, nextStone } from '../../components/Checkers';
+import { Color, Player, Board } from '../../components/Checkers';
import './GameBoard.css';
-export default function GameBoard({ username, onNewGameBoardStone, onActiveGameMove }) {
+export default function GameBoard({ username, onStoneClick, onStoneMove }) {
const games = useContext(GamesContext);
const { pathname } = useLocation();
- const [startId, setStartId] = useState(null);
- const onClick_NewGame = (cellId) => {
- let nextBoard = { ...games.newGame.board };
- nextBoard[cellId] = nextStone(nextBoard[cellId]);
-
- onNewGameBoardStone(nextBoard);
- }
-
- const onClick_ActiveGame = (cellId) => {
- if (startId === cellId)
- return setStartId(null);
-
- if (startId === null)
- return setStartId(cellId);
-
- if (game?.uuid)
- onActiveGameMove(game.uuid, startId, cellId);
-
- setStartId(null);
- };
-
- const [game, onClick] = (() => {
+ const game = (() => {
if (matchPath('/games/new', pathname))
- return [games.newGame, onClick_NewGame];
+ return games.newGame;
if (matchPath('/games/proposal', pathname))
- return [games.findGame({ uuid: games.proposal.selectedUUID }), null];
- else if (matchPath('/games/active', pathname))
- return [games.findGame({ uuid: games.active.selectedUUID }), onClick_ActiveGame];
- else if (matchPath('/games/archive', pathname))
- return [games.findGame({ uuid: games.archive.selectedUUID }), null];
+ return games.findGame({ uuid: games.proposal.selectedUUID });
- return [{}, null];
+ if (matchPath('/games/active', pathname))
+ return games.findGame({ uuid: games.active.selectedUUID });
+
+ if (matchPath('/games/archive', pathname))
+ return games.findGame({ uuid: games.archive.selectedUUID });
+
+ return {};
})(); // <<-- Execute
const opponentColor = Color.opposite(game?.myColor);
const [opponentName, myName] = game?.opponentName ? [game.opponentName, username] : ['', ''];
- const optionalOnClick = (onClick && game?.board) ? (id) => onClick(id) : null;
-
return (
)
diff --git a/webapp/src/reducer/games.js b/webapp/src/reducer/games.js
index 4fb7eca..6d79c0a 100644
--- a/webapp/src/reducer/games.js
+++ b/webapp/src/reducer/games.js
@@ -38,9 +38,10 @@ export const gamesInitialState = {
isPushingGameDrawRequest: false,
isPushingGameDrawAccept: false,
isPushingGameDrawReject: false,
+ isPushingGameMove: false,
findGame,
- nextGameList,
+ nextGame,
};
function reducer(state, action) {
@@ -86,8 +87,6 @@ function findGame({ uuid }) {
return this.gamesList?.find((game) => game.uuid === uuid);
}
-function nextGameList(nextGame) {
- return this.gamesList?.map(
- (game) => (nextGame?.uuid === game.uuid) ? nextGame : game
- );
+function nextGame(nextGame) {
+ return this.gamesList?.map((game) => (game.uuid === nextGame?.uuid) ? nextGame : game);
}
\ No newline at end of file
diff --git a/webapp/src/util/StateHelper.js b/webapp/src/util/StateHelper.js
index 1cda2df..4262349 100644
--- a/webapp/src/util/StateHelper.js
+++ b/webapp/src/util/StateHelper.js
@@ -1,14 +1,14 @@
-export function nextState(state, action) {
+export function nextState(state, delta) {
const nextState = { ...state };
- Object.keys(action)
+ Object.keys(delta)
.slice(1) // skip first property i.e. 'next'
.forEach(key => {
if (Object.hasOwn(nextState, key)) {
- console.log("next [", key, "] = ", action[key]);
- nextState[key] = action[key];
+ console.log("next [", key, "] = ", delta[key]);
+ nextState[key] = delta[key];
} else {
- console.warn("nextState: bad action property\n", key + ":", action[key]);
+ console.warn("nextState: bad action property\n", key + ":", delta[key]);
}
})