App.tsx

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

`417dc266` 2022-03-23 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
	12	export type Props = {
	13	game: IGame;
	14	};
	15
	16	export const App = (props: Props): React.ReactElement => {
	17	const { game } = props;
	18	const [selectedPiecePos, setSelectedPiecePos] = useState<Coord>()
	19	const [validMoves, setValidMoves] = useState<Coord[]>([]);
	20	const [currentPlayerId, setCurrentPlayerId] = useState<string>(game.currentPlayerId);
	21	const [moveResult, setMoveResult] = useState<MoveResult>();
	22	const [isModalOpen, setIsModalOpen] = useState(false);
	23	const [isControlsDisabled, setIsControlsDisabled] = useState(!game.canUndoMove);
	24
	25	useEffect((): void => {
	26	const slowUpdate = async () => {
	27	if (moveResult && moveResult.isTerminal) {
	28	await delay(750);
	29	setIsModalOpen(true);
	30	}
	31	};
	32	slowUpdate();
	33	}, [moveResult]);
	34
	35	const makeMove = async (from: Coord, to: Coord) => {
	36	const result = await game.makeMove(from, to);
	37	setCurrentPlayerId(game.currentPlayerId);
	38	setSelectedPiecePos(undefined);
	39	setValidMoves([]);
	40	setMoveResult(result);
	41	setIsControlsDisabled(false);
	42	};
	43	const undoMove = () => {
	44	const move = game.undoMove();
	45	console.debug({ move });
	46	setCurrentPlayerId(game.currentPlayerId);
	47	setSelectedPiecePos(undefined);
	48	setValidMoves([]);
	49	setMoveResult(undefined);
	50	setIsControlsDisabled(!game.canUndoMove);
	51	};
	52
	53	const allTiles: React.ReactElement[] = [];
	54	for (let r = 0; r < game.size.row; r++) {
	55	for (let c = 0; c < game.size.col; c++) {
	56	const pos = new Coord(r, c);
	57	const pieceClickCb = () => {
	58	const isUnselectClick = selectedPiecePos !== undefined && selectedPiecePos.equals(pos);
	59	if (isUnselectClick) {
	60	setSelectedPiecePos(undefined);
	61	setValidMoves([]);
	62	} else {
	63	setSelectedPiecePos(pos);
	64	setValidMoves([...game.getValidMoves(pos)]);
	65	}
	66	};
	67	const validMoveClickCb = async () => {
	68	await makeMove(selectedPiecePos!, pos)
	69	};
	70	const tile =
	71	<Tile
	72	pos={pos}
	73	game={game}
	74	validMoves={validMoves}
	75	selectedPiecePos={selectedPiecePos}
	76	currentPlayerId={currentPlayerId}
	77	pieceClickCb={() => pieceClickCb()}
	78	validMoveClickCb={() => validMoveClickCb()}
	79	key={game.coordToBoardIndex(pos)}
	80	/>;
	81	allTiles.push(tile);
	82	}
	83	}
	84
	85	return (
	86	<div>
	87	<Status
	88	currentPlayerId={currentPlayerId}
	89	player1Id={game.player1Id}
	90	player1Name={game.player1Name}
	91	player2Id={game.player2Id}
	92	player2Name={game.player2Name}
	93	/>
	94	<div className='grid-container'>
	95	{allTiles}
	96	</div>
	97	<Controls onUndo={undoMove} isDisabled={isControlsDisabled} />
`9d181b04` 2022-03-23 Pavel Safronov	98	<div className='info'>
	99	The game consists of only one simple rule and three ways to win. Rules:
	100	<ul>
	101	<li>Pieces move in a straight line, including diagonally, as far as possible with no jumps.</li>
	102	</ul>
	103	Ways to win:
	104	<ol>
	105	<li>Arrange your pieces in a straight line on the board (not diagonally)</li>
	106	<li>Occupy four corners of the board</li>
	107	<li>Form a 2x2 square anywhere on the board</li>
	108	</ol>
	109	</div>
`417dc266` 2022-03-23 Pavel Safronov	110	<Modal isOpen={isModalOpen} className='modal'>
	111	<h2>Game Over</h2>
	112	<div>
	113	{moveResult?.message}
	114	</div>
	115	<div>
	116	<button onClick={() => location.reload()}>
	117	Restart game
	118	</button>
	119	</div>
	120	</Modal>
	121	</div>
	122	);
	123	}