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

added siphon tick

Browse Source
This commit is contained in:
Mashy 2019-06-25 15:30:28 +10:00
parent 40a3b2d162
commit a53b55e7ab
5 changed files with 193 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,11 @@
}
.opponent .combat-text {
top: 40%;
top: 75%;
}
.opponent .combat-anim {
top: 25%;
}
.opponent .game-construct {
@ -199,7 +203,6 @@
}
.combat-text {
fill: whitesmoke;
font-size: 2em;
font-family: 'Jura';
position: absolute;
@ -211,6 +214,18 @@
height: 7em;
}
.combat-anim {
font-size: 2em;
font-family: 'Jura';
position: absolute;
object-fit: contain;
top: 15%;
}
.combat-anim svg {
height: 7em;
}
.game-construct.active-skill {
filter: drop-shadow(0 0 0.2em silver);
}

29
client/src/components/animations.jsx
View File

@ -8,7 +8,9 @@ const Strike = require('./anims/strike');
const Chaos = require('./anims/chaos');
const Slay = require('./anims/slay');
const Siphon = require('./anims/siphon');
const Test = require('./anims/test');
const SiphonTick = require('./anims/siphon.tick');
// const Test = require('./anims/test');
const { removeTier } = require('../utils');
@ -41,7 +43,7 @@ function animations(props) {
// Block Base
// Buff Base
// Debuff Base
default: return text;
default: return false;
}
} else if (stage === 'END_SKILL') {
const skill = removeTier(text);
@ -53,24 +55,37 @@ function animations(props) {
case 'Slay': return <Slay id={construct.id} team={player} colour={colours.yellow}/>;
case 'Heal': return <Heal id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
default: return text;
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
default: return false;
}
}
return text;
return false;
};
if (combatText) {
const combatAnim = anim(combatText);
return <div class={combatTextClass}>
if (combatAnim) {
return (
<div class='combat-anim'>
{combatAnim}
</div>;
</div>
);
}
/* return (
return (
<div class={combatTextClass}>
{combatText}
</div>
);
}
/*
return (
<div class={combatTextClass}>
<Test id={construct.id} stage={stage} team={player}/>
</div>
);
*/
return (<div>&nbsp;</div>);
}

2
client/src/components/anims/chaos.jsx
View File

@ -89,7 +89,7 @@ class AttackCharge extends Component {
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 2 / 3),
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({

110
client/src/components/anims/siphon.tick.jsx Normal file
View File

@ -0,0 +1,110 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
function projectile(x, y, radius, colour) {
return (
<circle
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="0.1"
stroke={colour}
id="projectile"
/>
);
}
class SiphonTick extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#3498db';
const points = new Array(15).fill(0);
this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
}
render() {
return (
<svg
class={'skill-anim'}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<circle id="siphon" r="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
<stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
}
componentDidMount() {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
});
}
anime.set('#projectile', {
cx: 150,
cy: 150,
});
anime.set('#siphon', {
r: '80',
stroke: '#3498db',
});
anime({
targets: '#siphon',
keyframes: [
{ r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' },
{ r: '0', stroke: '#3498db' },
],
duration: duration * 2 / 3,
easing: 'easeInCubic',
});
const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => {
anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
delay: (Math.random() * duration * 1 / 2),
duration,
easing: 'easeInQuad',
});
});
}
}
module.exports = SiphonTick;

97
client/src/components/anims/test.jsx
View File

@ -15,27 +15,21 @@ function projectile(x, y, radius, colour) {
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke-width="0.1"
stroke={colour}
id="projectile"
/>
);
}
function arc() {
return (
<circle id="siphon" r="140" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
);
}
class AttackCharge extends Component {
constructor(props) {
super();
this.team = props.team;
// this.colour = props.colour;
this.colour = '#c5a443';
const points = new Array(30).fill(0);
this.charges = points.map(() => projectile(150, 420, 7, '#1FF01F'));
this.colour = '#3498db';
const points = new Array(15).fill(0);
this.charges = points.map(() => projectile(150, 150, 7, '#1FF01F'));
}
render() {
@ -49,78 +43,69 @@ class AttackCharge extends Component {
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
{arc()}
<circle id="siphon" r="20" cx="150" cy="150" stroke="#3498db" stroke-width="2.5%" filter="url(#blur)"/>
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:0.4" />
<stop offset="100%" style={'stop-color:#1FF01F;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
}
componentDidMount() {
/* if (!this.props.team) {
if (!this.props.team) {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 90,
rotate: Math.random() * 45 + 90,
});
} else {
anime.set('.skill-anim', {
rotate: Math.random() * 180 + 270,
rotate: Math.random() * 45 + 270,
});
}
anime.set('.skill-anim', {
translateY: -400,
translateX: 0,
anime.set('#projectile', {
cx: 150,
cy: 150,
});
anime.set('#explosion feDisplacementMap', {
scale: 100,
anime.set('#siphon', {
r: '80',
stroke: '#3498db',
});
anime({
targets: '.skill-anim',
translateY: 0,
translateX: 0,
loop: false,
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#explosion feDisplacementMap',
scale: 10000,
loop: false,
delay: (duration * 1 / 2),
duration: (duration * 1 / 2),
easing: 'easeInQuad',
});
anime({
targets: '#sword',
fill: '#1FF01F',
stroke: '#1FF01F',
delay: (duration * 3 / 4),
targets: '#siphon',
keyframes: [
{ r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' },
{ r: '0', stroke: '#3498db' },
],
duration: duration * 2 / 3,
easing: 'easeInCubic',
});
const projectiles = document.querySelectorAll('#projectile');
projectiles.forEach(proj => {
anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 200 - 100,
delay: (duration * 1 / 3),
duration: (duration * 2 / 3),
delay: (Math.random() * duration * 1 / 2),
duration,
easing: 'easeInQuad',
});
});
*/
const siphon = document.querySelectorAll('#siphon');
anime({
targets: siphon,
keyframes: [
{ r: '110', stroke: '#1FF01F' },
{ r: '80', stroke: '#1FF01F' },
{ r: '50', stroke: '#3498db' },
{ r: '20', stroke: '#3498db' },
],
duration,
easing: 'easeInCubic',
loop: true,
});
}
}