Set up dice view from modelled pieces

interface/index.ts

@@ -1,6 +1,8 @@
 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 "./server-events/CreateLobbyError";
 export * from "./server-events/ServerError";
@@ -13,5 +15,8 @@ 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.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "socket.io": "^4.8.1",
-    "socket.io-client": "^4.8.1"
+    "socket.io-client": "^4.8.1",
+    "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>