72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
const preact = require('preact');
|
|
const { connect } = require('preact-redux');
|
|
|
|
const addState = connect(
|
|
({ game, account, resolution }) => ({ game, account, resolution })
|
|
);
|
|
|
|
function TargetSvg(args) {
|
|
const { game, account, resolution } = args;
|
|
|
|
const playerTeam = game.players.find(t => t.id === account.id);
|
|
const otherTeam = game.players.find(t => t.id !== account.id);
|
|
|
|
const playerTeamIds = playerTeam.cryps.map(c => c.id);
|
|
const outgoing = game.stack.filter(stack => playerTeamIds.includes(stack.source_cryp_id));
|
|
|
|
function getPath(cast) {
|
|
const source = playerTeam.cryps.findIndex(c => c.id === cast.source_cryp_id);
|
|
const defensive = playerTeamIds.includes(cast.target_cryp_id);
|
|
const target = defensive
|
|
? playerTeam.cryps.findIndex(c => c.id === cast.target_cryp_id)
|
|
: otherTeam.cryps.findIndex(c => c.id === cast.target_cryp_id);
|
|
|
|
const skillIndex = playerTeam.cryps[source].skills.findIndex(s => s.skill === cast.skill);
|
|
|
|
const skillOffset = (100 * skillIndex) + 50;
|
|
const sourceY = 0;
|
|
const sourceX = (source * 300) + skillOffset;
|
|
const targetY = (target * 300) + 150;
|
|
const curveStart = 150 + (150 * source);
|
|
const curveEnd = 450 + curveStart;
|
|
|
|
if (defensive) {
|
|
const path = `
|
|
M${sourceX},${sourceY}
|
|
L${sourceY},150
|
|
C${sourceY},150 ${targetY},150 ${targetY},150
|
|
L${targetY},0
|
|
L${targetY - 4},50
|
|
M${targetY},0
|
|
L${targetY + 4},0
|
|
`;
|
|
|
|
return <path d={path} />;
|
|
}
|
|
|
|
const path = `
|
|
M${sourceX},${sourceY}
|
|
L${curveStart},${sourceY}
|
|
C${curveEnd},${sourceY} ${curveStart},${targetY} ${curveEnd},${targetY}
|
|
L${targetY},900
|
|
L${targetY - 4},850
|
|
M${targetY},900
|
|
L${targetY + 4},850
|
|
`;
|
|
|
|
return <path d={path} />;
|
|
}
|
|
|
|
const arrows = resolution
|
|
? null
|
|
: outgoing.map(getPath);
|
|
|
|
return (
|
|
<svg preserveAspectRatio="none" className="targeting-arrows">
|
|
{arrows}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
module.exports = addState(TargetSvg);
|