Add index page

khang-nd · khang-nd · commit 1877e88a09b1 · 2025-01-19T16:33:03.000+07:00
diff --git a/README.md b/README.md
@@ -20,3 +20,5 @@ To make your game's interface fit seamlessly into Brick 1100, there's a [Bridge
 Once your pull request is merged, your game will show up at `https://brick1100-games.visnalize.com/<your-game>`, and you can then access it from Brick 1100.
 
 ## Game list
+
+> See the [Index page](https://brick1100-games.visnalize.com).
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brick 1100 Games</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
+    <style>
+        .container {
+            padding: 4rem 2rem;
+        }
+
+        ul {
+            list-style: none;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 2rem;
+            text-align: center;
+        }
+
+        iframe {
+            --height: 400px;
+            height: var(--height);
+            width: calc(var(--height) * 32 / 72);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Brick 1100 Games</h1>
+        <ul id="list"></ul>
+    </div>
+
+    <script src="https://unpkg.com/mithril/mithril.js"></script>
+    <script>
+        const list = document.getElementById("list");
+        const gameUrl = "https://brick1100-games.visnalize.com";
+        const previewerUrl = "https://brick1100.visnalize.com/#/online/previewer";
+
+        fetch("https://api.github.com/repos/Visnalize/brick-1100-games/contents")
+            .then((response) => response.json())
+            .then((data) => {
+                const items = data
+                    .filter((item) => item.type === "dir")
+                    .map((item) => {
+                        const name = item.name
+                            .split("-")
+                            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                            .join(" ");
+                        const iframe = m("iframe", {
+                            src: `${previewerUrl}?url=${gameUrl}/${item.name}`,
+                            frameborder: "0",
+                        });
+                        return m("li", [
+                            m("a", {
+                                href: `${gameUrl}/${item.name}`,
+                                target: "_blank",
+                            }, m("h2", name)),
+                            iframe,
+                        ]);
+                    });
+                m.render(list, items);
+            });
+    </script>
+</body>
+
+</html>
