humus-old/client/ui/damage.js

// 3rd party.
import React from 'react';
// 2nd party.
import {compose} from '@avocado/core';
import contempo from 'contempo';

import {AFFINITY_FIRE} from '../../common/combat/constants';

const decorate = compose(
  contempo(`
.damage {
  position: absolute;
  top: 0;
  left: 0;
}
.particle {
  position: absolute;
  will-change: transform, opacity;
}
.particle .text {
  display: inline-block;
  font-family: joystix;
  font-weight: bold;
  text-shadow: 1px 1px 0px black;
}
.particle .text.affinity-${AFFINITY_FIRE}.is-damage {
  color: #FFA500;
  text-shadow:
    0.75px 0.75px black,
    -0.125px -0.125px black,
    -0px -0px 3px #FFDD00,
    -0px -0px 10px #FFFF00
  ;
}
.particle .text.is-healing {
  color: #00FF77;
  text-shadow: -0.25px -0.25px 0px #0077FF, 0.5px 0.5px black;
  text-shadow:
    0.75px 0.75px black,
    -0.125px -0.125px black,
    -0px -0px 3px #00DDFF,
    -0px -0px 10px #0000FF
  ;
}
  `),
);

const DamageComponent = ({app}) => {
  return <div className="damage"></div>;
}

export default decorate(DamageComponent);