Extract fullscreen logic to dedicated store

- Move fullscreen state and toggle function to `useFullscreenStore`
- Centralize fullscreen management and event listeners for better reusability
- Add a fullscreen logo and exit button within the background component

Author: escherlies

src/app.jsx

@@ -1,9 +1,10 @@
 import { Router, A } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
-import { Suspense, createSignal, onMount, onCleanup } from "solid-js";
+import { Suspense } from "solid-js";
 import { clientOnly } from "@solidjs/start";
 import { useThemeStore } from "~/stores/theme";
 import { useAnimationStore } from "~/stores/animation";
+import { useFullscreenStore } from "~/stores/fullscreen";
 import { BsFullscreen } from '@aminya/solid-icons/bs/BsFullscreen';
 import { BsFullscreenExit } from '@aminya/solid-icons/bs/BsFullscreenExit';
 import TopMenu from "~/components/TopMenu";
@@ -22,52 +23,15 @@ const ClientAnimationModeToggle = clientOnly(() =>
 );
 
 export default function App() {
-  const [isFullscreen, setIsFullscreen] = createSignal(false);
-  const { isAnimationOn, setIsAnimationOn } = useAnimationStore();
-
-  const toggleFullscreen = () => {
-    const canvas = document.getElementById('background');
-    if (!canvas) return;
-
-    if (!document.fullscreenElement) {
-      canvas.requestFullscreen().then(() => {
-        setIsFullscreen(true);
-        // Ensure animation is on when entering fullscreen
-        if (!isAnimationOn()) {
-          setIsAnimationOn(true);
-        }
-      }).catch(err => {
-        console.error(`Error attempting to enable fullscreen: ${err.message}`);
-      });
-    } else {
-      document.exitFullscreen().then(() => {
-        setIsFullscreen(false);
-      }).catch(err => {
-        console.error(`Error attempting to exit fullscreen: ${err.message}`);
-      });
-    }
-  };
-
-  // Listen for fullscreen change events
-  onMount(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(!!document.fullscreenElement);
-    };
-
-    document.addEventListener('fullscreenchange', handleFullscreenChange);
-
-    onCleanup(() => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange);
-    });
-  });
+  const { isFullscreen, toggleFullscreen } = useFullscreenStore();
   return (
     <>
       {/* Background. Mounting point for lava animation - only rendered on client */}
       <ClientLavaBackground />
 
       {/* Fullscreen button - desktop only */}
       <button
-        onClick={toggleFullscreen}
+        onClick={() => toggleFullscreen('background-container')}
         class="fixed top-4 right-4 z-[9999] p-2 text-white/0 hover:text-white/80 transition-opacity hidden md:block cursor-pointer"
         aria-label={isFullscreen() ? "Exit fullscreen" : "Enter fullscreen and start animation"}
         title={isFullscreen() ? "Exit fullscreen" : "Enter fullscreen and start animation"}

src/components/LavaBackground.jsx

@@ -2,6 +2,10 @@ import { onMount, onCleanup, createEffect, createSignal } from "solid-js";
 import { startLavaAnimation } from "~/lava/app";
 import { useThemeStore, colorSchemes } from "~/stores/theme";
 import { useAnimationStore } from "~/stores/animation";
+import { useFullscreenStore } from "~/stores/fullscreen";
+import { Logo } from "~/components/Logo";
+import { BsFullscreen } from '@aminya/solid-icons/bs/BsFullscreen';
+import { BsFullscreenExit } from '@aminya/solid-icons/bs/BsFullscreenExit';
 
 /**
  * A component that renders the lava animation background.
@@ -10,8 +14,11 @@ import { useAnimationStore } from "~/stores/animation";
 export default function LavaBackground() {
   const { currentTheme } = useThemeStore();
   const { isAnimationOn } = useAnimationStore();
+  const { isFullscreen, toggleFullscreen } = useFullscreenStore();
+
   let animation = null;
 
+
   // Handle window resize
   const handleResize = () => {
     // If animation is stopped, render a single frame to update with new dimensions
@@ -55,7 +62,30 @@ export default function LavaBackground() {
 
   return (
     <>
-      <canvas id="background" class="fixed inset-0 w-screen h-screen" />
+      <div id="background-container" class="fixed inset-0 w-screen h-screen">
+        <canvas id="background" class="w-full h-full" />
+        {isFullscreen() && (
+          <div
+            id="fullscreen-logo"
+            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/2 h-1/2 pointer-events-none"
+          >
+            <Logo />
+          </div>
+        )}
+
+        {/* Exit Fullscreen button - desktop only */}
+        {isFullscreen() &&
+          <button
+            onClick={() => toggleFullscreen('background-container')}
+            class="fixed top-4 right-4 z-[9999] p-2 text-white/0 hover:text-white/80 transition-opacity hidden md:block cursor-pointer"
+            aria-label={isFullscreen() ? "Exit fullscreen" : "Enter fullscreen and start animation"}
+            title={isFullscreen() ? "Exit fullscreen" : "Enter fullscreen and start animation"}
+          >
+            {isFullscreen() ? <BsFullscreenExit size={20} /> : <BsFullscreen size={20} />}
+          </button>
+        }
+
+      </div>
     </>
   );
 }

src/stores/fullscreen.js

@@ -0,0 +1,50 @@
+import { createSignal, createEffect, onMount, onCleanup } from 'solid-js';
+import { useAnimationStore } from './animation';
+
+// Initialize signals with default values
+const [isFullscreen, setIsFullscreen] = createSignal(false);
+
+export const useFullscreenStore = () => {
+  const { isAnimationOn, setIsAnimationOn } = useAnimationStore();
+  // Listen for fullscreen change events
+  onMount(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+    onCleanup(() => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange);
+    });
+  });
+
+  // Toggle fullscreen function
+  const toggleFullscreen = (elementId) => {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+
+    if (!document.fullscreenElement) {
+      element.requestFullscreen().then(() => {
+        setIsFullscreen(true);
+        // Ensure animation is on when entering fullscreen
+        if (!isAnimationOn()) {
+          setIsAnimationOn(true);
+        }
+      }).catch(err => {
+        console.error(`Error attempting to enable fullscreen: ${err.message}`);
+      });
+    } else {
+      document.exitFullscreen().then(() => {
+        setIsFullscreen(false);
+      }).catch(err => {
+        console.error(`Error attempting to exit fullscreen: ${err.message}`);
+      });
+    }
+  };
+
+  return {
+    isFullscreen,
+    toggleFullscreen
+  };
+};