refactor: no damage dom
This commit is contained in:
parent
4efc6d79c3
commit
43cfabfb7b
|
@ -1,38 +0,0 @@
|
||||||
// 3rd party.
|
|
||||||
import React from 'react';
|
|
||||||
// 2nd party.
|
|
||||||
import {compose} from '@avocado/core';
|
|
||||||
import contempo from 'contempo';
|
|
||||||
|
|
||||||
import {AFFINITY_NONE} from '../../common/combat/constants';
|
|
||||||
import {AFFINITY_FIRE} from '../../common/combat/constants';
|
|
||||||
|
|
||||||
const decorate = compose(
|
|
||||||
contempo(require('./damage.raw.scss').default),
|
|
||||||
contempo(`
|
|
||||||
.particle .text.affinity-${AFFINITY_NONE}.is-damage {
|
|
||||||
color: #FF0000;
|
|
||||||
text-shadow:
|
|
||||||
0.75px 0.75px black,
|
|
||||||
-0.125px -0.125px black,
|
|
||||||
-0px -0px 3px #FF2200
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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
|
|
||||||
;
|
|
||||||
}
|
|
||||||
`),
|
|
||||||
);
|
|
||||||
|
|
||||||
const DamageComponent = ({app}) => {
|
|
||||||
return <div className="damage"></div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default decorate(DamageComponent);
|
|
|
@ -1,28 +0,0 @@
|
||||||
.damage {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.particle {
|
|
||||||
position: absolute;
|
|
||||||
will-change: transform, opacity;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: joystix;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 1px 1px 0px black;
|
|
||||||
|
|
||||||
&.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
|
|
||||||
;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -3,12 +3,10 @@ import React from 'react';
|
||||||
import {hot} from 'react-hot-loader/root';
|
import {hot} from 'react-hot-loader/root';
|
||||||
// 1st party.
|
// 1st party.
|
||||||
import ConnectionStatus from './connection-status';
|
import ConnectionStatus from './connection-status';
|
||||||
import Damage from './damage';
|
|
||||||
import Menu from './menu';
|
import Menu from './menu';
|
||||||
|
|
||||||
const Ui = ({app}) => {
|
const Ui = ({app}) => {
|
||||||
return <React.Fragment>
|
return <React.Fragment>
|
||||||
<Damage app={app} />
|
|
||||||
<Menu app={app} />
|
<Menu app={app} />
|
||||||
<ConnectionStatus socket={app.socket} />
|
<ConnectionStatus socket={app.socket} />
|
||||||
</React.Fragment>;
|
</React.Fragment>;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user