GameBoard: show previous and current moves

webapp/src/api/games.js

@@ -73,7 +73,7 @@ export default function useGamesApi() {
 
     const pushGameMove = ({ uuid, move, message }) => {
         doPushing(`/api/game/${uuid}/move`, 'PUT', { move, message }, {
-            onPushing: (isPushing) => dispatchGuide({ type: 'UUIDpushing', uuid, what: isPushing && 'move' }),
+            onPushing: (isPushing) => dispatchGuide({ type: 'UUIDpushing', uuid, what: isPushing && {moveFrom: move[0], moveTo: move[1]} }),
             onSuccess: (game) => {
                 dispatchState({ type: 'update', game });
                 dispatchGuide({ type: 'UUIDmessage', uuid, message: ''});

webapp/src/components/Checkers.css

@@ -16,6 +16,7 @@
 
 .Tile {
     border: 1px solid #e4e4e4;
+    padding: 0;
     float: left;
     text-align: center;
 }
@@ -31,3 +32,7 @@
 .Tile.selected {
     color: grey;
 }
+
+.Tile.prevmove {
+    background-color:bisque;
+}

webapp/src/components/Checkers.jsx

@@ -71,16 +71,29 @@ export function Player({ color, name }) {
 /*
  * Board
  */
-export function Board({ board, flip, onStoneClick, onStoneMove }) {
+export function Board({ board, flip, prevMove, currMove, onStoneClick, onStoneMove }) {
+    // ugly & lazy
+    if (!board)
+        board = [];
+    if (!prevMove)
+        prevMove = [];
+    if (!currMove)
+        currMove = [];
+
     const [[moveId, moveX, moveY], setMove] = useState([0, 0, 0]);
 
     const isInteractive = (board && (typeof onStoneClick === 'function' || typeof onStoneMove === 'function')) ? ' interactive' : '';
 
     const WhiteTile = ({ id }) => {
-        const stone = board[id];
+        const stone = (id === currMove[1]) ? board[currMove[0]] : board[id];
 
         return (
-            <div className={'Tile white' + isInteractive + (id === moveId ? ' selected' : '')}
+            <div className={'Tile white' 
+                + isInteractive 
+                + (id === moveId ? ' selected' : '')
+                + (id === currMove[0] || id === currMove[1] ? ' selected' : '')
+                + (id === prevMove[0] || id === prevMove[1] ? ' prevmove' : '')
+            }
                 onClick={!onStoneClick ? null :
                     () => onStoneClick(id)
                 }

webapp/src/container/games/GameBoard.jsx

@@ -23,8 +23,10 @@ export default function GameBoard({ username, getGame, onStoneClick, onStoneMove
         name={game.opponentName}
       />
       <Board
-        board={game.board || []}
+        board={game.board}
         flip={flipBoard}
+        prevMove={game.previousMove}
+        currMove={[isPushing?.moveFrom, isPushing?.moveTo]}
         onStoneClick={optionalOnStoneClick}
         onStoneMove={optionalOnStoneMove}
       />
@@ -32,7 +34,6 @@ export default function GameBoard({ username, getGame, onStoneClick, onStoneMove
         color={game.myColor || Color.white}
         name={myName}
       />
-      {(isPushing === 'move') ? <span>Moving...</span> : null}
     </div>
   )
 }

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

@@ -30,14 +30,14 @@
 
 .Selectable .Board {
     margin: 5px;
+    border: 0.5px solid #e4e4e4;
 }
 .Selectable .Board .Tile {
-    font-size: 33.3%;
+    font-size: 50%;  
-    line-height: 4px;
+    line-height: 6px;
-    height: 4px;
+    height: 6px;
-    width: 4px; 
+    width: 6px;  
-    margin-right: -1px;
+    border: none;
-    margin-top: -1px;
 }
 
 .Selectable .Message {

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

@@ -138,8 +138,9 @@ function Selectable({ game, selected, onClick }) {
             onClick={() => onClick(game.uuid)}
         >
             <Board
-                board={game.board || []}
+                board={game.board}
                 flip={flipBoard}
+                prevMove={game.previousMove}
             />
             <div className='Message'>
                 <Player