Share scenario modulation

jest.config.ts

@@ -0,0 +1,11 @@
+export default {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+  },
+  testMatch: ["**/*.test.ts", "**/*.test.tsx"],
+};

package.json

@@ -12,7 +12,10 @@
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "dependencies": {
     "@ant-design/icons": "^5.3.0",
@@ -39,6 +42,7 @@
     "@storybook/react": "^8.4.4",
     "@storybook/react-webpack5": "^8.4.4",
     "@storybook/test": "^8.4.4",
+    "@types/jest": "^29.5.14",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.2.0",
@@ -49,14 +53,18 @@
     "eslint-plugin-storybook": "^0.11.0",
     "gh-pages": "^6.2.0",
     "globals": "^15.11.0",
+    "jest": "^29.7.0",
     "sass": "^1.81.0",
     "sass-embedded": "^1.81.0",
     "sass-loader": "^16.0.3",
     "storybook": "^8.4.4",
     "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.15.0",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vitest": "^2.1.6"
   },
   "eslintConfig": {
     "extends": [

src/components/GravitySimulator/GravitySimulator.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from "react";
-import { Point2D, GravityPoint, Force } from "../../utils/types/physics";
+import { Point2D, GravityPoint } from "../../utils/types/physics";
 import { GravityPointComponent } from "../GravityPoint/GravityPoint";
 import { ParticleRenderer } from "../ParticleRenderer/ParticleRenderer";
 import { StarPalette } from "../StarPalette/StarPalette";
@@ -45,12 +45,6 @@
   className?: string;
 }
 
-interface SimulationScenario {
-  settings: typeof physicsConfig;
-  gravityPoints: GravityPoint[];
-  particles: Array<Omit<Particle, "trails" | "force">>;
-}
-
 export const GravitySimulator: React.FC<GravitySimulatorProps> = ({
   gravityRef,
   pointerPos,
@@ -103,7 +97,7 @@
     }, 0);
   });
 
   const handleReportNewPosition = useCallback(
     throttle((point: Point2D, index: number) => {
       const offset = getContainerOffset(gravityRef);
       if (!offset) return;
@@ -313,7 +307,6 @@
               y,
               label: template.label,
               mass: template.mass,
-              color: template.color,
             },
           ]);
         }
@@ -348,6 +341,7 @@
           settings: physicsConfig,
           gravityPoints,
           particles: particles.map(
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             ({ trails, force, ...particle }) => particle
           ),
         },
@@ -369,6 +363,7 @@
           settings: physicsConfig,
           gravityPoints,
           particles: particles.map(
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             ({ trails, force, ...particle }) => particle
           ),
         },

