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

scatter

Browse Source
This commit is contained in:
ntr
2019-07-05 15:42:37 +10:00
parent 3f974cb0fa
commit 723201b74c
14 changed files with 397 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+1
View File
@@ -16,6 +16,7 @@
</head>
</head>
<body>
<noscript>js is required to run mnml</noscript>
</body>
<script src="https://js.stripe.com/v3/"></script>
<script src="./index.js"></script>
client/package.json
+1 -1
View File
@@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"start": "parcel index.html --host 0.0.0.0 --port 40080 --no-source-maps",
"anims": "parcel animations.html --host 0.0.0.0 --port 40080 --no-source-maps --no-hmr",
"anims": "parcel animations.html --host 0.0.0.0 --port 40080 --no-source-maps",
"build": "rm -rf dist && parcel build index.html && cp -r assets/molecules/ dist/",
"scss": "node-sass --watch assets/scss -o assets/styles",
"lint": "eslint --fix --ext .jsx src/",
client/src/animations.test.jsx
+4 -4
View File
@@ -74,12 +74,13 @@ const SKILLS = [
'Buff',
'Block',
'Stun',
'AbsorbI',
'AbsorptionI',
'AmplifyI',
'BanishI',
'BashI',
'BlastI',
'ChaosI',
'SustainI',
'CounterAttackI',
'CounterI',
'CurseI',
@@ -90,10 +91,8 @@ const SKILLS = [
'ElectrocuteTickI',
'HasteI',
'HasteStrike',
'AbsorbI',
'HealI',
'HexI',
'AbsorbtionI',
'HybridBlast',
'HybridI',
'InterceptI',
@@ -102,6 +101,7 @@ const SKILLS = [
'PurifyI',
'RechargeI',
'ReflectI',
'RestrictI',
'RuinI',
'ScatterI',
'SilenceI',
@@ -109,8 +109,8 @@ const SKILLS = [
'SiphonTickI',
'SlayI',
'SleepI',
'RestrictI',
'StrikeI',
'SustainI',
'ThrowI',
'TriageI',
'TriageTickI',
client/src/components/animations.jsx
+4 -3
View File
@@ -4,6 +4,7 @@ const anime = require('animejs').default;
const AttackCharge = require('./anims/attack.charge');
const Amplify = require('./anims/amplify');
const Absorb = require('./anims/absorb');
const Banish = require('./anims/banish');
const Bash = require('./anims/bash');
const Blast = require('./anims/blast');
@@ -19,7 +20,6 @@ const Electrify = require('./anims/electrify');
const Electrocute = require('./anims/electrocute');
const Haste = require('./anims/haste');
const Heal = require('./anims/heal');
const Hex = require('./anims/hex');
const Hybrid = require('./anims/hybrid');
const Intercept = require('./anims/intercept');
const Invert = require('./anims/invert');
@@ -27,6 +27,7 @@ const Purify = require('./anims/purify');
const Recharge = require('./anims/recharge');
const Refl = require('./anims/reflect');
const Restrict = require('./anims/restrict');
const Scatter = require('./anims/scatter');
const Siphon = require('./anims/siphon');
const SiphonTick = require('./anims/siphon.tick');
const Slay = require('./anims/slay');
@@ -122,7 +123,7 @@ function animations(props) {
case 'Haste': return <Haste />;
case 'Triage': return <Triage />;
case 'TriageTick': return <TriageTick />;
case 'Scatter': return false;
case 'Scatter': return <Scatter player={player} />;
case 'Hybrid': return <Hybrid />;
case 'Intercept': return <Intercept player={player} />;
@@ -140,7 +141,7 @@ function animations(props) {
case 'Stun': return <Stun />;
case 'Banish': return <Banish id={construct.id} />;
case 'Bash': return <Bash />;
case 'Hex': return <Hex />;
case 'Absorb': return <Absorb />;
case 'Sleep': return <Sleep />;
case 'Throw': return false;
case 'Ruin': return false;
client/src/components/anims/absorb.jsx
+27 -13
View File
@@ -31,12 +31,15 @@ class Absorb extends Component {
</feMerge>
</filter>
</defs>
<g class='blue' filter='url(#absorbFilter)'>
<path d= "
M 64 4
L 64 96
"/>
</g>
<polygon
class='blue'
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"
filter="url(#absorbFilter)">
</polygon>
<polygon
class='white'
points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100">
</polygon>
</svg>
);
}
@@ -51,13 +54,24 @@ class Absorb extends Component {
easing: 'easeInOutSine',
}));
anime({
targets: ['#absorb path'],
strokeDashoffset: [anime.setDashoffset, 0],
duration: 2000,
easing: 'linear',
loop: true,
});
this.animations.push(anime({
targets: ['#absorb polygon'],
points: '64 124.94732621931382 8.574 96.00354944613788 8.62269130211947 32.03166105954991 64 4 119.37730869788052 32.03166105954991 119.426 96.00354944613788',
easing: 'easeOutExpo',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
this.animations.push(anime({
targets: ['#absorb polygon.white'],
strokeWidth: [2, 1],
easing: 'easeInOutSine',
direction: 'alternate',
delay: TIMES.TARGET_DELAY_MS,
duration: TIMES.TARGET_DURATION_MS,
}));
}
// this is necessary because
client/src/components/anims/scatter.jsx
+77
View File
@@ -0,0 +1,77 @@
const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const { TIMES } = require('../../constants');
class Scatter extends Component {
constructor() {
super();
this.animations = [];
}
render() {
return (
<svg
class='skill-animation blue'
version="1.1"
id="scatter"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 128 128">
<defs>
<filter id="scatterFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g class='blue' filter='url(#scatterFilter)' stroke-width="4px" stroke-linecap="round" >
<path d= "
M 4 4
h 30
q 30 0 30 30
q 0 30 30 30
h 30
q 0 -30 -30 -30
h -60
q -30 0 -30 -30
"/>
</g>
</svg>
);
}
componentDidMount() {
this.animations.push(anime({
targets: ['#scatter'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: 1000 },
// { value: 0, delay: TIMES.TARGET_DURATION_MS * 0.6, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
anime({
targets: ['#scatter path'],
strokeDashoffset: [anime.setDashoffset, 0],
duration: TIMES.TARGET_DURATION_MS * 0.8,
delay: TIMES.TARGET_DELAY_MS,
easing: 'easeInOutSine',
});
}
// 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();
}
}
}
module.exports = Scatter;
client/src/components/anims/clutch.jsx → client/src/components/anims/sustain.jsx
-15
View File
@@ -123,18 +123,3 @@ class Sustain extends Component {
}
module.exports = Sustain;
/* <polyline
points='128,168 80,240 176,240 128,168'
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
points='176,240 212,216 128,96 44,216 80,240'
style={{ filter: 'url("#sustainFilter")' }}
/>
<polyline
points='212,216 248,192 128,24 8,192 44,216'
style={{ filter: 'url("#sustainFilter")' }}
/>
*/
client/src/constants.jsx
+1
View File
@@ -19,6 +19,7 @@ module.exports = {
RED: '#a52a2a',
BLUE: '#3498db',
WHITE: '#f5f5f5', // whitesmoke
PURPLE: '#9355b5' // 6lack - that far cover
},
INFO: {
client/src/utils.jsx
+11 -10
View File
@@ -371,6 +371,7 @@ const removeTier = skill => {
if (skill.includes('Ruin')) return 'Ruin';
if (skill.includes('Throw')) return 'Throw';
if (skill.includes('Hex')) return 'Hex';
if (skill.includes('Absorb')) return 'Absorb';
if (skill.includes('Banish')) return 'Banish';
return skill;
@@ -379,20 +380,20 @@ const removeTier = skill => {
const SERVER = process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:40000/api';
function postData(url = '/', data = {}) {
// Default options are marked with *
// Default options are marked with *
return fetch(`${SERVER}${url}`, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
// mode: "no-cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "include", // include, same-origin, *omit
method: 'POST', // *GET, POST, PUT, DELETE, etc.
// mode: 'no-cors', // no-cors, cors, *same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'include', // include, same-origin, *omit
headers: {
'Accept': 'application/json',
'content-type': 'application/json'
Accept: 'application/json',
'content-type': 'application/json',
},
redirect: "error", // manual, *follow, error
// referrer: "", // no-referrer, *client
redirect: 'error', // manual, *follow, error
// referrer: ', // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
});
}
module.exports = {