Set up dice view from modelled pieces

interface/index.ts

@@ -1,10 +1,15 @@
 export * from "./constants/CellType";
 export * from "./constants/Direction";
 export * from "./constants/ExitType";
+export * from "./constants/InternalNodeType";
+export * from "./constants/Pieces";
 export * from "./constants/TrackType";
 export * from "./types/Border";
 export * from "./types/Cell";
 export * from "./types/Exit";
 export * from "./types/ExternalNode";
+export * from "./types/InternalNode";
+export * from "./types/Piece";
+export * from "./types/PlacedPiece";
 export * from "./types/Node";
 export * from "./BoardBuilder";

interface/package-lock.json

@@ -8,6 +8,9 @@
       "name": "interface",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "uuid": "^11.0.3"
+      },
       "devDependencies": {
         "@eslint/js": "^8.0.0",
         "@types/node": "^22.9.0",
@@ -1855,6 +1858,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/uuid": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz",
+      "integrity": "sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

interface/package.json

@@ -21,5 +21,8 @@
     "globals": "^15.12.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.15.0"
+  },
+  "dependencies": {
+    "uuid": "^11.0.3"
   }
 }

interface/types/InternalNode.ts

@@ -1,4 +1,4 @@
-import { randomUUID } from "crypto";
+import { v4 as uuidv4 } from "uuid";
 import { InternalNodeType } from "../constants/InternalNodeType";
 
 export class InternalNode {
@@ -6,7 +6,7 @@ export class InternalNode {
   type: InternalNodeType;
 
   constructor(type: InternalNodeType) {
-    this.id = randomUUID();
+    this.id = uuidv4();
     this.type = type;
   }
 }

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

@@ -1,16 +1,18 @@
+import { PieceId } from "interface";
 import "./DiceSet.scss";
 
 const DiceSet = () => {
-  const diceImages = [1, 2, 3, 4]
-    .map(() => Math.floor(Math.random() * 22 + 1))
-    .map((index) => ("0" + index).slice(-2))
-    .map((index) => `${process.env.PUBLIC_URL}/pieces/P${index}.jpeg`);
+  const getRandomPieceId = () => {
+    const randomId = Math.floor(Math.random() * Object.keys(PieceId).length);
+    return Object.values(PieceId)[randomId];
+  };
+  const displayedPieceIds = [1, 2, 3, 4].map(getRandomPieceId);
 
   return (
     <div className="dice-set">
-      {diceImages.map((file) => (
+      {displayedPieceIds.map((pieceId) => (
         <div className="dice">
-          <img src={file}></img>
+          <img src={`pieces/${pieceId}.jpeg`}></img>
         </div>
       ))}
     </div>