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

const decorate = compose(
  contempo(`
.damage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.particle {
  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.5px -0.5px 0px #0077FF, 0.5px 0.5px black;
}
  `),
);

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

export default decorate(DamageComponent);