Scenario

src/components/GravitySimulator/GravitySimulator.tsx

@@ -22,6 +22,11 @@
 import { motion } from "framer-motion";
 import { BsPlayFill, BsPauseFill } from "react-icons/bs";
 import { DebugData } from "../../types/Debug";
+import { AiOutlineExport } from "react-icons/ai";
+import { VscLibrary } from "react-icons/vsc";
+import { ScenarioPanel } from "../ScenarioPanel/ScenarioPanel";
+import { Scenario } from "../../types/scenario";
+import { SettingOutlined } from "@ant-design/icons";
 
 interface ParticleMechanics {
   position: Point2D;
@@ -50,6 +55,12 @@
   className?: string;
 }
 
+interface SimulationScenario {
+  settings: typeof physicsConfig;
+  gravityPoints: GravityPoint[];
+  particles: Array<Omit<Particle, "trails" | "force">>;
+}
+
 const generatePastelColor = () => {
   const r = Math.floor(Math.random() * 75 + 180);
   const g = Math.floor(Math.random() * 75 + 180);
@@ -74,6 +85,9 @@
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [throttledPointerPos, setThrottledPointerPos] = useState(pointerPos);
   const [isPaused, setIsPaused] = useState(false);
+  const [isScenarioPanelOpen, setIsScenarioPanelOpen] = useState(false);
+  const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
+
   const toggleFullscreen = useCallback(() => {
     if (!document.fullscreenElement) {
       gravityRef.current?.requestFullscreen();
@@ -100,7 +114,7 @@
     }, 0);
   });
 
   const handleReportNewPosition = useCallback(
     throttle((point: Point2D, index: number) => {
       const offset = getContainerOffset(gravityRef);
       if (!offset) return;
@@ -316,7 +330,71 @@
   );
 
   const handlePointDelete = useCallback((index: number) => {
-    setGravityPoints((points) => points.filter((_, i) => i !== index));
+    setGravityPoints((currentPoints) => {
+      // Create a new array without the deleted point
+      const newPoints = currentPoints.filter((_, i) => i !== index);
+
+      // Ensure each remaining point maintains its position and ID
+      return newPoints.map((point) => ({
+        ...point,
+        id: point.id || Math.random().toString(36).substr(2, 9), // Ensure ID exists
+      }));
+    });
+  }, []);
+
+  const exportScenario = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const scenario: SimulationScenario = {
+        settings: physicsConfig,
+        gravityPoints,
+        particles: particles.map(({ trails, force, ...particle }) => particle),
+      };
+      console.log(JSON.stringify(scenario, null, 2));
+    },
+    [physicsConfig, gravityPoints, particles]
+  );
+
+  const handleSelectScenario = useCallback(
+    (scenario: Scenario) => {
+      // First, ensure all gravity points have unique IDs
+      const newGravityPoints = scenario.data.gravityPoints.map((point) => ({
+        ...point,
+        id: point.id || Math.random().toString(36).substr(2, 9), // Ensure each point has an ID
+      }));
+
+      // Reset the simulation state
+      setParticles([]);
+      setGravityPoints([]); // Clear existing points first
+
+      // Update settings and state in the next frame to ensure clean rendering
+      requestAnimationFrame(() => {
+        updateSettings(scenario.data.settings);
+        setGravityPoints(newGravityPoints);
+        setParticles(
+          scenario.data.particles.map((particle) => ({
+            ...particle,
+            trails: [{ ...particle.position, timestamp: Date.now() }],
+            force: { fx: 0, fy: 0 },
+          }))
+        );
+        setIsSimulationStarted(true);
+        setIsScenarioPanelOpen(false);
+      });
+    },
+    [updateSettings]
+  );
+
+  const handleSettingsPanelToggle = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsSettingsPanelOpen((prev) => !prev);
+    setIsScenarioPanelOpen(false);
+  }, []);
+
+  const handleScenarioPanelToggle = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsScenarioPanelOpen((prev) => !prev);
+    setIsSettingsPanelOpen(false);
   }, []);
 
   return (
@@ -431,6 +509,16 @@
               <MdFullscreen size={20} />
             )}
           </motion.button>
+
+          <motion.button
+            onClick={exportScenario}
+            className="floating-panel floating-button"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            title="Export Scenario"
+          >
+            <AiOutlineExport size={20} />
+          </motion.button>
         </div>
 
         <StarPalette
@@ -471,7 +559,48 @@
             />
           ))}
 
-        <SimulatorSettings onSettingsChange={updateSettings} />
+        <SimulatorSettings
+          onSettingsChange={updateSettings}
+          isOpen={isSettingsPanelOpen}
+          onClose={() => setIsSettingsPanelOpen(false)}
+        />
+
+        <div
+          style={{
+            position: "absolute",
+            bottom: 20,
+            right: 20,
+            display: "flex",
+            gap: "10px",
+            zIndex: 1001,
+          }}
+        >
+          <motion.button
+            onClick={handleScenarioPanelToggle}
+            className="floating-panel floating-button"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            title="Scenarios"
+          >
+            <VscLibrary size={20} />
+          </motion.button>
+
+          <motion.button
+            onClick={handleSettingsPanelToggle}
+            className="floating-panel floating-button"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            title="Settings"
+          >
+            <SettingOutlined size={20} />
+          </motion.button>
+        </div>
+
+        <ScenarioPanel
+          isOpen={isScenarioPanelOpen}
+          onClose={() => setIsScenarioPanelOpen(false)}
+          onSelectScenario={handleSelectScenario}
+        />
 
         <a
           href="https://github.com/yhattav"

