This commit is contained in:
ntr 2019-05-03 17:30:14 +10:00
parent b2f3c147a1
commit 2db1fabec2
5 changed files with 629 additions and 0 deletions

View File

@ -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;
}

View File

@ -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);

View File

@ -6,6 +6,7 @@ const actions = require('./actions');
const { TIMES } = require('./constants');
const { getCombatSequence } = require('./utils');
function registerEvents(store) {
// timeout handlers

View File

@ -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 = {

568
client/src/test.game.js Normal file
View File

@ -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;