Path will now be shown on hover, moved some components

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<BoardProps> = (
 
   const [tileSize, setTileSize] = useState(2);
   const [selectedCharacter, setSelectedCharacter] = useState<Character>();
-  // TODO show the paths to the positions when hovering over a possible position (type Path = CharacterPosition[])
   const [possiblePositions, setPossiblePositions] = useState<Path[]>([]); // TODO reset when other client moves a character
+  const [hoveredPosition, setHoveredPosition] = useState<Path>();
 
   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<BoardProps> = (
           <div key={rowIndex} className={"flex"}>
             {
               row.map((tile, colIndex) =>
-                <Tile className={`${possiblePositions.find(p => p.end.x === colIndex && p.end.y === rowIndex) ?
+                <GameTile
-                  "border-4 border-white" : ""}`}
+                  key={colIndex + rowIndex * colIndex}
-                      characterClass={`${selectedCharacter?.isAt({x: colIndex, y: rowIndex}) ? "animate-bounce" : ""}`}
+                  type={tile}
-                      key={colIndex + rowIndex * colIndex}
+                  size={tileSize}
-                      type={tile}
+                  possiblePath={possiblePositions.find(p => p.end.x === colIndex && p.end.y === rowIndex)}
-                      size={tileSize}
+                  character={characters.find(c => c.isAt({x: colIndex, y: rowIndex}))}
-                      character={characters.find(c => c.isAt({x: colIndex, y: rowIndex}))}
+                  isSelected={selectedCharacter?.isAt({x: colIndex, y: rowIndex})}
-                      onClick={possiblePositions
+                  showPath={hoveredPosition?.path?.find(pos => pos.x === colIndex && pos.y === rowIndex) !== undefined}
-                        .filter(p => p.end.x === colIndex && p.end.y === rowIndex)
+                  handleMoveCharacter={handleMoveCharacter}
-                        .map(p => () => handleMoveCharacter(p))[0]}>
+                  handleSelectCharacter={handleSelectCharacter}
-                  <>
+                  handleStartShowPath={handleShowPath}
-                    {characters.find(c => c.isAt({x: colIndex, y: rowIndex})) &&
+                  handleStopShowPath={() => setHoveredPosition(undefined)}/>
-                      <div className={"flex-center w-full h-full"}>
-                        <CharacterComponent
-                          character={characters.find(c => c.isAt({x: colIndex, y: rowIndex}))!}
-                          onClick={handleSelectCharacter}
-                          className={`${selectedCharacter?.isAt({x: colIndex, y: rowIndex}) ? "animate-bounce" : ""}`}/>
-                      </div>
-                    }
-                    <AddDummy path={possiblePositions.find(p => p.end.x === colIndex && p.end.y === rowIndex)}/>
-                  </>
-                </Tile>
               )
             }
           </div>)
@@ -104,99 +99,3 @@ const Board: Component<BoardProps> = (
 };
 
 export default Board;
-
-interface AddDummyProps extends ComponentProps {
-  path?: Path;
-}
-
-const AddDummy: Component<AddDummyProps> = ({path}) => (
-  <>
-    {path &&
-      <div className={"flex-center w-full h-full"}>
-        <CharacterComponent character={new Dummy(path)}/>
-      </div>
-    }
-  </>
-);
-
-interface TileProps extends ChildProps {
-  size: number,
-  type?: TileType,
-  onClick?: () => void,
-  character?: Character,
-  onCharacterClick?: (character: Character) => void,
-  characterClass?: string,
-}
-
-const Tile: Component<TileProps> = (
-  {
-    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 (
-    <div className={`${setColor()} hover:border relative max-w-[75px] max-h-[75px] ${className}`}
-         style={{width: `${size}px`, height: `${size}px`}}
-         onClick={onClick}>
-      {children}
-    </div>
-  );
-};
-
-interface CharacterComponentProps extends ComponentProps {
-  character?: Character,
-  onClick?: (character: Character) => void,
-}
-
-const CharacterComponent: Component<CharacterComponentProps> = (
-  {
-    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 (
-    <div className={`rounded-full w-4/5 h-4/5 cursor-pointer hover:border border-black relative ${className}`}
-         style={{backgroundColor: `${character.color}`}}
-         onClick={() => onClick?.(character)}>
-      <div>
-        <div className={`absolute ${getSide()} w-1/2 h-1/2 rounded-full bg-black`}/>
-      </div>
-    </div>
-  );
-};

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<TileWithCharacterProps> = (
+  {
+    possiblePath,
+    character,
+    size,
+    type,
+    handleMoveCharacter,
+    handleSelectCharacter,
+    handleStartShowPath,
+    handleStopShowPath,
+    isSelected = false,
+    showPath = false
+  }) => {
+  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}>
+      <>
+        {character &&
+          <div className={"flex-center w-full h-full"}>
+            <CharacterComponent
+              character={character}
+              onClick={handleSelectCharacter}
+              className={`${isSelected ? "animate-bounce" : ""}`}/>
+          </div>
+        }
+        {showPath &&
+          <PathSymbol/>
+        }
+        <AddDummy path={possiblePath}/>
+      </>
+    </Tile>
+  );
+};
+
+const PathSymbol: Component = () => ( // TODO sometimes shows up when it shouldn't
+  <div className={"flex-center w-full h-full"}>
+    <div className={"w-1/2 h-1/2 rounded-full bg-white"}/>
+  </div>
+);
+
+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<TileProps> = (
+  {
+    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 (
+    <div className={`${setColor()} hover:border relative max-w-[75px] max-h-[75px] ${className}`}
+         style={{width: `${size}px`, height: `${size}px`}}
+         onClick={onClick}
+         onMouseEnter={onMouseEnter}
+         onMouseLeave={onMouseLeave}>
+      {children}
+    </div>
+  );
+};
+
+interface AddDummyProps extends ComponentProps {
+  path?: Path;
+}
+
+const AddDummy: Component<AddDummyProps> = ({path}) => (
+  <>
+    {path &&
+      <div className={"flex-center w-full h-full"}>
+        <CharacterComponent character={new Dummy(path)}/>
+      </div>
+    }
+  </>
+);
+
+interface CharacterComponentProps extends ComponentProps {
+  character?: Character,
+  onClick?: (character: Character) => void,
+}
+
+const CharacterComponent: Component<CharacterComponentProps> = (
+  {
+    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 (
+    <div className={`rounded-full w-4/5 h-4/5 cursor-pointer hover:border border-black relative ${className}`}
+         style={{backgroundColor: `${character.color}`}}
+         onClick={() => onClick?.(character)}>
+      <div>
+        <div className={`absolute ${getSide()} w-1/2 h-1/2 rounded-full bg-black`}/>
+      </div>
+    </div>
+  );
+};

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<T extends any[]>(result: T, expected: T, message?: string): void {
   for (const item of expected) {
     expect(result, message).toContainEqual(item);