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

high tech resizing svg action

Browse Source
This commit is contained in:
ntr 2019-06-03 17:18:47 +10:00
parent 3bd72cff8f
commit 9bb251724f
3 changed files with 76 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/.eslintrc.js
View File

@ -78,9 +78,7 @@ module.exports = {
// enforce that class methods use "this"
// https://eslint.org/docs/rules/class-methods-use-this
'class-methods-use-this': ['error', {
exceptMethods: [],
}],
'class-methods-use-this': 0,
// require return statements to either always or never specify values
'consistent-return': 'error',

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

@ -81,7 +81,7 @@
}
.game .targeting-arrows {
stroke-width: 5px;
stroke-width: 2px;
}
.game-construct .targeting {
@ -429,8 +429,4 @@
.game .effects {
font-size: 100%;
}
.game .targeting-arrows {
stroke-width: 1em;
}
}
}

122
client/src/components/targeting.arrows.jsx
View File

@ -1,6 +1,9 @@
const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const throttle = require('lodash/throttle');
const addState = connect(
({ game, account, resolution }) => ({ game, account, resolution })
);
@ -13,43 +16,72 @@ const TC_MAP = [
TARGET_COLOURS.GREEN,
];
function TargetSvg(args) {
const { game, account, resolution } = args;
class TargetSvg extends Component {
constructor() {
super();
this.state = { width: 3000, height: 1000 };
const playerTeam = game.players.find(t => t.id === account.id);
const otherTeam = game.players.find(t => t.id !== account.id);
this.onResize = throttle(() => {
console.warn('resize')
const svg = document.getElementById('targeting');
const { width, height } = svg.getBoundingClientRect();
this.setState({ width, height });
}, 500);
}
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const outgoing = game.stack.filter(stack => playerTeamIds.includes(stack.source_construct_id));
render(props, state) {
const { game, account, resolution } = props;
const { width, height } = state;
const WIDTH = 3000;
const HEIGHT = 1000;
const playerTeam = game.players.find(t => t.id === account.id);
const otherTeam = game.players.find(t => t.id !== account.id);
function getPath(cast) {
const source = playerTeam.constructs.findIndex(c => c.id === cast.source_construct_id);
const defensive = playerTeamIds.includes(cast.target_construct_id);
const target = defensive
? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
: otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const outgoing = game.stack.filter(stack => playerTeamIds.includes(stack.source_construct_id));
const stroke = TC_MAP[source];
function getPath(cast) {
const source = playerTeam.constructs.findIndex(c => c.id === cast.source_construct_id);
const defensive = playerTeamIds.includes(cast.target_construct_id);
const target = defensive
? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
: otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
const sourceY = HEIGHT;
const sourceX = (source * WIDTH / 3) + WIDTH / 6;
const targetX = (target * WIDTH / 3) + WIDTH / 6 + (defensive ? WIDTH / 24 : 0);
const targetY = defensive ? HEIGHT : 0;
const curveEnd = HEIGHT * 0.25;
const curveStart = HEIGHT * 0.75;
const stroke = TC_MAP[source];
const sourceY = height;
const sourceX = (source * width / 3) + width / 6;
const targetX = (target * width / 3) + width / 6 + (defensive ? width / 24 : 0);
const targetY = defensive ? height : 0;
const curveEnd = height * 0.25;
const curveStart = height * 0.75;
if (defensive) {
const path = `
M${sourceX},${sourceY}
L${sourceX},${height * 0.75}
L${targetX},${height * 0.75}
L${targetX},${targetY}
L${targetX - (width * 0.005)},${height * 0.875}
M${targetX},${targetY}
L${targetX + (width * 0.005)},${height * 0.875}
`;
return <path
style={ { stroke} }
d={path}
/>;
}
if (defensive) {
const path = `
M${sourceX},${sourceY}
L${sourceX},${HEIGHT * 0.75}
L${targetX},${HEIGHT * 0.75}
L${sourceX},${curveStart}
C${sourceX},${curveEnd} ${targetX},${curveStart} ${targetX},${curveEnd}
L${targetX},${targetY}
L${targetX - (WIDTH * 0.005)},${HEIGHT * 0.875}
L${targetX - (width * 0.005)},${height * 0.125}
M${targetX},${targetY}
L${targetX + (WIDTH * 0.005)},${HEIGHT * 0.875}
L${targetX + (width * 0.005)},${height * 0.125}
`;
return <path
@ -58,33 +90,25 @@ function TargetSvg(args) {
/>;
}
const path = `
M${sourceX},${sourceY}
L${sourceX},${curveStart}
C${sourceX},${curveEnd} ${targetX},${curveStart} ${targetX},${curveEnd}
const arrows = resolution
? null
: outgoing.map(getPath);
L${targetX},${targetY}
L${targetX - (WIDTH * 0.005)},${HEIGHT * 0.125}
M${targetX},${targetY}
L${targetX + (WIDTH * 0.005)},${HEIGHT * 0.125}
`;
return <path
style={ { stroke} }
d={path}
/>;
return (
<svg id="targeting" viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="none" className="targeting-arrows">
{arrows}
</svg>
);
}
const arrows = resolution
? null
: outgoing.map(getPath);
componentDidMount() {
window.addEventListener('resize', this.onResize);
this.onResize();
}
return (
<svg viewBox={`0 0 ${WIDTH} ${HEIGHT}`} preserveAspectRatio="none" className="targeting-arrows">
{arrows}
</svg>
);
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
}
module.exports = addState(TargetSvg);