diff --git a/webapp/src/api/games.js b/webapp/src/api/games.js index 7700c3f..6f3cb01 100644 --- a/webapp/src/api/games.js +++ b/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: ''}); diff --git a/webapp/src/components/Checkers.css b/webapp/src/components/Checkers.css index af5ecd7..994a4c1 100644 --- a/webapp/src/components/Checkers.css +++ b/webapp/src/components/Checkers.css @@ -7,7 +7,7 @@ .Board { display: flex; flex-direction: column; - justify-content: center; + justify-content: center; } .Board.flip { @@ -16,6 +16,7 @@ .Tile { border: 1px solid #e4e4e4; + padding: 0; float: left; text-align: center; } @@ -30,4 +31,8 @@ .Tile.selected { color: grey; +} + +.Tile.prevmove { + background-color:bisque; } \ No newline at end of file diff --git a/webapp/src/components/Checkers.jsx b/webapp/src/components/Checkers.jsx index 248bac4..c9447c6 100644 --- a/webapp/src/components/Checkers.jsx +++ b/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 ( -