chore: all games

kaplayjs · Jan 5, 2025 · 3528ee8 · 3528ee8
1 parent 1f56d94
commit 3528ee8
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 14 deletions.
diff --git a/src/components/Arcade/FeaturedGame.css b/src/components/Arcade/FeaturedGame.css
@@ -1,3 +1,28 @@
+.game {
+    height: 220px;
+
+    & .title {
+        @apply text-lg inline;
+    }
+
+    & .description {
+        @apply inline;
+    }
+}
+
+
+.game[data-featured="true"]  {
+    height: 340px;
+
+    & .title {
+        @apply text-2xl;   
+    }
+
+    & .description {
+        @apply block;
+    }
+}
+
 .featured-game:hover .game-cover {
     opacity: 0; /* This comes from step 3 */
     -webkit-transition: opacity 500ms ease-in-out;

diff --git a/src/components/Arcade/FeaturedGame.astro → src/components/Arcade/Game.astro b/src/components/Arcade/FeaturedGame.astro → src/components/Arcade/Game.astro
@@ -6,33 +6,35 @@ import "./FeaturedGame.css";
 
 type Props = {
     id: number;
+    featured?: boolean;
 };
 
-const { id } = Astro.props;
+const { id, featured } = Astro.props;
 const game = gameList[id];
 ---
 
 <a href={`/arcade/${game.vanityUrl}`}>
     <article
-        class="featured-game | relative flex h-[340px] max-w-xl transform flex-col rounded-box transition-all delay-75 duration-200 ease-in-out hover:-rotate-3 hover:scale-110"
+        class="game relative flex max-w-xl transform flex-col rounded-box transition-all delay-75 duration-200 ease-in-out hover:-rotate-3 hover:scale-110"
         data-id={id}
+        data-featured={String(featured)}
     >
         <div class="absolute top-0 -z-10 h-full w-full">
             <div
-                class={`game-image | w-full h-full bg-cover bg-center rounded-box absolute`}
+                class={`game-image w-full h-full bg-cover bg-center rounded-box absolute`}
                 style={`background-image: url('/games/${id}/play.gif')`}
             >
             </div>
             <div
-                class={`game-cover | w-full h-full bg-cover bg-center rounded-box absolute`}
+                class={`game-cover w-full h-full bg-cover bg-center rounded-box absolute`}
                 style={`background-image: url('/games/${id}/thumb.png')`}
             >
             </div>
         </div>
         <main class="bottom-0 mt-auto space-y-2 bg-base-200 bg-opacity-90 p-6">
             <div>
-                <h1 class="text-2xl font-bold">{game.name}</h1>
-                <p class="text-sm">{game.developer}</p>
+                <h1 class="title font-bold">{game.name}</h1>
+                <p class="description text-sm">{game.developer}</p>
             </div>
             <p
                 class="text-xl italic"

diff --git a/src/pages/[...path]/arcade.astro b/src/pages/[...path]/arcade.astro
@@ -1,5 +1,6 @@
 ---
-import FeaturedGame from "@/components/Arcade/FeaturedGame.astro";
+import Game from "@/components/Arcade/Game.astro";
+import gameList from "@/data/games.json";
 import NavbarPage from "@/layouts/NavbarPage.astro";
 import { getStaticPathsByLocales } from "@/util/path";
 
@@ -22,14 +23,21 @@ const { lang } = Astro.props;
 >
     <meta name="robots" content="noindex, nofollow" slot="head" />
 
-    <main class="land h-full lg:pt-20">
-        <div>
-            <h1 class="text-center text-5xl font-bold">Featured games</h1>
+    <main class="h-full p-4">
+        <h1 class="text-center text-5xl font-bold">KAPLAY Arcade</h1>
+        <p class="text-center text-lg">
+            A collection of games using KAPLAY, super fresh and super fun!
+        </p>
 
-            <div class="flex flex-wrap items-center justify-center gap-20 p-20">
-                <FeaturedGame id={0} />
-                <FeaturedGame id={1} />
-            </div>
+        <div class="flex flex-wrap items-center justify-center gap-20 p-20">
+            <Game id={0} featured />
+            <Game id={1} featured />
+        </div>
+
+        <h2 class="text-center text-4xl font-bold">All Games</h2>
+
+        <div class="flex flex-wrap items-center justify-center gap-20 p-20">
+            {gameList.map((game) => <Game id={game.id} />)}
         </div>
     </main>
 </NavbarPage>