Created baseline for game page grid layout

web/src/App.scss

@@ -2,8 +2,5 @@
     $theme-color: "pumpkin"
 );
 
-#root, #app {
+@import "./pages/game/GamePage.scss";
-    height: 100%;
+@import "./pages/game/components/GameBoard.scss";
-    width: 100%;
-    padding: 0;
-}

web/src/App.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Socket } from "socket.io-client";
 import LandingPage from "./pages/landing/LandingPage";
+import GamePage from "./pages/game/GamePage";
 
 export interface AppProps {
   socket: Socket;
@@ -10,6 +11,7 @@ const App = (props: AppProps) => {
   return (
     <div id="app">
       <LandingPage {...props} />
+      <GamePage />
     </div>
   );
 };

web/src/pages/game/GamePage.scss

@@ -0,0 +1,5 @@
+h1 {
+    text-align: center;
+    padding: 10px;
+    margin: 0;
+}

web/src/pages/game/GamePage.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import GameBoard from "./components/GameBoard";
+
+const GamePage = () => {
+  return (
+    <React.Fragment>
+      <h1>Game Page Title</h1>
+      <div className="game-panel">
+        <GameBoard />
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default GamePage;

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

@@ -0,0 +1,79 @@
+.game-board {
+    height: 700px;
+    width: 700px;
+    display: grid;
+    grid-template-columns: repeat(11, auto);
+    gap: auto;
+    padding: 10px;
+
+    .cell {
+        width: 60px;
+        height: 60px;
+        border: 2px solid black;
+        border-radius: 10%;
+    }
+
+    .v-exit {
+        width: 60px;
+        height: 30px;
+        
+        > div {
+            width: 20px;
+            height: 100%;
+            margin: auto;
+            border: solid black;
+            border-width: 0 1px;
+
+            .dotted {
+                margin: auto;
+                border: dashed black;
+                border-width: 0 1px;
+                height: 100%;
+                width: 0;
+            }
+        }
+
+        &:has(.v-exit-up) {
+            margin-bottom: -9px;
+        }
+
+        &:has(.v-exit-down) {
+            margin-top: -9px;
+        }
+    }
+
+    .h-exit {
+        height: 60px;
+        width: 30px;
+        
+        > div {
+            height: 20px;
+            width: 100%;
+            margin: auto;
+            border: solid black;
+            border-width: 1px 0;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+
+            .dotted {
+                margin: auto;
+                border: dashed black;
+                border-width: 1px 0;
+                width: 100%;
+                height: 0;
+                position: relative;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        &:has(.h-exit-left) {
+            margin-right: -9px;
+        }
+
+        &:has(.h-exit-right) {
+            margin-left: -9px;
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+const GameBoard = () => {
+  const range = (n: number) => Array.from(Array(n).keys());
+  const cells = range(11).flatMap((rowIndex) => {
+    return range(11).map((colIndex) => {
+      return { rowIndex, colIndex };
+    });
+  });
+
+  return (
+    <div className="game-board">
+      {cells.map(({ rowIndex, colIndex }) => {
+        if (
+          (rowIndex === 0 || rowIndex === 10) &&
+          (colIndex === 0 || colIndex === 10)
+        ) {
+          return <div className="corner" />;
+        }
+        if (rowIndex === 0) {
+          return (
+            <div className="v-exit">
+              <div className="v-exit-up">
+                <div className="dotted" />
+              </div>
+            </div>
+          );
+        }
+        if (rowIndex === 10) {
+          return (
+            <div className="v-exit">
+              <div className="v-exit-down">
+                <div className="dotted" />
+              </div>
+            </div>
+          );
+        }
+        if (colIndex === 0) {
+          return (
+            <div className="h-exit">
+              <div className="h-exit-left">
+                <div className="dotted" />
+              </div>
+            </div>
+          );
+        }
+        if (colIndex === 10) {
+          return (
+            <div className="h-exit">
+              <div className="h-exit-right">
+                <div className="dotted" />
+              </div>
+            </div>
+          );
+        }
+        return <div className="cell"></div>;
+      })}
+    </div>
+  );
+
+  /*
+  {range(9).map(() => (
+        <div className="v-exit v-exit-up">
+          <div className="dotted"></div>
+        </div>
+      ))}
+      {range(81).map(() => (
+        <div className="cell"></div>
+      ))}
+      {range(9).map(() => (
+        <div className="v-exit v-exit-down">
+          <div className="dotted"></div>
+        </div>
+      ))}
+        */
+};
+
+export default GameBoard;