interface/constants/Direction.ts

@@ -11,20 +11,3 @@ export const directions: Direction[] = [
   Direction.EAST,
   Direction.WEST,
 ];
-
-export function rotateDirection(
-  initialDirection: Direction,
-  rotationAngle: 0 | 90 | 180 | 270,
-): Direction {
-  const angleToDirectionMap: Record<Direction, 0 | 90 | 180 | 270> = {
-    [Direction.NORTH]: 0,
-    [Direction.EAST]: 90,
-    [Direction.SOUTH]: 180,
-    [Direction.WEST]: 270,
-  };
-  const finalAngle =
-    (360 + angleToDirectionMap[initialDirection] - rotationAngle) % 360;
-  return (Object.keys(angleToDirectionMap) as Direction[]).find(
-    (direction) => angleToDirectionMap[direction] === finalAngle,
-  )!;
-}

interface/constants/Pieces.ts

@@ -13,6 +13,7 @@ const STRAIGHT_RAIL: Piece = new Piece({
     },
   ],
 });
+
 const TURN_RAIL: Piece = new Piece({
   useInternalTracks: false,
   trackDefinitions: [
@@ -165,7 +166,7 @@ const DEAD_END_STATION_ROAD: Piece = new Piece({
   trackDefinitions: [
     {
       startPoint: Direction.EAST,
-      type: TrackType.ROAD,
+      type: TrackType.RAIL,
     },
   ],
 });
@@ -231,6 +232,7 @@ const FOUR_WAY_WITH_ONE_RAIL: Piece = new Piece({
     },
   ],
 });
+
 const FOUR_WAY_TURNING_CROSSING: Piece = new Piece({
   useInternalTracks: true,
   internalNodeType: InternalNodeType.STATION,
@@ -292,7 +294,7 @@ const T_JUNCTION_ROAD: Piece = new Piece({
     },
     {
       startPoint: Direction.WEST,
-      type: TrackType.ROAD,
+      type: TrackType.RAIL,
     },
   ],
 });
@@ -314,7 +316,7 @@ const FOUR_WAY_CROSS_ROAD: Piece = new Piece({
     },
     {
       startPoint: Direction.WEST,
-      type: TrackType.ROAD,
+      type: TrackType.RAIL,
     },
   ],
 });

interface/types/Cell.ts

@@ -5,7 +5,6 @@ import { PieceId, pieceMap } from "../constants/Pieces";
 import { Exit } from "./Exit";
 import { ExternalNode } from "./ExternalNode";
 import { InternalNode } from "./InternalNode";
