files

client/src/components/targeting.arrows.jsx

@@ -0,0 +1,45 @@
+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;
+    if (resolution) return false
+
+    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 sourceX = 0;
+        const sourceY = (source * 300) + 100;
+        const targetX = defensive ? 0 : 900;
+        const targetY = (target * 300) + 100;
+
+        return <path d={`M${sourceX},${sourceY} L${targetX},${targetY}`} />;
+
+        // indexOf cryp in list * 300
+        // indexOf skill in skillList * 100 + 50
+    }
+
+    const arrows = outgoing.map(getPath);
+
+    return (
+        <svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg">
+            {arrows}
+        </svg>
+    );
+}
+
+module.exports = addState(TargetSvg);