add generation, change key->identifier

moodconsole/src/App.tsx

@@ -51,6 +51,7 @@ interface EffectActive {
 
 interface State {
   initialized: number;
+  generation: string;
   chain: EffectActive[];
 }
 
@@ -63,9 +64,9 @@ interface Options {
 const ActiveEffect: FC<{
   availableEffects: EffectOption[];
   effect: EffectActive;
-  key: string;
+  identifier: string;
   onChange: (name: string, value: number) => void;
-}> = ({ availableEffects, effect, onChange, key }) => {
+}> = ({ availableEffects, effect, onChange, identifier }) => {
   const effectUsed = availableEffects.find(
     (e) => e.function === effect.function
   );
@@ -80,9 +81,9 @@ const ActiveEffect: FC<{
         ([name, paramOptions], idx) => {
           if (paramOptions.type === "slider") {
             const currentValue = effect.params[name];
-            const id = `${key}-input-${name}-${idx}`;
+            const id = `${identifier}-input-${name}-${idx}`;
             return (
-              <div>
+              <div key={id}>
                 <div className="flex">
                   <div className="text-sm">{paramOptions.min}</div>
                   <input
@@ -177,6 +178,19 @@ function App() {
     }
   }, [socket]);
 
+  useEffect(() => {
+    return () => {
+      socket?.close();
+    };
+  }, []);
+
+  /*
+  useEffect(() => {
+    console.log("new state:");
+    console.log(state);
+  }, [state]);
+  */
+
   const propagateState = (state: State) => {
     socket?.send(JSON.stringify({ type: "mutation", payload: state }));
   };
@@ -258,7 +272,7 @@ function App() {
                   }}
                 >
                   <ActiveEffect
-                    key={key}
+                    identifier={key}
                     effect={effect}
                     availableEffects={options.effects.available}
                     onChange={(name, value) => {