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); } } }