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 && {moveFrom: move[0], moveTo: move[1]} }),
+            onPushing: (isPushing) => dispatchGuide({ type: 'UUIDpushing', uuid, what: isPushing && 'move' }),
             onSuccess: (game) => {
                 dispatchState({ type: 'update', game });
                 dispatchGuide({ type: 'UUIDmessage', uuid, message: ''});

webapp/src/components/Checkers.css

@@ -7,7 +7,7 @@
 .Board {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: center; 
 }
 
 .Board.flip {
@@ -16,7 +16,6 @@
 
 .Tile {
     border: 1px solid #e4e4e4;
-    padding: 0;
     float: left;
     text-align: center;
 }
@@ -31,8 +30,4 @@
 
 .Tile.selected {
     color: grey;
-}
-
-.Tile.prevmove {
-    background-color:bisque;
 }

webapp/src/components/Checkers.jsx

@@ -71,29 +71,16 @@ export function Player({ color, name }) {
 /*
  * Board
  */
-export function Board({ board, flip, prevMove, currMove, onStoneClick, onStoneMove }) {
+export function Board({ board, flip, 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 = (id === currMove[1]) ? board[currMove[0]] : board[id];
+        const stone = board[id];
 
         return (
-            <div className={'Tile white' 
+            <div className={'Tile white' + isInteractive + (id === moveId ? ' selected' : '')}
-                + 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,10 +23,8 @@ 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}
       />
@@ -34,6 +32,7 @@ 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: 50%;  
+    font-size: 33.3%;
-    line-height: 6px;
+    line-height: 4px;
-    height: 6px;
+    height: 4px;
-    width: 6px;  
+    width: 4px; 
-    border: none;
+    margin-right: -1px;
+    margin-top: -1px;
 }
 
 .Selectable .Message {

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

@@ -138,9 +138,8 @@ 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