From cef45803fbf2589b06aaaddf47ceeadae4f1fce8 Mon Sep 17 00:00:00 2001
From: Fruktus <fruktusek@gmail.com>
Date: Wed, 3 Jun 2026 18:54:38 +0200
Subject: [PATCH] feat: migrate old index to web app

---
 web/public/fullscreen-close.svg               |   3 +
 web/public/fullscreen-open.svg                |   3 +
 web/public/index.html                         | 113 ------------------
 web/src/app/(main)/index.module.css           |  28 +++++
 web/src/app/(main)/layout.tsx                 |  12 ++
 web/src/app/(main)/page.tsx                   |  27 ++++-
 web/src/components/ruffle/ruffle-config.tsx   |  31 +++++
 web/src/components/ruffle/ruffle-loader.tsx   |  27 +++++
 web/src/components/ruffle/ruffle.tsx          |  14 +++
 .../components/ui/footer/footer.module.css    |   7 ++
 web/src/components/ui/footer/footer.tsx       |   9 ++
 .../fullscreen-toggle.module.css              |  40 +++++++
 .../fullscreen-toggle/fullscreen-toggle.tsx   |  44 +++++++
 web/src/configurations/config.json            |   1 +
 web/src/hooks/use-unload-warning.js           |  17 +++
 web/src/styles/globals.css                    |  22 +++-
 web/src/types/declarations.d.ts               |   1 +
 web/src/types/ruffle.d.ts                     |   8 ++
 18 files changed, 290 insertions(+), 117 deletions(-)
 create mode 100644 web/public/fullscreen-close.svg
 create mode 100644 web/public/fullscreen-open.svg
 delete mode 100644 web/public/index.html
 create mode 100644 web/src/app/(main)/index.module.css
 create mode 100644 web/src/components/ruffle/ruffle-config.tsx
 create mode 100644 web/src/components/ruffle/ruffle-loader.tsx
 create mode 100644 web/src/components/ruffle/ruffle.tsx
 create mode 100644 web/src/components/ui/footer/footer.module.css
 create mode 100644 web/src/components/ui/footer/footer.tsx
 create mode 100644 web/src/components/ui/fullscreen-toggle/fullscreen-toggle.module.css
 create mode 100644 web/src/components/ui/fullscreen-toggle/fullscreen-toggle.tsx
 create mode 100644 web/src/hooks/use-unload-warning.js
 create mode 100644 web/src/types/declarations.d.ts
 create mode 100644 web/src/types/ruffle.d.ts

