traffic light: every color has its own buzz sound volume

src/App/Plant/TrafficLight/TrafficLight.tsx

@@ -40,21 +40,23 @@ export const TrafficLight = memo(function TrafficLight({state, speed, raiseUIEve
 
   // preloadAudio(sndAtmosphere);
 
-  // the traffic light makes sound too:
+  // play wind
   useEffect(() => {
     const stopPlaying = playURL(sndAtmosphere, true);
     return () => stopPlaying();
   }, []);
 
-  useEffect(() => {
-    if (redOn || yellowOn || greenOn) {
-      const stopPlaying = playURL(sndBuzz, true);
-      return () => {
-        stopPlaying();
-      };
-    }
-    else return () => {};
-  }, [redOn || yellowOn || greenOn])
+  // for added realism, every light color has its own buzzing noise volume
+  for (const [color, gain] of [[redOn, 0.5], [yellowOn, 1], [greenOn, 0.3]] as [boolean, number][]) {
+    useEffect(() => {
+      if (color) {
+        const stopPlaying = playURL(sndBuzz, true, gain);
+        return () => {
+          stopPlaying();
+        };
+      }
+    }, [color]);
+  }
 
   return <>
     <style>{`

src/App/useAudioContext.ts

@@ -28,12 +28,15 @@ export function useAudioContext(speed: number) {
       .then(buf => ref.current!.ctx.decodeAudioData(buf));
   }), [ref.current]);
 
-  function play(url: string, loop: boolean) {
+  function play(url: string, loop: boolean, gain: number = 1) {
     const srcPromise = url2AudioBuf(url)
       .then(audioBuf => {
         const src = ref.current!.ctx.createBufferSource();
+        const gainNode = ref.current!.ctx.createGain();
+        gainNode.gain.value = gain;
+        gainNode.connect(ref.current!.hipass);
         src.buffer = audioBuf;
-        src.connect(ref.current!.hipass);
+        src.connect(gainNode);
         src.playbackRate.value = speed;
         src.loop = loop;
         src.start();
@@ -59,5 +62,5 @@ export function useAudioContext(speed: number) {
     }
   }, [speed]);
 
-  return [play, url2AudioBuf] as [(url: string, loop: boolean) => ()=>void, (url:string)=>void];
+  return [play, url2AudioBuf] as [(url: string, loop: boolean, gain?: number) => ()=>void, (url:string)=>void];
 }

src/statecharts/interpreter.ts

@@ -394,7 +394,6 @@ export function fire(simtime: number, t: Transition, ts: Map<string, Transition[
   // transition actions
   environment = addEventParam(environment.enterScope("<transition>"), label);
   for (const action of label.actions) {
-    console.log('environment after adding event param:', environment);
     ({environment, history, ...rest} = execAction(action, {environment, history, ...rest}, [t.uid]));
   }
   environment = environment.dropScope();

src/statecharts/timed_reactive.ts

@@ -115,6 +115,7 @@ export function coupledExecution<T extends {[name: string]: any}>(models: {[name
     if (events.length > 0) {
       const [event, ...rest] = events;
       const destination = conns[model+'.'+event.name];
+      console.log(model, '.', event, destination);
       if (destination === undefined) {
         // ignore
         console.log(`${model}.${event.name} goes nowhere`);
@@ -160,11 +161,13 @@ export function coupledExecution<T extends {[name: string]: any}>(models: {[name
         // @ts-ignore
         state[modelName] = modelState;
       }
+      console.log('all outputs:', allOutputs);
       // 2. handle all output events (models' outputs may be inputs for each other)
       let finalOutputs = [];
-      for (const [modelName, outputEvents] of allOutputs) {
+      for (const [modelName, outputEvent] of allOutputs) {
+        console.log('what about', modelName, outputEvent);
         let newOutputs;
-        [newOutputs, state] = processOutputs(0, outputEvents, modelName, state);
+        [newOutputs, state] = processOutputs(0, [outputEvent], modelName, state);
         finalOutputs.push(...newOutputs);
       }
       return [finalOutputs, state];