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

wip

Browse Source
This commit is contained in:
ntr 2019-06-29 19:47:42 +10:00
parent 911d0d5703
commit 3e525f0d45
11 changed files with 278 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -194,7 +194,7 @@
}
.game-construct.unfocus {
opacity: 0.65;
opacity: 0.35;
/* filter: blur(5px);
*/}

24
client/src/animations.socket.jsx
View File

@ -28,20 +28,16 @@ function createSocket(store) {
return eachSeries(newRes, (r, cb) => {
if (['Disable', 'TargetKo'].includes(r.event[0])) return cb();
// Create sub events for combat animations
const sequence = getCombatSequence(r);
return eachSeries(sequence, (stage, sCb) => {
const { skip } = store.getState();
if (skip) return sCb('skip');
const stagedR = Object.create(r);
stagedR.stage = stage;
store.dispatch(actions.setResolution(stagedR));
store.dispatch(actions.setResolution(r));
// const sequence = getCombatSequence(r);
return setTimeout(sCb, TIMES[stage]);
}, err => {
if (err) console.error(err);
// Finished this resolution
return cb();
});
// sequence.forEach(stage => {
// const stagedR = Object.create(r);
// stagedR.stage = stage;
// store.dispatch(actions.setResolution(stagedR));
// });
setTimeout(cb, 2000);
}, err => {
if (err) return console.error(err);
store.dispatch(actions.setResolution(null));
@ -49,9 +45,9 @@ function createSocket(store) {
store.dispatch(actions.setSkip(false));
// update the game
store.dispatch(actions.setGame(currentGame));
// get the latest state and restart polling
return true;
});
}
const handlers = {

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

@ -1,4 +1,5 @@
const preact = require('preact');
const anime = require('animejs').default;
const AttackCharge = require('./anims/attack.charge');
@ -27,71 +28,92 @@ const colours = {
white: '#FFFFFF',
};
const SOURCE_ANIM_MS = 1000;
const TARGET_ANIM_DELAY_MS = 500;
const TARGET_ANIM_MS = 1000;
function animations(props) {
const { combatTextClass, combatText, stage, player, construct } = props;
const { resolution, stage, player, construct, game, account } = props;
if (!resolution) return false;
const [type, event] = resolution.event;
if (!event.skill) return false;
if (!resolution.target) return false;
// source animation
if (resolution.source.id === construct.id) {
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
playerTeamIds.sort();
const otherTeam = game.players.find(t => t.id !== account.id);
const otherTeamIds = otherTeam.constructs.map(c => c.id);
otherTeamIds.sort();
const sourceIsPlayer = playerTeamIds.includes(construct.id);
const targetIsPlayer = playerTeamIds.includes(resolution.target.id);
const sameTeam = (sourceIsPlayer && targetIsPlayer) || (!sourceIsPlayer && !targetIsPlayer);
const y = sameTeam
? 0
: targetIsPlayer
? 1
: -1;
const i = sourceIsPlayer
? playerTeamIds.findIndex(c => c === construct.id)
: otherTeamIds.findIndex(c => c === construct.id);
const j = targetIsPlayer
? playerTeamIds.findIndex(c => c === resolution.target.id)
: otherTeamIds.findIndex(c => c === resolution.target.id);
const x = j - i;
anime({
targets: [document.getElementById(construct.id)],
translateY: y * 200,
translateX: x * 200,
easing: 'easeInOutElastic',
direction: 'alternate',
duration: SOURCE_ANIM_MS,
});
}
if (resolution.target.id !== construct.id) return false;
// target animation
const anim = text => {
if (stage === 'START_SKILL') {
const skill = removeTier(text);
switch (skill) {
// Attack Base
case 'Attack': return <AttackCharge id={construct.id} team={player} colour={colours.white}/>;
case 'Strike': return <AttackCharge id={construct.id} team={player} colour={colours.red}/>;
case 'Heal': return <AttackCharge id={construct.id} team={player} colour={colours.green}/>;
case 'Blast': return <AttackCharge id={construct.id} team={player} colour={colours.blue}/>;
case 'Chaos': return <AttackCharge id={construct.id} team={player} colour={colours.purple}/>;
case 'Slay': return <AttackCharge id={construct.id} team={player} colour={colours.yellow}/>;
case 'Siphon': return <AttackCharge id={construct.id} team={player} colour={colours.cyan}/>;
// Stun Base
// Block Base
// Buff Base
// Debuff Base
default: return false;
}
} else if (stage === 'END_SKILL') {
const skill = removeTier(text);
switch (skill) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id);
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
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 'Hex': return <Hex/>;
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
default: return false;
}
console.log(text);
if (!text) return false;
const skill = removeTier(text);
switch (skill) {
case 'Attack': return <Strike id={construct.id} stage={stage} team={player} colour={colours.white}/>;
case 'Amplify': return <Amplify/>;
case 'Banish': return banish(construct.id);
case 'Blast': return <Blast id={construct.id} stage={stage} team={player}/>;
case 'Strike': return <Strike id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'Chaos': return <Chaos id={construct.id} team={player} colour={colours.purple}/>;
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 'Hex': return <Hex/>;
case 'Siphon': return <Siphon id={construct.id} stage={stage} team={player} colour={colours.red}/>;
case 'SiphonTick': return <SiphonTick id={construct.id} stage={stage} team={player} colour={colours.red}/>;
default: return false;
}
return false;
};
if (combatText) {
const combatAnim = anim(combatText);
if (combatAnim) {
return (
<div class='combat-anim'>
{combatAnim}
</div>
);
}
const combatAnim = anim(event.skill);
console.log(combatAnim);
if (combatAnim) {
return (
<div class={combatTextClass}>
{combatText}
<div class={`combat-anim`}>
{combatAnim}
</div>
);
}
/*
return (
<div class={combatTextClass}>
<Test id={construct.id} stage={stage} team={player}/>
</div>
);
*/
return (<div></div>);
}

54
client/src/components/anims/amplify.jsx Normal file
View File

@ -0,0 +1,54 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
class Amplify extends Component {
constructor() {
super();
this.id = Math.random();
}
render() {
const path = 'M0,100 C100,100 100,100 200,100';
return (
<svg
class='skill-animation'
version="1.1"
id="amplify"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200">
<filter id="ampFilter">
<feTurbulence type="turbulence" baseFrequency="0.4" numOctaves="2" result="turbulence" style="transform: scale(1);"></feTurbulence>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
</filter>
<path filter='url("#ampFilter")' d={path} />
</svg>
);
}
componentDidMount() {
const altPath = 'M0,100 C100,400 100,-200 200,100';
anime({
targets: '#amplify path',
d: [{ value: altPath }],
stroke: ['#3498db', '#a52a2a'],
duration: 1000,
direction: 'alternate',
easing: 'easeInOutSine',
delay: 500,
});
anime({
targets: ['#ampFilter feTurbulence', '#ampFilter feDisplacementMap'],
baseFrequency: 0.15,
scale: 4,
direction: 'alternate',
easing: 'easeInOutExpo',
delay: 500,
});
}
}
module.exports = Amplify;

54
client/src/components/anims/attack.jsx
View File

@ -35,37 +35,35 @@ class Attack extends Component {
componentDidMount() {
let y = 0;
const daggers = document.querySelectorAll('.attack-anim .dagger');
if (this.props.stage === 'START_SKILL') {
anime.set(daggers, {
y: 250,
anime.set(daggers, {
y: 250,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 180,
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 180,
});
} else {
anime.set('.attack-anim', {
rotate: 0,
});
}
}
if (this.props.stage === 'END_SKILL') {
anime.set(daggers, {
y: 400,
});
y = -150;
if (!this.props.team) {
anime.set('.attack-anim', {
rotate: 0,
});
} else {
anime.set('.attack-anim', {
rotate: 180,
});
}
}
// if (this.props.stage === 'END_SKILL') {
// anime.set(daggers, {
// y: 400,
// });
// y = -150;
// if (!this.props.team) {
// anime.set('.attack-anim', {
// rotate: 0,
// });
// } else {
// anime.set('.attack-anim', {
// rotate: 180,
// });
// }
// }
anime({
targets: daggers,

17
client/src/components/anims/banish.jsx Normal file
View File

@ -0,0 +1,17 @@
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
// shamelessly lifted from teh anime docs
// https://animejs.com/documentation/#svgAttr
function banish(id) {
anime({
targets: [document.getElementById(id)],
scaleY: 0,
fill: '#fff',
easing: 'easeInOutElastic',
duration: TIMES.START_SKILL,
});
}
module.exports = banish;

26
client/src/components/anims/heal.jsx
View File

@ -59,19 +59,19 @@ class Heal extends Component {
}
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('.skill-anim', {
translateY: -200,
translateX: 0,
});
// 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('.skill-anim', {
// translateY: -200,
// translateX: 0,
// });
anime.set('#explosion feDisplacementMap', {
scale: 100,
});

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

@ -78,15 +78,16 @@ function GameConstruct(props) {
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const stage = resolution ? resolution.stage : false;
const combatInfo = animations({ combatTextClass, combatText, stage, player, construct });
const combatInfo = animations({ game, account, resolution, stage, player, construct });
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
: <div>&nbsp;</div>;
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
return (
<div

6
client/src/constants.jsx
View File

@ -1,8 +1,8 @@
module.exports = {
TIMES: {
START_SKILL: 1000,
END_SKILL: 1000,
POST_SKILL: 1000,
START_SKILL: 2000,
END_SKILL: 2000,
POST_SKILL: 2000,
DELAY: 150,
},

1
client/src/events.jsx
View File

@ -50,6 +50,7 @@ function registerEvents(store) {
const { game: currentGame, ws } = store.getState();
if (game) ws.startGameStateTimeout(game.id);
console.log(JSON.stringify(game))
if (game && currentGame) {
if (game.resolved.length !== currentGame.resolved.length) {
// stop fetching the game state til animations are done

146
client/src/test.game.js
View File

@ -33,6 +33,79 @@ function testGame(uuid) {
"losses": 0
},
"constructs": [
{
"id": "82e8b940-411c-42a1-8fc2-484ec7207734",
"account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
"red_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "RedDamage"
},
"red_life": {
"base": 0,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "RedLife"
},
"blue_life": {
"base": 0,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "BlueLife"
},
"blue_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "BlueDamage"
},
"green_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "GreenDamage"
},
"speed": {
"base": 128,
"value": 128,
"max": Math.floor(Math.random() * 10000),
"stat": "Speed"
},
"green_life": {
"base": 1024,
"value": 1024,
"max": Math.floor(Math.random() * 10000),
"stat": "GreenLife"
},
"evasion": {
"base": 0,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "Evasion"
},
"skills": [
{
"skill": "Attack",
"self_targeting": false,
"cd": null
},
{
"skill": "Corrupt",
"self_targeting": true,
"cd": 1
}
],
"effects": [
],
"specs": [],
"colours": {
"red": 0,
"green": 0,
"blue": 2
},
"name": "Uc4L3lun"
},
{
"id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
"account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
@ -179,79 +252,6 @@ function testGame(uuid) {
"blue": 2
},
"name": "18taUjOz"
},
{
"id": "82e8b940-411c-42a1-8fc2-484ec7207734",
"account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
"red_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "RedDamage"
},
"red_life": {
"base": 0,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "RedLife"
},
"blue_life": {
"base": 0,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "BlueLife"
},
"blue_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "BlueDamage"
},
"green_damage": {
"base": 256,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "GreenDamage"
},
"speed": {
"base": 128,
"value": 128,
"max": Math.floor(Math.random() * 10000),
"stat": "Speed"
},
"green_life": {
"base": 1024,
"value": 1024,
"max": Math.floor(Math.random() * 10000),
"stat": "GreenLife"
},
"evasion": {
"base": 0,
"value": Math.floor(Math.random() * 10000),
"max": Math.floor(Math.random() * 10000),
"stat": "Evasion"
},
"skills": [
{
"skill": "Attack",
"self_targeting": false,
"cd": null
},
{
"skill": "Corrupt",
"self_targeting": true,
"cd": 1
}
],
"effects": [
],
"specs": [],
"colours": {
"red": 0,
"green": 0,
"blue": 2
},
"name": "Uc4L3lun"
}
],
"bot": true,