App-Remote.tsx

Blame: the commit that last changed each line · file · history

`ecef404b` 2022-03-29 Pavel Safronov	1	import * as React from 'react';
	2	import { useEffect, useState } from 'react';
	3	import { Coord } from '../game/coord';
	4	import { IGame, MoveResult } from '../game/game';
	5	import Modal from 'react-modal';
	6	import './App.css';
	7	import { Tile } from './Tile';
	8	import { Controls } from './Controls';
	9	import { delay } from '../utils/delay';
	10	import { Status } from './Status';
	11	import { PeerGame2 } from '../game/remote-game-2';
	12	import cursorUrl from '../../public/cursor.png';
	13
	14	export type Props = {
	15	game: PeerGame2;
	16	};
	17
	18	export const AppRemote = (props: Props): React.ReactElement => {
	19	const { game } = props;
	20
	21	const [selectedPiecePos, setSelectedPiecePos] = useState<Coord>()
	22	const [validMoves, setValidMoves] = useState<Coord[]>([]);
	23	const [currentPlayerId, setCurrentPlayerId] = useState<string>(game.currentPlayerId);
	24	const [moveResult, setMoveResult] = useState<MoveResult>();
	25	const [isModalOpen, setIsModalOpen] = useState(false);
	26	const [isControlsDisabled, setIsControlsDisabled] = useState(!game.canUndoMove);
	27	const [peerMousePos, setPeerMousePos] = useState<Coord>();
	28
	29	game.peerMousePositionCallback = (pos) => {
	30	setPeerMousePos(pos);
	31	}
	32
	33	useEffect((): void => {
	34	const slowUpdate = async () => {
	35	if (moveResult && moveResult.isTerminal) {
	36	await delay(750);
	37	setIsModalOpen(true);
	38	}
	39	};
	40	slowUpdate();
	41	}, [moveResult]);
	42
	43	const makeMove = async (from: Coord, to: Coord) => {
	44	const result = await game.makeMove(from, to);
	45	setCurrentPlayerId(game.currentPlayerId);
	46	setSelectedPiecePos(undefined);
	47	setValidMoves([]);
	48	setMoveResult(result);
	49	setIsControlsDisabled(false);
	50	};
	51	const undoMove = () => {
	52	const move = game.undoMove();
	53	console.debug({ move });
	54	setCurrentPlayerId(game.currentPlayerId);
	55	setSelectedPiecePos(undefined);
	56	setValidMoves([]);
	57	setMoveResult(undefined);
	58	setIsControlsDisabled(!game.canUndoMove);
	59	};
	60
	61	const allTiles: React.ReactElement[] = [];
	62	for (let r = 0; r < game.size.row; r++) {
	63	for (let c = 0; c < game.size.col; c++) {
	64	const pos = new Coord(r, c);
	65	const pieceClickCb = () => {
	66	const isUnselectClick = selectedPiecePos !== undefined && selectedPiecePos.equals(pos);
	67	if (isUnselectClick) {
	68	setSelectedPiecePos(undefined);
	69	setValidMoves([]);
	70	} else {
	71	setSelectedPiecePos(pos);
	72	setValidMoves([...game.getValidMoves(pos)]);
	73	}
	74	};
	75	const validMoveClickCb = async () => {
	76	await makeMove(selectedPiecePos!, pos)
	77	};
	78	const tile =
	79	<Tile
	80	pos={pos}
	81	game={game}
	82	validMoves={validMoves}
	83	selectedPiecePos={selectedPiecePos}
	84	currentPlayerId={currentPlayerId}
	85	pieceClickCb={() => pieceClickCb()}
	86	validMoveClickCb={() => validMoveClickCb()}
	87	/>;
	88	allTiles.push(tile);
	89	}
	90	}
	91
	92	const divRef = React.createRef<HTMLDivElement>();
	93	return (<>
	94	<div
	95	ref={divRef}
	96	onMouseMove={(ev) => {
	97	const div = divRef.current!;
	98	const xTable = ev.clientX - div.offsetLeft;
	99	const yTable = ev.clientY - div.offsetTop;
	100	const xRatio = xTable / div.clientWidth;
	101	const yRatio = yTable / div.clientHeight;
	102	game.onMouseMoveCallback(new Coord(xRatio, yRatio));
	103	}}>
	104	<Status
	105	currentPlayerId={currentPlayerId}
	106	player1Id={game.player1Id}
	107	player1Name={game.player1Name}
	108	player2Id={game.player2Id}
	109	player2Name={game.player2Name}
	110	/>
	111	<div className='grid-container'>
	112	{allTiles}
	113	</div>
	114	<Controls onUndo={undoMove} isDisabled={isControlsDisabled} />
	115	<div className='info'>
	116	The game consists of only one simple rule and three ways to win. Rules:
	117	<ul>
	118	<li>Pieces move in a straight line, including diagonally, as far as possible with no jumps.</li>
	119	</ul>
	120	Ways to win:
	121	<ol>
	122	<li>Arrange your pieces in a straight line on the board (not diagonally)</li>
	123	<li>Occupy four corners of the board</li>
	124	<li>Form a 2x2 square anywhere on the board</li>
	125	</ol>
	126	</div>
	127	<Modal isOpen={isModalOpen} className='modal'>
	128	<h2>Game Over</h2>
	129	<div>
	130	{moveResult?.message}
	131	</div>
	132	<div>
	133	<button onClick={() => location.reload()}>
	134	Restart game
	135	</button>
	136	</div>
	137	</Modal>
	138	</div>
	139	<div className='other-mouse'>
	140	<img src={cursorUrl} />
	141	</div>
	142	</>);
	143	}