Rewritten algorithm to use Direction as well as position

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

@@ -21,15 +21,15 @@ 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<Position[]>([]); // TODO reset when other client moves a character
+  const [possiblePositions, setPossiblePositions] = useState<Path[]>([]); // TODO reset when other client moves a character
 
   function handleSelectCharacter(character: Character): void {
     setSelectedCharacter(character);
   }
 
-  function handleMoveCharacter(position: Position): void {
+  function handleMoveCharacter(path: Path): void {
     if (selectedCharacter) {
-      selectedCharacter.moveTo(position);
+      selectedCharacter.follow(path);
       onMove?.(selectedCharacter);
       setSelectedCharacter(undefined);
     }
@@ -37,8 +37,8 @@ const Board: Component<BoardProps> = (
 
   useEffect(() => {
     if (selectedCharacter && selectedDice) {
-      const possiblePositions = findPossiblePositions(testMap, selectedCharacter, selectedDice.value);
-      setPossiblePositions(possiblePositions);
+      const possiblePaths = findPossiblePositions(testMap, selectedCharacter, selectedDice.value);
+      setPossiblePositions(possiblePaths);
     } else {
       setPossiblePositions([]);
     }
@@ -48,9 +48,9 @@ const Board: Component<BoardProps> = (
 
     for (const character of characters) { // TODO make more dynamic
       if (character instanceof PacMan) {
-        character.position = {x: 3, y: 3};
+        character.position = {end: {x: 3, y: 3}, direction: "up"};
       } else {
-        character.position = {x: 7, y: 3};
+        character.position = {end: {x: 7, y: 3}, direction: "up"};
       }
     }
 
@@ -72,7 +72,7 @@ const Board: Component<BoardProps> = (
           <div key={rowIndex} className={"flex"}>
             {
               row.map((tile, colIndex) =>
-                <Tile className={`${possiblePositions.find(p => p.x === colIndex && p.y === rowIndex) ?
+                <Tile className={`${possiblePositions.find(p => 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}
@@ -80,8 +80,8 @@ const Board: Component<BoardProps> = (
                       size={tileSize}
                       character={characters.find(c => c.isAt({x: colIndex, y: rowIndex}))}
                       onCharacterClick={handleSelectCharacter}
-                      onClick={possiblePositions.find(p => p.x === colIndex && p.y === rowIndex) ?
-                        () => handleMoveCharacter({x: colIndex, y: rowIndex}) : undefined}
+                      onClick={possiblePositions.filter(p => p.end.x === colIndex && p.end.y === rowIndex)
+                        .map(p => () => handleMoveCharacter(p))[0]}
                 />
               )
             }
@@ -154,8 +154,28 @@ const CharacterComponent: Component<CharacterComponentProps> = (
     character,
     onClick,
     className
-  }) => (
-  <div className={`rounded-full w-4/5 h-4/5 cursor-pointer hover:border border-black ${className}`}
-       style={{backgroundColor: `${character.color}`}}
-       onClick={() => onClick?.(character)}/>
-);
+  }) => {
+
+  function getSide() {
+    switch (character.position.direction) {
+      case "up":
+        return "right-1/4 top-0";
+      case "down":
+        return "right-1/4 bottom-0";
+      case "left":
+        return "left-0 top-1/4";
+      case "right":
+        return "right-0 top-1/4";
+    }
+  }
+
+  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/gameComponent.tsx

@@ -41,7 +41,7 @@ export const GameComponent: Component = () => {
       case Action.moveCharacter:
         setDice(parsed.Data?.dice as number[]);
         const character = parsed.Data?.character as Character;
-        characters.current.find(c => c.color === character.color)?.moveTo(character.position);
+        characters.current.find(c => c.color === character.color)?.follow(character.position);
         break;
     }
   }

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

@@ -1,29 +1,33 @@
 type CharacterColor = "red" | "blue" | "yellow" | "green" | "purple";
-type Direction = "up" | "right" | "down" | "left";
+
+const defaultDirection: Path = {
+  end: {x: 0, y: 0},
+  direction: "up"
+};
 
 export abstract class Character {
   public color: CharacterColor;
-  public position: Position;
-  public direction: Direction = "up";
+  public position: Path;
   public isEatable: boolean = false;
 
-  protected constructor(color: CharacterColor, startPosition: Position = {x: 0, y: 0}) {
+  protected constructor(color: CharacterColor, startPosition = defaultDirection) {
     this.color = color;
     this.position = startPosition;
   }
 
-  public moveTo(position: Position): void {
-    this.position = position;
+  public follow(path: Path): void {
+    this.position.end = path.end;
+    this.position.direction = path.direction;
   }
 
   public isAt(position: Position): boolean {
-    return this.position.x === position.x && this.position.y === position.y;
+    return this.position.end.x === position.x && this.position.end.y === position.y;
   }
 }
 
 export class PacMan extends Character {
 
-  constructor(color: CharacterColor, startPosition: Position = {x: 0, y: 0}) {
+  constructor(color: CharacterColor, startPosition = defaultDirection) {
     super(color, startPosition);
     this.isEatable = true;
   }
@@ -32,7 +36,7 @@ export class PacMan extends Character {
 
 export class Ghost extends Character {
 
-  constructor(color: CharacterColor, startPosition: Position = {x: 0, y: 0}) {
+  constructor(color: CharacterColor, startPosition = defaultDirection) {
     super(color, startPosition);
   }
 }

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

@@ -7,98 +7,139 @@ import {Character, PacMan} from "./character";
  * @param character The current position of the character
  * @param steps The number of steps the character can move
  */
-export default function findPossiblePositions(board: GameMap, character: Character, steps: number): Position[] {
-  const possiblePositions: Position[] = [];
-  findPossibleRecursive(board, character.position, steps, character instanceof PacMan, possiblePositions, []);
+export default function findPossiblePositions(board: GameMap, character: Character, steps: number): Path[] {
+  const possiblePositions: Path[] = [];
+  findPossibleRecursive(board, character.position, steps, // TODO sometimes the character steps on the same tile twice
+    character instanceof PacMan, possiblePositions);
   return possiblePositions;
 }
 
-function findPossibleRecursive(board: GameMap, currentPos: Position, steps: number, isPacMan: boolean,
-                               possibleList: Position[], visitedTiles: Position[]): Position | null {
-  
-  if (isPacMan && isOutsideBoard(currentPos, board.length)) {
-    addTeleportationTiles(board, currentPos, steps, isPacMan, possibleList, visitedTiles);
-  } else if (visitedTiles.find(tile => tile.x === currentPos.x && tile.y === currentPos.y)) { // TODO might be true when teleporting, when it shouldn't (1,5) and 6 steps
-    return null;
-  } else if (isWall(board, currentPos)) {
+function findPossibleRecursive(board: GameMap, currentPath: Path, steps: number,
+                               isPacMan: boolean, possibleList: Path[]): Path | null {
+
+  if (isOutsideBoard(currentPath, board.length)) {
+    if (!isPacMan) return null;
+    addTeleportationTiles(board, currentPath, steps, isPacMan, possibleList);
+  } else if (isWall(board, currentPath)) {
     return null;
   }
-  visitedTiles.push(currentPos);
-  if (steps === 0) return currentPos;
+  if (steps === 0) return currentPath;
 
-  const nextStep = steps - 1;
-  const result = {
-    up: findPossibleRecursive(board, {
-      x: currentPos.x,
-      y: currentPos.y + 1
-    }, nextStep, isPacMan, possibleList, visitedTiles),
-    right: findPossibleRecursive(board, {
-      x: currentPos.x + 1,
-      y: currentPos.y
-    }, nextStep, isPacMan, possibleList, visitedTiles),
-    down: findPossibleRecursive(board, {
-      x: currentPos.x,
-      y: currentPos.y - 1
-    }, nextStep, isPacMan, possibleList, visitedTiles),
-    left: findPossibleRecursive(board, {
-      x: currentPos.x - 1,
-      y: currentPos.y
-    }, nextStep, isPacMan, possibleList, visitedTiles),
-  };
+  steps--;
+  const possibleTiles: (Path | null)[] = [];
 
-  pushToList(board, possibleList, Object.values(result));
+  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);
+  }
+
+  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 (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);
+  }
+
+  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[][], currentPos: Position, steps: number, isPacMan: boolean,
-                               possibleList: Position[], visitedTiles: Position[]): void {
-  const newPositons: (Position | null)[] = [];
+function addTeleportationTiles(board: number[][], currentPath: Path, steps: number, isPacMan: boolean,
+                               possibleList: Path[]): void {
+  const newPositons: (Path | null)[] = [];
   const possiblePositions = findTeleportationTiles(board);
   for (const pos of possiblePositions) {
-    if (pos.x !== Math.max(currentPos.x, 0) || pos.y !== Math.max(currentPos.y, 0)) {
-      newPositons.push(findPossibleRecursive(board, pos, steps, isPacMan, possibleList, visitedTiles));
+    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));
     }
   }
   pushToList(board, possibleList, newPositons);
 }
 
-function pushToList(board: number[][], list: Position[], newEntries: (Position | null)[]): void {
+function pushToList(board: number[][], list: Path[], newEntries: (Path | null)[]): void {
   for (const entry of newEntries) {
-    if (entry !== null && !list.find(p => p.x === entry.x && p.y === entry.y) && !isOutsideBoard(entry, board.length) && !isSpawn(board, entry)) {
+    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 findTeleportationTiles(board: number[][]): Position[] {
-  const possiblePositions: Position[] = [];
+function findTeleportationTiles(board: number[][]): Path[] {
+  const possiblePositions: Path[] = [];
   const edge = [0, board.length - 1];
 
   for (const e of edge) {
     for (let i = 0; i < board[e].length; i++) {
 
-      if (board[e][i] !== TileType.wall) {
-        possiblePositions.push({x: i, y: e});
-      }
-      if (board[i][e] !== TileType.wall) {
-        possiblePositions.push({x: e, y: i});
-      }
+      pushPath(board, possiblePositions, i, e);
+      pushPath(board, possiblePositions, e, i);
     }
   }
 
   return possiblePositions;
 }
 
-function isOutsideBoard(currentPos: Position, boardSize: number): boolean {
-  return currentPos.x < 0 || currentPos.x >= boardSize || currentPos.y < 0 || currentPos.y >= boardSize;
+function pushPath(board: GameMap, possiblePositions: Path[], x: number, y: number) {
+  if (board[x][y] !== TileType.wall) {
+    possiblePositions.push({end: {x, y}, direction: findDirection(x, y, board.length)});
+  }
 }
 
-function isWall(board: number[][], currentPos: Position): boolean {
-  return board[currentPos.y][currentPos.x] === TileType.wall; // TODO shouldn't work, but it does
+function findDirection(x: number, y: number, length: number): Direction {
+  let direction: Direction;
+  if (x === 0) {
+    direction = "right";
+  } else if (y === 0) {
+    direction = "down";
+  } else if (x === length - 1) {
+    direction = "left";
+  } else {
+    direction = "up";
+  }
+  return direction;
 }
 
-function isSpawn(board: number[][], currentPos: Position): boolean {
-  return board[currentPos.x][currentPos.y] === TileType.pacmanSpawn ||
-    board[currentPos.x][currentPos.y] === TileType.ghostSpawn;
+function isOutsideBoard(currentPos: Path, boardSize: number): boolean {
+  const pos = currentPos.end;
+  return pos.x < 0 || pos.x >= boardSize || pos.y < 0 || pos.y >= boardSize;
+}
+
+function isWall(board: GameMap, currentPos: Path): boolean {
+  const pos = currentPos.end;
+  return board[pos.y][pos.x] === TileType.wall; // Shouldn't work, but it does
+}
+
+function isSpawn(board: GameMap, currentPos: Path): boolean {
+  const pos = currentPos.end;
+  return board[pos.x][pos.y] === TileType.pacmanSpawn || board[pos.x][pos.y] === TileType.ghostSpawn;
 }
 

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

@@ -17,3 +17,16 @@ type SelectedDice = {
 type Position = { x: number, y: number };
 
 type GameMap = number[][];
+
+type Direction = "up" | "right" | "down" | "left";
+
+type DirectionalPosition = {
+  at: Position,
+  direction: Direction
+}
+
+type Path = {
+  path?: Position[],
+  end: Position,
+  direction: Direction
+}

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

@@ -6,52 +6,67 @@ import {Character, PacMan} from "../../src/game/character";
 let pacMan: Character;
 
 beforeEach(() => {
-  pacMan = new PacMan("yellow", {x: 3, y: 3});
+  pacMan = new PacMan("yellow", {end: {x: 3, y: 3}, direction: "up"});
 });
 
-test("One from start, should return one position", () => {
+test("Pac-Man rolls one from start, should return one position", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 1);
-  expect(result).toEqual([{x: 3, y: 2}]);
   expect(result.length).toBe(1);
+  expect(result).toEqual(getPath({at: {x: 3, y: 2}, direction: "up"}));
 });
 
-test("Two from start, should return one position", () => {
+test("Pac-Man rolls two from start, should return one position", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 2);
-  expect(result).toEqual([{x: 3, y: 1}]);
   expect(result.length).toBe(1);
+  expect(result).toEqual(getPath({at: {x: 3, y: 1}, direction: "up"}));
 });
 
-test("Three from start, should return two positions", () => {
+test("Pac-Man rolls three from start, should return two positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 3);
-  arrayEquals(result, [{x: 2, y: 1}, {x: 4, y: 1}]);
   expect(result.length).toBe(2);
+  arrayEquals(result, getPath({at: {x: 2, y: 1}, direction: "left"}, {at: {x: 4, y: 1}, direction: "right"}));
 });
 
-test("Four from start, should return two positions", () => {
+test("Pac-Man rolls four from start, should return two positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 4);
-  arrayEquals(result, [{x: 1, y: 1}, {x: 5, y: 1}]);
   expect(result.length).toBe(2);
+  arrayEquals(result, getPath({at: {x: 1, y: 1}, direction: "left"}, {at: {x: 5, y: 1}, direction: "right"}));
 });
 
-test("Five from start, should return four positions", () => {
+test("Pac-Man rolls five from start, should return four positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 5);
-  arrayEquals(result, [{x: 5, y: 0}, {x: 6, y: 1}, {x: 1, y: 2}, {x: 5, y: 2}]);
   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"}
+  ));
 });
 
-test("Six from start, should return six positions", () => {
+test("Pac-Man rolls six from start, should return six positions", () => {
   const result = possibleMovesAlgorithm(testMap, pacMan, 6);
-  arrayEquals(result, [{x: 1, y: 3}, {x: 0, y: 5}, {x: 5, y: 3}, {x: 7, y: 1}, {x: 10, y: 5}, {x: 5, y: 10}]);
   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"}));
 });
 
-test("Six from position [1,5], should return 14", () => {
-  pacMan.moveTo({x: 1, y: 5});
+test("Pac-Man rolls six from position [1,5], should return 14", () => {
+  pacMan.follow({end: {x: 1, y: 5}, direction: "down"});
   const result = possibleMovesAlgorithm(testMap, pacMan, 6);
   // TODO add possible moves
-  expect(result.length).toBe(14);
+  expect(result.length).toBe(14); // TODO Oof
 });
 
+function getPath(...positions: DirectionalPosition[]): Path[] {
+  return positions.map(pos => ({end: {x: pos.at.x, y: pos.at.y}, direction: pos.direction}));
+}
+
 function arrayEquals<T extends any[]>(result: T, expected: T, message?: string): void {
   for (const item of expected) {
     expect(result, message).toContainEqual(item);