diff --git a/web/public/fullscreen-close.svg b/web/public/fullscreen-close.svg
new file mode 100644
index 00000000..63ecc7e3
--- /dev/null
+++ b/web/public/fullscreen-close.svg
@@ -0,0 +1,3 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg" id="fullscreen-close">
+  <path d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z" />
+</svg> 
\ No newline at end of file
diff --git a/web/public/fullscreen-open.svg b/web/public/fullscreen-open.svg
new file mode 100644
index 00000000..9e8d031e
--- /dev/null
+++ b/web/public/fullscreen-open.svg
@@ -0,0 +1,3 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="20px" width="20px" xmlns="http://www.w3.org/2000/svg" id="fullscreen-open">
+  <path d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z" />
+</svg> 
\ No newline at end of file
diff --git a/web/public/index.html b/web/public/index.html
deleted file mode 100644
index a9da110f..00000000
--- a/web/public/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Quadradius</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="config-ruffle.js"></script>
-    <style>
-        html,
-        body {
-            margin: 0;
-            padding: 0;
-            background-color: black;
-            color: white;
-            font-family: sans-serif;
-        }
-
-        .container {
-            width: 100%;
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            align-items: stretch;
-            align-content: stretch;
-        }
-
-        .game {
-            flex: 1;
-        }
-
-        .embed {
-            width: 100%;
-            height: 100%;
-        }
-
-        .footer {
-            padding: 0.3em;
-            color: #444444;
-            text-align: center;
-        }
-
-        a {
-            text-decoration: none;
-        }
-
-        a:link,
-        a:visited {
-            color: #777777;
-        }
-
-        a:hover {
-            color: #aaaaaa;
-        }
-
-        div.directions {
-            position: absolute;
-            right: 0;
-            z-index: 1;
-        }
-    </style>
-    <script type="application/javascript">
-        const originalTitle = document.title;
-        window.onbeforeunload = function () {
-            return 'Are you sure you want to leave?';
-        };
-
-        document.addEventListener('visibilitychange', function () {
-            if (document.hidden) {
-                document.title = originalTitle + " (Paused)";
-                alert('Quadradius cannot work properly when the tab is in the background and has to be paused. ' +
-                    'You WILL be timed out after some time when Quadradius is paused. ' +
-                    'This is the current limitation of Ruffle.\n\n' +
-                    'If you want to run Quadradius in the background, ' +
-                    'currently the best solution is to keep it open in a new window.');
-            } else {
-                document.title = originalTitle;
-            }
-        });
-    </script>
-</head>
-
-<body>
-    <div class="directions">
-        <a href="/directions.html">How to play &amp; Powerup Cheatsheet</a>.
-    </div>
-    <div class="container">
-        <object class="game">
-            <embed src="./quadradius_lobby.swf" class="embed" />
-        </object>
-
-        <div class="footer">
-            Made possible by the
-            <a href="https://github.com/Fruktus/QuadradiusPreservationProject">Quadradius Preservation Project</a>.
-        </div>
-    </div>
-
-    <script>
-        let version = new URLSearchParams(window.location.search).get('ruffle_version');
-        if (version) {
-            version = '@' + version + '/ruffle.js';
-        } else {
-            version = '';
-        }
-        let ruffleScript = document.createElement("script");
-        ruffleScript.setAttribute("src", `https://unpkg.com/@ruffle-rs/ruffle${version}`);
-        document.body.appendChild(ruffleScript);
-    </script>
-</body>
-
-</html>
diff --git a/web/src/app/(main)/index.module.css b/web/src/app/(main)/index.module.css
new file mode 100644
index 00000000..466bd458
--- /dev/null
+++ b/web/src/app/(main)/index.module.css
@@ -0,0 +1,28 @@
+.container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: stretch;
+  align-content: stretch;
+  position: relative;
+}
+
+.game {
+  flex: 1;
+}
+
+.embed {
+  width: 100%;
+  height: 100%;
+}
+
+.directions {
+  position: absolute;
+  right: 8px;
+  z-index: 1;
+  top: 8px;
+  font-size: clamp(0.8rem, 1vw, 1rem);
+}
diff --git a/web/src/app/(main)/layout.tsx b/web/src/app/(main)/layout.tsx
index 8aa91099..1fb368c0 100644
--- a/web/src/app/(main)/layout.tsx
+++ b/web/src/app/(main)/layout.tsx
@@ -1,3 +1,15 @@
+import '@/styles/globals.css'
+
+export const metadata = {
+  title: 'Quadradius',
+  description: 'Quadradius is a two-player turn-based strategy game from 2007 made in Flash. A game of skill, luck, and deception, with the gameplay of checkerboards on steroids. Originally created by Jimmi Heiserman and Brad Kayal.',
+};
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+
 export default function MainLayout({
   children,
 }: {
diff --git a/web/src/app/(main)/page.tsx b/web/src/app/(main)/page.tsx
index d09daed8..20358d04 100644
--- a/web/src/app/(main)/page.tsx
+++ b/web/src/app/(main)/page.tsx
@@ -1,5 +1,30 @@
+'use client';
+
+import styles from './index.module.css';
+import Ruffle from '@/components/ruffle/ruffle';
+import FullscreenToggle from '@/components/ui/fullscreen-toggle/fullscreen-toggle';
+import Footer from "@/components/ui/footer/footer";
+import { useUnloadWarning } from '@/hooks/use-unload-warning';
+
+
 export default function Home() {
+  useUnloadWarning();
+
   return (
-    <h1>Quadradius Web App</h1>
+    <>
+      <div className={styles.directions}>
+        <a href="/directions.html" target="_blank">How to play &amp; Powerup Cheatsheet</a>
+      </div>
+      <FullscreenToggle />
+
+      <Ruffle />
+
+      <div className={styles.container}>
+        <object className={styles.game}>
+          <embed src="./quadradius_lobby.swf" className={styles.embed} />
+        </object>
+        <Footer />
+      </div>
+    </>
   )
 }
diff --git a/web/src/components/ruffle/ruffle-config.tsx b/web/src/components/ruffle/ruffle-config.tsx
new file mode 100644
index 00000000..d37baafd
--- /dev/null
+++ b/web/src/components/ruffle/ruffle-config.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function RuffleConfig() {
+  useEffect(() => {
+    const host = window.location.host;
+    const protocol = window.location.protocol == 'http:' ? 'ws:' : 'wss:';
+
+    window.RufflePlayer = window.RufflePlayer || {};
+    window.RufflePlayer.config = {
+        autoplay: "on",
+        contextMenu: "off",
+        logLevel: "debug",
+        socketProxy: [
+            {
+                host: "127.0.0.1",
+                port: 3000,
+                proxyUrl: `${protocol}//${host}/websocket/lobby`,
+            },
+            {
+                host: "127.0.0.1",
+                port: 3001,
+                proxyUrl: `${protocol}//${host}/websocket/game`,
+            },
+        ],
+    };
+  }, []);
+
+  return null;
+}
diff --git a/web/src/components/ruffle/ruffle-loader.tsx b/web/src/components/ruffle/ruffle-loader.tsx
new file mode 100644
index 00000000..2083efdf
--- /dev/null
+++ b/web/src/components/ruffle/ruffle-loader.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import Script from 'next/script';
+import { useSearchParams } from 'next/navigation';
+import config from '@/configurations/config.json';
+
+export default function RuffleLoader() {
+  const searchParams = useSearchParams();
+
+  const queryVersion = searchParams.get('ruffle_version');
+
+  const version =
+    queryVersion ??
+    config.ruffleVersion ??
+    '';
+
+  const ruffleUrl = version
+    ? `https://unpkg.com/@ruffle-rs/ruffle@${version}/ruffle.js`
+    : 'https://unpkg.com/@ruffle-rs/ruffle';
+
+  return (
+    <Script
+      src={ruffleUrl}
+      strategy="afterInteractive"
+    />
+  );
+}
diff --git a/web/src/components/ruffle/ruffle.tsx b/web/src/components/ruffle/ruffle.tsx
new file mode 100644
index 00000000..fe4afef0
--- /dev/null
+++ b/web/src/components/ruffle/ruffle.tsx
@@ -0,0 +1,14 @@
+import { Suspense } from 'react';
+import RuffleConfig from './ruffle-config';
+import RuffleLoader from './ruffle-loader';
+
+export default function Ruffle() {
+  return (
+    <>
+      <RuffleConfig />
+      <Suspense fallback={null}>
+        <RuffleLoader />
+      </Suspense>
+    </>
+  );
+}
diff --git a/web/src/components/ui/footer/footer.module.css b/web/src/components/ui/footer/footer.module.css
new file mode 100644
index 00000000..7784c6cd
--- /dev/null
+++ b/web/src/components/ui/footer/footer.module.css
@@ -0,0 +1,7 @@
+.footer {
+  padding: 0.3em;
+  color: #444444;
+  text-align: center;
+  font-size: clamp(0.8rem, 1vw, 1rem);
+}
+
diff --git a/web/src/components/ui/footer/footer.tsx b/web/src/components/ui/footer/footer.tsx
new file mode 100644
index 00000000..e7f1a73f
--- /dev/null
+++ b/web/src/components/ui/footer/footer.tsx
@@ -0,0 +1,9 @@
+import styles from './footer.module.css';
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+          Made possible by the <a href="https://github.com/Fruktus/QuadradiusPreservationProject">Quadradius Preservation Project</a>.
+    </footer>
+  );
+}
diff --git a/web/src/components/ui/fullscreen-toggle/fullscreen-toggle.module.css b/web/src/components/ui/fullscreen-toggle/fullscreen-toggle.module.css
new file mode 100644
index 00000000..17e954c0
--- /dev/null
+++ b/web/src/components/ui/fullscreen-toggle/fullscreen-toggle.module.css
@@ -0,0 +1,40 @@
+.fullscreen {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    z-index: 10;
+}
+
+.toggle {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 5px;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.25;
+}
+
+.toggle img {
+    inset: 10px;
+}
+
+.toggle:hover {
+    background: rgba(255, 255, 255, 0.9);
+    opacity: 0.8;
+}
+
+.toggle img {
+    padding: 4px;
+}
+
+@media (hover: none) {
+    .toggle {
+        display: flex;
+    }
+}
diff --git a/web/src/components/ui/fullscreen-toggle/fullscreen-toggle.tsx b/web/src/components/ui/fullscreen-toggle/fullscreen-toggle.tsx
new file mode 100644
index 00000000..6595fa9e
--- /dev/null
+++ b/web/src/components/ui/fullscreen-toggle/fullscreen-toggle.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import Image from 'next/image';
+import { useEffect, useRef } from 'react';
+import styles from './fullscreen-toggle.module.css';
+
+export default function FullscreenToggle() {
+    const openIconRef = useRef<HTMLImageElement>(null);
+    const closeIconRef = useRef<HTMLImageElement>(null);
+
+    useEffect(() => {
+        const openIcon = openIconRef.current;
+        const closeIcon = closeIconRef.current;
+        if (!openIcon || !closeIcon) return;
+
+        closeIcon.style.display = 'none';
+
+        const updateIcons = (isFullscreen: boolean) => {
+            openIcon.style.display = isFullscreen ? 'none' : 'block';
+            closeIcon.style.display = isFullscreen ? 'block' : 'none';
+        };
+
+        const handleFullscreenChange = () => updateIcons(!!document.fullscreenElement);
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    }, []);
+
+    const handleClick = () => {
+        if (!document.fullscreenElement) {
+            void document.documentElement.requestFullscreen();
+        } else {
+            void document.exitFullscreen();
+        }
+    };
+
+    return (
+        <div className={styles.fullscreen}>
+            <button className={styles.toggle} title="Toggle fullscreen" onClick={handleClick}>
+                <Image ref={openIconRef} src="/fullscreen-open.svg" alt="Fullscreen open icon" fill />
+                <Image ref={closeIconRef} src="/fullscreen-close.svg" alt="Fullscreen close icon" fill />
+            </button>
+        </div>
+    );
+}
diff --git a/web/src/configurations/config.json b/web/src/configurations/config.json
index ed17e693..b04925f9 100644
--- a/web/src/configurations/config.json
+++ b/web/src/configurations/config.json
@@ -1,4 +1,5 @@
 {
+  "ruffleVersion": "0.2.0-nightly.2026.4.21",
   "discordChannel": "https://discord.com/channels/1197227968112627802",
   "discordRegistration": "https://discord.com/channels/1197227968112627802/1297809215066341396"
 }
