From eb76b6b3d02d4c87721ab85918f00ce0e2ddf3d9 Mon Sep 17 00:00:00 2001
From: illusionTBA <illusionztba@gmail.com>
Date: Mon, 18 Nov 2024 15:24:36 -0500
Subject: [PATCH] games

---
 index.html                               |  11 ---
 package.json                             |   3 +-
 pnpm-lock.yaml                           |  97 +++++++++++++++++++++
 public/sw.js                             |   3 -
 src/components/hooks/useRuffle.tsx       |  71 +++++++++++++++
 src/components/hooks/useScript.tsx       |  18 ++++
 src/components/ui/card.tsx               |  76 ++++++++++++++++
 src/routeTree.gen.ts                     |  72 +++++++++++++---
 src/routes/games.tsx                     |  92 ++++++++++++++++++++
 src/routes/{index.lazy.tsx => index.tsx} |  31 ++++---
 src/routes/play.tsx                      | 105 +++++++++++++++++++++++
 vite.config.ts                           |   4 +
 12 files changed, 539 insertions(+), 44 deletions(-)
 create mode 100644 src/components/hooks/useRuffle.tsx
 create mode 100644 src/components/hooks/useScript.tsx
 create mode 100644 src/components/ui/card.tsx
 create mode 100644 src/routes/games.tsx
 rename src/routes/{index.lazy.tsx => index.tsx} (97%)
 create mode 100644 src/routes/play.tsx

diff --git a/index.html b/index.html
index 2fdad5a..8b88572 100644
--- a/index.html
+++ b/index.html
@@ -23,17 +23,6 @@
     <div id="root"></div>
     <script src="/scram/scramjet.controller.js"></script>
     <script>
