feat: add mouse interaction toggle functionality

src/components/MainView.astro

@@ -134,6 +134,11 @@ import Particles from "./Particles.astro";
       marbleSystem.setCollisions(e.detail.enabled);
     }) as EventListener);
 
+    // Toggle Mouse Interaction
+    window.addEventListener("toggle-mouse-interaction", ((e: CustomEvent) => {
+      marbleSystem.setMouseInteraction(e.detail.enabled);
+    }) as EventListener);
+
     // Toggle Device Motion
     window.addEventListener("toggle-device-motion", ((e: CustomEvent) => {
       marbleSystem.setDeviceMotion(e.detail.enabled);

src/components/SettingsMenu.astro

@@ -54,6 +54,12 @@
       <span class="label-text">Collisions</span>
     </label>
 
+    <label class="toggle-switch">
+      <input type="checkbox" id="mouse-interaction-toggle" checked />
+      <span class="slider"></span>
+      <span class="label-text">MouseInteract</span>
+    </label>
+
     <label class="toggle-switch" id="device-motion-container">
       <input type="checkbox" id="device-motion-toggle" checked />
       <span class="slider"></span>
@@ -106,6 +112,9 @@
     background: document.getElementById(
       "background-toggle",
     ) as HTMLInputElement,
+    mouseInteraction: document.getElementById(
+      "mouse-interaction-toggle",
+    ) as HTMLInputElement,
     deviceMotion: document.getElementById(
       "device-motion-toggle",
     ) as HTMLInputElement,
@@ -125,6 +134,11 @@
       emit("toggle-collision", (e.target as HTMLInputElement).checked),
     );
   }
+  if (toggles.mouseInteraction) {
+    toggles.mouseInteraction.addEventListener("change", (e) =>
+      emit("toggle-mouse-interaction", (e.target as HTMLInputElement).checked),
+    );
+  }
   if (toggles.deviceMotion) {
     toggles.deviceMotion.addEventListener("change", (e) =>
       emit("toggle-device-motion", (e.target as HTMLInputElement).checked),

src/utils/marbleSystem.ts

@@ -173,9 +173,11 @@ export class MarbleSystem {
 
     for (let i = 0; i < subSteps; i++) {
       // Apply mouse force field
-      for (const marble of this.marbles) {
-        if (this.mouseInteraction.shouldApplyForce(marble)) {
-          this.mouseInteraction.applyForce(marble, subDt);
+      if (this.mouseInteractionEnabled) {     //mouse-interavtion-trigger controll
+        for (const marble of this.marbles) {
+          if (this.mouseInteraction.shouldApplyForce(marble)) {
+            this.mouseInteraction.applyForce(marble, subDt);
+          }
         }
       }
 
@@ -356,6 +358,14 @@ export class MarbleSystem {
     this.deviceOrientationInteraction.updateConfig({ enable: enabled });
   }
 
+  // Mouse interaction enabled state
+  private mouseInteractionEnabled: boolean = true;
+
+  // Toggle mouse interaction
+  public setMouseInteraction(enabled: boolean): void {
+    this.mouseInteractionEnabled = enabled;
+  }
+
   // Toggle debug mode (show velocity vectors)
   public setDebugMode(enabled: boolean): void {
     this.debugMode = enabled;