-import { Piece } from "./Piece";
 import { PlacedPiece } from "./PlacedPiece";
 
 export class Cell {
@@ -32,77 +31,47 @@ export class Cell {
     return node!;
   }
 
-  /**
+  public placePiece(pieceId: PieceId) {
-   * @param rotation in degrees counter-clockwise
-   */
-  public placePiece(pieceId: PieceId, rotation: 0 | 90 | 180 | 270) {
     if (this.placedPiece !== undefined) return;
-    const piece: Piece = pieceMap[pieceId].rotate(rotation);
+    const piece = pieceMap[pieceId];
-
+    const connectionTypes = Array.from(piece.tracks).flatMap((track) => {
-    this.validatePiecePlacement(piece);
+      const directions =
+        track.joinedPoints.secondPoint instanceof InternalNode
+          ? [track.joinedPoints.firstPoint]
+          : [track.joinedPoints.firstPoint, track.joinedPoints.secondPoint];
+      return directions.map((direction) => {
+        return { direction: direction, type: track.type };
+      });
+    });
+    connectionTypes.forEach(({ direction, type }) => {
+      const adjacentPoint = this.getNodeAt(direction).traverseBorder();
+      if (adjacentPoint instanceof Exit) {
+        if (
+          adjacentPoint.type !== ExitType.AMBIVALENT &&
+          adjacentPoint.type.toString() !== type.toString()
+        ) {
+          throw Error(
+            `Unable to place piece, invalid border at direction ${direction}`,
+          );
+        }
+      } else {
+        if (adjacentPoint.cell.placedPiece !== undefined) {
+          const adjacentTrack =
+            adjacentPoint.cell.placedPiece.piece.findTrackForDirection(
+              adjacentPoint.direction,
+            );
+          if (adjacentTrack !== undefined && adjacentTrack.type !== type) {
+            throw Error(
+              `Unable to place piece next to another due to conflicting track types at ${direction}`,
+            );
+          }
+        }
+      }
+    });
 
     this.placedPiece = {
       piece: piece.toPlacedPiece(this),
       id: pieceId,
     };
   }
-
-  private validatePiecePlacement(piece: Piece) {
-    const hasAnyConnection = Array.from(piece.tracks)
-      .map((track) => {
-        const trackExternalNodes = [
-          this.getNodeAt(track.joinedPoints.firstPoint),
-        ];
-        if (!(track.joinedPoints.secondPoint instanceof InternalNode)) {
-          trackExternalNodes.push(
-            this.getNodeAt(track.joinedPoints.secondPoint),
-          );
-        }
-        return {
-          trackExternalNodes: trackExternalNodes,
-          trackType: track.type,
-        };
-      })
-      .some(({ trackExternalNodes, trackType }) => {
-        let isTrackConnected: boolean = false;
-        trackExternalNodes
-          .filter((node) => node.traverseBorder() instanceof Exit)
-          .forEach((node) => {
-            const exitType = (node.traverseBorder() as Exit).type;
-            isTrackConnected = true;
-            if (
-              exitType !== ExitType.AMBIVALENT &&
-              exitType.toString() !== trackType.toString()
-            ) {
-              throw Error(
-                `Unable to place piece, invalid exit type at direction ${node.direction}`,
-              );
-            }
-          });
-
-        trackExternalNodes
-          .filter((node) => node.traverseBorder() instanceof ExternalNode)
-          .forEach((node) => {
-            const adjacentExternalNode = node.traverseBorder() as ExternalNode;
-            const adjacentTrack =
-              adjacentExternalNode.cell.placedPiece?.piece.findTrackForDirection(
-                adjacentExternalNode.direction,
-              );
-            if (adjacentTrack !== undefined) {
-              isTrackConnected = true;
-              if (adjacentTrack.type !== trackType) {
-                throw Error(
-                  `Unable to place piece next to another due to conflicting track types at ${node.direction}`,
-                );
-              }
-            }
-          });
-
-        return isTrackConnected;
-      });
-
-    if (!hasAnyConnection) {
-      throw Error("No adjacent exit or piece available to connect to");
-    }
-  }
 }

interface/types/Piece.ts

@@ -1,4 +1,4 @@
-import { Direction, rotateDirection } from "../constants/Direction";
+import { Direction } from "../constants/Direction";
 import { TrackType } from "../constants/TrackType";
 import { Cell } from "./Cell";
 import { InternalNode } from "./InternalNode";
@@ -65,33 +65,6 @@ export class Piece {
     }
   }
 
-  rotate(rotation: 0 | 90 | 180 | 270): Piece {
-    return new Piece({
-      useInternalTracks: this.internalNode !== undefined,
-      internalNodeType: this.internalNode?.type,
-      trackDefinitions: Array.from(this.tracks).map((track) => {
-        if (track.joinedPoints.secondPoint instanceof InternalNode) {
-          return {
-            type: track.type,
-            startPoint: rotateDirection(
-              track.joinedPoints.firstPoint,
-              rotation,
-            ),
-          };
-        } else {
-          return {
-            type: track.type,
-            startPoint: rotateDirection(
-              track.joinedPoints.firstPoint,
-              rotation,
-            ),
-            endPoint: rotateDirection(track.joinedPoints.secondPoint, rotation),
-          };
-        }
-      }),
-    });
-  }
-
   toPlacedPiece(cell: Cell) {
     return new PlacedPiece(
       new Set(

web/src/pages/game/GamePage.tsx

@@ -16,7 +16,6 @@ const GamePage = () => {
         pieceId: getRandomPieceId(),
         isSelected: false,
         isDisabled: false,
-        rotation: 0,
       };
     }),
   );

