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

basic attack animation

Browse Source
This commit is contained in:
Mashy 2019-06-12 18:55:40 +10:00
parent a037d5e93b
commit 28a4c259bb
7 changed files with 89 additions and 2301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
client/assets/scss/anims.scss
View File

@ -1,59 +0,0 @@
.anim-container {
position: absolute;
width: 100%;
min-height: 100%;
transform-style: preserve-3d;
}
.blast-cast {
position: absolute;
background: black;
opacity: .7;
border-radius: 50%;
}
@for $i from 1 through 100 {
@keyframes blast-cast-#{$i} {
100% {
transform: translate3d(-3em +random(200)/200, 0, 0);
}
}
}
@for $i from 1 through 100 {
.blast-cast:nth-child(#{$i}){
$size: random(30)+px;
height: $size;
width: $size;
transform: translate3d( (random(200) * 1px), (random(200) * 1px), (random(200) * 1px));
background: #15f4ee;
animation: blast-cast-#{$i} 0.7s;
}
}
.blast-hit {
position: absolute;
background: black;
opacity: .7;
border-radius: 50%;
}
@for $i from 1 through 100 {
@keyframes blast-hit-#{$i} {
100% {
transform: translate3d((random(200) * 1px), (random(200) * 1px), (random(200) * 1px));
}
}
}
@for $i from 1 through 100 {
.blast-hit:nth-child(#{$i}){
$size: random(30)+px;
height: $size;
width: $size;
transform: translate3d(-3em +random(200)/200, 0, 0);
animation: blast-hit-#{$i} 0.7s infinite;
background: #15f4ee;
}
}

2217
client/assets/styles/anims.css
View File

File diff suppressed because it is too large Load Diff

1
client/index.js
View File

@ -3,7 +3,6 @@ require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.css');
require('./assets/styles/instance.mobile.css');
require('./assets/styles/game.css');
require('./assets/styles/anims.css');
// kick it off
require('./src/app');

11
client/src/animations.jsx
View File

@ -1,11 +0,0 @@
const preact = require('preact');
function animationDivs(classes) {
switch (classes) {
case 'blast-cast': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-cast"></div>);
case 'blast-hit': return Array.from({ length: 100 }).map(j => <div key={j} class="blast-hit"></div>);
default: return <div>&nbsp;</div>;
}
}
module.exports = { animationDivs };

19
client/src/components/animations.jsx Normal file
View File

@ -0,0 +1,19 @@
const preact = require('preact');
const Attack = require('./anims/attack');
function animations(props) {
const { combatTextClass, combatText, stage, player, construct } = props;
if (combatText === 'Attack') {
return (
<div class={combatTextClass}>
<Attack id={construct.id} stage={stage} team={player}/>
</div>
);
}
if (combatText) return <div construct={construct} class={combatTextClass}>{combatText}</div>;
return (<div>&nbsp;</div>);
}
module.exports = animations;

63
client/src/components/anims/attack.jsx Normal file
View File

@ -0,0 +1,63 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
const duration = TIMES.START_SKILL;
class Attack extends Component {
constructor(props) {
super();
this.props = props;
}
render() {
return (
<svg
id={this.props.id}
class={`attack-anim skill-animation ${this.props.stage}`}
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 300">
<g>
<polygon class='blue' points={'0,190 100,50 190,190'}/>
<polygon class='blue' points={'40,170 100,50 160,170'}/>
<polygon class='blue' points={'70,150 100,50 130,150'}/>
</g>
</svg>
);
}
componentDidMount() {
let value = '';
if ((!this.props.team && this.props.stage === 'START_SKILL')
|| (this.props.team && this.props.stage === 'END_SKILL')) {
anime.set('.attack-anim', {
translateY: -250,
});
value = '+=250px';
}
if ((!this.props.team && this.props.stage === 'END_SKILL')
|| (this.props.team && this.props.stage === 'START_SKILL')) {
anime.set('.attack-anim', {
translateY: 0,
});
value = '-=250px';
}
anime({
targets: ['.attack-anim'],
translateY: {
value,
duration,
},
loop: false,
duration,
easing: 'easeInQuad',
});
}
}
module.exports = Attack;

20
client/src/components/game.construct.jsx
View File

@ -5,10 +5,9 @@ const range = require('lodash/range');
const actions = require('../actions');
const { STATS, eventClasses, getCombatText } = require('../utils');
const { ConstructAvatar } = require('./construct');
const { animationDivs } = require('../animations');
const animations = require('./animations');
const shapes = require('./shapes');
const TrippyTriangle = require('./svgs/trippy.triangle');
const SkillBtn = require('./skill.btn');
@ -41,9 +40,10 @@ const addState = connect(
activeSkill,
selectSkillTarget,
};
},
}
);
function GameConstruct(props) {
const {
i,
@ -77,9 +77,9 @@ function GameConstruct(props) {
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
? <div class={combatTextClass}>{combatText}</div>
: <div class={combatTextClass}> <TrippyTriangle /></div>;
const stage = resolution ? resolution.stage : false;
const combatInfo = animations({ combatTextClass, combatText, stage, player, construct });
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
@ -88,12 +88,6 @@ function GameConstruct(props) {
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const anim = (
<div class="anim-container">
{animationDivs(combatClass)}
</div>
);
return (
<div
onClick={() => selectSkillTarget(construct.id)}
@ -103,7 +97,7 @@ function GameConstruct(props) {
{crypSkills}
<div class="stats"> {stats} </div>
<ConstructAvatar name={construct.name} id={construct.id} />
{combatTextEl}
{combatInfo}
<div class="effects"> {effects} </div>
</div>
);