web/src/App.scss

@@ -1,3 +1,6 @@
 @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

@@ -1,6 +1,5 @@
 import { io } from "socket.io-client";
 import GamePage from "./pages/game/GamePage";
-import "./App.scss";
 
 function App() {
   const socket = io("http://localhost:3010");

web/src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
+import "./App.scss";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,

web/src/pages/game/GamePage.scss

@@ -3,14 +3,3 @@ 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,7 +1,5 @@
 import React from "react";
 import GameBoard from "./components/GameBoard";
-import DiceSet from "./components/DiceSet";
-import "./GamePage.scss";
 
 const GamePage = () => {
   return (
@@ -9,9 +7,6 @@ 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

@@ -1,17 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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,8 +1,6 @@
 .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,5 +1,4 @@
 import { buildBoard, Cell, directions, Exit } from "interface";
-import "./GameBoard.scss";
 
 const GameBoard = () => {
   const board: Cell[][] = buildBoard();