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

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: monospace;
  font-weight: bold;
  text-shadow: 0.5px 0.5px 0px black;
}
.particle .text.fire.is-damage {
  color: #FFA500;
  text-shadow:
    0.5px 0.5px 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.5px 0.5px 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);