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" // enforce that class methods use "this"
// https://eslint.org/docs/rules/class-methods-use-this // https://eslint.org/docs/rules/class-methods-use-this
'class-methods-use-this': ['error', { 'class-methods-use-this': 0,
exceptMethods: [],
}],
// require return statements to either always or never specify values // require return statements to either always or never specify values
'consistent-return': 'error', 'consistent-return': 'error',

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

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

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

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