src/components/SaveScenarioModal/SaveScenarioModal.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Scenario } from "../../types/scenario";
-import { createShareableLink } from "../../utils/compression";
 import { CopyOutlined, CheckOutlined } from "@ant-design/icons";
 
 interface SaveScenarioModalProps {

src/components/ScenarioPanel/ScenarioPanel.tsx

@@ -21,7 +21,6 @@
 export const ScenarioPanel: React.FC<ScenarioPanelProps> = ({
   onSelectScenario,
   isOpen,
-  onClose,
 }) => {
   const [activeTab, setActiveTab] = useState("1");
   const { savedScenarios, deleteSavedScenario } = useSettings();
@@ -35,7 +34,7 @@
         onSelectScenario(sharedScenario);
       }
     }
   }, [searchParams]);
 
   return (
     <AnimatePresence>

src/components/SimulatorSettings/SimulatorSettings.tsx

@@ -1,18 +1,20 @@
-import React, { useState } from "react";
+import React from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { PHYSICS_CONFIG, SETTINGS_METADATA } from "../../constants/physics";
+import {
+  DEFAULT_PHYSICS_CONFIG,
+  SETTINGS_METADATA,
+} from "../../constants/physics";
 import { useSettings } from "../../contexts/SettingsContext";
 
 interface SimulatorSettingsProps {
-  onSettingsChange: (settings: typeof PHYSICS_CONFIG) => void;
+  onSettingsChange: (settings: typeof DEFAULT_PHYSICS_CONFIG) => void;
   isOpen: boolean;
   onClose: () => void;
 }
 
 export const SimulatorSettings: React.FC<SimulatorSettingsProps> = ({
   onSettingsChange,
   isOpen,
-  onClose,
 }) => {
   const {
     settings,
@@ -40,7 +42,7 @@ export const SimulatorSettings: React.FC<SimulatorSettingsProps> = ({
     onSettingsChange({ ...settings, ...newSettings });
   };
 
-  const shouldShowSetting = (key: keyof typeof PHYSICS_CONFIG) => {
+  const shouldShowSetting = (key: keyof typeof DEFAULT_PHYSICS_CONFIG) => {
     const isDevSetting = SETTINGS_METADATA[key].isDev;
     return !isDevSetting || (isDevelopment && showDevSettings);
   };
@@ -130,10 +132,13 @@ export const SimulatorSettings: React.FC<SimulatorSettingsProps> = ({
               )}
 
               {Object.entries(settings).map(([key, value]) =>
-                shouldShowSetting(key as keyof typeof PHYSICS_CONFIG) ? (
+                shouldShowSetting(
+                  key as keyof typeof DEFAULT_PHYSICS_CONFIG
+                ) ? (
                   <div key={key} style={{ marginBottom: "16px" }}>
-                    {SETTINGS_METADATA[key as keyof typeof PHYSICS_CONFIG]
-                      .type === "boolean" ? (
+                    {SETTINGS_METADATA[
+                      key as keyof typeof DEFAULT_PHYSICS_CONFIG
+                    ].type === "boolean" ? (
                       <label
                         style={{
                           display: "flex",
@@ -228,7 +233,7 @@ export const SimulatorSettings: React.FC<SimulatorSettingsProps> = ({
                           value={value as number}
                           onChange={(e) =>
                             handleSettingChange(
-                              key as keyof typeof PHYSICS_CONFIG,
+                              key as keyof typeof DEFAULT_PHYSICS_CONFIG,
                               Number(e.target.value)
                             )
                           }

src/constants/physics.ts

@@ -14,8 +14,20 @@ interface BooleanSettingMetadata {
 }
 
 type SettingMetadata = SliderSettingMetadata | BooleanSettingMetadata;
-
-export const PHYSICS_CONFIG = {
+export interface PhysicsSettings {
+  NEW_PARTICLE_MASS: number;
+  NEW_PARTICLE_ELASTICITY: number;
+  FRICTION: number;
+  DELTA_TIME: number;
+  POINTER_MASS: number;
+  SHOW_VELOCITY_ARROWS: boolean;
+  SHOW_FORCE_ARROWS: boolean;
+  CONSTANT_FORCE_X: number;
+  CONSTANT_FORCE_Y: number;
+  SOLID_BOUNDARIES: boolean;
+  PARTICLES_EXERT_GRAVITY: boolean;
+}
+export const DEFAULT_PHYSICS_CONFIG: PhysicsSettings = {
   NEW_PARTICLE_MASS: 0.1,
   NEW_PARTICLE_ELASTICITY: 0.8,
   FRICTION: 1,
@@ -30,7 +42,7 @@ export const PHYSICS_CONFIG = {
 } as const;
 
 export const SETTINGS_METADATA: Record<
-  keyof typeof PHYSICS_CONFIG,
+  keyof typeof DEFAULT_PHYSICS_CONFIG,
   SettingMetadata
 > = {
   NEW_PARTICLE_MASS: {

src/contexts/SettingsContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useState, useCallback } from "react";
-import { PHYSICS_CONFIG } from "../constants/physics";
+import { DEFAULT_PHYSICS_CONFIG, PhysicsSettings } from "../constants/physics";
 import { Scenario } from "../types/scenario";
 
 const STORAGE_KEYS = {
@@ -9,10 +9,10 @@
 } as const;
 
 interface SettingsContextType {
-  settings: typeof PHYSICS_CONFIG;
+  settings: PhysicsSettings;
   showDevSettings: boolean;
   savedScenarios: Scenario[];
-  updateSettings: (newSettings: Partial<typeof PHYSICS_CONFIG>) => void;
+  updateSettings: (newSettings: Partial<PhysicsSettings>) => void;
   updateShowDevSettings: (show: boolean) => void;
   resetSettings: () => void;
   saveScenario: (scenario: Scenario) => void;
@@ -25,20 +25,20 @@
 export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const [settings, setSettings] = useState(() => {
+  const [settings, setSettings] = useState<PhysicsSettings>(() => {
     const savedSettings = localStorage.getItem(STORAGE_KEYS.SETTINGS);
     if (savedSettings) {
       const parsedSettings = JSON.parse(savedSettings);
       const validSettings = Object.keys(parsedSettings).reduce((acc, key) => {
-        if (key in PHYSICS_CONFIG) {
+        if (key in DEFAULT_PHYSICS_CONFIG) {
           acc[key] = parsedSettings[key];
         }
         return acc;
-      }, {} as Partial<typeof PHYSICS_CONFIG>);
+      }, {} as Partial<PhysicsSettings>);
 
-      return { ...PHYSICS_CONFIG, ...validSettings };
+      return { ...DEFAULT_PHYSICS_CONFIG, ...validSettings };
     }
-    return PHYSICS_CONFIG;
+    return DEFAULT_PHYSICS_CONFIG;
   });
 
   const [showDevSettings, setShowDevSettings] = useState(() => {
@@ -52,13 +52,13 @@
   });
 
   const updateSettings = useCallback(
-    (newSettings: Partial<typeof PHYSICS_CONFIG>) => {
+    (newSettings: Partial<PhysicsSettings>) => {
       const validNewSettings = Object.keys(newSettings).reduce((acc, key) => {
-        if (key in PHYSICS_CONFIG) {
-          acc[key] = newSettings[key as keyof typeof PHYSICS_CONFIG];
+        if (key in DEFAULT_PHYSICS_CONFIG) {
+          acc[key] = newSettings[key as keyof typeof DEFAULT_PHYSICS_CONFIG];
         }
         return acc;
-      }, {} as Partial<typeof PHYSICS_CONFIG>);
+      }, {} as Partial<PhysicsSettings>);
 
       setSettings((prevSettings) => {
         const updatedSettings = { ...prevSettings, ...validNewSettings };
@@ -78,8 +78,11 @@
   }, []);
 
   const resetSettings = useCallback(() => {
-    setSettings(PHYSICS_CONFIG);
-    localStorage.setItem(STORAGE_KEYS.SETTINGS, JSON.stringify(PHYSICS_CONFIG));
+    setSettings(DEFAULT_PHYSICS_CONFIG);
+    localStorage.setItem(
+      STORAGE_KEYS.SETTINGS,
+      JSON.stringify(DEFAULT_PHYSICS_CONFIG)
+    );
   }, []);
 
   const saveScenario = useCallback((scenario: Scenario) => {
@@ -123,7 +126,7 @@
   );
 };
 
 export const useSettings = () => {
   const context = useContext(SettingsContext);
   if (!context) {
     throw new Error("useSettings must be used within a SettingsProvider");

src/types/particle.ts

@@ -6,6 +6,7 @@ export interface ParticleMechanics {
   force: Force;
   mass: number;
   elasticity: number;
+  trails: TrailPoint[];
 }
 
 export interface TrailPoint extends Point2D {

src/types/scenario.ts

@@ -1,34 +1,11 @@
+import { GravityPoint } from "../utils/types/physics";
+import { Particle } from "./particle";
+import { PhysicsSettings } from "../constants/physics";
+
 export interface ScenarioData {
-  settings: {
-    NEW_PARTICLE_MASS: number;
-    NEW_PARTICLE_ELASTICITY: number;
-    FRICTION: number;
-    DELTA_TIME: number;
-    POINTER_MASS: number;
-    SHOW_VELOCITY_ARROWS: boolean;
-    SHOW_FORCE_ARROWS: boolean;
-    CONSTANT_FORCE_X: number;
-    CONSTANT_FORCE_Y: number;
-    SOLID_BOUNDARIES: boolean;
-    PARTICLES_EXERT_GRAVITY: boolean;
-  };
-  gravityPoints: Array<{
-    x: number;
-    y: number;
-    label: string;
-    mass: number;
-    color: string;
-  }>;
-  particles: Array<{
-    id: string;
-    position: { x: number; y: number };
-    velocity: { x: number; y: number };
-    mass: number;
-    elasticity: number;
-    color: string;
-    size: number;
-    showVectors: boolean;
-  }>;
+  settings: PhysicsSettings;
+  gravityPoints: Array<GravityPoint>;
+  particles: Array<Omit<Particle, "trails" | "force">>;
 }
 
 export interface Scenario {

src/types/star.ts

@@ -4,14 +4,6 @@ export interface StarTemplate {
   size: number;
 }
 
-export interface GravityPoint {
-  x: number;
-  y: number;
-  label: string;
-  mass: number;
-  color: string;
-}
-
 export enum StarClass {
   BROWN_DWARF = "BROWN_DWARF", // <0.08 solar masses
   RED_DWARF = "RED_DWARF", // 0.08-0.45 solar masses