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

charge svg, space out randomly generated points

Browse Source
This commit is contained in:
Mashy 2019-06-19 14:01:34 +10:00
parent c4c3c415b9
commit ae481d54bf
3 changed files with 81 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,9 @@ const preact = require('preact');
const { Component } = require('preact');
const anime = require('animejs').default;
const charge = require('../svgs/charge');
const { TIMES } = require('../../constants');
const { randomPoints } = require('../../utils');
const duration = TIMES.START_SKILL;
@ -10,53 +12,9 @@ class Attack extends Component {
constructor(props) {
super();
this.props = props;
const points = [];
for (let i = 0; i <= 2; i += 1) {
const x = Math.floor(Math.random() * 200 + 50);
const y = Math.floor(Math.random() * 300 + 50);
points.push([x, y]);
this.circles = points.map((coord, j) => (
<svg key={j}>
<polygon
points={`
${coord[0]},${coord[1] - 10}
${coord[0] - 20},${coord[1] + 20}
${coord[0] + 20},${coord[1] + 20}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${coord[0] + 20},${coord[1] + 20}
${coord[0] + 35},${coord[1] + 10}
${coord[0]},${coord[1] - 40}
${coord[0] - 35},${coord[1] + 10}
${coord[0] - 20},${coord[1] + 20}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${coord[0] + 35},${coord[1] + 10}
${coord[0] + 50},${coord[1]}
${coord[0]},${coord[1] - 70}
${coord[0] - 50},${coord[1]}
${coord[0] - 35},${coord[1] + 10}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
</svg>
));
}
const points = randomPoints(7, 50, 300, 400);
const length = 6;
this.charges = points.map(coord => charge(coord[0], coord[1], length, '#a52a2a'));
}
render() {
@ -67,10 +25,7 @@ class Attack extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
{this.circles}
{this.charges}
</svg>
);
}
@ -105,7 +60,7 @@ class Attack extends Component {
fill: '#a52a2a',
delay: anime.stagger(100),
loop: true,
duration: 1000,
duration: duration,
easing: 'easeInQuad',
});

42
client/src/components/svgs/charge.jsx Normal file
View File

@ -0,0 +1,42 @@
const preact = require('preact');
module.exports = function charge(x, y, height, colour) {
return (
<svg>
<polygon
points={`
${x},${y - height}
${x - 2 * height},${y + 2 * height}
${x + 2 * height},${y + 2 * height}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${x + 2 * height},${y + 2 * height}
${x + 3.5 * height},${y + height}
${x},${y - 4 * height}
${x - 3.5 * height},${y + height}
${x - 2 * height},${y + 2 * height}
`}
stroke="#a52a2a"
stroke-width="2"
id="charge"
/>
<polyline
points={`
${x + 3.5 * height},${y + height}
${x + 5 * height},${y}
${x},${y - 7 * height}
${x - 5 * height},${y}
${x - 3.5 * height},${y + height}
`}
stroke={colour}
stroke-width="2"
id="charge"
/>
</svg>
);
}

32
client/src/utils.jsx
View File

@ -345,6 +345,37 @@ const TARGET_COLOURS = {
BROWN: '#583108',
};
function randomPoints(numPoints, radius, width, height) {
const points = [];
let infCheck = 0;
while (points.length < numPoints) {
const c = [
Math.floor(Math.random() * (width - 2 * radius) + radius),
Math.floor(Math.random() * (height - 2 * radius) + radius),
];
let overlapping = false;
for (let j = 0; j < points.length; j += 1) {
const o = points[j];
const dx = c[0] - o[0];
const dy = c[1] - o[1];
const d = Math.floor(Math.sqrt(dx * dx + dy * dy));
if (d < radius) {
overlapping = true;
}
}
if (!overlapping) {
points.push(c);
infCheck = 0;
} else {
infCheck += 1;
if (infCheck > 50) {
break;
}
}
}
return points;
}
module.exports = {
stringSort,
convertItem,
@ -356,4 +387,5 @@ module.exports = {
STATS,
COLOURS,
TARGET_COLOURS,
randomPoints,
};