Remove skeleton site

RetroAI · Mar 13, 2024 · 7cdad1f · 7cdad1f
1 parent 63704c0
commit 7cdad1f
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 222 deletions.
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -1,20 +1,48 @@
 <!doctype html>
 <html
-  xmlns="http://www.w3.org/1999/xhtml"
-  prefix="og: http://ogp.me/ns#"
   lang="en-US"
   xml:lang="en-US"
+  xmlns="http://www.w3.org/1999/xhtml"
+  prefix="og: http://ogp.me/ns#"
+  xmlns:og="http://ogp.me/ns#"
 >
   <head>
     <title>retro.ai</title>
 
-    <!-- Open Graph metadata -->
-    <meta property="og:type" content="game" />
-
     <meta charset="UTF-8" />
 
-    <!-- Link the favicon -->
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://retro.ai/" />
+    <meta
+      property="og:title"
+      content="retro.ai - Preserving Gaming History for AI to beat"
+    />
+    <meta
+      property="og:description"
+      content="retro.ai is dedicated to preserving human gaming history, and training an AI to beat it."
+    />
+    <meta property="og:image" content="https://retro.ai/icon.png" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://retro.ai/" />
+    <meta
+      property="twitter:title"
+      content="retro.ai - Preserving Gaming History for AI to beat"
+    />
+    <meta
+      property="twitter:description"
+      content="retro.ai is dedicated to preserving human gaming history, and training an AI to beat it."
+    />
+    <meta property="twitter:image" content="https://retro.ai/icon.png" />
+
+    <!-- Link the favicons -->
+    <link rel="icon" type="image/webp" href="/icon.webp" />
+    <link rel="icon" type="image/png" href="/icon.png" />
+
+    <!-- Add Apple Touch icon (when an iOS device adds the site to their home screen) -->
+    <link rel="apple-touch-icon" sizes="1024x1024" href="/icon.png" />
 
     <!-- Viewporting -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -23,7 +51,7 @@
     <link
       rel="manifest"
       type="application/manifest+json"
-      href="manifest.json"
+      href="/manifest.json"
     />
 
     <!-- Start Single Page Apps for GitHub Pages -->
@@ -59,6 +87,7 @@
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
 
+    <!-- Prevent white flashes by starting with a black background -->
     <style type="text/css">
       body {
         background: #000000;
@@ -67,7 +96,11 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+
+    <!-- React will attach to this div -->
+    <div id="root" />
+
+    <!-- Vite entry point -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/src/frontend/public/icon.png b/src/frontend/public/icon.png
diff --git a/src/frontend/public/icon.webp b/src/frontend/public/icon.webp
diff --git a/src/frontend/public/manifest.json b/src/frontend/public/manifest.json
@@ -8,8 +8,14 @@
   "theme_color": "#ffffff",
   "icons": [
     {
-      "src": "vite.svg",
-      "type": "image/svg+xml"
+      "src": "icon.webp",
+      "sizes": "1024x1024",
+      "type": "image/webp"
+    },
+    {
+      "src": "icon.png",
+      "sizes": "1024x1024",
+      "type": "image/png"
     }
   ]
 }
diff --git a/src/frontend/public/vite.svg b/src/frontend/public/vite.svg
diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
@@ -6,51 +6,12 @@
  * See the file LICENSE.txt for more information.
  */
 
-nav ul {
-  position: relative;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  background-color: #333;
-}
-
-nav li {
-  float: left;
-}
-
-nav li a {
-  display: block;
-  color: white;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-}
-
-nav li a:hover {
-  background-color: #111;
-}
-
-/*
- * The following should ensure the button has no background, no border, and
- * the SVG should be visible
- */
-.showNavbarButton {
-  background: transparent !important; /* Using !important to avoid override by other styles */
-  border: none !important; /* Remove border */
-  cursor: pointer; /* Pointer cursor on hover */
-  padding: 8px; /* Adjust padding */
-}
-
-.hideNavbarButton {
-  background-color: transparent; /* Transparent background */
-  color: #ffffff; /* White arrow */
-  border: none; /* Remove border */
-  cursor: pointer; /* Pointer cursor on hover */
-  padding: 8px; /* Add some padding */
-  font-size: 1.2rem; /* Adjust font-size */
-  position: absolute; /* Positioning */
-  right: 0; /* Align to the right */
-  top: 50%; /* Center vertically */
-  transform: translateY(-50%); /* Centering adjustment */
+.canvasContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #000000;
+  overflow: hidden; /* Prevent scrolling */
 }
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
@@ -8,106 +8,15 @@
 
 import "./App.css";
 
-import React, { useState } from "react";
-import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import React from "react";
 
-import BlankPage from "./components/BlankPage";
-import HomePage from "./components/HomePage";
+import RetroEngineComponent from "./components/RetroEngineComponent";
 