-      // const scramjet = new ScramjetController({
-      //   codec: "xor",
-      //   prefix: "/~/scramjet/",
-      //   wasm: "/scram/scramjet.wasm.js",
-      //   codecs: "/scram/scramjet.codecs.js",
-      //   worker: "/scram/scramjet.worker.js",
-      //   thread: "/scram/scramjet.thread.js",
-      //   client: "/scram/scramjet.client.js",
-      //   shared: "/scram/scramjet.shared.js",
-      //   sync: "/scram/scramjet.sync.js",
-      // });
       const scramjet = new ScramjetController({
         prefix: "/~/scramjet/",
         files: {
diff --git a/package.json b/package.json
index 3596389..2672b23 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently -n \"vite,server\" \"vite\" \"pnpm tsx server.ts\"",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -55,6 +55,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.0",
     "eslint": "^9.14.0",
     "eslint-plugin-react-hooks": "5.1.0-rc-fb9a90fa48-20240614",
     "eslint-plugin-react-refresh": "^0.4.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15b454a..df36e10 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,6 +135,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
+      concurrently:
+        specifier: ^9.1.0
+        version: 9.1.0
       eslint:
         specifier: ^9.14.0
         version: 9.14.0(jiti@1.21.6)
@@ -1649,6 +1652,10 @@ packages:
   class-variance-authority@0.7.0:
     resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
 
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
   clsx@1.2.1:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
@@ -1692,6 +1699,11 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  concurrently@9.1.0:
+    resolution: {integrity: sha512-VxkzwMAn4LP7WyMnJNbHN5mKV9L2IbyDjpzemKr99sXNR3GqRNMMHdm7prV1ws9wg7ETj6WUkNOigZVsptwbgg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -2009,6 +2021,10 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
   get-nonce@1.0.1:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
@@ -2252,6 +2268,9 @@ packages:
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
   longest-streak@3.1.0:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
 
@@ -2741,6 +2760,10 @@ packages:
   remark-stringify@11.0.0:
     resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
@@ -2775,6 +2798,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
@@ -2818,6 +2844,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  shell-quote@1.8.1:
+    resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -2881,6 +2910,10 @@ packages:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
 
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -2934,6 +2967,10 @@ packages:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
 
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -3138,6 +3175,10 @@ packages:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
     engines: {node: '>=0.4'}
 
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -3146,6 +3187,14 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -4499,6 +4548,12 @@ snapshots:
     dependencies:
       clsx: 2.0.0
 
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
   clsx@1.2.1: {}
 
   clsx@2.0.0: {}
@@ -4531,6 +4586,16 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  concurrently@9.1.0:
+    dependencies:
+      chalk: 4.1.2
+      lodash: 4.17.21
+      rxjs: 7.8.1
+      shell-quote: 1.8.1
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+
   content-disposition@0.5.4:
     dependencies:
       safe-buffer: 5.2.1
@@ -4896,6 +4961,8 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  get-caller-file@2.0.5: {}
+
   get-nonce@1.0.1: {}
 
   get-tsconfig@4.8.1:
@@ -5132,6 +5199,8 @@ snapshots:
 
   lodash.merge@4.6.2: {}
 
+  lodash@4.17.21: {}
+
   longest-streak@3.1.0: {}
 
   loose-envify@1.4.0:
@@ -5851,6 +5920,8 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
+  require-directory@2.1.1: {}
+
   require-from-string@2.0.2: {}
 
   resolve-from@4.0.0: {}
@@ -5897,6 +5968,10 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  rxjs@7.8.1:
+    dependencies:
+      tslib: 2.8.1
+
   safe-buffer@5.2.1: {}
 
   safe-regex2@4.0.0:
@@ -5951,6 +6026,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  shell-quote@1.8.1: {}
+
   signal-exit@4.1.0: {}
 
   simple-swizzle@0.2.2:
@@ -6016,6 +6093,10 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
   supports-preserve-symlinks-flag@1.0.0: {}
 
   svgo@3.3.2:
@@ -6087,6 +6168,8 @@ snapshots:
 
   toidentifier@1.0.1: {}
 
+  tree-kill@1.2.2: {}
+
   trim-lines@3.0.1: {}
 
   trough@2.2.0: {}
@@ -6266,10 +6349,24 @@ snapshots:
 
   xtend@4.0.2: {}
 
+  y18n@5.0.8: {}
+
   yallist@3.1.1: {}
 
   yaml@2.6.0: {}
 
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
   yocto-queue@0.1.0: {}
 
   zod@3.23.8: {}
diff --git a/public/sw.js b/public/sw.js
index 989bc72..e78ae3b 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -20,15 +20,12 @@ async function handleRequest(event) {
       const realurl = decodeURIComponent(encoded);
       if (realurl) {
         const url = new URL(realurl);
-        // console.log(`Posting analytics for ${url.host}${url.pathname}`);
         await postAnalytics(url.host);
       }
     }
     return await uv.fetch(event);
   } else if (scramjet.route(event)) {
-    // post to analytics
     const encoded = event.request.url.split("/~/scramjet/")[1];
-    // // console.log(`Posting analytics for ${encoded}`);
     if (!encoded.startsWith("data:")) {
       const realurl = decodeURIComponent(encoded);
       if (realurl) {
diff --git a/src/components/hooks/useRuffle.tsx b/src/components/hooks/useRuffle.tsx
new file mode 100644
index 0000000..1d4b629
--- /dev/null
+++ b/src/components/hooks/useRuffle.tsx
@@ -0,0 +1,71 @@
+import { useEffect } from "react";
+import useScript from "./useScript";
+/*
+ * @param {string} gsource - the source of the swf
+ * @param {string} Rufflecontainer - the container that the player will be stored in
+ * @param {number} width - the width of the ruffle player
+ * @param {number} height - the height of the ruffle player
+ */
+
+// Declaring width and height for the player isnt reccomeded
+// because it will automatically take 100% of your ruffleContainer
+// But feel free to set the width if you would like to
+declare global {
+  interface Window {
+    RufflePlayer: any;
+  }
+}
+
+const useRuffle = (
+  Rufflecontainer: any,
+  gsource: string,
+  width: string | number,
+  height: string | number
+) => {
+  if (!width) width = "100%";
+  if (!height) height = "100%";
+  if (!Rufflecontainer) throw new Error("Rufflecontainer is required");
+  useScript("/cdn/games/ruffle/ruffle.js");
+  useEffect(() => {
+    // stops loading the ruffle player if it is already loaded
+    if (window.RufflePlayer) return;
+    window.RufflePlayer = window.RufflePlayer || {};
+    window.RufflePlayer.config = {
+      // Options affecting files only
+      autoplay: "auto",
+      unmuteOverlay: "visible",
+      backgroundColor: "#222a3a",
+      letterbox: "fullscreen",
+      warnOnUnsupportedContent: true,
+      contextMenu: true,
+      showSwfDownload: false,
+      upgradeToHttps: window.location.protocol === "https:",
+      maxExecutionDuration: { secs: 15, nanos: 0 },
+      logLevel: "error",
+      base: null,
+      menu: true,
+      salign: "",
+      scale: "showAll",
+      quality: "high",
+    };
+    window.addEventListener("load", (event) => {
+      const ruffle = window.RufflePlayer.newest();
+      const player = ruffle.createPlayer();
+      Rufflecontainer.current.appendChild(player);
+      player.style.width = width;
+      player.style.height = height;
+      player
+        .load(gsource, {
+          allowScriptAccess: false, // if false swf cant interact with page (recommended false)
+        })
+        .then(() => {
+          console.log("swf loaded");
+        })
+        .catch((error: unknown) => {
+          console.log("swf load error:", error);
+        });
+    });
+  }, []);
+};
+
+export default useRuffle;
diff --git a/src/components/hooks/useScript.tsx b/src/components/hooks/useScript.tsx
new file mode 100644
index 0000000..c46ebea
--- /dev/null
+++ b/src/components/hooks/useScript.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+const useScript = (url: string) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+
+    script.src = url;
+    script.async = true;
+
+    document.body.appendChild(script);
+    console.log(script);
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [url]);
+};
+
+export default useScript;
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 750e669..ec72989 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -13,11 +13,13 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as PlayImport } from './routes/play'
+import { Route as GamesImport } from './routes/games'
+import { Route as IndexImport } from './routes/index'
 
 // Create Virtual Routes
 
 const ChatLazyImport = createFileRoute('/chat')()
-const IndexLazyImport = createFileRoute('/')()
 
 // Create/Update Routes
 
@@ -27,11 +29,23 @@ const ChatLazyRoute = ChatLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/chat.lazy').then((d) => d.Route))
 
-const IndexLazyRoute = IndexLazyImport.update({
+const PlayRoute = PlayImport.update({
+  id: '/play',
+  path: '/play',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const GamesRoute = GamesImport.update({
+  id: '/games',
+  path: '/games',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
-} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+} as any)
 
 // Populate the FileRoutesByPath interface
 
@@ -41,7 +55,21 @@ declare module '@tanstack/react-router' {
       id: '/'
       path: '/'
       fullPath: '/'
-      preLoaderRoute: typeof IndexLazyImport
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/games': {
+      id: '/games'
+      path: '/games'
+      fullPath: '/games'
+      preLoaderRoute: typeof GamesImport
+      parentRoute: typeof rootRoute
+    }
+    '/play': {
+      id: '/play'
+      path: '/play'
+      fullPath: '/play'
+      preLoaderRoute: typeof PlayImport
       parentRoute: typeof rootRoute
     }
     '/chat': {
@@ -57,37 +85,47 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
+  '/games': typeof GamesRoute
+  '/play': typeof PlayRoute
   '/chat': typeof ChatLazyRoute
 }
 
 export interface FileRoutesByTo {
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
+  '/games': typeof GamesRoute
+  '/play': typeof PlayRoute
   '/chat': typeof ChatLazyRoute
 }
 
 export interface FileRoutesById {
   __root__: typeof rootRoute
-  '/': typeof IndexLazyRoute
+  '/': typeof IndexRoute
+  '/games': typeof GamesRoute
+  '/play': typeof PlayRoute
   '/chat': typeof ChatLazyRoute
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/chat'
+  fullPaths: '/' | '/games' | '/play' | '/chat'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/chat'
-  id: '__root__' | '/' | '/chat'
+  to: '/' | '/games' | '/play' | '/chat'
+  id: '__root__' | '/' | '/games' | '/play' | '/chat'
   fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
-  IndexLazyRoute: typeof IndexLazyRoute
+  IndexRoute: typeof IndexRoute
+  GamesRoute: typeof GamesRoute
+  PlayRoute: typeof PlayRoute
   ChatLazyRoute: typeof ChatLazyRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
-  IndexLazyRoute: IndexLazyRoute,
+  IndexRoute: IndexRoute,
+  GamesRoute: GamesRoute,
+  PlayRoute: PlayRoute,
   ChatLazyRoute: ChatLazyRoute,
 }
 
@@ -102,11 +140,19 @@ export const routeTree = rootRoute
       "filePath": "__root.tsx",
       "children": [
         "/",
+        "/games",
+        "/play",
         "/chat"
       ]
     },
     "/": {
-      "filePath": "index.lazy.tsx"
+      "filePath": "index.tsx"
+    },
+    "/games": {
+      "filePath": "games.tsx"
+    },
+    "/play": {
+      "filePath": "play.tsx"
     },
     "/chat": {
       "filePath": "chat.lazy.tsx"
diff --git a/src/routes/games.tsx b/src/routes/games.tsx
new file mode 100644
index 0000000..8fefa1a
--- /dev/null
+++ b/src/routes/games.tsx
@@ -0,0 +1,92 @@
+import * as React from "react";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import GridPattern from "@/components/ui/grid-pattern";
+import { cn } from "@/lib/utils";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { GameType } from "./play";
+
+type Game = {
+  name: string;
+  path: string;
+  type: string;
+  img: string;
+  visible: boolean;
+};
+
+const getList = async (): Promise<Game[]> => {
+  const res = await fetch("/cdn/list");
+  return await res.json();
+};
+
+export const Route = createFileRoute("/games")({
+  component: RouteComponent,
+  loader: async () => await getList(),
+});
+
+function RouteComponent() {
+  const list = Route.useLoaderData();
+
+  return (
+    <>
+      <GridPattern
+        width={30}
+        height={30}
+        x={-1}
+        y={-1}
+        strokeDasharray={"1 2"}
+        className={cn(
+          `[mask-image:radial-gradient(500px_circle_at_center,white,transparent)] z-[0]`
+        )}
+      />
+      <div className="w-full min-h-screen flex flex-col items-center justify-center z-20 space-y-4">
+        <div className="h-[80vh] min-w-[90%] max-w-[90%] border rounded-xl border-secondary items-center justify-center overflow-y-auto overflow-x-hidden flex flex-wrap">
+          {list
+            .filter((game: Game) => game.visible)
+            .map((game: Game, i) => (
+              <Card
+                className="m-2 max-h-[20rem] bg-card transition-all"
+                key={i}
+              >
+                <CardHeader className="flex w-full items-center">
+                  <CardTitle>{game.name}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <img
+                    src={`/cdn${game.img}`}
+                    alt={game.name}
+                    className=" rounded-xl object-cover h-[10rem] w-[10rem] "
+                    width={150}
+                    height={150}
+                  />
+                </CardContent>
+                <CardFooter>
+                  <Link
+                    to="/play"
+                    search={{
+                      title: encodeURIComponent(game.name),
+                      type: game.type as GameType,
+                      path: encodeURIComponent(game.path),
+                      img: encodeURIComponent(game.img),
+                    }}
+                    className="w-full"
+                  >
+                    <Button className="w-full rounded-[0.5rem] text-card-foreground">
+                      Play
+                    </Button>
+                  </Link>
+                </CardFooter>
+              </Card>
+            ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/routes/index.lazy.tsx b/src/routes/index.tsx
similarity index 97%
rename from src/routes/index.lazy.tsx
rename to src/routes/index.tsx
index 99fd616..cbb13ea 100644
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.tsx
@@ -1,4 +1,4 @@
-import { createLazyFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
 import GridPattern from "@/components/ui/grid-pattern";
 import { cn } from "../lib/utils";
 import { Input } from "../components/ui/input";
@@ -44,16 +44,21 @@ import {
 import ReactGA from "react-ga4";
 import useSw from "../components/hooks/useSw";
 
-export const Route = createLazyFileRoute("/")({
-  component: Home,
-});
-
 type Sponser = {
   title: string;
   icon: string;
   url: string;
   discord: string;
 };
+const getSponsor = async (): Promise<Sponser> => {
+  const res = await fetch("/api/sponser", {});
+  return res.json();
+};
+
+export const Route = createFileRoute("/")({
+  component: Home,
+  loader: async () => await getSponsor(),
+});
 
 function Home() {
   const settingStore = useSettings();
@@ -62,7 +67,7 @@ function Home() {
   const [shouldOpen, setShouldOpen] = useState(false);
   const [openSearch, setOpenSearch] = useState(false);
   const [openSettings, setOpenSettings] = useState(false);
-  const [sponser, setSponser] = useState<Sponser>();
+  const sponser = Route.useLoaderData();
   const frame = useRef<HTMLIFrameElement>(null);
   const dock = useRef<HTMLDivElement>(null);
   useSw("/sw.js");
@@ -90,14 +95,6 @@ function Home() {
     };
   }, [term]);
 
-  useEffect(() => {
-    (async () => {
-      const res = await fetch("/api/sponser");
-      const sponser = await res.json();
-      setSponser(sponser as unknown as Sponser);
-    })();
-  }, []);
-
   const containerVariants = {
     hidden: {
       opacity: 0,
@@ -392,7 +389,7 @@ function Home() {
           y: "-1%",
         }}
       >
-        <div className="max-w-[10rem] h-fit flex absolute bottom-5 left-[50%] translate-x-[-50%]">
+        <div className="max-w-[10rem] h-fit flex absolute bottom-5 left-[47.7%]  translate-x-[-50%]">
           {shouldOpen && (
             <div className="handle cursor-move supports-backdrop-blur:bg-white/30 supports-backdrop-blur:dark:bg-black/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max gap-2 rounded-2xl border p-2 backdrop-blur-md rounded-l-2xl rounded-r-none items-center">
               <AlignJustify className="w-6 h-6 text-primary" />
@@ -430,7 +427,9 @@ function Home() {
               />
             </DockIcon>
             <DockIcon>
-              <Gamepad className="w-6 h-6 hover:w-7 hover:h-7 transition-all transofrm hover:-translate-y-2" />
+              <Link to="/games">
+                <Gamepad className="w-6 h-6 hover:w-7 hover:h-7 transition-all transofrm hover:-translate-y-2" />
+              </Link>
             </DockIcon>
             <DockIcon>
               <Link to="/chat">
diff --git a/src/routes/play.tsx b/src/routes/play.tsx
new file mode 100644
index 0000000..62557aa
--- /dev/null
+++ b/src/routes/play.tsx
@@ -0,0 +1,105 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import GridPattern from "@/components/ui/grid-pattern";
+import { cn } from "@/lib/utils";
+import { Home, FullscreenIcon, Gamepad } from "lucide-react";
+import { useEffect, useRef } from "react";
+import useRuffle from "@/components/hooks/useRuffle";
+type GameSearch = {
+  title: string;
+  type: GameType;
+  path: string;
+  img: string;
+};
+
+export enum GameType {
+  HTML = "html",
+  FLASH = "flash",
+}
+
+export const Route = createFileRoute("/play")({
+  component: RouteComponent,
+  validateSearch: (search: Record<string, unknown>): GameSearch => {
+    return {
+      title: search.title as string,
+      type: search.type as GameType,
+      path: search.path as string,
+      img: search.img as string,
+    };
+  },
+});
+
+function RouteComponent() {
+  const search = Route.useSearch();
+  const container = useRef<HTMLDivElement>(null);
+  const iframe = useRef<HTMLIFrameElement>(null);
+  console.log(search);
+  if (search.type === GameType.FLASH) {
+    console.log(search.path);
+    useRuffle(
+      container,
+      `/cdn${decodeURIComponent(search.path)}`,
+      "100%",
+      "100%"
+    );
+  }
+  return (
+    <>
+      <GridPattern
+        width={30}
+        height={30}
+        x={-1}
+        y={-1}
+        strokeDasharray={"1 2"}
+        className={cn(
+          `[mask-image:radial-gradient(500px_circle_at_center,white,transparent)] z-[0]`
+        )}
+      />
+      <div className="w-full min-h-screen flex flex-col items-center justify-center z-20 space-y-4">
+        <div className="w-full flex space-x-2 min-w-[80%] max-w-[80%] items-center">
+          <img
+            src={`/cdn${decodeURIComponent(search.img)}`}
+            className="rounded-xl object-cover h-[5rem] w-[5rem]"
+            width={90}
+            height={45}
+            alt={search.title}
+          />
+          <div className="flex flex-col space-y-1">
+            <h1 className="text-2xl font-bold">
+              {decodeURIComponent(search.title)}
+            </h1>
+            <p className="text-muted-foreground">{search.type}</p>
+          </div>
+        </div>
+        <div
+          ref={container}
+          className="h-[70vh] relative min-w-[80%] max-w-[80%] border rounded-xl border-secondary overflow-y-auto overflow-x-hidden space-y-2 flex flex-wrap"
+        >
+          {search.type === GameType.HTML && (
+            <iframe
+              src={`/cdn${decodeURIComponent(search.path)}`}
+              sandbox="allow-scripts allow-same-origin allow-pointer-lock"
+              ref={iframe}
+              className="border-0 w-full h-full"
+            ></iframe>
+          )}
+        </div>
+        <div className="w-full flex space-x-4 min-w-[80%] max-w-[80%] items-center">
+          <Link to="/" className="flex items-center space-x-2">
+            <Home className="w-8 h-8" />
+          </Link>
+          <Link to="/games" className="flex items-center space-x-2">
+            <Gamepad className="w-8 h-8" />
+          </Link>
+          <button
+            onClick={() => {
+              iframe.current?.requestFullscreen();
+            }}
+            className="flex items-center space-x-2"
+          >
+            <FullscreenIcon className="w-8 h-8" />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/vite.config.ts b/vite.config.ts
index a29c361..3ded175 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -60,6 +60,10 @@ export default defineConfig({
         rewrite: (p) => p.replace(/^\/w/, ""),
         ws: true,
       },
+      "/cdn/": {
+        target: "http://localhosT:8000/",
+        rewrite: (p) => p.replace(/^\/cdn/, ""),
+      },
     },
   },
 });