diff --git a/client/cryps.css b/client/cryps.css
index 16d1f247..bbc6b207 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -794,6 +794,17 @@ table td svg {
     flex: 1;
 }
 
+.game .target-svg {
+    flex: 1;
+    min-width: 20%;
+    height: 100%;
+}
+
+.game .target-svg path {
+    stroke: whitesmoke;
+    stroke-width: 2px;
+}
+
 .mobile-skills {
     display: none;
 }
diff --git a/client/src/components/targeting.arrows.jsx b/client/src/components/targeting.arrows.jsx
new file mode 100644
index 00000000..048eeff0
--- /dev/null
+++ b/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);
diff --git a/client/src/events.jsx b/client/src/events.jsx
index bbbeedf0..bfbd0ae4 100644
--- a/client/src/events.jsx
+++ b/client/src/events.jsx
@@ -6,6 +6,7 @@ const actions = require('./actions');
 const { TIMES } = require('./constants');
 const { getCombatSequence } = require('./utils');
 
+
 function registerEvents(store) {
 
     // timeout handlers
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 81f3da17..ad6a5f08 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -9,6 +9,7 @@ const actions = require('./actions');
 const setupKeys = require('./keyboard');
 const createSocket = require('./socket');
 const registerEvents = require('./events');
+const testGame = require('./test.game');
 
 const Header = require('./components/header.container');
 const Body = require('./components/body.component');
@@ -45,6 +46,9 @@ document.fonts.load('16pt "Jura"').then(() => {
     store.dispatch(actions.setWs(ws));
     ws.connect();
 
+    events.setGame(testGame);
+    ws.clearGameStateTimeout();
+
     // tells jdenticon to look for new svgs and render them
     // so we don't have to setInnerHtml or manually call update
     jdenticon.config = {
diff --git a/client/src/test.game.js b/client/src/test.game.js
new file mode 100644
index 00000000..f136ece2
--- /dev/null
+++ b/client/src/test.game.js
@@ -0,0 +1,568 @@
+const game = {
+  "id": "667ad344-dc76-40b9-bb9c-0d20f0f7f5d2",
+  "player_cryps": 3,
+  "player_num": 2,
+  "players": [
+    {
+      "id": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+      "name": "inverted problem",
+      "vbox": {
+        "bits": 6,
+        "free": [
+          [],
+          [
+            "Debuff",
+            "Block",
+            "Buff"
+          ],
+          [
+            "Speed",
+            "Damage",
+            "Life",
+            "Damage",
+            "Life",
+            "Life"
+          ]
+        ],
+        "bound": []
+      },
+      "score": {
+        "wins": 0,
+        "losses": 0
+      },
+      "cryps": [
+        {
+          "id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
+          "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+          "red_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedDamage"
+          },
+          "red_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedLife"
+          },
+          "blue_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueLife"
+          },
+          "blue_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueDamage"
+          },
+          "green_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenDamage"
+          },
+          "speed": {
+            "base": 128,
+            "value": 128,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Speed"
+          },
+          "green_life": {
+            "base": 1024,
+            "value": 1024,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenLife"
+          },
+          "evasion": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Evasion"
+          },
+          "skills": [
+            {
+              "skill": "Attack",
+              "self_targeting": false,
+              "cd": null
+            },
+            {
+              "skill": "Decay",
+              "self_targeting": false,
+              "cd": 1
+            }
+          ],
+          "effects": [],
+          "specs": [],
+          "colours": {
+            "red": 0,
+            "green": 1,
+            "blue": 1
+          },
+          "name": "CzXWogZB"
+        },
+        {
+          "id": "ea302c35-d326-475c-a867-8ad5b162165a",
+          "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+          "red_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedDamage"
+          },
+          "red_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedLife"
+          },
+          "blue_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueLife"
+          },
+          "blue_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueDamage"
+          },
+          "green_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenDamage"
+          },
+          "speed": {
+            "base": 128,
+            "value": 128,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Speed"
+          },
+          "green_life": {
+            "base": 1024,
+            "value": 1024,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenLife"
+          },
+          "evasion": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Evasion"
+          },
+          "skills": [
+            {
+              "skill": "Attack",
+              "self_targeting": false,
+              "cd": null
+            },
+            {
+              "skill": "Corrupt",
+              "self_targeting": true,
+              "cd": 1
+            }
+          ],
+          "effects": [],
+          "specs": [],
+          "colours": {
+            "red": 0,
+            "green": 0,
+            "blue": 2
+          },
+          "name": "18taUjOz"
+        },
+        {
+          "id": "82e8b940-411c-42a1-8fc2-484ec7207734",
+          "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+          "red_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedDamage"
+          },
+          "red_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedLife"
+          },
+          "blue_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueLife"
+          },
+          "blue_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueDamage"
+          },
+          "green_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenDamage"
+          },
+          "speed": {
+            "base": 128,
+            "value": 128,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Speed"
+          },
+          "green_life": {
+            "base": 1024,
+            "value": 1024,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenLife"
+          },
+          "evasion": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Evasion"
+          },
+          "skills": [
+            {
+              "skill": "Attack",
+              "self_targeting": false,
+              "cd": null
+            },
+            {
+              "skill": "Corrupt",
+              "self_targeting": true,
+              "cd": 1
+            }
+          ],
+          "effects": [],
+          "specs": [],
+          "colours": {
+            "red": 0,
+            "green": 0,
+            "blue": 2
+          },
+          "name": "Uc4L3lun"
+        }
+      ],
+      "bot": true,
+      "ready": true,
+      "warnings": 0
+    },
+    {
+      "id": "ec936c53-8eab-44e7-953f-9739531cee24",
+      "name": "ntr",
+      "vbox": {
+        "bits": 18,
+        "free": [
+          [
+            "Red",
+            "Blue",
+            "Green",
+            "Green",
+            "Green",
+            "Red"
+          ],
+          [
+            "Attack",
+            "Attack",
+            "Debuff",
+            "Buff",
+            "Buff",
+            "Block"
+          ],
+          [
+            "Speed",
+            "Damage",
+            "Speed",
+            "Life",
+            "Speed",
+            "Speed"
+          ]
+        ],
+        "bound": []
+      },
+      "score": {
+        "wins": 0,
+        "losses": 0
+      },
+      "cryps": [
+        {
+          "id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
+          "account": "ec936c53-8eab-44e7-953f-9739531cee24",
+          "red_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedDamage"
+          },
+          "red_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedLife"
+          },
+          "blue_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueLife"
+          },
+          "blue_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueDamage"
+          },
+          "green_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenDamage"
+          },
+          "speed": {
+            "base": 128,
+            "value": 128,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Speed"
+          },
+          "green_life": {
+            "base": 1024,
+            "value": 1024,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenLife"
+          },
+          "evasion": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Evasion"
+          },
+          "skills": [
+            {
+              "skill": "Attack",
+              "self_targeting": false,
+              "cd": null
+            }
+          ],
+          "effects": [],
+          "specs": [],
+          "colours": {
+            "red": 0,
+            "green": 0,
+            "blue": 0
+          },
+          "name": "zzz"
+        },
+        {
+          "id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
+          "account": "ec936c53-8eab-44e7-953f-9739531cee24",
+          "red_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedDamage"
+          },
+          "red_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedLife"
+          },
+          "blue_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueLife"
+          },
+          "blue_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueDamage"
+          },
+          "green_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenDamage"
+          },
+          "speed": {
+            "base": 128,
+            "value": 128,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Speed"
+          },
+          "green_life": {
+            "base": 1024,
+            "value": 1024,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenLife"
+          },
+          "evasion": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Evasion"
+          },
+          "skills": [
+            {
+              "skill": "Attack",
+              "self_targeting": false,
+              "cd": null
+            }
+          ],
+          "effects": [],
+          "specs": [],
+          "colours": {
+            "red": 0,
+            "green": 0,
+            "blue": 0
+          },
+          "name": "kaast"
+        },
+        {
+          "id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
+          "account": "ec936c53-8eab-44e7-953f-9739531cee24",
+          "red_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedDamage"
+          },
+          "red_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "RedLife"
+          },
+          "blue_life": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueLife"
+          },
+          "blue_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "BlueDamage"
+          },
+          "green_damage": {
+            "base": 256,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenDamage"
+          },
+          "speed": {
+            "base": 128,
+            "value": 128,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Speed"
+          },
+          "green_life": {
+            "base": 1024,
+            "value": 1024,
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "GreenLife"
+          },
+          "evasion": {
+            "base": 0,
+            "value": Math.floor(Math.random() * 10000),
+            "max": Math.floor(Math.random() * 10000),
+            "stat": "Evasion"
+          },
+          "skills": [
+            {
+              "skill": "Attack",
+              "self_targeting": false,
+              "cd": null
+            }
+          ],
+          "effects": [],
+          "specs": [],
+          "colours": {
+            "red": 0,
+            "green": 0,
+            "blue": 0
+          },
+          "name": "muji"
+        }
+      ],
+      "bot": false,
+      "ready": false,
+      "warnings": 0
+    }
+  ],
+  "phase": "Skill",
+  "stack": [
+    {
+      "id": "15ef2068-0eec-4eda-b2b2-5abe78e4ff9a",
+      "source_player_id": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+      "source_cryp_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
+      "target_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
+      "skill": "Attack",
+      "speed": 0,
+      "resolutions": []
+    },
+    {
+      "id": "4fbe9c95-8f40-4f65-9f0e-b77d5eb64b17",
+      "source_player_id": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+      "source_cryp_id": "ea302c35-d326-475c-a867-8ad5b162165a",
+      "target_cryp_id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
+      "skill": "Attack",
+      "speed": 0,
+      "resolutions": []
+    },
+    {
+      "id": "c2f398b8-6f5a-4fda-8c8d-b1be53819040",
+      "source_player_id": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
+      "source_cryp_id": "82e8b940-411c-42a1-8fc2-484ec7207734",
+      "target_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
+      "skill": "Attack",
+      "speed": 0,
+      "resolutions": []
+    },
+    {
+      "id": "6bc9c3ce-587e-4bbe-ac81-2bc536ebbce4",
+      "source_player_id": "ec936c53-8eab-44e7-953f-9739531cee24",
+      "source_cryp_id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
+      "target_cryp_id": "82e8b940-411c-42a1-8fc2-484ec7207734",
+      "skill": "Attack",
+      "speed": 0,
+      "resolutions": []
+    },
+    {
+      "id": "9d2fc857-51c7-4640-a17c-a08496480830",
+      "source_player_id": "ec936c53-8eab-44e7-953f-9739531cee24",
+      "source_cryp_id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
+      "target_cryp_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
+      "skill": "Attack",
+      "speed": 0,
+      "resolutions": []
+    },
+    {
+      "id": "e1bd2d77-181a-4f2d-a4f6-78c9ad3c5b3b",
+      "source_player_id": "ec936c53-8eab-44e7-953f-9739531cee24",
+      "source_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
+      "target_cryp_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
+      "skill": "Attack",
+      "speed": 0,
+      "resolutions": []
+    }
+  ],
+  "resolved": [],
+  "log": [
+    "inverted problem has joined the game. [CzXWogZB, 18taUjOz, Uc4L3lun]",
+    "ntr has joined the game. [zzz, kaast, muji]",
+    "Game starting...",
+    "<Skill Phase>"
+  ],
+  "instance": "5dcd5f1f-276d-41af-9a11-83e8912bad45",
+  "phase_end": "2019-05-03T06:52:26.494331765Z"
+}
+
+module.exports = game;
\ No newline at end of file