feat: refactor environment handling to support location-based environments; implement environment editor and remove location switcher

Author: patrick204nqh

src/entity/vessel/ship.ts

@@ -138,8 +138,10 @@ export function createVesselEntity(model: ModelEntity, vesselId?: string, store?
       }
 
       if (sailForce && t > 0 && store) {
-        const env = store.get('environment');
-        const wind = env.wind;
+        const locations = store.get('locations');
+        const activeLoc = store.get('activeLocation');
+        const env = locations[activeLoc]?.environment;
+        const wind = env?.wind;
         if (wind) {
           const wDirX = Math.sin(wind.direction);
           const wDirZ = -Math.cos(wind.direction);

src/kernel.test.ts

@@ -10,15 +10,15 @@ import type { ScenePlugin } from './plugins/types';
 describe('StateStore integration', () => {
   it('stores and retrieves values by dotted path', () => {
     const store = new StateStore(createDefaultState());
-    expect(store.get('environment.sky.gradientTop')).toBe('#5588bb');
+    expect(store.get('locations.north-sea.environment.sky.gradientTop')).toBe('#5588bb');
   });
 
   it('notifies subscribers on change', () => {
     const store = new StateStore(createDefaultState());
     const fn = vi.fn();
-    store.subscribe('environment.sky.gradientTop', fn);
-    store.set('environment.sky.gradientTop', '#ff0000');
-    expect(fn).toHaveBeenCalledWith('#ff0000', 'environment.sky.gradientTop');
+    store.subscribe('locations.north-sea.environment.sky.gradientTop', fn);
+    store.set('locations.north-sea.environment.sky.gradientTop', '#ff0000');
+    expect(fn).toHaveBeenCalledWith('#ff0000', 'locations.north-sea.environment.sky.gradientTop');
   });
 });
 

src/main.ts

@@ -6,14 +6,14 @@ import { LOCATION_PRESETS, CCIV_WORLD } from './state/worlds';
 import { inspectorPlugin } from './plugins/inspector';
 import { gizmosPlugin } from './plugins/gizmos';
 import { snapshotPlugin } from './plugins/snapshot';
-import { locationSwitcherPlugin } from './plugins/location-switcher';
 import { simulationPlugin } from './plugins/simulation';
 import { modeTogglePlugin } from './plugins/mode-toggle';
 import { sceneGraphPlugin } from './plugins/scene-graph';
 import { performanceHudPlugin } from './plugins/performance-hud';
 import { shipHudPlugin } from './plugins/ship-hud';
 import { environmentControllerPlugin, initEnvController } from './plugins/environment-controller';
 import { physicsDebugPlugin } from './plugins/physics-debug';
+import { environmentEditorPlugin } from './plugins/environment-editor';
 import { mountReactShell } from './ui/main';
 import { bridgeStore } from './ui/bridge';
 async function main() {
@@ -22,13 +22,13 @@ async function main() {
   kernel.registerPlugin(inspectorPlugin);
   kernel.registerPlugin(gizmosPlugin);
   kernel.registerPlugin(snapshotPlugin);
-  kernel.registerPlugin(locationSwitcherPlugin);
   kernel.registerPlugin(simulationPlugin);
   kernel.registerPlugin(modeTogglePlugin);
   kernel.registerPlugin(sceneGraphPlugin);
   kernel.registerPlugin(performanceHudPlugin);
   kernel.registerPlugin(shipHudPlugin);
   kernel.registerPlugin(physicsDebugPlugin);
+  kernel.registerPlugin(environmentEditorPlugin);
   kernel.registerPlugin(environmentControllerPlugin);
   initEnvController(kernel.scene);
   const { scene, store } = kernel;

src/plugins/environment-controller/index.ts

@@ -8,7 +8,6 @@ import type { EnvironmentState, WeatherType } from '../../state/types';
 import type { FogSpec } from '../../scene/types';
 
 let _scene: import('../../scene/types').IScene | null = null;
-let _currentWeather: WeatherType = 'clear';
 
 interface TransitionState {
   fromFog: FogSpec;
@@ -46,7 +45,7 @@ function rebuildEnvironment(env: EnvironmentState): void {
 
   const current = entityManager.getEntities();
   for (const e of current) {
-    if (e.id === 'environment' || e.id === 'rain') entityManager.detach(e);
+    if (e.id === 'environment' || e.id === 'rain' || e.id === 'mist') entityManager.detach(e);
   }
 
   const effective = computeEffectiveEnvironment(env);
@@ -59,30 +58,58 @@ function rebuildEnvironment(env: EnvironmentState): void {
   entityManager.attach(createEnvironmentEntity(env), s);
 }
 
+function getActiveEnvironment(ctx: PluginContext): EnvironmentState {
+  const loc = ctx.state.get('activeLocation') as string;
+  const envs = ctx.state.get('locations') as Record<string, { environment: EnvironmentState }>;
+  return envs[loc]?.environment;
+}
+
+/** Apply the current environment state immediately (used by environment editor). */
+export function applyEnvironment(ctx: PluginContext): void {
+  const env = getActiveEnvironment(ctx);
+  if (env) rebuildEnvironment(env);
+}
+
 export const environmentControllerPlugin: ScenePlugin = {
   id: 'environment-controller',
   label: 'Environment Controller',
   modes: new Set(['edit', 'play']),
   priority: 100,
 
   init(ctx: PluginContext) {
-    _currentWeather = (ctx.state.get('environment.weather') as WeatherType) ?? 'clear';
-
-    const initEnv = ctx.state.get('environment') as EnvironmentState;
-    const initEffective = computeEffectiveEnvironment(initEnv);
-    if (_scene) {
-      _scene.fog = initEffective.fog;
-      if (initEffective.sky) {
-        _scene.background = initEffective.sky.gradientTop;
+    const initEnv = getActiveEnvironment(ctx);
+    if (initEnv) {
+      const initEffective = computeEffectiveEnvironment(initEnv);
+      if (_scene) {
+        _scene.fog = initEffective.fog;
+        if (initEffective.sky) {
+          _scene.background = initEffective.sky.gradientTop;
+        }
       }
     }
 
-    ctx.state.watch(s => s.environment.weather, (w) => {
-      if (w === _currentWeather) return;
-      _currentWeather = w ?? 'clear';
+    let _lastLocation = ctx.state.get('activeLocation') as string;
+    let _lastWeather: WeatherType = initEnv?.weather ?? 'clear';
+
+    ctx.state.watch(s => ({
+      loc: s.activeLocation,
+      weather: s.locations[s.activeLocation]?.environment.weather ?? 'clear',
+    }), ({ loc, weather }) => {
+      if (loc !== _lastLocation) {
+        _lastLocation = loc;
+        _lastWeather = weather;
+        _transition = null;
+        const env = getActiveEnvironment(ctx);
+        if (env) rebuildEnvironment(env);
+        return;
+      }
 
-      const baseEnv = ctx.state.get('environment') as EnvironmentState;
-      const toEnv = { ...baseEnv, weather: _currentWeather };
+      if (weather === _lastWeather) return;
+      _lastWeather = weather;
+
+      const env = getActiveEnvironment(ctx);
+      if (!env) return;
+      const toEnv = { ...env, weather };
       const toEffective = computeEffectiveEnvironment(toEnv);
       const fromFog = _scene?.fog ?? toEffective.fog;
       const fromBg = _scene?.background ?? toEffective.sky?.gradientTop ?? '#406888';
@@ -98,13 +125,6 @@ export const environmentControllerPlugin: ScenePlugin = {
         toEnv,
       };
     });
-
-    ctx.state.watch(s => s.activeLocation, () => {
-      _transition = null;
-      const env = ctx.state.get('environment') as EnvironmentState;
-      const merged = { ...env, weather: _currentWeather };
-      rebuildEnvironment(merged);
-    });
   },
 
   render(dt: number) {

src/plugins/environment-editor/index.ts

@@ -0,0 +1,20 @@
+import type { ScenePlugin, PluginContext } from '../types';
+import { registerTool, destroyTool } from '../sidebar';
+import { LocationEnvironmentPanel } from '../../ui/components/location-environment-panel';
+import { initLocationCtx } from '../../ui/stores/location-store';
+
+export const environmentEditorPlugin: ScenePlugin = {
+  id: 'environment-editor',
+  label: 'Location & Environment',
+  modes: new Set(['edit', 'play']),
+  priority: 5,
+
+  init(ctx: PluginContext) {
+    initLocationCtx(ctx);
+    registerTool({ id: 'environment-editor', label: 'Location & Environment', icon: '🌍', component: LocationEnvironmentPanel });
+  },
+
+  destroy() {
+    destroyTool('environment-editor');
+  },
+};

src/plugins/location-switcher/index.ts

@@ -48,9 +48,12 @@ export const shipHudPlugin: ScenePlugin = (() => {
       const store = useShipHudStore.getState();
       if (!store.visible) return;
 
-      const env = (window as any).__store?.get('environment') as any;
-      const windSpeed = (env?.ocean?.windSpeed ?? 12).toFixed(1);
-      const swellHeight = (env?.ocean?.swellHeight ?? 2.4).toFixed(1);
+      const s = (window as any).__store;
+      const loc = s?.get('activeLocation');
+      const locs = s?.get('locations') as Record<string, { environment: { wind: { speed: number }; waves: { amplitude: number }[] } }> | undefined;
+      const env = locs?.[loc]?.environment;
+      const windSpeed = (env?.wind?.speed ?? 12).toFixed(1);
+      const swellHeight = (env?.waves?.[0]?.amplitude ?? 2.4).toFixed(1);
 
       timeAccum += dt;
       const totalMinutes = Math.floor(timeAccum * 1.5) % 1440;

src/plugins/ship-hud/index.ts

@@ -5,8 +5,8 @@ describe('createDefaultState', () => {
   it('returns a valid AppState', () => {
     const state = createDefaultState();
     expect(state.activeLocation).toBe('north-sea');
-    expect(state.environment.sky.gradientTop).toBeTruthy();
-    expect(state.environment.waves.length).toBe(8);
+    expect(state.locations['north-sea'].environment.sky.gradientTop).toBeTruthy();
+    expect(state.locations['north-sea'].environment.waves.length).toBe(8);
     expect(state.instances.ship.visible).toBe(true);
     expect(Object.keys(state.locations)).toContain('north-sea');
   });

src/state/defaults.test.ts

@@ -1,14 +1,21 @@
 import type { AppState } from './types';
 import { LOCATION_PRESETS } from './worlds';
 
+function addWeatherToLocation(env: EnvironmentState): EnvironmentState {
+  return { ...structuredClone(env), weather: 'clear' };
+}
+
 export function createDefaultState(): AppState {
-  const preset = LOCATION_PRESETS['north-sea'];
   return {
     activeLocation: 'north-sea',
     dirtyLocations: [],
     time: { speed: 1, paused: false, elapsed: 0 },
-    environment: { ...structuredClone(preset.environment), weather: 'clear' },
-    instances: structuredClone(preset.instances),
-    locations: structuredClone(LOCATION_PRESETS),
+    instances: structuredClone(LOCATION_PRESETS['north-sea'].instances),
+    locations: Object.fromEntries(
+      Object.entries(LOCATION_PRESETS).map(([id, preset]) => [
+        id,
+        { environment: addWeatherToLocation(preset.environment), instances: structuredClone(preset.instances) },
+      ]),
+    ),
   };
 }

src/state/defaults.ts

@@ -15,7 +15,7 @@ describe('LocationTracker', () => {
 
   it('marks location dirty when environment changes', () => {
     expect(store.get('dirtyLocations')).toEqual([]);
-    store.set('environment.fog.color', '#ff0000');
+    store.set('locations.north-sea.environment.fog.color', '#ff0000');
     expect(store.get('dirtyLocations')).toEqual(['north-sea']);
   });
 
@@ -27,24 +27,24 @@ describe('LocationTracker', () => {
 
   it('does not add duplicate dirty locations', () => {
     expect(store.get('dirtyLocations')).toEqual([]);
-    store.set('environment.fog.color', '#ff0000');
+    store.set('locations.north-sea.environment.fog.color', '#ff0000');
     store.set('instances.ship.transform.position', [10, 20, 30]);
     expect(store.get('dirtyLocations')).toEqual(['north-sea']);
   });
 
   it('cleans up subscription on stop()', () => {
     const spy = vi.spyOn(store, 'subscribe');
     tracker.stop();
-    store.set('environment.fog.color', '#ff0000');
+    store.set('locations.north-sea.environment.fog.color', '#ff0000');
     expect(store.get('dirtyLocations')).toEqual([]);
   });
 
   it('handles activeLocation changes correctly', () => {
     // Setup a second location
     const initialState = createDefaultState();
+    const northEnv = initialState.locations['north-sea'].environment;
     initialState.locations['south-sea'] = {
-      id: 'south-sea',
-      environment: initialState.environment,
+      environment: structuredClone(northEnv),
       instances: {},
     };
     store = new StateStore(initialState);
@@ -54,11 +54,11 @@ describe('LocationTracker', () => {
     store.set('activeLocation', 'south-sea');
     expect(store.get('dirtyLocations')).toEqual([]);
 
-    store.set('environment.fog.color', '#00ff00'); // Change in south-sea
+    store.set('locations.south-sea.environment.fog.color', '#00ff00'); // Change in south-sea
     expect(store.get('dirtyLocations')).toEqual(['south-sea']);
 
     store.set('activeLocation', 'north-sea');
-    store.set('environment.sky.gradientBottom', '#0000ff'); // Change in north-sea
+    store.set('locations.north-sea.environment.sky.gradientBottom', '#0000ff'); // Change in north-sea
     expect(store.get('dirtyLocations')).toEqual(['south-sea', 'north-sea']);
   });
 });