feat: Add interactive Saturn effect controls in HomeView and enhance ParticleBackground for external mouse handling

2 files changed, 81 insertions, 3 deletions

diff --git a/ui/src/components/HomeView.svelte b/ui/src/components/HomeView.svelte
index 5119d00..2fa8390 100644
--- a/ui/src/components/HomeView.svelte
+++ b/ui/src/components/HomeView.svelte
@@ -3,6 +3,7 @@
   import { gameState } from '../stores/game.svelte';
   import { releasesState } from '../stores/releases.svelte';
   import { Calendar, ExternalLink } from 'lucide-svelte';
+  import { getSaturnEffect } from './ParticleBackground.svelte';
 
   type Props = {
     mouseX: number;
@@ -10,6 +11,60 @@
   };
   let { mouseX = 0, mouseY = 0 }: Props = $props();
 
+  // Saturn effect mouse interaction handlers
+  function handleSaturnMouseDown(e: MouseEvent) {
+    const effect = getSaturnEffect();
+    if (effect) {
+      effect.handleMouseDown(e.clientX);
+    }
+  }
+
+  function handleSaturnMouseMove(e: MouseEvent) {
+    const effect = getSaturnEffect();
+    if (effect) {
+      effect.handleMouseMove(e.clientX);
+    }
+  }
+
+  function handleSaturnMouseUp() {
+    const effect = getSaturnEffect();
+    if (effect) {
+      effect.handleMouseUp();
+    }
+  }
+
+  function handleSaturnMouseLeave() {
+    const effect = getSaturnEffect();
+    if (effect) {
+      effect.handleMouseUp();
+    }
+  }
+
+  function handleSaturnTouchStart(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      const effect = getSaturnEffect();
+      if (effect) {
+        effect.handleTouchStart(e.touches[0].clientX);
+      }
+    }
+  }
+
+  function handleSaturnTouchMove(e: TouchEvent) {
+    if (e.touches.length === 1) {
+      const effect = getSaturnEffect();
+      if (effect) {
+        effect.handleTouchMove(e.touches[0].clientX);
+      }
+    }
+  }
+
+  function handleSaturnTouchEnd() {
+    const effect = getSaturnEffect();
+    if (effect) {
+      effect.handleTouchEnd();
+    }
+  }
+
   onMount(() => {
     releasesState.loadReleases();
   });
@@ -104,8 +159,18 @@
 <!-- Scrollable Container -->
 <div class="relative z-10 h-full {releasesState.isLoading ? 'overflow-hidden' : 'overflow-y-auto custom-scrollbar scroll-smooth'}">
   
-  <!-- Hero Section (Full Height) -->
-  <div class="min-h-full flex flex-col justify-end p-12 pb-32">
+  <!-- Hero Section (Full Height) - Interactive area for Saturn rotation -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div 
+    class="min-h-full flex flex-col justify-end p-12 pb-32 cursor-grab active:cursor-grabbing select-none"
+    onmousedown={handleSaturnMouseDown}
+    onmousemove={handleSaturnMouseMove}
+    onmouseup={handleSaturnMouseUp}
+    onmouseleave={handleSaturnMouseLeave}
+    ontouchstart={handleSaturnTouchStart}
+    ontouchmove={handleSaturnTouchMove}
+    ontouchend={handleSaturnTouchEnd}
+  >
      <!-- 3D Floating Hero Text -->
       <div 
         class="transition-transform duration-200 ease-out origin-bottom-left"
diff --git a/ui/src/components/ParticleBackground.svelte b/ui/src/components/ParticleBackground.svelte
index 080f1f2..7644b1a 100644
--- a/ui/src/components/ParticleBackground.svelte
+++ b/ui/src/components/ParticleBackground.svelte
@@ -1,7 +1,17 @@
+<script lang="ts" module>
+  import { SaturnEffect } from "../lib/effects/SaturnEffect";
+  
+  // Global reference to the active Saturn effect for external control
+  let globalSaturnEffect: SaturnEffect | null = null;
+  
+  export function getSaturnEffect(): SaturnEffect | null {
+    return globalSaturnEffect;
+  }
+</script>
+
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
   import { ConstellationEffect } from "../lib/effects/ConstellationEffect";
-  import { SaturnEffect } from "../lib/effects/SaturnEffect";
   import { settingsState } from "../stores/settings.svelte";
 
   let canvas: HTMLCanvasElement;
@@ -16,8 +26,10 @@
 
     if (settingsState.settings.active_effect === "saturn") {
       activeEffect = new SaturnEffect(canvas);
+      globalSaturnEffect = activeEffect;
     } else {
       activeEffect = new ConstellationEffect(canvas);
+      globalSaturnEffect = null;
     }
     
     // Ensure correct size immediately
@@ -48,6 +60,7 @@
   
   onDestroy(() => {
     if (activeEffect) activeEffect.destroy();
+    globalSaturnEffect = null;
   });
 </script>