fix: images not loading in build, missing /play route (#7)

csesoc · Dec 18, 2023 · 7f9e244 · 7f9e244
1 parent ae7f6aa
commit 7f9e244
Show file tree

Hide file tree

Showing 12 changed files with 617 additions and 8,612 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/images/bee.png → public/bee.png b/src/images/bee.png → public/bee.png
diff --git a/src/images/circled.png → public/circled.png b/src/images/circled.png → public/circled.png
diff --git a/src/images/hive_logo.png → public/hive_logo.png b/src/images/hive_logo.png → public/hive_logo.png
diff --git a/src/images/home.png → public/home.png b/src/images/home.png → public/home.png
diff --git a/src/images/logo2.png → public/logo2.png b/src/images/logo2.png → public/logo2.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,23 +7,10 @@ import Rules from "./components/Rules";
 
 function App() {
   return (
-    // <div
-    //   style={{
-    //     position: "relative",
-    //     width: "100vw",
-    //     height: "100vh",
-    //     display: "flex",
-    //     flexDirection: "column",
-    //     justifyContent: "center",
-    //     alignItems: "center",
-    //   }}
-    // >
-    //   <GridBoard />
-    // </div>
-
     <Routes>
       <Route path="/" element={<MainPage />} />
       <Route path="/rules" element={<Rules />} />
+      <Route path="/play" element={<GridBoard />} />
     </Routes>
   );
 }

diff --git a/src/components/GridBoard.tsx b/src/components/GridBoard.tsx
@@ -48,46 +48,58 @@ const GridBoard = () => {
   };
 
   return (
-    <svg
-      className="grid"
-      viewBox={"-30 -30 300 300"}
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      preserveAspectRatio="xMidYMid"
+    <div
       style={{
-        position: "absolute",
-        height: "100%",
-        width: "100%",
+        position: "relative",
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
       }}
     >
-      <Layout
-        size={{ row: 10, col: 10 }}
-        spacing={1.1}
-        origin={{ row: 0, col: 0 }}
+      <svg
+        className="grid"
+        viewBox={"-30 -30 300 300"}
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid"
+        style={{
+          position: "absolute",
+          height: "100%",
+          width: "100%",
+        }}
       >
-        {gridHexCoordinates.map((coordinate) => (
-          <GridHex
-            row={coordinate.row}
-            col={coordinate.col}
-            handleClick={handleGridHexClick}
-            clickedPiece={clickedPiece}
-          />
-        ))}
-      </Layout>
-      <Layout
-        size={{ row: 8, col: 8 }}
-        spacing={1.375}
-        origin={{ row: 0, col: 0 }}
-      >
-        {pieceCoordinates.map((coordinate) => (
-          <Piece
-            row={coordinate.row}
-            col={coordinate.col}
-            handleClick={handlePieceClick}
-          />
-        ))}
-      </Layout>
-    </svg>
+        <Layout
+          size={{ row: 10, col: 10 }}
+          spacing={1.1}
+          origin={{ row: 0, col: 0 }}
+        >
+          {gridHexCoordinates.map((coordinate) => (
+            <GridHex
+              row={coordinate.row}
+              col={coordinate.col}
+              handleClick={handleGridHexClick}
+              clickedPiece={clickedPiece}
+            />
+          ))}
+        </Layout>
+        <Layout
+          size={{ row: 8, col: 8 }}
+          spacing={1.375}
+          origin={{ row: 0, col: 0 }}
+        >
+          {pieceCoordinates.map((coordinate) => (
+            <Piece
+              row={coordinate.row}
+              col={coordinate.col}
+              handleClick={handlePieceClick}
+            />
+          ))}
+        </Layout>
+      </svg>
+    </div>
   );
 };
 

diff --git a/src/components/MainPage.tsx b/src/components/MainPage.tsx
@@ -6,9 +6,9 @@ function MainPage() {
   return (
     <div className="main-container">
       <div className="logo-container">
-        <img src="src/images/bee.png"></img>
-        <img src="src/images/hive_logo.png"></img>
-        <img src="src/images/logo2.png"></img>
+        <img src="/bee.png"></img>
+        <img src="/hive_logo.png"></img>
+        <img src="/logo2.png"></img>
       </div>
       <div className="btn-container">
         <Link to="/play" id="btn-play-link">

diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx
@@ -7,7 +7,7 @@ function Rules() {
   return (
     <div className="rules-container">
       <Link to="/" id="btn-rules-link">
-        <img src="src/images/home.png" alt="home" style={{ width: "50px" }} />
+        <img src="/home.png" alt="home" style={{ width: "50px" }} />
       </Link>
       <h1>Hive Game Rules</h1>
       <img
@@ -17,7 +17,7 @@ function Rules() {
           right: "10vw",
           border: "10px solid black",
         }}
-        src="src/images/circled.png"
+        src="/circled.png"
       ></img>
       <div className="description-container">
         <h2>Components</h2>

diff --git a/tsconfig.json b/tsconfig.json
@@ -34,7 +34,9 @@
     } /* Specify a set of entries that re-map imports to additional lookup locations. */,
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    "types": [
+      "vite/client"
+    ] /* Specify type package names to be included without being referenced in a source file. */,
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */