GameBoard: show slected board stones

webapp/src/components/Checkers.jsx

@@ -18,30 +18,36 @@ export const Color = {
 /*
  * Stone
  */
-export function Stone({ color }) {
+export function Stone({ color, type }) {
     switch (color) {
         case Color.white:
-            return WhiteStone();
+            return <WhiteStone type={type} />;
 
         case Color.black:
-            return BlackStone();
+            return <BlackStone type={type} />;
 
         case '':
         case undefined:
         case null:
-            return; // no color :)
+            return; // no stone :)
 
         default:
             console.warn("Unknown color: ", color)
     }
 }
 
-export function WhiteStone() {
+export function WhiteStone({ type }) {
-    return <span className="Stone white">⛀</span>
+    if (type === 'KING')
+        return <span className="Stone white king">⛁</span>
+    else
+        return <span className="Stone white man">⛀</span>
 }
 
-export function BlackStone() {
+export function BlackStone({ type }) {
-    return <span className="Stone black">⛂</span>
+    if (type === 'KING')
+        return <span className="Stone white king">⛃</span>
+    else
+        return <span className="Stone black man">⛂</span>
 }
 
 /*
@@ -59,67 +65,98 @@ export function Player({ color, name }) {
 /*
  * Board
  */
-export function Board() {
+export function Board({ game }) {
+
+    const board = (game && game.board && typeof game.board === 'object') ? game.board : defaultBoard();
 
     return <div className='Board'>
         <div className='row'>
-            <BlackTile /> <WhiteTile id={0} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={1} stone={board[1]} />
-            <BlackTile /> <WhiteTile id={1} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={2} stone={board[2]} />
-            <BlackTile /> <WhiteTile id={2} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={3} stone={board[3]} />
-            <BlackTile /> <WhiteTile id={4} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={4} stone={board[4]} />
         </div>
         <div className='row'>
-            <WhiteTile id={5} stone={WhiteStone()} /> <BlackTile />
+            <WhiteTile id={5} stone={board[5]} /> <BlackTile />
-            <WhiteTile id={6} stone={WhiteStone()} /> <BlackTile />
+            <WhiteTile id={6} stone={board[6]} /> <BlackTile />
-            <WhiteTile id={7} stone={WhiteStone()} /> <BlackTile />
+            <WhiteTile id={7} stone={board[7]} /> <BlackTile />
-            <WhiteTile id={8} stone={WhiteStone()} /> <BlackTile />
+            <WhiteTile id={8} stone={board[8]} /> <BlackTile />
         </div>
         <div className='row'>
-            <BlackTile /> <WhiteTile id={9} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={9} stone={board[9]} />
-            <BlackTile /> <WhiteTile id={10} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={10} stone={board[10]} />
-            <BlackTile /> <WhiteTile id={11} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={11} stone={board[11]} />
-            <BlackTile /> <WhiteTile id={12} stone={WhiteStone()} />
+            <BlackTile /> <WhiteTile id={12} stone={board[12]} />
         </div>
         <div className='row'>
-            <WhiteTile id={13} stone={null} /> <BlackTile />
+            <WhiteTile id={13} stone={board[13]} /> <BlackTile />
-            <WhiteTile id={14} stone={null} /> <BlackTile />
+            <WhiteTile id={14} stone={board[14]} /> <BlackTile />
-            <WhiteTile id={15} stone={null} /> <BlackTile />
+            <WhiteTile id={15} stone={board[15]} /> <BlackTile />
-            <WhiteTile id={16} stone={null} /> <BlackTile />
+            <WhiteTile id={16} stone={board[16]} /> <BlackTile />
         </div>
 
         <div className='row'>
-            <BlackTile /> <WhiteTile id={17} stone={null} />
+            <BlackTile /> <WhiteTile id={17} stone={board[17]} />
-            <BlackTile /> <WhiteTile id={18} stone={null} />
+            <BlackTile /> <WhiteTile id={18} stone={board[18]} />
-            <BlackTile /> <WhiteTile id={19} stone={null} />
+            <BlackTile /> <WhiteTile id={19} stone={board[19]} />
-            <BlackTile /> <WhiteTile id={20} stone={null} />
+            <BlackTile /> <WhiteTile id={20} stone={board[20]} />
         </div>
         <div className='row'>
-            <WhiteTile id={21} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={21} stone={board[21]} /> <BlackTile />
-            <WhiteTile id={22} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={22} stone={board[22]} /> <BlackTile />
-            <WhiteTile id={23} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={23} stone={board[23]} /> <BlackTile />
-            <WhiteTile id={24} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={24} stone={board[24]} /> <BlackTile />
         </div>
         <div className='row'>
-            <BlackTile /> <WhiteTile id={25} stone={BlackStone()} />
+            <BlackTile /> <WhiteTile id={25} stone={board[25]} />
-            <BlackTile /> <WhiteTile id={26} stone={BlackStone()} />
+            <BlackTile /> <WhiteTile id={26} stone={board[26]} />
-            <BlackTile /> <WhiteTile id={27} stone={BlackStone()} />
+            <BlackTile /> <WhiteTile id={27} stone={board[27]} />
-            <BlackTile /> <WhiteTile id={28} stone={BlackStone()} />
+            <BlackTile /> <WhiteTile id={28} stone={board[28]} />
         </div>
         <div className='row'>
-            <WhiteTile id={29} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={29} stone={board[29]} /> <BlackTile />
-            <WhiteTile id={30} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={30} stone={board[30]} /> <BlackTile />
-            <WhiteTile id={31} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={31} stone={board[31]} /> <BlackTile />
-            <WhiteTile id={32} stone={BlackStone()} /> <BlackTile />
+            <WhiteTile id={32} stone={board[32]} /> <BlackTile />
         </div>
     </div>
 }
 
+function defaultBoard() {
+    return {
+        1: { color: "BLACK", type: "MAN" },
+        2: { color: "BLACK", type: "MAN" },
+        3: { color: "BLACK", type: "MAN" },
+        4: { color: "BLACK", type: "MAN" },
+        5: { color: "BLACK", type: "MAN" },
+        6: { color: "BLACK", type: "MAN" },
+        7: { color: "BLACK", type: "MAN" },
+        8: { color: "BLACK", type: "MAN" },
+        9: { color: "BLACK", type: "MAN" },
+        10: { color: "BLACK", type: "MAN" },
+        11: { color: "BLACK", type: "MAN" },
+        12: { color: "BLACK", type: "MAN" },
+        21: { color: "WHITE", type: "MAN" },
+        22: { color: "WHITE", type: "MAN" },
+        23: { color: "WHITE", type: "MAN" },
+        24: { color: "WHITE", type: "MAN" },
+        25: { color: "WHITE", type: "MAN" },
+        26: { color: "WHITE", type: "MAN" },
+        27: { color: "WHITE", type: "MAN" },
+        28: { color: "WHITE", type: "MAN" },
+        29: { color: "WHITE", type: "MAN" },
+        30: { color: "WHITE", type: "MAN" },
+        31: { color: "WHITE", type: "MAN" },
+        32: { color: "WHITE", type: "MAN" },
+    }
+}
+
 function WhiteTile({ id, stone }) {
     return (
         <div className='Tile white'
             onClick={() => console.log('click', id)}
         >
-            {stone}
+            <Stone color={stone?.color} type={stone?.type} />
         </div>
     );
 }

webapp/src/container/games/ActionPanel.jsx

@@ -10,23 +10,16 @@ export function Create({ onClick }) {
 
     const hasOpponent = games.newGame.opponentName && games.newGame.opponentColor;
 
-    const prepareNewGameRequest = () => {
+    const validateNewGame = () => {
         if (!hasOpponent)
             return alert("You have to select an opponent");
 
-        const reqParams = {
+        onClick(games.newGame);
-            opponentName: games.newGame.opponentName,
-            opponentColor: games.newGame.opponentColor,
-            board: null, // default board configuration
-            message: games.newGame.message
-        }
-
-        onClick(reqParams);
     }
 
     return (
         <button className={'Create' + (hasOpponent ? ' ready' : '')}
-            onClick={prepareNewGameRequest}
+            onClick={validateNewGame}
         >
             <Wobler text="Create" dance={games.isPushingNewGame} />
         </button>

webapp/src/container/games/GameBoard.jsx

@@ -9,30 +9,36 @@ export default function GameBoard() {
   const games = useContext(GamesContext);
   const { pathname } = useLocation();
 
-  const [opponentName, opponentColor, myColor] = (() => {
+  const game = (() => {
     if (matchPath('/games/new', pathname))
-      return [games.newGame.opponentName, games.newGame.opponentColor, Color.opposite(games.newGame.opponentColor)];
+      return gameFrom(games.newGame);
-
-    let selectedGame;
 
     if (matchPath('/games/proposal', pathname))
-      selectedGame = games.findGame({ uuid: games.proposal.selectedUUID });
+      return games.findGame({ uuid: games.proposal.selectedUUID });
     else if (matchPath('/games/active', pathname))
-      selectedGame = games.findGame({ uuid: games.active.selectedUUID });
+      return games.findGame({ uuid: games.active.selectedUUID });
     else if (matchPath('/games/archive', pathname))
-      selectedGame = games.findGame({ uuid: games.archive.selectedUUID });
+      return games.findGame({ uuid: games.archive.selectedUUID });
 
-    if (selectedGame)
+    return {}; //  defaults
-      return [selectedGame?.opponentName, Color.opposite(selectedGame?.myColor), selectedGame?.myColor];
-    else
-      return ['', Color.white, Color.black]; //  defaults
   })(); // <<-- Execute
 
+  const opponentColor = Color.opposite(game?.myColor);
+console.log("game", game)
   return (
     <div className='GameBoard'>
-      <Player color={opponentColor} name={opponentName} />
+      <Player color={opponentColor || Color.white} name={game?.opponentName} />
-      <Board />
+      <Board game={game} />
-      <Player color={myColor} name={opponentName ? 'MyName' : ''} />
+      <Player color={game?.myColor || Color.black} name={game?.opponentName ? 'MyName' : ''} />
     </div>
   )
 }
+
+function gameFrom(newGame) {
+  return {
+    myColor: Color.opposite(newGame.opponentColor),
+    opponentName: newGame.opponentName,
+    opponentColor: newGame.opponentColor,
+    board: newGame.board,
+  };
+}

webapp/src/reducer/games.js

@@ -7,6 +7,7 @@ export const gamesInitialState = {
   newGame: {
     opponentName: '',
     opponentColor: '',
+    board: null,
     message: '',
   },