default board is empty

webapp/src/components/Checkers.jsx

@@ -71,10 +71,12 @@ export function Player({ color, name }) {
 /*
  * Board
  */
-export function Board({ game, onStoneClick, onStoneMove }) {
+export function Board({ board, flip, onStoneClick, onStoneMove }) {
     const [[moveId, moveX, moveY], setMove] = useState([0, 0, 0]);
 
-    const board = (game && game.board && typeof game.board === 'object') ? game.board : defaultBoard;
+    if (!board)
+        board = [];
+
     const isInteractive = (typeof onStoneClick === 'function' || typeof onStoneMove === 'function') ? ' interactive' : '';
 
     const WhiteTile = ({ id }) => {
@@ -83,7 +85,7 @@ export function Board({ game, onStoneClick, onStoneMove }) {
         return (
             <div className={'Tile white' + isInteractive + (id === moveId ? ' selected' : '')}
                 onClick={!onStoneClick ? null :
-                    () => onStoneClick(game.uuid, id)
+                    () => onStoneClick(id)
                 }
 
                 onMouseDown={!onStoneMove || !stone ? null :
@@ -91,7 +93,7 @@ export function Board({ game, onStoneClick, onStoneMove }) {
                 }
 
                 onMouseUp={!onStoneMove || !moveId ? null :
-                    () => { onStoneMove(game.uuid, [moveId, id]); setMove([0, 0, 0]) }
+                    () => { onStoneMove([moveId, id]); setMove([0, 0, 0]) }
                 }
             >
                 <Stone color={stone?.color} type={stone?.type} />
@@ -106,7 +108,7 @@ export function Board({ game, onStoneClick, onStoneMove }) {
     const movingStone = board[moveId];
 
     return (
-        <div className={'Board' + (game?.myColor === Color.black ? ' flip' : '')}
+        <div className={'Board' + (flip ? ' flip' : '')}
             onMouseMove={!moveId ? null :
                 (e) => e.buttons ? setMove([moveId, e.clientX, e.clientY]) : setMove([0, 0, 0])
             }

webapp/src/container/games/GameBoard.jsx

@@ -6,10 +6,35 @@ import { Color, Player, Board } from '../../components/Checkers';
 import './GameBoard.css';
 
 export default function GameBoard({ username, onStoneClick, onStoneMove }) {
+  const game = useSelectedGame();
+
+  const opponentColor = Color.opposite(game?.myColor);
+  const [opponentName, myName] = (game?.opponentName) ? [game.opponentName, username] : ['', ''];
+  const flipBoard = (game?.myColor === Color.black) ? true : null;
+
+  const optionalOnStoneClick = (typeof onStoneClick !== 'function') ? null :
+    (cellId) => onStoneClick(game?.uuid, cellId);
+
+  const optionalOnStoneMove = (typeof onStoneMove !== 'function') ? null :
+    (move) => onStoneMove(game?.uuid, move);
+
+  return (
+    <div className='GameBoard'>
+      <Player color={opponentColor || Color.black} name={opponentName} />
+      <Board board={game?.board} flip={flipBoard}
+        onStoneClick={optionalOnStoneClick}
+        onStoneMove={optionalOnStoneMove}
+      />
+      <Player color={game?.myColor || Color.white} name={myName} />
+      {game?.isPushingGameMove ? <span>Moving...</span> : null /* TODO: isPushing shall be stored per game. curernty it is global indicator */} 
+    </div>
+  )
+}
+
+export function useSelectedGame() {
   const games = useContext(GamesContext);
   const { pathname } = useLocation();
 
-  const game = (() => {
   if (matchPath('/games/new', pathname))
     return games.newGame;
 
@@ -22,18 +47,5 @@ export default function GameBoard({ username, onStoneClick, onStoneMove }) {
   if (matchPath('/games/archive', pathname))
     return games.findGame({ uuid: games.archive.selectedUUID });
 
-    return {};
+  return undefined;
-  })(); // <<-- Execute
-
-  const opponentColor = Color.opposite(game?.myColor);
-  const [opponentName, myName] = game?.opponentName ? [game.opponentName, username] : ['', ''];
-
-  return (
-    <div className='GameBoard'>
-      <Player color={opponentColor || Color.black} name={opponentName} />
-      <Board game={game} onStoneClick={onStoneClick} onStoneMove={onStoneMove} />
-      <Player color={game?.myColor || Color.white} name={myName} />
-      { games.isPushingGameMove ? <span>Moving...</span> : null}
-    </div>
-  )
 }

webapp/src/container/games/view/GameSelector.jsx

@@ -113,12 +113,13 @@ function Selectable({ game, selected, onClick }) {
     const myColor = game.myColor;
     const opponentColor = Color.opposite(myColor);
     const opponentName = game.opponentName;
+    const flipBoard = (game?.myColor === Color.black) ? true : null;
 
     return (
         <div className={'Selectable' + (selected ? ' selected' : '')}
             onClick={() => onClick(game.uuid)}
         >
-            <Board game={game} />
+            <Board board={game.board} flip={flipBoard} />
             <div className='Message'>
                 <Player color={opponentColor} name={opponentName} />
                 <q>{game.message}</q>