From 2db1fabec2f18fd571cdd5335b76195b8df3da66 Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 3 May 2019 17:30:14 +1000 Subject: [PATCH] files --- client/cryps.css | 11 + client/src/components/targeting.arrows.jsx | 45 ++ client/src/events.jsx | 1 + client/src/main.jsx | 4 + client/src/test.game.js | 568 +++++++++++++++++++++ 5 files changed, 629 insertions(+) create mode 100644 client/src/components/targeting.arrows.jsx create mode 100644 client/src/test.game.js 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 ; + + // indexOf cryp in list * 300 + // indexOf skill in skillList * 100 + 50 + } + + const arrows = outgoing.map(getPath); + + return ( + + {arrows} + + ); +} + +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...", + "" + ], + "instance": "5dcd5f1f-276d-41af-9a11-83e8912bad45", + "phase_end": "2019-05-03T06:52:26.494331765Z" +} + +module.exports = game; \ No newline at end of file