web/src/pages/game/components/BoardCell.scss

@@ -15,18 +15,6 @@
         &:nth-child(3) {
             top: -40px;
         }
-
-        &.rotate-90 {
-            transform: rotate(-90deg);
-        }
-
-        &.rotate-180 {
-            transform: rotate(180deg);
-        }
-
-        &.rotate-270 {
-            transform: rotate(90deg);
-        }
     }
 
     &.house {

web/src/pages/game/components/BoardCell.tsx

@@ -1,6 +1,5 @@
 import { Cell, directions, Exit, PieceId } from "interface";
 import "./BoardCell.scss";
-import { useState } from "react";
 
 export interface BoardCellProps {
   cell: Cell;
@@ -8,7 +7,6 @@ export interface BoardCellProps {
     pieceId: PieceId;
     isSelected: boolean;
     isDisabled: boolean;
-    rotation: number;
   }[];
   setDice: React.Dispatch<
     React.SetStateAction<
@@ -16,7 +14,6 @@ export interface BoardCellProps {
         pieceId: PieceId;
         isSelected: boolean;
         isDisabled: boolean;
-        rotation: number;
       }[]
     >
   >;
@@ -25,15 +22,11 @@ export interface BoardCellProps {
 
 const BoardCell = (props: BoardCellProps) => {
   const { cell, dice, setDice, refreshBoardRender } = props;
-  const [pieceRotationAngle, setPieceRotationAngle] = useState(0);
   const handleBoardCellClick = () => {
     const selectedDie = dice.find((die) => die.isSelected);
     if (!selectedDie) return;
     try {
-      cell.placePiece(
+      cell.placePiece(selectedDie.pieceId);
-        selectedDie.pieceId,
-        selectedDie.rotation as 0 | 90 | 180 | 270,
-      );
     } catch (error) {
       console.log(error);
       return;
@@ -43,13 +36,12 @@ const BoardCell = (props: BoardCellProps) => {
         return die !== selectedDie
           ? die
           : {
-              ...selectedDie,
+              pieceId: selectedDie.pieceId,
               isSelected: false,
               isDisabled: true,
             };
       }),
     );
-    setPieceRotationAngle(selectedDie.rotation);
     refreshBoardRender();
   };
 
@@ -72,10 +64,7 @@ const BoardCell = (props: BoardCellProps) => {
         );
       })}
       {cell.placedPiece && (
-        <img
+        <img className="piece" src={`pieces/${cell.placedPiece.id}.jpeg`}></img>
-          className={`piece rotate-${pieceRotationAngle}`}
-          src={`pieces/${cell.placedPiece.id}.jpeg`}
-        ></img>
       )}
     </div>
   );

web/src/pages/game/components/DiceSet.scss

