silphius/app/react/components/dom/damage.jsx

import {memo, useEffect, useState} from 'react';

import {DamageTypes} from '@/ecs/components/vulnerable.js';

import styles from './damage.module.css';

const damageTypeMap = {
  [DamageTypes.PAIN]: styles.pain,
  [DamageTypes.HEALING]: styles.healing,
  [DamageTypes.MANA]: styles.mana,
};

function Damage({
  camera,
  damage,
  scale,
  zIndex,
}) {
  const [randomness] = useState({
    radians: Math.random() * (Math.PI / 16) - (Math.PI / 32),
    x: 1 * (Math.random() - 0.5),
    y: Math.random(),
  })
  useEffect(() => {
    const handle = setTimeout(() => {
      damage.onClose();
    }, 1_500);
    return () => {
      clearTimeout(handle);
    };
  }, [damage]);
  const {amount, position} = damage;
  return (
    <div
      className={styles.damage}
      style={{
        '--magnitude': Math.max(1, Math.floor(Math.log10(Math.abs(amount)))),
        '--positionX': `${position.x * scale - camera.x}px`,
        '--positionY': `${position.y * scale - camera.y}px`,
        '--randomnessX': randomness.x,
        '--randomnessY': randomness.y,
        '--shimmer': damageTypeMap[damage.type],
        rotate: `${randomness.radians}rad`,
        zIndex,
      }}
    >
      <p>{Math.abs(amount)}</p>
    </div>
  );
}

export default memo(Damage);