humus-old/client/ui/damage.js
2019-04-22 00:44:53 -05:00

47 lines
881 B
JavaScript

// 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);