Add icons for special cells and fix piece placement issues

interface/types/Cell.ts

@@ -63,7 +63,7 @@ export class Cell {
           trackType: track.type,
         };
       })
-      .some(({ trackExternalNodes, trackType }) => {
+      .reduce((isConnected, { trackExternalNodes, trackType }) => {
         let isTrackConnected: boolean = false;
         trackExternalNodes
           .filter((node) => node.traverseBorder() instanceof Exit)
@@ -98,8 +98,8 @@ export class Cell {
             }
           });
 
-        return isTrackConnected;
-      });
+        return isConnected || isTrackConnected;
+      }, false);
 
     if (!hasAnyConnection) {
       throw Error("No adjacent exit or piece available to connect to");

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

@@ -3,18 +3,12 @@
     height: 100px;
     border: 2px solid black;
     border-radius: 10%;
+    position: relative;
 
     .piece {
         border-radius: 10%;
-        position: relative;
-
-        &:nth-child(2) {
-            top: -20px;
-        }
-
-        &:nth-child(3) {
-            top: -40px;
-        }
+        position: absolute;
+        top: 0;
 
         &.rotate-90 {
             transform: rotate(-90deg);
@@ -29,19 +23,23 @@
         }
     }
 
-    &.house {
-        background-color: blue;
+    .cell-type-icon {
+        width: 25px;
+        height: 25px;
+        padding: 2px;
+        margin: 2px;
+        position: absolute;
+        top: 0;
+        left: 0;
     }
+}
 
-    &.university {
-        background-color: orange;
-    }
+.cell .exit {
+    position: absolute;
+    width: 20px;
+    height: 20px;
 
-    &.factory {
-        background-color: grey;
-    }
-
-    .exit:has(.exit-road) {
+    &:has(.exit-road) {
         border: solid black;
         border-width: 0 1px;
 
@@ -55,21 +53,7 @@
         }
     }
 
-    .exit:has(.exit-road) {
-        border: solid black;
-        border-width: 0 1px;
-
-        .exit-road {
-            margin: auto;
-            width: 0;
-            height: 100%;
-            border: dashed black;
-            border-width: 0 1px;
-            transform: translate(calc(50% - 1px));
-        }
-    }
-
-    .exit:has(.exit-rail) {
+    &:has(.exit-rail) {
         border-width: 0 1px;
 
         .exit-rail {
@@ -82,7 +66,7 @@
         }
     }
 
-    .exit:has(.exit-ambivalent) {
+    &:has(.exit-ambivalent) {
         border-width: 0 1px;
         border-style: dotted;
 
@@ -95,47 +79,30 @@
             transform: translate(calc(50%));
         }
     }
-}
-
-.exit {
-    position: relative;
-    width: 20px;
-    height: 20px;
+    &:has(.exit-north), &:has(.exit-south) {
+        left: 50%;
+    }
 
     &:has(.exit-north) {
-        left: 50%;
         transform: translate(calc(-50% - 1px), -100%);
     }
 
     &:has(.exit-south) {
-        left: 50%;
         top: 100%;
         transform: translate(calc(-50% - 1px), 0%);
     }
 
+    &:has(.exit-east), &:has(.exit-west) {
+        top: 50%;
+    }
+
     &:has(.exit-east) {
         left: 100%;
-        top: 50%;
         transform: rotate(90deg) translate(-50%, 0);
     }
 
     &:has(.exit-west) {
         left: 0%;
-        top: 50%;
         transform: rotate(90deg) translate(-50%, 100%);
     }
-
-    &:has(.exit-north), &:has(.exit-south) {
-        + .exit:has(.exit-east) {
-            left: 100%;
-            transform: rotate(90deg) translate(-150%, 0);
-        }
-    }
-
-    &:has(.exit-north), &:has(.exit-south) {
-        + .exit:has(.exit-west) {
-            top: 50%;
-            transform: rotate(90deg) translate(-150%, 100%);
-        }
-    }
 }

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

@@ -1,4 +1,4 @@
-import { Cell, directions, Exit, PieceId } from "interface";
+import { Cell, CellType, directions, Exit, PieceId } from "interface";
 import "./BoardCell.scss";
 import { useState } from "react";
 
@@ -54,10 +54,7 @@ const BoardCell = (props: BoardCellProps) => {
   };
 
   return (
-    <div
-      className={"cell " + cell.cellType.toLowerCase()}
-      onClick={handleBoardCellClick}
-    >
+    <div className={"cell"} onClick={handleBoardCellClick}>
       {directions.map((direction) => {
         const traversedNode = cell.getNodeAt(direction).traverseBorder();
         const isExit = traversedNode instanceof Exit;
@@ -77,6 +74,12 @@ const BoardCell = (props: BoardCellProps) => {
           src={`pieces/${cell.placedPiece.id}.jpeg`}
         ></img>
       )}
+      {cell.cellType !== CellType.NORMAL && (
+        <img
+          className="cell-type-icon"
+          src={`./${cell.cellType.toLowerCase()}-icon.png`}
+        ></img>
+      )}
     </div>
   );
 };