chore: buttons idea

kaplayjs · Nov 11, 2024 · 7b934b8 · 7b934b8
1 parent 285a0a7
commit 7b934b8
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 7 deletions.
diff --git a/src/components/Arcade/FeaturedGame.astro b/src/components/Arcade/FeaturedGame.astro
@@ -33,7 +33,7 @@ const game = gameList[id];
             </div>
             <p
                 class="text-xl italic"
-                set:html={marked.parseInline(game.description)}
+                set:html={marked.parseInline(game.featuredDescription)}
             />
         </main>
         <div class="absolute -bottom-4 -right-4 rotate-12">

diff --git a/src/components/Arcade/GameView.astro b/src/components/Arcade/GameView.astro
@@ -2,6 +2,7 @@
 import gameList from "@/data/games.json";
 import "./FeaturedGame.css";
 import FriendsBelow, { type AssetName } from "../Util/FriendsBelow.astro";
+import { marked } from "marked";
 
 type Props = {
     id: number;
@@ -10,11 +11,16 @@ type Props = {
 const { id } = Astro.props;
 const game = gameList[id];
 const sticker = game.sticker as AssetName;
+const controlNames = Object.keys(game.controls) as any[];
+const controls = game.controls as any;
 ---
 
 <article class="game-view | relative mb-20 h-full w-full transform rounded-box">
     <div
-        class="flex-col:flex-row flex h-full w-full lg:items-start lg:justify-start">
+        class="flex-col:flex-row flex h-full w-full items-center lg:justify-start">
+        <div class="w-full max-w-md rounded-r-box bg-base-200">
+            <h1 class="p-4 text-3xl font-bold">{game.developer}</h1>
+        </div>
         <div class="relative flex flex-1 items-center justify-center">
             <FriendsBelow friends={[sticker, sticker, sticker]} offset={3}>
                 <iframe
@@ -26,8 +32,58 @@ const sticker = game.sticker as AssetName;
                 </iframe>
             </FriendsBelow>
         </div>
-        <div class="w-full max-w-md rounded-l-box bg-base-200">
-            <h1 class="p-4 text-3xl font-bold">{game.name}</h1>
+        <div class="w-full max-w-md space-y-4 rounded-l-box bg-base-200 p-4">
+            <h1 class="text-3xl font-bold">{game.name}</h1>
+            <p set:html={marked.parseInline(game.description)} />
+            <div class="divider"></div>
+            <div class="flex flex-wrap justify-center gap-4">
+                {
+                    controlNames.map((control) => {
+                        const input = controls[control];
+                        const keyboardInput = input["keyboard"];
+                        const isWasd = keyboardInput === "wasd";
+
+                        if (!keyboardInput) return;
+
+                        if (isWasd) {
+                            return (
+                                <div class="flex items-center justify-center gap-4">
+                                    <div>
+                                        <p class="font-bold uppercase">
+                                            {control}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <div class="flex w-full justify-center">
+                                            <kbd class="kbd">W</kbd>
+                                        </div>
+                                        <div class="flex w-full justify-center">
+                                            <kbd class="kbd">A</kbd>
+                                            <kbd class="kbd">S</kbd>
+                                            <kbd class="kbd">D</kbd>
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        } else {
+                            return (
+                                <div class="flex items-center justify-center gap-4">
+                                    <div>
+                                        <p class="font-bold uppercase">
+                                            {control}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <kbd class="kbd">
+                                            {keyboardInput.toUpperCase()}
+                                        </kbd>
+                                    </div>
+                                </div>
+                            );
+                        }
+                    })
+                }
+            </div>
         </div>
     </div>
 </article>
diff --git a/src/data/games.json b/src/data/games.json
@@ -5,22 +5,37 @@
     "developer": "FJ Team",
     "vanityUrl": "eggou",
     "sticker": "egg",
-    "description": "Beat a robo-chicken in a flying chicken game!",
+    "featuredDescription": "Beat a robo-chicken in a flying chicken game!",
+    "description": "A robo-chicken robbed the eggs of a chicken coop. Our protagonist, Eggou, is very angry and will take revenge on the robo-chicken. Help Eggou to recover the eggs and defeat the robo-chicken.",
     "tags": ["open-source"],
     "upload": "https://html-classic.itch.zone/html/8640582/index.html",
     "canvasWidth": 680,
-    "canvasHeight": 500
+    "canvasHeight": 500,
+    "controls": {
+      "move": {
+        "keyboard": "wasd"
+      },
+      "shoot": {
+        "keyboard": "space"
+      }
+    }
   },
   {
     "id": 1,
     "name": "Clickery Hexagon",
     "developer": "AmySpark",
     "vanityUrl": "clickery",
     "sticker": "pointer",
+    "featuredDescription": "Click an hexagon to make virtual numbers **go up**.",
     "description": "Click an hexagon to make virtual numbers **go up**.",
     "tags": ["open-source"],
     "upload": "https://html-classic.itch.zone/html/10093664-1071304/public/index.html",
     "canvasWidth": 1024,
-    "canvasHeight": 576
+    "canvasHeight": 576,
+    "controls": {
+      "interact": {
+        "mouse": "click"
+      }
+    }
   }
 ]