games

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: {

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",

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) {

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;

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;