Fixed bug in teleportation, moved some state and functions

pac-man-board-game/ClientApp/src/components/gameBoard.tsx

@@ -1,14 +1,14 @@
 import React, {useEffect, useState} from "react";
 import {Character, PacMan} from "../game/character";
 import findPossiblePositions from "../game/possibleMovesAlgorithm";
-import {testMap} from "../game/map";
 import {Direction} from "../game/direction";
 import {GameTile} from "./gameTile";
 
 interface BoardProps extends ComponentProps {
   characters: Character[],
   selectedDice?: SelectedDice,
-  onMove?: (character: Character) => void
+  onMove?: (character: Character) => void,
+  map: GameMap
 }
 
 const Board: Component<BoardProps> = (
@@ -16,10 +16,10 @@ const Board: Component<BoardProps> = (
     className,
     characters,
     selectedDice,
-    onMove
+    onMove,
+    map
   }) => {
 
-  const [tileSize, setTileSize] = useState(2);
   const [selectedCharacter, setSelectedCharacter] = useState<Character>();
   const [possiblePositions, setPossiblePositions] = useState<Path[]>([]); // TODO reset when other client moves a character
   const [hoveredPosition, setHoveredPosition] = useState<Path>();
@@ -43,7 +43,7 @@ const Board: Component<BoardProps> = (
 
   useEffect(() => {
     if (selectedCharacter && selectedDice) {
-      const possiblePaths = findPossiblePositions(testMap, selectedCharacter, selectedDice.value);
+      const possiblePaths = findPossiblePositions(map, selectedCharacter, selectedDice.value);
       setPossiblePositions(possiblePaths);
     } else {
       setPossiblePositions([]);
@@ -59,29 +59,18 @@ const Board: Component<BoardProps> = (
         character.position = {end: {x: 7, y: 3}, direction: Direction.up};
       }
     }
-
-    function handleResize(): void {
-      const newSize = Math.floor(window.innerWidth / 12);
-      setTileSize(newSize);
-    }
-
-    handleResize();
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
   }, []);
 
   return (
     <div className={`w-fit ${className}`}>
       {
-        testMap.map((row, rowIndex) =>
+        map.map((row, rowIndex) =>
           <div key={rowIndex} className={"flex"}>
             {
               row.map((tile, colIndex) =>
                 <GameTile
                   key={colIndex + rowIndex * colIndex}
                   type={tile}
-                  size={tileSize}
                   possiblePath={possiblePositions.find(p => 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})}

pac-man-board-game/ClientApp/src/components/gameComponent.tsx

@@ -4,6 +4,7 @@ import {Action} from "../websockets/actions";
 import GameBoard from "./gameBoard";
 import {Character, Ghost, PacMan} from "../game/character";
 import WebSocketService from "../websockets/WebSocketService";
+import {testMap} from "../game/map";
 
 const wsService = new WebSocketService("wss://localhost:3000/api/game");
 
@@ -64,7 +65,7 @@ export const GameComponent: Component = () => {
   useEffect(() => {
     wsService.onReceive = doAction;
     wsService.open();
-    
+
     startGameLoop();
     return () => wsService.close();
   }, []);
@@ -77,7 +78,7 @@ export const GameComponent: Component = () => {
       </div>
       <AllDice values={dice} onclick={handleDiceClick} selectedDiceIndex={selectedDice?.index}/>
       <GameBoard className={"mx-auto my-2"} characters={characters.current} selectedDice={selectedDice}
-                 onMove={onCharacterMove}/>
+                 onMove={onCharacterMove} map={testMap}/>
     </div>
   );
 };

pac-man-board-game/ClientApp/src/components/gameTile.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import {TileType} from "../game/tileType";
 import {Character, Dummy} from "../game/character";
 import {Direction} from "../game/direction";
@@ -6,7 +6,6 @@ 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,
@@ -20,7 +19,6 @@ export const GameTile: Component<TileWithCharacterProps> = (
   {
     possiblePath,
     character,
-    size,
     type,
     handleMoveCharacter,
     handleSelectCharacter,
@@ -32,7 +30,6 @@ export const GameTile: Component<TileWithCharacterProps> = (
   return (
     <Tile className={`${possiblePath?.end ? "border-4 border-white" : ""}`}
           type={type}
-          size={size}
           onClick={possiblePath ? () => handleMoveCharacter?.(possiblePath) : undefined}
           onMouseEnter={possiblePath ? () => handleStartShowPath?.(possiblePath) : undefined}
           onMouseLeave={handleStopShowPath}>
@@ -42,12 +39,10 @@ export const GameTile: Component<TileWithCharacterProps> = (
             <CharacterComponent
               character={character}
               onClick={handleSelectCharacter}
-              className={`${isSelected ? "animate-bounce" : ""}`}/>
+              className={isSelected ? "animate-bounce" : ""}/>
           </div>
         }
-        {showPath &&
+        {showPath && <PathSymbol/>}
-          <PathSymbol/>
-        }
         <AddDummy path={possiblePath}/>
       </>
     </Tile>
@@ -61,7 +56,6 @@ const PathSymbol: Component = () => ( // TODO sometimes shows up when it shouldn
 );
 
 interface TileProps extends ChildProps {
-  size: number,
   type?: TileType,
   onClick?: () => void,
   onMouseEnter?: () => void,
@@ -73,7 +67,6 @@ interface TileProps extends ChildProps {
 
 const Tile: Component<TileProps> = (
   {
-    size,
     type = TileType.empty,
     onClick,
     onMouseEnter,
@@ -82,6 +75,8 @@ const Tile: Component<TileProps> = (
     children
   }) => {
 
+  const [tileSize, setTileSize] = useState(2);
+
   function setColor(): string {
     switch (type) {
       case TileType.empty:
@@ -99,9 +94,22 @@ const Tile: Component<TileProps> = (
     }
   }
 
+  useEffect(() => {
+
+    function handleResize(): void {
+      const newSize = Math.floor(window.innerWidth / 12);
+      setTileSize(newSize);
+    }
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <div className={`${setColor()} hover:border relative max-w-[75px] max-h-[75px] ${className}`}
-         style={{width: `${size}px`, height: `${size}px`}}
+         style={{width: `${tileSize}px`, height: `${tileSize}px`}}
          onClick={onClick}
          onMouseEnter={onMouseEnter}
          onMouseLeave={onMouseLeave}>

pac-man-board-game/ClientApp/src/game/character.ts

@@ -20,6 +20,7 @@ export abstract class Character {
   public follow(path: Path): void {
     this.position.end = path.end;
     this.position.direction = path.direction;
+    this.position.path = undefined;
   }
 
   public isAt(position: Position): boolean {

pac-man-board-game/ClientApp/src/game/direction.ts

@@ -1,5 +1,3 @@
-import {EnumType} from "typescript";
-
 export enum Direction {
   left,
   up,

pac-man-board-game/ClientApp/src/game/possibleMovesAlgorithm.ts

@@ -51,7 +51,7 @@ function findPossibleRecursive(board: GameMap, currentPos: Path, steps: number,
 function addToPath(currentPos: Path): void {
   if (!currentPos.path) {
     currentPos.path = [];
-  } else if(!currentPos.path.includes(currentPos.end)) {
+  } else if (!currentPos.path.includes(currentPos.end)) {
     currentPos.path = [...currentPos.path, currentPos.end];
   }
 }
@@ -112,7 +112,9 @@ function addTeleportationTiles(board: GameMap, currentPath: Path, steps: number,
   const possiblePositions = findTeleportationTiles(board);
   const paths: Path[] = [];
   for (const pos of possiblePositions) {
-    if (pos.end.x !== Math.max(currentPath.end.x, 0) || pos.end.y !== Math.max(currentPath.end.y, 0)) {
+    if (pos.end.x !== interval(0, board.length - 1, currentPath.end.x) ||
+      pos.end.y !== interval(0, board.length - 1, currentPath.end.y)) {
+      
       pos.path = currentPath.path;
       paths.push(...findPossibleRecursive(board, pos, steps, isPacMan));
     }
@@ -120,6 +122,10 @@ function addTeleportationTiles(board: GameMap, currentPath: Path, steps: number,
   return paths;
 }
 
+function interval(lower: number, upper: number, value: number): number {
+  return Math.max(Math.min(value, upper), lower);
+}
+
 /**
  * Finds all the teleportation tiles on the board
  * @param board The board the character is on

pac-man-board-game/ClientApp/tests/game/possibleMovesAlgorithm.test.ts

@@ -131,6 +131,12 @@ test("Pac-Man rolls six from position [7,1] (right), path to [9,5] should be fiv
   expect(result[0].path?.length).toBe(5);
 });
 
+test("Pac-Man rolls 5 from position [9,3] (down), should return 5", () => {
+  pacMan.follow({end: {x: 9, y: 3}, direction: Direction.down});
+  const result = possibleMovesAlgorithm(testMap, pacMan, 5);
+  expect(result.length).toBe(5);
+});
+
 function arrayEquals<T extends any[]>(result: T, expected: T, message?: string): void {
   for (const item of expected) {
     expect(result, message).toContainEqual(item);