Create dice view to present all available dice to place in the board

web/src/App.scss

@@ -1,6 +1,3 @@
 @use "node_modules/@picocss/pico/scss/pico" with (
     $theme-color: "pumpkin"
 );
-
-@import "./pages/game/GamePage.scss";
-@import "./pages/game/components/GameBoard.scss";

web/src/App.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Socket } from "socket.io-client";
 import LandingPage from "./pages/landing/LandingPage";
 import GamePage from "./pages/game/GamePage";
+import "./App.scss";
 
 export interface AppProps {
   socket: Socket;

web/src/pages/game/GamePage.scss

@@ -3,3 +3,14 @@ h1 {
     padding: 10px;
     margin: 0;
 }
+
+.game-panel {
+    user-select: none; /* Standard syntax */
+    display: flex;
+    flex-direction: row;
+
+    .right-panel {
+        display: flex;
+        flex-direction: column;
+    }
+}

web/src/pages/game/GamePage.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import GameBoard from "./components/GameBoard";
+import DiceSet from "./components/DiceSet";
+import "./GamePage.scss";
 
 const GamePage = () => {
   return (
@@ -7,6 +9,9 @@ const GamePage = () => {
       <h1>Game Page Title</h1>
       <div className="game-panel">
         <GameBoard />
+        <div className="rigth-panel">
+          <DiceSet />
+        </div>
       </div>
     </React.Fragment>
   );

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

@@ -0,0 +1,17 @@
+.dice-set {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 20px;
+    padding: 50px;
+
+    .dice {
+        height: 150px;
+        width: 150px;
+        border: 2px solid black;
+        border-radius: 10%;
+
+        img{
+            border-radius: 10%;
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+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`);
+
+  return (
+    <div className="dice-set">
+      {diceImages.map((file) => (
+        <div className="dice">
+          <img src={file}></img>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DiceSet;

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

@@ -1,6 +1,8 @@
 .game-board {
     height: 850px;
     width: 850px;
+    min-height: 850px;
+    min-width: 850px;
     display: grid;
     grid-template-columns: repeat(7, auto);
     gap: auto;

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

@@ -1,4 +1,5 @@
 import { buildBoard, Cell, directions, Exit } from "interface";
+import "./GameBoard.scss";
 
 const GameBoard = () => {
   const board: Cell[][] = buildBoard();