From 4b46b2f0abca7a5ba69c120fd04c0dc3cb00bae3 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Tue, 30 Jul 2024 17:06:04 -0500
Subject: [PATCH] perf: damage clumping

---
 app/ecs/components/vulnerable.js      |  6 +++++-
 app/react/components/dom/entities.jsx | 27 +++++++++++++++++++++------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/ecs/components/vulnerable.js b/app/ecs/components/vulnerable.js
index 9f256b9..1495d4a 100644
--- a/app/ecs/components/vulnerable.js
+++ b/app/ecs/components/vulnerable.js
@@ -31,7 +31,11 @@ export default class Vulnerable extends Component {
             }
           }
         }
-        Component.markChange(this.entity, 'damage', {[this.id++]: specification});
+        Component.markChange(
+          this.entity,
+          'damage',
+          {[`${this.entity}-${this.id++}`]: specification},
+        );
       }
     };
   }
diff --git a/app/react/components/dom/entities.jsx b/app/react/components/dom/entities.jsx
index 664a03b..b0b9b19 100644
--- a/app/react/components/dom/entities.jsx
+++ b/app/react/components/dom/entities.jsx
@@ -16,6 +16,7 @@ export default function Entities({
   const [ecs] = useEcs();
   const [entities, setEntities] = useState({});
   const [damages, setDamages] = useState({});
+  const [pendingDamage] = useState({accumulated: [], handle: undefined});
   usePacket('EcsChange', async () => {
     setEntities({});
   }, [setEntities]);
@@ -93,17 +94,31 @@ export default function Entities({
       const {damage} = update.Vulnerable || {};
       if (damage) {
         for (const key in damage) {
-          const composite = [id, key].join('-');
           damage[key].onClose = () => {
             setDamages((damages) => {
-              const {[composite]: _, ...rest} = damages; // eslint-disable-line no-unused-vars
+              const {[key]: _, ...rest} = damages; // eslint-disable-line no-unused-vars
               return rest;
             })
           };
-          setDamages((damages) => ({
-            ...damages,
-            [composite]: damage[key],
-          }));
+        }
+        pendingDamage.accumulated.push(damage);
+        if (!pendingDamage.handle) {
+          pendingDamage.handle = setTimeout(() => {
+            const update = {};
+            for (const damage of pendingDamage.accumulated) {
+              for (const key in damage) {
+                update[key] = damage[key];
+              }
+            }
+            pendingDamage.accumulated.length = 0;
+            setDamages((damages) => {
+              return {
+                ...damages,
+                ...update,
+              };
+            });
+            pendingDamage.handle = undefined;
+          }, 50);
         }
       }
     }