From ee00611c33bdce68e42e0b0f2d5babb4cd5ef93d Mon Sep 17 00:00:00 2001 From: martin Date: Sun, 28 May 2023 19:39:43 +0200 Subject: [PATCH] Path will now be shown on hover, moved some components --- .../ClientApp/src/components/gameBoard.tsx | 141 +++------------ .../ClientApp/src/components/gameTile.tsx | 163 ++++++++++++++++++ .../tests/game/possibleMovesAlgorithm.test.ts | 6 + 3 files changed, 189 insertions(+), 121 deletions(-) create mode 100644 pac-man-board-game/ClientApp/src/components/gameTile.tsx diff --git a/pac-man-board-game/ClientApp/src/components/gameBoard.tsx b/pac-man-board-game/ClientApp/src/components/gameBoard.tsx index 31fe91b..f57b5c5 100644 --- a/pac-man-board-game/ClientApp/src/components/gameBoard.tsx +++ b/pac-man-board-game/ClientApp/src/components/gameBoard.tsx @@ -1,9 +1,9 @@ import React, {useEffect, useState} from "react"; -import {Character, Dummy, PacMan} from "../game/character"; +import {Character, PacMan} from "../game/character"; import findPossiblePositions from "../game/possibleMovesAlgorithm"; -import {TileType} from "../game/tileType"; import {testMap} from "../game/map"; import {Direction} from "../game/direction"; +import {GameTile} from "./gameTile"; interface BoardProps extends ComponentProps { characters: Character[], @@ -21,15 +21,20 @@ const Board: Component = ( const [tileSize, setTileSize] = useState(2); const [selectedCharacter, setSelectedCharacter] = useState(); - // TODO show the paths to the positions when hovering over a possible position (type Path = CharacterPosition[]) const [possiblePositions, setPossiblePositions] = useState([]); // TODO reset when other client moves a character + const [hoveredPosition, setHoveredPosition] = useState(); function handleSelectCharacter(character: Character): void { setSelectedCharacter(character); } + function handleShowPath(path: Path): void { + setHoveredPosition(path); + } + function handleMoveCharacter(path: Path): void { if (selectedCharacter) { + setHoveredPosition(undefined); selectedCharacter.follow(path); onMove?.(selectedCharacter); setSelectedCharacter(undefined); @@ -73,28 +78,18 @@ const Board: Component = (
{ row.map((tile, colIndex) => - p.end.x === colIndex && p.end.y === rowIndex) ? - "border-4 border-white" : ""}`} - characterClass={`${selectedCharacter?.isAt({x: colIndex, y: rowIndex}) ? "animate-bounce" : ""}`} - key={colIndex + rowIndex * colIndex} - type={tile} - size={tileSize} - character={characters.find(c => c.isAt({x: colIndex, y: rowIndex}))} - onClick={possiblePositions - .filter(p => p.end.x === colIndex && p.end.y === rowIndex) - .map(p => () => handleMoveCharacter(p))[0]}> - <> - {characters.find(c => c.isAt({x: colIndex, y: rowIndex})) && -
- c.isAt({x: colIndex, y: rowIndex}))!} - onClick={handleSelectCharacter} - className={`${selectedCharacter?.isAt({x: colIndex, y: rowIndex}) ? "animate-bounce" : ""}`}/> -
- } - p.end.x === colIndex && p.end.y === rowIndex)}/> - - + p.end.x === colIndex && p.end.y === rowIndex)} + character={characters.find(c => c.isAt({x: colIndex, y: rowIndex}))} + isSelected={selectedCharacter?.isAt({x: colIndex, y: rowIndex})} + showPath={hoveredPosition?.path?.find(pos => pos.x === colIndex && pos.y === rowIndex) !== undefined} + handleMoveCharacter={handleMoveCharacter} + handleSelectCharacter={handleSelectCharacter} + handleStartShowPath={handleShowPath} + handleStopShowPath={() => setHoveredPosition(undefined)}/> ) }
) @@ -104,99 +99,3 @@ const Board: Component = ( }; export default Board; - -interface AddDummyProps extends ComponentProps { - path?: Path; -} - -const AddDummy: Component = ({path}) => ( - <> - {path && -
- -
- } - -); - -interface TileProps extends ChildProps { - size: number, - type?: TileType, - onClick?: () => void, - character?: Character, - onCharacterClick?: (character: Character) => void, - characterClass?: string, -} - -const Tile: Component = ( - { - size, - type = TileType.empty, - onClick, - className, - children - }) => { - - function setColor(): string { - switch (type) { - case TileType.empty: - return "bg-black"; - case TileType.wall: - return "bg-blue-500"; - case TileType.pellet: - return "bg-yellow-500"; - case TileType.powerPellet: - return "bg-orange-500"; - case TileType.ghostSpawn: - return "bg-red-500"; - case TileType.pacmanSpawn: - return "bg-green-500"; - } - } - - return ( -
- {children} -
- ); -}; - -interface CharacterComponentProps extends ComponentProps { - character?: Character, - onClick?: (character: Character) => void, -} - -const CharacterComponent: Component = ( - { - character, - onClick, - className - }) => { - - function getSide() { - switch (character?.position.direction) { - case Direction.up: - return "right-1/4 top-0"; - case Direction.down: - return "right-1/4 bottom-0"; - case Direction.left: - return "left-0 top-1/4"; - case Direction.right: - return "right-0 top-1/4"; - } - } - - if (character === undefined) return null; - - return ( -
onClick?.(character)}> -
-
-
-
- ); -}; diff --git a/pac-man-board-game/ClientApp/src/components/gameTile.tsx b/pac-man-board-game/ClientApp/src/components/gameTile.tsx new file mode 100644 index 0000000..7e57842 --- /dev/null +++ b/pac-man-board-game/ClientApp/src/components/gameTile.tsx @@ -0,0 +1,163 @@ +import React from "react"; +import {TileType} from "../game/tileType"; +import {Character, Dummy} from "../game/character"; +import {Direction} from "../game/direction"; + +interface TileWithCharacterProps extends ComponentProps { + possiblePath?: Path, + character?: Character, + size: number, + type?: TileType, + handleMoveCharacter?: (path: Path) => void, + handleSelectCharacter?: (character: Character) => void, + handleStartShowPath?: (path: Path) => void, + handleStopShowPath?: () => void, + isSelected?: boolean, + showPath?: boolean +} + +export const GameTile: Component = ( + { + possiblePath, + character, + size, + type, + handleMoveCharacter, + handleSelectCharacter, + handleStartShowPath, + handleStopShowPath, + isSelected = false, + showPath = false + }) => { + return ( + handleMoveCharacter?.(possiblePath) : undefined} + onMouseEnter={possiblePath ? () => handleStartShowPath?.(possiblePath) : undefined} + onMouseLeave={handleStopShowPath}> + <> + {character && +
+ +
+ } + {showPath && + + } + + + + ); +}; + +const PathSymbol: Component = () => ( // TODO sometimes shows up when it shouldn't +
+
+
+); + +interface TileProps extends ChildProps { + size: number, + type?: TileType, + onClick?: () => void, + onMouseEnter?: () => void, + onMouseLeave?: () => void, + character?: Character, + onCharacterClick?: (character: Character) => void, + characterClass?: string, +} + +const Tile: Component = ( + { + size, + type = TileType.empty, + onClick, + onMouseEnter, + onMouseLeave, + className, + children + }) => { + + function setColor(): string { + switch (type) { + case TileType.empty: + return "bg-black"; + case TileType.wall: + return "bg-blue-500"; + case TileType.pellet: + return "bg-yellow-500"; + case TileType.powerPellet: + return "bg-orange-500"; + case TileType.ghostSpawn: + return "bg-red-500"; + case TileType.pacmanSpawn: + return "bg-green-500"; + } + } + + return ( +
+ {children} +
+ ); +}; + +interface AddDummyProps extends ComponentProps { + path?: Path; +} + +const AddDummy: Component = ({path}) => ( + <> + {path && +
+ +
+ } + +); + +interface CharacterComponentProps extends ComponentProps { + character?: Character, + onClick?: (character: Character) => void, +} + +const CharacterComponent: Component = ( + { + character, + onClick, + className + }) => { + + function getSide() { + switch (character?.position.direction) { + case Direction.up: + return "right-1/4 top-0"; + case Direction.down: + return "right-1/4 bottom-0"; + case Direction.left: + return "left-0 top-1/4"; + case Direction.right: + return "right-0 top-1/4"; + } + } + + if (character === undefined) return null; + + return ( +
onClick?.(character)}> +
+
+
+
+ ); +}; diff --git a/pac-man-board-game/ClientApp/tests/game/possibleMovesAlgorithm.test.ts b/pac-man-board-game/ClientApp/tests/game/possibleMovesAlgorithm.test.ts index 1f560ed..9b41acb 100644 --- a/pac-man-board-game/ClientApp/tests/game/possibleMovesAlgorithm.test.ts +++ b/pac-man-board-game/ClientApp/tests/game/possibleMovesAlgorithm.test.ts @@ -125,6 +125,12 @@ test("Pac-Man rolls six from position [1,5] (down), should return 17", () => { expect(result.length).toBe(17); }); +test("Pac-Man rolls six from position [7,1] (right), path to [9,5] should be five tiles long", () => { + pacMan.follow({end: {x: 7, y: 1}, direction: Direction.right}); + const result = possibleMovesAlgorithm(testMap, pacMan, 6); + expect(result[0].path?.length).toBe(5); +}); + function arrayEquals(result: T, expected: T, message?: string): void { for (const item of expected) { expect(result, message).toContainEqual(item);