small touches

This commit is contained in:
djmil 2023-11-30 15:44:47 +01:00
parent 9183b97628
commit 16bccde6e1
7 changed files with 18 additions and 12 deletions

View File

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

View File

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

View File

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

View File

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

View File

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