small touches

webapp/src/container/Games.css

@@ -97,7 +97,7 @@
 
 .GameBoard {
     padding-left: 30px;
-    width: 275px;
+    width: 280px;
 }
 
 .Message2Opponent {
@@ -108,7 +108,7 @@
 
 .BadMove {
     position: fixed;
-    width: 275px;
+    width: 280px;
     top: 250px;
     cursor: default; /* disable 'I beam' cursor change */
     text-align: center;

webapp/src/container/Games.jsx

@@ -2,8 +2,8 @@ import React, { useContext, useEffect } from 'react';
 import { GamesStateContext, GamesGuideContext } from '../context/games';
 import { NavLink, Routes, Route } from 'react-router-dom';
 
-import NewGame from './games/view/NewGame';
-import { GameProposalSelector, ActiveGameSelector, GameArchiveSelector } from './games/view/GameSelector';
+import NewGame from './games/NewGame';
+import { GameProposalSelector, ActiveGameSelector, GameArchiveSelector } from './games/GameSelector';
 import { Create, Accept, Reject, Cancel, DrawRequest, DrawAccept, DrawReject, Surrender, Backward, Forward } from './games/ActionPanel';
 import GameBoard from './games/GameBoard';
 import { nextStone } from '../components/Checkers';

webapp/src/container/games/GameBoard.jsx

@@ -13,7 +13,7 @@ export default function GameBoard({ dispatchGuide, username, getGame, onStoneCli
   const optionalOnStoneClick = (typeof onStoneClick !== 'function') ? null :
     (cellId) => onStoneClick(game.uuid, cellId);
 
-  const optionalOnStoneMove = (typeof onStoneMove !== 'function' || isPushing) ? null :
+  const optionalOnStoneMove = (typeof onStoneMove !== 'function' || isPushing || game.status === 'DRAW_REQUEST_WAIT_FOR_YOU' || game.status === 'DRAW_REQUEST_WAIT_FOR_OPPONENT') ? null :
     (move) => {
       if (move[0] !== move[1] && game.board[move[1]] === undefined)
         onStoneMove(game.uuid, move)

webapp/src/container/games/GameSelector.jsx

@@ -1,10 +1,10 @@
 import './GameSelector.css';
 import React, { useContext } from 'react';
-import { GamesStateContext, GamesGuideContext } from '../../../context/games';
+import { GamesStateContext, GamesGuideContext } from '../../context/games';
 
-import { Board, Color, Player } from '../../../components/Checkers';
-import Loading from '../../../components/Loading';
-import Counter from '../../../components/Counter';
+import { Board, Color, Player } from '../../components/Checkers';
+import Loading from '../../components/Loading';
+import Counter from '../../components/Counter';
 
 export function GameProposalSelector({ onSelect }) {
     const games = useContext(GamesStateContext);
@@ -133,6 +133,12 @@ function Selectable({ game, selected, onClick }) {
     const opponentName = game.opponentName;
     const flipBoard = (game?.myColor === Color.black) ? true : null;
 
+    const color = 'red';//game.status === 'DRAW_REQUEST_WAIT_FOR_YOU' || game.status === 'DRAW_REQUEST_WAIT_FOR_OPPONENT';
+
+    // const style = {
+    //     border: 1px 'red'
+    // };
+
     return (
         <div className={'Selectable' + (selected ? ' selected' : '')}
             onClick={() => onClick(game.uuid)}

webapp/src/container/games/NewGame.jsx

@@ -1,9 +1,9 @@
 import './NewGame.css'
 import React, { useContext } from 'react';
-import { GamesGuideContext } from '../../../context/games';
+import { GamesGuideContext } from '../../context/games';
 
-import DropdownList from '../../../components/DropdownList';
-import { Color, WhiteStone, BlackStone } from '../../../components/Checkers';
+import DropdownList from '../../components/DropdownList';
+import { Color, WhiteStone, BlackStone } from '../../components/Checkers';
 
 export default function NewGame({ players, setPlayers }) {
     const newGame = useContext(GamesGuideContext).newGame;