Created baseline for game page grid layout

web/.eslintrc.js

@@ -13,5 +13,12 @@ module.exports = {
     jest: true,
   },
   ignorePatterns: [".eslintrc.js", "dist/"],
-  rules: {},
+  rules: {
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+      },
+    ],
+  },
 };

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,20 +1,15 @@
-import React from "react";
 import { io } from "socket.io-client";
+import GamePage from "./pages/game/GamePage";
 
 function App() {
   const socket = io("http://localhost:3010");
-  const emitData = () =>
-    console.log(socket.emit("example-request", "custom-request"));
   socket.on("example-response", (data) =>
     console.log(`Received response in front end with data: ${data}`),
   );
 
   return (
     <div className="App">
-      <header className="App-header">
+      <GamePage />
-        <button onClick={emitData}>Emit Data</button>
-        Hello World! Front
-      </header>
     </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;