feat: damage types

app/ecs/components/vulnerable.js

@@ -1,5 +1,11 @@
 import Component from '@/ecs/component.js';
 
+export const DamageTypes = {
+  PAIN: 0,
+  HEALING: 1,
+  MANA: 2,
+};
+
 export default class Vulnerable extends Component {
   mergeDiff(original, update) {
     const merged = {};
@@ -16,6 +22,7 @@ export default class Vulnerable extends Component {
     return class VulnerableInstance extends super.instanceFromSchema() {
       damages = {};
       id = 0;
+      Types = DamageTypes;
       damage(specification) {
         Component.markChange(this.entity, 'damage', {[this.id++]: specification});
       }

app/react/components/dom/damage.jsx

@@ -1,7 +1,15 @@
 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,
@@ -31,6 +39,7 @@ function Damage({
         '--positionY': `${position.y * scale - camera.y}px`,
         '--randomnessX': randomness.x,
         '--randomnessY': randomness.y,
+        '--shimmer': damageTypeMap[damage.type],
         rotate: `${randomness.radians}rad`,
         zIndex,
       }}

app/react/components/dom/damage.module.css

@@ -13,6 +13,11 @@
   inherits: false;
   syntax: '<number>';
 }
+@property --shimmer {
+  initial-value: '';
+  inherits: false;
+  syntax: '<custom-ident>';
+}
 @property --offsetX {
   initial-value: 0;
   inherits: false;
@@ -46,7 +51,7 @@
     fade 1.5s linear forwards,
     grow 1.5s ease-in forwards,
     move 1.5s cubic-bezier(0.5, 1, 0.89, 1),
-    shimmer 250ms infinite ease-in-out
+    var(--shimmer) 300ms infinite cubic-bezier(0.87, 0, 0.13, 1)
   ;
   color: var(--foreground);
   font-size: calc(10px + (var(--magnitude) * 12px));
@@ -103,8 +108,20 @@
   95% { --scale: 0; }
 }
 
-@keyframes shimmer {
+@keyframes pain {
   0% { --hue: 0 }
   50% { --hue: 30 }
   100% { --hue: 0 }
 }
+
+@keyframes healing {
+  0% { --hue: 120 }
+  50% { --hue: 90 }
+  100% { --hue: 120 }
+}
+
+@keyframes mana {
+  0% { --hue: 220 }
+  50% { --hue: 215 }
+  100% { --hue: 220 }
+}

public/assets/magic-swords/collision-start.js

@@ -7,5 +7,6 @@ if (playerEntity !== other && other.Vulnerable) {
       + Math.random() * (Math.pow(10, magnitude + 1) - Math.pow(10, magnitude)),
     ),
     position: other.Position.toJSON(),
+    type: other.Vulnerable.Types.PAIN,
   })
 }