Add more games, add fullscreen button, and remove testing marketplace items.

public/games

@@ -1 +1 @@
-Subproject commit 731e408a4b6802a99ff4916cc310199c8420ca45
+Subproject commit 2beae2ca136865d7a78ce42fea0f590c24371a1f

public/img/games/fullscreen.svg

@@ -0,0 +1,4 @@
+<svg stroke="#fff" fill="#fff" stroke-width="0" viewBox="0 0 256 256" height="1em" width="1em"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M220,48V88a12,12,0,0,1-24,0V60H168a12,12,0,0,1,0-24h40A12,12,0,0,1,220,48ZM88,196H60V168a12,12,0,0,0-24,0v40a12,12,0,0,0,12,12H88a12,12,0,0,0,0-24Zm120-40a12,12,0,0,0-12,12v28H168a12,12,0,0,0,0,24h40a12,12,0,0,0,12-12V168A12,12,0,0,0,208,156ZM88,36H48A12,12,0,0,0,36,48V88a12,12,0,0,0,24,0V60H88a12,12,0,0,0,0-24Z"></path>
+</svg>

src/components/GameItem.astro

@@ -3,30 +3,37 @@ const { game } = Astro.props;
 ---
 
 <div class="game" data-name={game.name}>
-  <a href=`/game/${game.slug}`>
+  <a class="game-link" href=`/game/${game.slug}`>
     <img class="game-img" src={game.image} alt="" />
-  </a>
     <p class="game-title">{game.name}</p>
+  </a>
 </div>
 
 <style>
   .game {
     border: 2px solid var(--text-color);
     padding: 1rem;
+    padding-bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    border-radius: 15px;
+    border-radius: 10px;
   }
   .game-img {
     width: 128px;
     height: 128px;
+    border-radius: 5px;
+  }
+
+  .game-link {
+    text-decoration: none;
   }
 
   .game-title {
     color: var(--text-color);
     text-align: center;
-    max-width: 125px;
+    font-size: 18px;
+    height: 48px;
   }
 </style>

src/json/games.json

@@ -22,6 +22,11 @@
     "image": "/games/baldi/logo.png",
     "slug": "baldi"
   },
+  "basketball-stars": {
+    "name": "Basketball Stars",
+    "image": "/games/basketball-stars/logo.png",
+    "slug": "basketball-stars"
+  },
   "cannon-basketball-4": {
     "name": "Cannon Basketball 4",
     "image": "/games/cannon-basketball-4/logo.png",
@@ -213,6 +218,12 @@
     "image": "/games/retro-bowl/logo.png",
     "slug": "retro-bowl"
   },
+  "rooftop-sniper": {
+    "name": "Rooftop Snipers",
+    "image": "/games/rooftop-sniper/logo.png",
+    "slug": "rooftop-sniper",
+    "unity": true
+  },
   "sans-fight": {
     "name": "Sans Fight",
     "image": "/games/sans-fight/icon-256.png",
@@ -228,11 +239,6 @@
     "image": "/games/sm64/logo.png",
     "slug": "sm64"
   },
-  "solitaire": {
-    "name": "Solitaire",
-    "image": "/games/solitaire/logo.png",
-    "slug": "solitaire"
-  },
   "suika-combination": {
     "name": "Suika Combination",
     "image": "/games/suika-combination/logo.webp",
@@ -248,6 +254,12 @@
     "image": "/games/there-is-no-game/logo.png",
     "slug": "there-is-no-game"
   },
+  "tunnelrush": {
+    "name": "Tunnel Rush",
+    "image": "/games/tunnelrush/logo.jpg",
+    "slug": "tunnelrush",
+    "unity": true
+  },
   "ul6": {
     "name": "Ultima 6",
     "image": "/games/ul6/logo.png",

src/json/marketplace.json

@@ -17,50 +17,5 @@
     "script": "/marketplace/oled-theme/theme.css",
     "type": "theme",
     "themeName": "oled"
-  },
-  "dev.wearr.oled-theme2": {
-    "title": "OLED Theme",
-    "description": "A beautiful OLED theme for Alu.",
-    "version": "0.0.1",
-    "image": "/marketplace/oled-theme/theme.png",
-    "script": "/marketplace/oled-theme/theme.css",
-    "type": "theme",
-    "themeName": "oled"
-  },
-  "dev.wearr.oled-theme3": {
-    "title": "OLED Theme",
-    "description": "A beautiful OLED theme for Alu.",
-    "version": "0.0.1",
-    "image": "/marketplace/oled-theme/theme.png",
-    "script": "/marketplace/oled-theme/theme.css",
-    "type": "theme",
-    "themeName": "oled"
-  },
-  "dev.wearr.oled-theme4": {
-    "title": "OLED Theme",
-    "description": "A beautiful OLED theme for Alu.",
-    "version": "0.0.1",
-    "image": "/marketplace/oled-theme/theme.png",
-    "script": "/marketplace/oled-theme/theme.css",
-    "type": "theme",
-    "themeName": "oled"
-  },
-  "dev.wearr.oled-theme5": {
-    "title": "OLED Theme",
-    "description": "A beautiful OLED theme for Alu.",
-    "version": "0.0.1",
-    "image": "/marketplace/oled-theme/theme.png",
-    "script": "/marketplace/oled-theme/theme.css",
-    "type": "theme",
-    "themeName": "oled"
-  },
-  "dev.wearr.oled-theme6": {
-    "title": "OLED Theme",
-    "description": "A beautiful OLED theme for Alu.",
-    "version": "0.0.1",
-    "image": "/marketplace/oled-theme/theme.png",
-    "script": "/marketplace/oled-theme/theme.css",
-    "type": "theme",
-    "themeName": "oled"
   }
 }

src/layouts/Layout.astro

@@ -88,6 +88,10 @@ const { title, optionalPreloads } = Astro.props;
         color: var(--text-color);
       }
 
+      h1, h2, h3, h4, h5, h6, p, span {
+        color: var(--text-color);
+      }
+
       [data-theme="mocha"] {
         /* Catppucin Mocha theme */
         --background-color: #1e1e2e;

src/pages/game/[game].astro

@@ -32,11 +32,16 @@ if (!gameData) {
         <iframe scrolling="no" src=`/games/${gameData.slug}` title={gameData.name} id="game-frame"/>
       }
       <div class="game-info">
+        <div class="game-info-top">
           <p class="game-title">{gameData.name}</p>
+          <img src="/img/games/fullscreen.svg" alt="Fullscreen" id="game-fullscreen" class="icn">
+        </div>
+        <div class="game-info-bottom">
           <p class="game-desc">{gameData.description}</p>
         </div>
       </div>
     </div>
+  </div>
 </Layout>
 
 <style>
@@ -63,6 +68,17 @@ if (!gameData) {
     background-color: var(--background-highlight);
     width: 1350px;
     padding: 1rem;
+    padding-top: 0;
+  }
+  .game-info-top {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.5rem;
+  }
+  .icn {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
   }
   .game-title {
     font-weight: bold;
@@ -90,4 +106,13 @@ if (!gameData) {
     let iframe = document.getElementById("game-frame") as HTMLIFrameElement;
     iframe?.contentWindow?.focus();
   })
+
+  let fullscreen = document.getElementById("game-fullscreen") as HTMLImageElement;
+
+  fullscreen.addEventListener("click", () => {
+    if (iframe.requestFullscreen) {
+      iframe.requestFullscreen();
+      iframe.focus();
+    }
+  });
 </script>