@@ -1,25 +1,3 @@
-.dice-set-actions {
-    display: flex;
-    flex-direction: row;
-    padding: 50px 50px 0;
-    width: max-content;
-    margin: auto;
-
-    img {
-        border: 3px solid green;
-        box-shadow: 0 0 10px green;
-        border-radius: 20%;
-        padding: 5px;
-        width: 80px;
-        height: 80px;
-        margin-right: 10px;
-
-        &.icon-inverted {
-            transform: scaleX(-1);
-        }
-    }
-}
-
 .dice-set {
     display: grid;
     grid-template-columns: repeat(2, auto);

web/src/pages/game/components/DiceSet.tsx

@@ -1,14 +1,12 @@
 import { PieceId } from "interface";
 import "./DiceSet.scss";
 import Die from "./Die";
-import React from "react";
 
 export interface DiceSetProps {
   dice: {
     pieceId: PieceId;
     isSelected: boolean;
     isDisabled: boolean;
-    rotation: number;
   }[];
   setDice: React.Dispatch<
     React.SetStateAction<
@@ -16,7 +14,6 @@ export interface DiceSetProps {
         pieceId: PieceId;
         isSelected: boolean;
         isDisabled: boolean;
-        rotation: number;
       }[]
     >
   >;
@@ -27,7 +24,6 @@ const DiceSet = (props: DiceSetProps) => {
     pieceId: PieceId;
     isSelected: boolean;
     isDisabled: boolean;
-    rotation: number;
   }) => {
     if (die.isDisabled) return;
     const newDiceState = dice.map((oldDie) => {
@@ -40,37 +36,12 @@ const DiceSet = (props: DiceSetProps) => {
     setDice(newDiceState);
   };
 
-  const handleRotateButton = (rotation: number) => {
-    const newDiceState = dice.map((die) => {
-      if (!die.isSelected) return die;
-      const rotationAngle = (die.rotation + rotation + 360) % 360;
-      return {
-        ...die,
-        rotation: rotationAngle,
-      };
-    });
-    setDice(newDiceState);
-  };
-
   return (
-    <React.Fragment>
-      <div className="dice-set-actions">
-        <img
-          src="./rotate-icon.png"
-          onClick={() => handleRotateButton(-90)}
-        ></img>
-        <img
-          src="./rotate-icon.png"
-          className="icon-inverted"
-          onClick={() => handleRotateButton(90)}
-        ></img>
-      </div>
     <div className="dice-set">
       {dice.map((die) => (
         <Die die={die} handleDieClick={handleDieClick} />
       ))}
     </div>
-    </React.Fragment>
   );
 };
 

web/src/pages/game/components/Die.scss

@@ -15,18 +15,4 @@
     &.disabled {
         box-shadow: 0 0 20px grey;
     }
-
-    &.rotate-90 {
-        transform: rotate(-90deg);
-    }
-
-    &.rotate-180 {
-        transform: rotate(180deg);
-    }
-
-    &.rotate-270 {
-        transform: rotate(90deg);
-    }
-
-    transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
 }

web/src/pages/game/components/Die.tsx

@@ -2,31 +2,23 @@ import { PieceId } from "interface";
 import "./Die.scss";
 
 interface DieProps {
-  die: {
+  die: { pieceId: PieceId; isSelected: boolean; isDisabled: boolean };
-    pieceId: PieceId;
-    isSelected: boolean;
-    isDisabled: boolean;
-    rotation: number;
-  };
   handleDieClick: (die: {
     pieceId: PieceId;
     isSelected: boolean;
     isDisabled: boolean;
-    rotation: number;
   }) => void;
 }
 
 const Die = (props: DieProps) => {
   const { die, handleDieClick } = props;
-  const { pieceId, isSelected, isDisabled, rotation } = die;
+  const { pieceId, isSelected, isDisabled } = die;
-  const className =
-    "dice" +
-    (isSelected ? " selected" : "") +
-    (isDisabled ? " disabled" : "") +
-    ` rotate-${rotation}`;
 
   return (
-    <div className={className} onClick={() => handleDieClick(die)}>
+    <div
+      className={`dice${isSelected ? " selected" : ""}${isDisabled ? " disabled" : ""}`}
+      onClick={() => handleDieClick(die)}
+    >
       <img src={`pieces/${pieceId}.jpeg`}></img>
     </div>
   );

web/src/pages/game/components/GameBoard.tsx

@@ -8,7 +8,6 @@ export interface GameBoardProps {
     pieceId: PieceId;
     isSelected: boolean;
     isDisabled: boolean;
-    rotation: number;
   }[];
   setDice: React.Dispatch<
     React.SetStateAction<
@@ -16,7 +15,6 @@ export interface GameBoardProps {
         pieceId: PieceId;
         isSelected: boolean;
         isDisabled: boolean;
-        rotation: number;
       }[]
     >
   >;