ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

blast and text colours

Browse Source
This commit is contained in:
ntr 2019-07-23 16:40:40 +10:00
parent eef880e052
commit 341f4dda09
3 changed files with 51 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/assets/styles/game.css
View File

@ -234,65 +234,54 @@
*/}
.game-construct.red-damage {
/* filter: drop-shadow(0 0 0.2em red);
*/ color: red;
color: #a52a2a;
/*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
opacity: 1;
/*border-color: red;*/
}
.red-damage button {
/*border: 1px solid red;*/
color: red;
color: #a52a2a;
}
.red-damage text {
fill: red;
fill: #a52a2a;
}
.red-damage .stats {
/*border-top: 1px solid red;*/
/*border-top: 1px solid #a52a2a;*/
}
.game-construct.blue-damage {
/* filter: drop-shadow(0 0 0.2em blue);
*/ color: blue;
color: #3498db;
opacity: 1;
/*border-color: blue;*/
}
.blue-damage button {
/*border: 1px solid blue;*/
color: blue;
color: #3498db;
}
.blue-damage text {
fill: blue;
fill: #3498db;
}
.blue-damage .stats {
/*border-top: 1px solid blue;*/
}
.game-construct.green-damage {
/* filter: drop-shadow(0 0 0.2em green);
*/ color: green;
color: #1FF01F;
opacity: 1;
/*border-color: green;*/
}
.green-damage button {
/*border: 1px solid green;*/
color: green;
color: #1FF01F;
}
.green-damage text {
fill: green;
fill: #1FF01F;
}
.green-damage .stats {
/*border-top: 1px solid green;*/
/*border-top: 1px solid #1FF01F;*/
}
.game-construct.purple-damage {

2
client/package.json
View File

@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"start": "parcel watch index.html --out-dir /var/lib/mnml/public/current",
"anims": "parcel watch animations.html --out-dir /var/lib/mnml/public/current",
"anims": "parcel watch animations.html --no-hmr --out-dir /var/lib/mnml/public/current",
"build": "parcel build index.html",
"scss": "node-sass --watch assets/scss -o assets/styles",
"lint": "eslint --fix --ext .jsx src/",

106
client/src/components/anims/blast.jsx
View File

@ -1,100 +1,72 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const times = require('lodash/times');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const { TIMES, COLOURS } = require('../../constants');
const duration = TIMES.TARGET_DURATION_MS;
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
filter="url(#explosion)"
/>
);
}
class AttackCharge extends Component {
constructor(props) {
class Blast extends Component {
constructor() {
super();
this.team = props.team;
this.animations = [];
const points = randomPoints(8, 60, { x: 0, y: 0, width: 300, height: 400 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 20, '#00aabb'));
}
render() {
return (
<svg
class={'skill-animation'}
id='blast'
class="skill-animation"
version="1.1"
id="blast"
transform-box='fill-box'
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
viewBox="0 0 300 300">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.6" />
<stop offset="100%" style={'stop-color:#00aabb;stop-opacity:1'} />
</radialGradient>
<filter id="blastFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
<g>
{times(50, () => (
<g>
<rect filter="url(#blastFilter)" class="blue" x="150" y="200" width="3" height="5" />
<rect filter="url(#blastFilter)" class="white" x="150" y="200" width="1" height="3" />
</g>
))}
</g>
</svg>
);
}
componentDidMount() {
anime.set('#blast', {
translateX: -200 * this.props.direction.x,
translateY: -300 * this.props.direction.y,
});
this.animations.push(anime({
targets: '#blast',
targets: ['#blast'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.3 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.7, duration: TIMES.POST_SKILL_DURATION_MS },
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.5, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
this.animations.push(anime({
targets: '#blast',
translateY: 0,
translateX: 0,
loop: false,
targets: ['#blast g'],
transform: () => `
translate(${anime.random(-100, 100)} ${anime.random(-100, 100)})
`,
style: { rotate: anime.random(-180, 180) },
easing: 'easeOutCubic',
delay: TIMES.TARGET_DELAY_MS,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 200,
loop: false,
delay: TIMES.TARGET_DELAY_MS + duration * 1 / 2,
duration: duration * 1 / 2,
easing: 'easeInQuad',
duration: TIMES.TARGET_DURATION_MS,
}));
}
// this is necessary because
// skipping / timing / unmounting race conditions
// can cause the animations to cut short, this will ensure the values are reset
// because preact will recycle all these components
componentWillUnmount() {
for (let i = this.animations.length - 1; i >= 0; i--) {
this.animations[i].reset();
@ -102,4 +74,4 @@ class AttackCharge extends Component {
}
}
module.exports = AttackCharge;
module.exports = Blast;