src/components/ScenarioPanel/ScenarioPanel.scss

@@ -0,0 +1,65 @@
+.scenario-panel {
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  width: 300px;
+  background: rgba(30, 30, 30, 0.95);
+  border-radius: 12px;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  transform-origin: top right;
+
+  .scenarios-list {
+    margin-top: 10px;
+  }
+
+  .scenario-item {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    h3 {
+      margin: 0 0 4px 0;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  :global(.ant-tabs) {
+    color: inherit;
+  }
+
+  :global(.ant-tabs-tab) {
+    color: rgba(255, 255, 255, 0.7) !important;
+    padding: 8px 0;
+
+    &:global(.ant-tabs-tab-active) {
+      color: rgba(255, 255, 255, 0.9) !important;
+    }
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.8) !important;
+    }
+  }
+
+  :global(.ant-tabs-ink-bar) {
+    background: white;
+  }
+
+  :global(.ant-tabs-nav) {
+    margin-bottom: 12px;
+  }
+
+  :global(.ant-tabs-content) {
+    height: 100%;
+  }
+}

src/components/ScenarioPanel/ScenarioPanel.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { Tabs } from "antd";
+import { motion, AnimatePresence } from "framer-motion";
+import { Scenario } from "../../types/scenario";
+import { defaultScenarios } from "../../scenarios/defaults";
+import "./ScenarioPanel.scss";
+import { VscLibrary } from "react-icons/vsc";
+
+interface ScenarioPanelProps {
+  onSelectScenario: (scenario: Scenario) => void;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ScenarioPanel: React.FC<ScenarioPanelProps> = ({
+  onSelectScenario,
+  isOpen,
+  onClose,
+}) => {
+  const [activeTab, setActiveTab] = useState("1");
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 20 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={{ type: "spring", damping: 20, stiffness: 300 }}
+          onClick={(e) => e.stopPropagation()}
+          className="floating-panel settings-panel"
+          style={{ color: "rgba(255, 255, 255, 0.9)" }}
+        >
+          <div
+            style={{
+              padding: "20px 20px 0 20px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.15)",
+              background: "rgba(0, 0, 0, 0.2)",
+              borderTopLeftRadius: "12px",
+              borderTopRightRadius: "12px",
+            }}
+          >
+            <h3
+              style={{
+                margin: "0 0 20px 0",
+                fontSize: "1.2rem",
+                fontWeight: 500,
+                color: "#fff",
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+              }}
+            >
+              <VscLibrary style={{ opacity: 0.7 }} />
+              Scenarios
+            </h3>
+          </div>
+
+          <div
+            style={{
+              padding: "20px",
+              overflowY: "auto",
+              maxHeight: "calc(100vh - 200px)",
+              scrollbarWidth: "thin",
+              scrollbarColor: "rgba(255, 255, 255, 0.3) transparent",
+            }}
+          >
+            <Tabs
+              activeKey={activeTab}
+              onChange={setActiveTab}
+              style={{ color: "rgba(255, 255, 255, 0.9)" }}
+              items={[
+                {
+                  key: "1",
+                  label: (
+                    <span
+                      style={{
+                        fontSize: "0.9rem",
+                        color: "rgba(255, 255, 255, 0.9)",
+                      }}
+                    >
+                      Default
+                    </span>
+                  ),
+                  children: (
+                    <div className="scenarios-list">
+                      {defaultScenarios.map((scenario) => (
+                        <motion.div
+                          key={scenario.id}
+                          className="scenario-item"
+                          onClick={() => onSelectScenario(scenario)}
+                          whileHover={{ scale: 1.02 }}
+                          whileTap={{ scale: 0.98 }}
+                        >
+                          <h3
+                            style={{
+                              fontSize: "0.9rem",
+                              color: "rgba(255, 255, 255, 0.9)",
+                              fontWeight: "normal",
+                            }}
+                          >
+                            {scenario.name}
+                          </h3>
+                          <p
+                            style={{
+                              fontSize: "0.85rem",
+                              color: "rgba(255, 255, 255, 0.7)",
+                            }}
+                          >
+                            {scenario.description}
+                          </p>
+                        </motion.div>
+                      ))}
+                    </div>
+                  ),
+                },
+                {
+                  key: "2",
+                  label: (
+                    <span
+                      style={{
+                        fontSize: "0.9rem",
+                        color: "rgba(255, 255, 255, 0.9)",
+                      }}
+                    >
+                      Saved
+                    </span>
+                  ),
+                  children: (
+                    <div
+                      className="scenarios-list"
+                      style={{ color: "rgba(255, 255, 255, 0.7)" }}
+                    >
+                      Coming soon...
+                    </div>
+                  ),
+                },
+              ]}
+            />
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};