Fixed bug in findMovesAlgo, added dummies to show direction of possible moves, changed direction to enum

pac-man-board-game/ClientApp/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pac_man_board_game",
-  "version": "0.1-Testing",
+  "version": "0.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pac_man_board_game",
-      "version": "0.1-Testing",
+      "version": "0.1.1",
       "dependencies": {
         "@headlessui/react": "^1.7.14",
         "@heroicons/react": "^2.0.18",

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

@@ -1,8 +1,9 @@
 import React, {useEffect, useState} from "react";
-import {Character, PacMan} from "../game/character";
+import {Character, Dummy, PacMan} from "../game/character";
 import findPossiblePositions from "../game/possibleMovesAlgorithm";
 import {TileType} from "../game/tileType";
 import {testMap} from "../game/map";
+import {Direction} from "../game/direction";
 
 interface BoardProps extends ComponentProps {
   characters: Character[],
@@ -48,9 +49,9 @@ const Board: Component<BoardProps> = (
 
     for (const character of characters) { // TODO make more dynamic
       if (character instanceof PacMan) {
-        character.position = {end: {x: 3, y: 3}, direction: "up"};
+        character.position = {end: {x: 3, y: 3}, direction: Direction.up};
       } else {
-        character.position = {end: {x: 7, y: 3}, direction: "up"};
+        character.position = {end: {x: 7, y: 3}, direction: Direction.up};
       }
     }
 
@@ -79,10 +80,21 @@ const Board: Component<BoardProps> = (
                       type={tile}
                       size={tileSize}
                       character={characters.find(c => c.isAt({x: colIndex, y: rowIndex}))}
-                      onCharacterClick={handleSelectCharacter}
-                      onClick={possiblePositions.filter(p => p.end.x === colIndex && p.end.y === rowIndex)
-                        .map(p => () => handleMoveCharacter(p))[0]}
-                />
+                      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})) &&
+                      <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>)
@@ -93,7 +105,21 @@ const Board: Component<BoardProps> = (
 
 export default Board;
 
-interface TileProps extends ComponentProps {
+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,
@@ -107,10 +133,8 @@ const Tile: Component<TileProps> = (
     size,
     type = TileType.empty,
     onClick,
-    character,
-    onCharacterClick,
-    characterClass,
     className,
+    children
   }) => {
 
   function setColor(): string {
@@ -134,18 +158,13 @@ const Tile: Component<TileProps> = (
     <div className={`${setColor()} hover:border relative max-w-[75px] max-h-[75px] ${className}`}
          style={{width: `${size}px`, height: `${size}px`}}
          onClick={onClick}>
-      {character &&
-        <div className={"inline-flex justify-center items-center w-full h-full"}>
-          <CharacterComponent character={character} onClick={onCharacterClick} className={characterClass}/>
-        </div>
-      }
-
+      {children}
     </div>
   );
 };
 
 interface CharacterComponentProps extends ComponentProps {
-  character: Character,
+  character?: Character,
   onClick?: (character: Character) => void,
 }
 
@@ -157,18 +176,20 @@ const CharacterComponent: Component<CharacterComponentProps> = (
   }) => {
 
   function getSide() {
-    switch (character.position.direction) {
-      case "up":
+    switch (character?.position.direction) {
+      case Direction.up:
         return "right-1/4 top-0";
-      case "down":
+      case Direction.down:
         return "right-1/4 bottom-0";
-      case "left":
+      case Direction.left:
         return "left-0 top-1/4";
-      case "right":
+      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}`}}

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

@@ -1,8 +1,10 @@
-type CharacterColor = "red" | "blue" | "yellow" | "green" | "purple";
+import {Direction} from "./direction";
+
+type CharacterColor = "red" | "blue" | "yellow" | "green" | "purple" | "grey";
 
 const defaultDirection: Path = {
   end: {x: 0, y: 0},
-  direction: "up"
+  direction: Direction.up
 };
 
 export abstract class Character {
@@ -40,3 +42,11 @@ export class Ghost extends Character {
     super(color, startPosition);
   }
 }
+
+export class Dummy extends Character {
+
+  constructor(path: Path) {
+    super("grey", path);
+  }
+
+}

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

@@ -0,0 +1,6 @@
+export enum Direction {
+  left,
+  up,
+  right,
+  down
+}

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

@@ -1,5 +1,6 @@
 import {TileType} from "./tileType";
 import {Character, PacMan} from "./character";
+import {Direction} from "./direction";
 
 /**
  * Finds all the possible positions for the character to move to
@@ -15,81 +16,76 @@ export default function findPossiblePositions(board: GameMap, character: Charact
 }
 
 function findPossibleRecursive(board: GameMap, currentPath: Path, steps: number,
-                               isPacMan: boolean, possibleList: Path[]): Path | null {
+                               isPacMan: boolean, possibleList: Path[]): void {
 
   if (isOutsideBoard(currentPath, board.length)) {
-    if (!isPacMan) return null;
+    if (!isPacMan) return;
     addTeleportationTiles(board, currentPath, steps, isPacMan, possibleList);
+    return;
   } else if (isWall(board, currentPath)) {
-    return null;
-  }
-  if (steps === 0) return currentPath;
-
-  steps--;
-  const possibleTiles: (Path | null)[] = [];
-
-  if (currentPath.direction !== "down") {
-    const up = findPossibleRecursive(board, {
-      end: {
-        x: currentPath.end.x,
-        y: currentPath.end.y - 1,
-      }, direction: "up"
-    }, steps, isPacMan, possibleList);
-    possibleTiles.push(up);
+    return;
   }
 
-  if (currentPath.direction !== "left") {
-    const right = findPossibleRecursive(board, {
-      end: {
-        x: currentPath.end.x + 1,
-        y: currentPath.end.y
-      }, direction: "right"
-    }, steps, isPacMan, possibleList);
-    possibleTiles.push(right);
-  }
+  if (steps === 0) {
+    pushTileToList(board, currentPath, possibleList);
+  } else {
 
-  if (currentPath.direction !== "up") {
-    const down = findPossibleRecursive(board, {
-      end: {
-        x: currentPath.end.x,
-        y: currentPath.end.y + 1
-      }, direction: "down"
-    }, steps, isPacMan, possibleList);
-    possibleTiles.push(down);
+    steps--;
+    tryMove(board, currentPath, Direction.up, steps, isPacMan, possibleList);
+    tryMove(board, currentPath, Direction.right, steps, isPacMan, possibleList);
+    tryMove(board, currentPath, Direction.down, steps, isPacMan, possibleList);
+    tryMove(board, currentPath, Direction.left, steps, isPacMan, possibleList);
   }
-
-  if (currentPath.direction !== "right") {
-    const left = findPossibleRecursive(board, {
-      end: {
-        x: currentPath.end.x - 1,
-        y: currentPath.end.y
-      }, direction: "left"
-    }, steps, isPacMan, possibleList);
-    possibleTiles.push(left);
-  }
-
-  pushToList(board, possibleList, possibleTiles);
-  return null;
 }
 
-function addTeleportationTiles(board: number[][], currentPath: Path, steps: number, isPacMan: boolean,
+function tryMove(board: GameMap, currentPath: Path, direction: Direction, steps: number, isPacMan: boolean, possibleList: Path[]): void {
+
+  function getNewPosition(): Position {
+    switch (direction) {
+      case Direction.left:
+        return {
+          x: currentPath.end.x - 1,
+          y: currentPath.end.y
+        };
+      case Direction.up:
+        return {
+          x: currentPath.end.x,
+          y: currentPath.end.y - 1
+        };
+      case Direction.right:
+        return {
+          x: currentPath.end.x + 1,
+          y: currentPath.end.y
+        };
+      case Direction.down:
+        return {
+          x: currentPath.end.x,
+          y: currentPath.end.y + 1
+        };
+    }
+  }
+
+  if (currentPath.direction !== (direction + 2) % 4) {
+    findPossibleRecursive(board, {
+      end: getNewPosition(), direction: direction
+    }, steps, isPacMan, possibleList);
+  }
+}
+
+function addTeleportationTiles(board: GameMap, currentPath: Path, steps: number, isPacMan: boolean,
                                possibleList: Path[]): void {
-  const newPositons: (Path | null)[] = [];
   const possiblePositions = findTeleportationTiles(board);
   for (const pos of possiblePositions) {
     if (pos.end.x !== Math.max(currentPath.end.x, 0) || pos.end.y !== Math.max(currentPath.end.y, 0)) {
-      newPositons.push(findPossibleRecursive(board, pos, steps, isPacMan, possibleList));
+      findPossibleRecursive(board, pos, steps, isPacMan, possibleList);
     }
   }
-  pushToList(board, possibleList, newPositons);
 }
 
-function pushToList(board: number[][], list: Path[], newEntries: (Path | null)[]): void {
-  for (const entry of newEntries) {
-    if (entry !== null && !list.find(p => p.end.x === entry.end.x && p.end.y === entry.end.y) &&
-      !isOutsideBoard(entry, board.length) && !isSpawn(board, entry)) {
-      list.push(entry);
-    }
+function pushTileToList(board: GameMap, tile: Path | null, list: Path[]): void {
+  if (tile !== null && !list.find(p => p.end.x === tile.end.x && p.end.y === tile.end.y) &&
+    !isOutsideBoard(tile, board.length) && !isSpawn(board, tile)) {
+    list.push(tile);
   }
 }
 
@@ -108,7 +104,7 @@ function findTeleportationTiles(board: number[][]): Path[] {
   return possiblePositions;
 }
 
-function pushPath(board: GameMap, possiblePositions: Path[], x: number, y: number) {
+function pushPath(board: GameMap, possiblePositions: Path[], x: number, y: number): void {
   if (board[x][y] !== TileType.wall) {
     possiblePositions.push({end: {x, y}, direction: findDirection(x, y, board.length)});
   }
@@ -117,13 +113,13 @@ function pushPath(board: GameMap, possiblePositions: Path[], x: number, y: numbe
 function findDirection(x: number, y: number, length: number): Direction {
   let direction: Direction;
   if (x === 0) {
-    direction = "right";
+    direction = Direction.right;
   } else if (y === 0) {
-    direction = "down";
+    direction = Direction.down;
   } else if (x === length - 1) {
-    direction = "left";
+    direction = Direction.left;
   } else {
-    direction = "up";
+    direction = Direction.up;
   }
   return direction;
 }

pac-man-board-game/ClientApp/src/index.css

@@ -7,6 +7,10 @@
     @apply after:content-['debug'] after:absolute;
 }
 
+.flex-center {
+    @apply flex justify-center items-center;
+}
+
 h1 {
     @apply text-4xl;
 }

pac-man-board-game/ClientApp/src/types/props.d.ts

@@ -1,4 +1,4 @@
-type Component<T = ComponentProps> = (props: T) => React.JSX.Element;
+type Component<T = ComponentProps> = (props: T) => React.JSX.Element | null;
 
 interface ComponentProps {
   className?: string,

pac-man-board-game/ClientApp/src/types/types.d.ts

@@ -18,15 +18,13 @@ type Position = { x: number, y: number };
 
 type GameMap = number[][];
 
-type Direction = "up" | "right" | "down" | "left";
-
 type DirectionalPosition = {
   at: Position,
-  direction: Direction
+  direction: import("../game/direction").Direction
 }
 
 type Path = {
   path?: Position[],
   end: Position,
-  direction: Direction
+  direction: import("../game/direction").Direction
 }

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

@@ -1,46 +1,47 @@
-import {test, expect, beforeEach} from "vitest";
+import {beforeEach, expect, test} from "vitest";
 import possibleMovesAlgorithm from "../../src/game/possibleMovesAlgorithm";
 import {testMap} from "../../src/game/map";
 import {Character, PacMan} from "../../src/game/character";
+import {Direction} from "../../src/game/direction";
 
 let pacMan: Character;
 
 beforeEach(() => {
-  pacMan = new PacMan("yellow", {end: {x: 3, y: 3}, direction: "up"});
+  pacMan = new PacMan("yellow", {end: {x: 3, y: 3}, direction: Direction.up});
 });
 
 test("Pac-Man rolls one from start, should return one position", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 1);
   expect(result.length).toBe(1);
-  expect(result).toEqual(getPath({at: {x: 3, y: 2}, direction: "up"}));
+  expect(result).toEqual(getPath({at: {x: 3, y: 2}, direction: Direction.up}));
 });
 
 test("Pac-Man rolls two from start, should return one position", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 2);
   expect(result.length).toBe(1);
-  expect(result).toEqual(getPath({at: {x: 3, y: 1}, direction: "up"}));
+  expect(result).toEqual(getPath({at: {x: 3, y: 1}, direction: Direction.up}));
 });
 
 test("Pac-Man rolls three from start, should return two positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 3);
   expect(result.length).toBe(2);
-  arrayEquals(result, getPath({at: {x: 2, y: 1}, direction: "left"}, {at: {x: 4, y: 1}, direction: "right"}));
+  arrayEquals(result, getPath({at: {x: 2, y: 1}, direction: Direction.left}, {at: {x: 4, y: 1}, direction: Direction.right}));
 });
 
 test("Pac-Man rolls four from start, should return two positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 4);
   expect(result.length).toBe(2);
-  arrayEquals(result, getPath({at: {x: 1, y: 1}, direction: "left"}, {at: {x: 5, y: 1}, direction: "right"}));
+  arrayEquals(result, getPath({at: {x: 1, y: 1}, direction: Direction.left}, {at: {x: 5, y: 1}, direction: Direction.right}));
 });
 
 test("Pac-Man rolls five from start, should return four positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 5);
   expect(result.length).toBe(4);
   arrayEquals(result, getPath(
-    {at: {x: 5, y: 0}, direction: "up"},
-    {at: {x: 6, y: 1}, direction: "right"},
-    {at: {x: 1, y: 2}, direction: "down"},
-    {at: {x: 5, y: 2}, direction: "down"}
+    {at: {x: 5, y: 0}, direction: Direction.up},
+    {at: {x: 6, y: 1}, direction: Direction.right},
+    {at: {x: 1, y: 2}, direction: Direction.down},
+    {at: {x: 5, y: 2}, direction: Direction.down}
   ));
 });
 
@@ -48,19 +49,31 @@ test("Pac-Man rolls six from start, should return six positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 6);
   expect(result.length).toBe(6);
   arrayEquals(result, getPath(
-    {at: {x: 1, y: 3}, direction: "down"},
-    {at: {x: 0, y: 5}, direction: "right"},
-    {at: {x: 5, y: 3}, direction: "down"},
-    {at: {x: 7, y: 1}, direction: "right"},
-    {at: {x: 10, y: 5}, direction: "left"},
-    {at: {x: 5, y: 10}, direction: "up"}));
+    {at: {x: 1, y: 3}, direction: Direction.down},
+    {at: {x: 0, y: 5}, direction:Direction.right},
+    {at: {x: 5, y: 3}, direction: Direction.down},
+    {at: {x: 7, y: 1}, direction: Direction.right},
+    {at: {x: 10, y: 5}, direction: Direction.left},
+    {at: {x: 5, y: 10}, direction: Direction.up}));
 });
 
-test("Pac-Man rolls six from position [1,5], should return 14", () => {
-  pacMan.follow({end: {x: 1, y: 5}, direction: "down"});
+test("Pac-Man rolls three from position [1,5] (left), should return 5", () => {
+  pacMan.follow({end: {x: 1, y: 5}, direction: Direction.left});
+  const result = possibleMovesAlgorithm(testMap, pacMan, 3);
+  arrayEquals(result, getPath(
+    {at: {x: 1, y: 2}, direction: Direction.up},
+    {at: {x: 1, y: 8}, direction: Direction.down},
+    {at: {x: 5, y: 1}, direction: Direction.down},
+    {at: {x: 9, y: 5}, direction: Direction.left},
+    {at: {x: 5, y: 9}, direction: Direction.up},
+  ));
+  expect(result.length).toBe(5);
+});
+
+test("Pac-Man rolls six from position [1,5] (down), should return 17", () => {
+  pacMan.follow({end: {x: 1, y: 5}, direction: Direction.down});
   const result = possibleMovesAlgorithm(testMap, pacMan, 6);
-  // TODO add possible moves
-  expect(result.length).toBe(14); // TODO Oof
+  expect(result.length).toBe(17);
 });
 
 function getPath(...positions: DirectionalPosition[]): Path[] {