From 33e80ef1eb3d8c72e0bea231fd928638187afc4b Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Sun, 28 Jul 2024 21:13:43 -0500
Subject: [PATCH] Add 4 new games, add vertical property to metada, and update
 games page

---
 public/flash/instantiateFlash.js  |  1 +
 public/games                      |  2 +-
 src/json/games.json               | 17 +++++++++++++++++
 src/layouts/Layout.astro          |  8 ++++----
 src/pages/game/[game].astro       | 22 +++++++++++++++++++---
 src/pages/game/flash/[game].astro |  2 +-
 src/types.d.ts                    |  1 +
 7 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/public/flash/instantiateFlash.js b/public/flash/instantiateFlash.js
index 59f591b..de534ba 100644
--- a/public/flash/instantiateFlash.js
+++ b/public/flash/instantiateFlash.js
@@ -1,5 +1,6 @@
 const id = window.location.pathname.split("/").pop();
 if (id && RufflePlayer) {
+    document.title = `Flash Game - ${id}`;
     window.addEventListener("load", loadRuffle);
 } else {
     document.querySelector("#loader").classList.add("hidden");
diff --git a/public/games b/public/games
index e317026..a4e5ff6 160000
--- a/public/games
+++ b/public/games
@@ -1 +1 @@
-Subproject commit e3170261ecfbd6073322b3cfa500729936b5fa2e
+Subproject commit a4e5ff6876b65963183777c0fbb77c73632e3093
diff --git a/src/json/games.json b/src/json/games.json
index 69f11b3..aa8353a 100644
--- a/src/json/games.json
+++ b/src/json/games.json
@@ -57,6 +57,13 @@
     "slug": "bloons",
     "flash": true
   },
+  "bitlife": {
+    "name": "BitLife",
+    "image": "/games/bitlife/logo.png",
+    "slug": "bitlife",
+    "unity": true,
+    "vertical": true
+  },
   "cannon-basketball-4": {
     "name": "Cannon Basketball 4",
     "image": "/games/cannon-basketball-4/logo.png",
@@ -243,6 +250,11 @@
     "image": "/games/moto-x3m-winter/logo.png",
     "slug": "moto-x3m-winter"
   },
+  "pvz": {
+    "name": "Plants vs Zombies",
+    "image": "/games/pvz/logo.png",
+    "slug": "pvz"
+  },
   "retro-bowl": {
     "name": "Retro Bowl",
     "image": "/games/retro-bowl/logo.png",
@@ -279,6 +291,11 @@
     "image": "/games/superhot/logo.png",
     "slug": "superhot"
   },
+  "temple-run-2": {
+    "name": "Temple Run 2",
+    "image": "/games/temple-run-2/logo.png",
+    "slug": "temple-run-2"
+  },
   "there-is-no-game": {
     "name": "There is No Game",
     "image": "/games/there-is-no-game/logo.png",
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 69a066a..018a01c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -82,10 +82,6 @@ const { title, optionalPreloads } = Astro.props;
     <WelcomeLogging />
     <Footer />
     <style is:global>
-      :root {
-        --background-color: black;
-        --text-color: #fff;
-      }
       * {
         box-sizing: border-box;
       }
@@ -288,6 +284,10 @@ const { title, optionalPreloads } = Astro.props;
       }
     </style>
     <style is:global>
+      :root {
+        --background-color: black;
+        --text-color: #fff;
+      }
       [data-theme="alu"] {
         --background-color: #211d29;
         --background-highlight: #35314a;
diff --git a/src/pages/game/[game].astro b/src/pages/game/[game].astro
index 7e5cdf6..f432701 100644
--- a/src/pages/game/[game].astro
+++ b/src/pages/game/[game].astro
@@ -21,14 +21,22 @@ const gameData = isValidGameKey(game) ? gamesList[game] : null;
 if (!gameData) {
   return Astro.redirect("/en/games/");
 }
+
+let classList: string = "";
+
+if (gameData.vertical) {
+  classList += "vertical ";
+}
+
+classList = classList.trim();
 ---
 
-<Layout title="Game">
+<Layout title=`${gameData.name} | Alu`>
   <div id="main-content">
     <div class="game-container">
       {
         gameData.unity ? (
-          <iframe scrolling="no" src={`/game/unity/${gameData.slug}`} title={gameData.name} id="game-frame" />
+          <iframe scrolling="no" id="game-frame" class={classList} src={`/game/unity/${gameData.slug}`} title={gameData.name} id="game-frame" />
         ) : gameData.flash ? (
           <iframe scrolling="no" src={`/game/flash/${gameData.slug}`} title={gameData.name} id="game-frame" />
         ) : (
@@ -49,6 +57,11 @@ if (!gameData) {
 </Layout>
 
 <style>
+  .vertical {
+    height: 70vh !important;
+    width: 30% !important;
+    aspect-ratio: auto !important;
+  }
   #main-content {
     margin-top: 2rem;
   }
@@ -57,6 +70,9 @@ if (!gameData) {
     align-items: center;
     flex-direction: column;
     overflow: hidden;
+    background: var(--dropdown-background-color);
+    width: 80%;
+    margin: 0 auto;
     margin-bottom: 4rem;
   }
   #game-frame {
@@ -70,7 +86,7 @@ if (!gameData) {
     flex-direction: column;
     gap: 1rem;
     background-color: var(--background-highlight);
-    width: 1350px;
+    width: 100%;
     padding: 1rem;
     padding-top: 0;
   }
diff --git a/src/pages/game/flash/[game].astro b/src/pages/game/flash/[game].astro
index 2595748..e968eeb 100644
--- a/src/pages/game/flash/[game].astro
+++ b/src/pages/game/flash/[game].astro
@@ -9,7 +9,7 @@ export const prerender = false;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Radon Games</title>
+    <title>Game</title>
     <script src="https://cdn.jsdelivr.net/npm/@ruffle-rs/ruffle@0.1.0-nightly.2024.7.23/ruffle.min.js" is:inline></script>
     <script type="module" src="/flash/instantiateFlash.js" is:inline defer></script>
     <link rel="stylesheet" href="/unity/index.css" />
diff --git a/src/types.d.ts b/src/types.d.ts
index 150ccb2..b4488c0 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -60,6 +60,7 @@ type GameMetadata = {
   slug: string;
   unity?: boolean;
   flash?: boolean;
+  vertical?: boolean;
 };
 
 type GameList = {