diff --git a/web/src/hooks/use-unload-warning.js b/web/src/hooks/use-unload-warning.js
new file mode 100644
index 00000000..f0ad8e9c
--- /dev/null
+++ b/web/src/hooks/use-unload-warning.js
@@ -0,0 +1,17 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export function useUnloadWarning(enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleBeforeUnload = (e) => {
+      e.preventDefault();
+      e.returnValue = '';
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [enabled]);
+}
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index e2bca192..81ecd8dc 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -28,10 +28,26 @@
   --button-text: #ffffff;
 }
 
+html,
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: var(--font-geist-sans), Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: black;
+  color: white;
+  font-family: sans-serif;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link,
+a:visited {
+  color: #777777;
+}
+
+a:hover {
+  color: #aaaaaa;
 }
 
 /* Header with background image */
diff --git a/web/src/types/declarations.d.ts b/web/src/types/declarations.d.ts
new file mode 100644
index 00000000..cbe652db
--- /dev/null
+++ b/web/src/types/declarations.d.ts
@@ -0,0 +1 @@
+declare module "*.css";
diff --git a/web/src/types/ruffle.d.ts b/web/src/types/ruffle.d.ts
new file mode 100644
index 00000000..1ddbac3c
--- /dev/null
+++ b/web/src/types/ruffle.d.ts
@@ -0,0 +1,8 @@
+interface RufflePlayerConfig {
+    config?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+
+interface Window {
+    RufflePlayer?: RufflePlayerConfig;
+}