diff --git a/app/ecs/components/vulnerable.js b/app/ecs/components/vulnerable.js index 4e4d0e6..b0773ef 100644 --- a/app/ecs/components/vulnerable.js +++ b/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}); } diff --git a/app/react/components/dom/damage.jsx b/app/react/components/dom/damage.jsx index 893cd46..3024398 100644 --- a/app/react/components/dom/damage.jsx +++ b/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, }} diff --git a/app/react/components/dom/damage.module.css b/app/react/components/dom/damage.module.css index 25acdd7..cc22d8a 100644 --- a/app/react/components/dom/damage.module.css +++ b/app/react/components/dom/damage.module.css @@ -13,6 +13,11 @@ inherits: false; syntax: ''; } +@property --shimmer { + initial-value: ''; + inherits: false; + syntax: ''; +} @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 } +} diff --git a/public/assets/magic-swords/collision-start.js b/public/assets/magic-swords/collision-start.js index 903f874..8a44c23 100644 --- a/public/assets/magic-swords/collision-start.js +++ b/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, }) }