-/*
- * Main app definition
- *
- * The app consists of a navigation bar and a router. The home page is
- * the main game page, and the blank page is a placeholder for future
- * pages.
- */
 const App: React.FC = () => {
-  const [isNavbarVisible, setIsNavbarVisible] = useState(true);
-
   return (
-    <Router>
-      <div>
-        {isNavbarVisible ? (
-          <nav>
-            <ul>
-              <li>
-                <Link to="/">Home</Link>
-              </li>
-              <li>
-                <Link to="/blank">Blank</Link>
-              </li>
-              <li>
-                <button
-                  className="hideNavbarButton"
-                  onClick={() => setIsNavbarVisible(false)}
-                  aria-label="Hide Menu"
-                >
-                  {/*
-                   * Show an up arrow in the shape of a caret to hide the navbar menu
-                   *
-                   * Explanation of SVG path:
-                   *
-                   *   M512 288: Move to the starting point (512, 288).
-                   *   L160 640: Draw a line from the starting point to (160, 640).
-                   *   L192 640: Extend the bottom left of the arrow to (192, 640).
-                   *   L192 736: Draw a line to (192, 736).
-                   *   L832 736: Draw a line to (832, 736).
-                   *   L832 640: Extend the bottom right of the arrow to (832, 640).
-                   *   L864 640Z: Draw a line to (864, 640) and close the path.
-                   */}
-                  <svg
-                    viewBox="0 0 1024 1024"
-                    width="32"
-                    height="32"
-                    fill="#ffffff"
-                  >
-                    <path d="M512 288L160 640L192 640L192 736L832 736L832 640L864 640Z" />
-                  </svg>
-                </button>
-              </li>
-            </ul>
-          </nav>
-        ) : (
-          <button
-            className="showNavbarButton"
-            onClick={() => setIsNavbarVisible(true)}
-            aria-label="Show Menu"
-          >
-            {/*
-             * Show a hamburger icon to bring back the navbar menu
-             */}
-            <svg viewBox="0 0 32 32" width="32" height="32">
-              <rect
-                x="0"
-                y="4"
-                width="32"
-                height="4"
-                fill="rgba(255, 255, 255, 0.5)"
-              />
-              <rect
-                x="0"
-                y="14"
-                width="32"
-                height="4"
-                fill="rgba(255, 255, 255, 0.5)"
-              />
-              <rect
-                x="0"
-                y="24"
-                width="32"
-                height="4"
-                fill="rgba(255, 255, 255, 0.5)"
-              />
-            </svg>
-          </button>
-        )}
-
-        <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/blank" element={<BlankPage />} />
-        </Routes>
-      </div>
-    </Router>
+    <div className="canvasContainer">
+      <RetroEngineComponent />
+    </div>
   );
 };
 

diff --git a/src/frontend/src/assets/react.svg b/src/frontend/src/assets/react.svg
diff --git a/src/frontend/src/components/BlankPage.tsx b/src/frontend/src/components/BlankPage.tsx
diff --git a/src/frontend/src/components/HomePage.css b/src/frontend/src/components/HomePage.css
diff --git a/src/frontend/src/components/BlankPage.css → ...d/src/components/RetroEngineComponent.css b/src/frontend/src/components/BlankPage.css → ...d/src/components/RetroEngineComponent.css
@@ -6,10 +6,8 @@
  * See the file LICENSE.txt for more information.
  */
 
-.blankPageContainer {
-  background-color: #8b3d3d; /* Retro shade of red */
-  height: 100vh;
+canvas {
   width: 100%;
-  margin: 0;
-  padding: 0;
+  height: 100vh;
+  image-rendering: pixelated; /* Gives that retro, pixelated look for the graphics */
 }
diff --git a/src/frontend/src/components/HomePage.tsx → ...d/src/components/RetroEngineComponent.tsx b/src/frontend/src/components/HomePage.tsx → ...d/src/components/RetroEngineComponent.tsx
@@ -6,7 +6,7 @@
  * See the file LICENSE.txt for more information.
  */
 
-import "./HomePage.css";
+import "./RetroEngineComponent.css";
 
 import React, { useEffect, useRef } from "react";
 
@@ -22,9 +22,10 @@ declare module "../wasm/retro_engine.js" {
   }): Promise<MainModule>;
 }
 
-const HomePage: React.FC = () => {
+const RetroEngineComponent: React.FC = () => {
   // Reference to the canvas element
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const canvasRef: React.RefObject<HTMLCanvasElement> =
+    useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
     // Function to update the canvas size to cover the full screen
@@ -44,7 +45,7 @@ const HomePage: React.FC = () => {
 
     let engineInstance: RetroEngine | null = null;
 
-    async function initializeAndUseRetroEngine(): Promise<void> {
+    async function initializeRetroEngine(): Promise<void> {
       // Provide the locateFile function when initializing your WASM module
       const moduleOverrides: {
         locateFile: (file: string) => string;
@@ -68,7 +69,7 @@ const HomePage: React.FC = () => {
     }
 
     // Call the function to initialize and use the RetroEngine
-    initializeAndUseRetroEngine().catch(console.error);
+    initializeRetroEngine().catch(console.error);
 
     return (): void => {
       // Cleanup on component unmount
@@ -80,11 +81,7 @@ const HomePage: React.FC = () => {
   }, []);
 
   // Render the canvas element
-  return (
-    <div className="homePageContainer">
-      <canvas ref={canvasRef} id="retroEngine" />;
-    </div>
-  );
+  return <canvas ref={canvasRef} id="retroEngine" />;
 };
 
-export default HomePage;
+export default RetroEngineComponent;