feat: One Piece themed visual effects — Three.js particle ocean + user toggle

e2e/tests/visual-effects.spec.ts

@@ -0,0 +1,71 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * Visual effects (ocean-fx) toggle button tests.
+ * These tests verify the toggle button is present and that
+ * clicking it toggles the visual effects state via localStorage.
+ */
+test.describe("Visual effects toggle", () => {
+    test("toggle button is visible on the homepage", async ({ page }) => {
+        await page.goto("/");
+        const btn = page.locator("#op-fx-toggle");
+        await expect(btn).toBeVisible();
+        await expect(btn).toHaveAttribute("aria-label", "Toggle visual effects");
+    });
+
+    test("toggle button starts with effects enabled (✨)", async ({ page }) => {
+        // Clear any stored preference so we get the default (enabled)
+        await page.goto("/");
+        await page.evaluate(() => localStorage.removeItem("op_fx_enabled"));
+        await page.reload();
+        const btn = page.locator("#op-fx-toggle");
+        await expect(btn).toContainText("✨");
+    });
+
+    test("clicking toggle button disables effects and shows sleep icon", async ({ page }) => {
+        await page.goto("/");
+        // Ensure starting state is enabled
+        await page.evaluate(() => localStorage.setItem("op_fx_enabled", "true"));
+        await page.reload();
+
+        const btn = page.locator("#op-fx-toggle");
+        await expect(btn).toContainText("✨");
+        await btn.click();
+        await expect(btn).toContainText("💤");
+
+        // Preference should be persisted
+        const stored = await page.evaluate(() => localStorage.getItem("op_fx_enabled"));
+        expect(stored).toBe("false");
+    });
+
+    test("clicking toggle button again re-enables effects", async ({ page }) => {
+        await page.goto("/");
+        await page.evaluate(() => localStorage.setItem("op_fx_enabled", "false"));
+        await page.reload();
+
+        const btn = page.locator("#op-fx-toggle");
+        await expect(btn).toContainText("💤");
+        await btn.click();
+        await expect(btn).toContainText("✨");
+
+        const stored = await page.evaluate(() => localStorage.getItem("op_fx_enabled"));
+        expect(stored).toBe("true");
+    });
+
+    test("toggle button is present on authenticated pages too", async ({ page }) => {
+        await page.goto("/accounts/login/");
+        const btn = page.locator("#op-fx-toggle");
+        await expect(btn).toBeVisible();
+    });
+
+    test("disabled preference persists across page navigation", async ({ page }) => {
+        await page.goto("/");
+        await page.evaluate(() => localStorage.setItem("op_fx_enabled", "false"));
+        await page.reload();
+
+        // Navigate to another page and check state is still off
+        await page.goto("/accounts/login/");
+        const btn = page.locator("#op-fx-toggle");
+        await expect(btn).toContainText("💤");
+    });
+});

static/css/custom.css

@@ -1,3 +1,50 @@
+/* ── One Piece visual effects ────────────────────────────────────────────── */
+
+/* Deep-ocean fallback background (shown while shader loads / if WebGL unavailable) */
+body {
+    background: #060c17;
+    min-height: 100vh;
+}
+
+/* Full-screen canvas rendered behind all other content */
+#op-fx-canvas {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+}
+
+/* Floating toggle button (bottom-left) */
+#op-fx-toggle {
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 1050;
+    width: 2.4rem;
+    height: 2.4rem;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(8, 20, 40, 0.6);
+    color: #fff;
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+
+#op-fx-toggle:hover {
+    background: rgba(0, 100, 160, 0.5);
+    border-color: rgba(0, 180, 220, 0.4);
+    transform: scale(1.12);
+}
+
 /* ── Badge & status colours ──────────────────────────────────────────────── */
 .badge-win  { background-color: #2a8f37; }
 .badge-loss { background-color: #af4034; }