ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bigtime renaming

Browse Source
This commit is contained in:
ntr
2019-05-25 15:20:38 +10:00
parent 4800609df7
commit 760106e0e7
91 changed files with 1642 additions and 1615 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/game.css
+28 -28
View File
@@ -36,7 +36,7 @@
}
.opponent .game-cryp {
.opponent .game-construct {
align-items: flex-start;
grid-template-rows: min-content min-content min-content 2fr;
grid-template-columns: 1fr 1fr;
@@ -47,12 +47,12 @@
"avatar target";
}
.opponent .game-cryp .name {
.opponent .game-construct .name {
margin-bottom: 0;
margin-top: 0.25em;
}
.game-cryp {
.game-construct {
display: grid;
/*justify-items: center;*/
@@ -74,7 +74,7 @@
transition-timing-function: ease;
}
.game-cryp .targeting {
.game-construct .targeting {
grid-area: target;
display: flex;
flex-flow: column;
@@ -84,36 +84,36 @@
white-space: nowrap;
}
.game-cryp .img {
.game-construct .img {
grid-area: avatar;
}
.game-cryp .name {
.game-construct .name {
width: 100%;
margin-bottom: 0.25em;
text-align: center;
grid-area: name;
}
.game-cryp .stats {
.game-construct .stats {
grid-area: stats;
display: flex;
flex-flow: row;
}
.game-cryp figure {
.game-construct figure {
padding: 0 0.5em;
display: flex;
flex-flow: column;
}
.game-cryp figcaption {
.game-construct figcaption {
white-space: nowrap;
font-size: 100%;
}
@media (max-width: 1500px) {
.game-cryp figure {
.game-construct figure {
padding: 0 0.25em;
}
@@ -123,7 +123,7 @@
}
*/}
.game-cryp .skills {
.game-construct .skills {
grid-area: skills;
display: flex;
flex-flow: column-reverse;
@@ -131,13 +131,13 @@
}
/*@media (max-width: 1000px) {
.game-cryp .skills {
.game-construct .skills {
flex-flow: column;
}
}
*/
.game-cryp .effects {
.game-construct .effects {
grid-area: effects;
font-size: 1.5em;
white-space: nowrap;
@@ -153,7 +153,7 @@
margin-right: 0.5em;
}
.game-cryp button {
.game-construct button {
color: #888;
flex: 1 1 100%;
padding: 0;
@@ -161,35 +161,35 @@
border-width: 0px;
}
.game-cryp button.active {
.game-construct button.active {
color: whitesmoke;
}
.game-cryp button[disabled], .game-cryp button[disabled]:hover {
.game-construct button[disabled], .game-construct button[disabled]:hover {
color: #333333;
text-decoration: line-through
}
.game-cryp button:hover {
.game-construct button:hover {
color: whitesmoke;
}
.game-cryp.ko {
.game-construct.ko {
animation: none;
opacity: 0.35;
filter: grayscale(100%);
}
.game-cryp.ko button:hover {
.game-construct.ko button:hover {
color: #333;
}
.game-cryp.unfocus {
.game-construct.unfocus {
opacity: 0.65;
filter: blur(5px);
}
.game-cryp.unfocus.ko {
.game-construct.unfocus.ko {
filter: blur(5px) grayscale(100%);
}
@@ -202,18 +202,18 @@
left: 50%;
}
CRYP DAMAGE
CONSTRUCT DAMAGE
.game-cryp.active-skill {
.game-construct.active-skill {
filter: drop-shadow(0 0 0.2em silver);
/*border-color: silver;*/
}
.game-cryp.red-damage {
.game-construct.red-damage {
filter: drop-shadow(0 0 0.2em red);
color: red;
/*ensure cryp doesn't get opacity lowered because of being KO before the KO animation*/
/*ensure construct doesn't get opacity lowered because of being KO before the KO animation*/
opacity: 1;
/*border-color: red;*/
@@ -232,7 +232,7 @@ CRYP DAMAGE
/*border-top: 1px solid red;*/
}
.game-cryp.blue-damage {
.game-construct.blue-damage {
filter: drop-shadow(0 0 0.2em blue);
color: blue;
opacity: 1;
@@ -252,7 +252,7 @@ CRYP DAMAGE
/*border-top: 1px solid blue;*/
}
.game-cryp.green-damage {
.game-construct.green-damage {
filter: drop-shadow(0 0 0.2em green);
color: green;
opacity: 1;
@@ -272,7 +272,7 @@ CRYP DAMAGE
/*border-top: 1px solid green;*/
}
.game-cryp.purple-damage {
.game-construct.purple-damage {
filter: drop-shadow(0 0 0.2em purple);
color: purple;
border-color: purple;
client/assets/styles/instance.css
+26 -26
View File
@@ -11,7 +11,7 @@
"top top info"
"vbox vbox info"
"equip equip info"
"cryps cryps info";
"constructs constructs info";
}
@media (max-width: 1920px) {
@@ -33,7 +33,7 @@
}
.instance .scoreboard {
grid-area: cryps;
grid-area: constructs;
}
.instance-ui-btn {
@@ -60,8 +60,8 @@
margin-top: 1.5em;
}
.instance .cryps {
grid-area: cryps;
.instance .constructs {
grid-area: constructs;
}
.instance .equip {
@@ -148,16 +148,16 @@
cursor: pointer;
}
/* CRYP LIST */
/* CONSTRUCT LIST */
.cryp-list {
grid-area: cryps;
.construct-list {
grid-area: constructs;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.instance-cryp, .instance-cryp-active {
.instance-construct, .instance-construct-active {
display: grid;
grid-template-rows: min-content min-content min-content 1fr min-content;
grid-template-areas:
@@ -177,17 +177,17 @@
transition-timing-function: ease;
*/}
.instance-cryp:first-child, .instance-cryp-active:first-child {
.instance-construct:first-child, .instance-construct-active:first-child {
margin-left: 0;
border-left-width: 1px;
}
.cryp-list .name {
.construct-list .name {
grid-area: name;
margin-bottom: 0.5em;
}
.cryp-list .avatar {
.construct-list .avatar {
grid-area: avatar;
object-fit: contain;
background-size: contain;
@@ -196,28 +196,28 @@
pointer-events: none;
}
.cryp-list .name {
.construct-list .name {
text-align: center;
}
.cryp-list .avatar figure {
.construct-list .avatar figure {
margin: 0;
height: 80%;
text-align: center;
box-sizing: border-box;
}
.cryp-list .avatar figcaption {
.construct-list .avatar figcaption {
font-size: 90%;
}
.cryp-list .skills {
.construct-list .skills {
grid-area: skills;
display: flex;
border-width: 0px;
}
.cryp-list .skills button {
.construct-list .skills button {
flex: 1;
border-width: 0px;
}
@@ -236,7 +236,7 @@
}
}
*/
.cryp-list .specs {
.construct-list .specs {
margin-top: 1em;
grid-area: specs;
display: flex;
@@ -245,18 +245,18 @@
border-width: 0px;
}
.cryp-list .specs figure {
.construct-list .specs figure {
flex: 1;
border: 0;
align-items: center;
text-align: center;
}
.cryp-list .specs figcaption {
.construct-list .specs figcaption {
font-size: 75%;
}
.cryp-list .stats {
.construct-list .stats {
grid-area: stats;
display: grid;
grid-template-rows: 1fr 3fr;
@@ -267,11 +267,11 @@
border-width: 0px;
}
.cryp-list .stats figcaption {
.construct-list .stats figcaption {
font-size: 75%;
}
.cryp-list .stats .icons {
.construct-list .stats .icons {
grid-area: st;
display: flex;
flex-flow: row;
@@ -289,25 +289,25 @@
fill: none;
}
.cryp-list .stat-icon {
.construct-list .stat-icon {
width: 100%;
}
.cryp-list .stats .damage-label {
.construct-list .stats .damage-label {
grid-area: dl;
display: flex;
justify-content: center;
color: #666;
}
.cryp-list .stats .speed-label {
.construct-list .stats .speed-label {
grid-area: sl;
display: flex;
justify-content: center;
color: #666;
}
.cryp-list .stats .life-label {
.construct-list .stats .life-label {
grid-area: ll;
display: flex;
justify-content: center;
client/assets/styles/instance.mobile.css
+14 -14
View File
@@ -7,12 +7,12 @@
"top"
"controls"
"vbox"
"cryps"
"constructs"
}
/* Default view */
.instance .equip { display: none; }
.instance .info { display: none; }
.instance .cryp-list { display: none; }
.instance .construct-list { display: none; }
.vbox {
grid-area: vbox;
display: grid;
@@ -31,13 +31,13 @@
.vbox-combiner {
margin-left: 0;
}
/* Toggled view (cryps)*/
/* Toggled view (constructs)*/
#toggle-vbox-label {
text-align: center;
border: 2px solid #555;
}
#toggle-vbox-label:after{
content: "Cryps";
content: "Constructs";
}
#toggle-vbox:checked ~ #toggle-vbox-label:after{
@@ -54,8 +54,8 @@
display: initial;
}
#toggle-vbox:checked ~ .cryp-list {
grid-area: cryps;
#toggle-vbox:checked ~ .construct-list {
grid-area: constructs;
display: grid;
justify-content: center;
@@ -75,12 +75,12 @@
margin-right: 0.5em;
}
.cryp-list .skills {
.construct-list .skills {
flex-flow: row;
align-items: stretch;
}
.instance-cryp {
.instance-construct {
grid-row: 2;
display: grid;
grid-template-rows: min-content 1fr;
@@ -95,20 +95,20 @@
transition-timing-function: ease;
}
.instance-cryp .skills {
.instance-construct .skills {
display: none;
}
.instance-cryp .specs {
.instance-construct .specs {
display: none;
}
.instance-cryp .stats {
.instance-construct .stats {
display: none;
}
.instance-cryp-active {
.instance-construct-active {
grid-row: 1;
grid-column: 1 / 3;
display: grid;
@@ -129,11 +129,11 @@
transition-timing-function: ease;
}
.instance-cryp-active img {
.instance-construct-active img {
width: 55px;
}
/* Cryp Stuff */
/* Construct Stuff */
}
client/assets/styles/styles.css
+10 -10
View File
@@ -2,7 +2,7 @@
GLOBAL
*/
html, body, #cryps {
html, body, #constructs {
/*width: 100%;*/
margin: 0;
@@ -61,7 +61,7 @@ figure {
text-align: center;
}
#cryps {
#constructs {
padding: 0 2em;
display: grid;
grid-template-columns: 1fr 8fr;
@@ -277,13 +277,13 @@ button[disabled] {
flex-flow: column;
}
#cryps input, #cryps select {
#constructs input, #constructs select {
border-color: #444;
background-color: #333;
border-radius: 0;
}
#cryps input:focus {
#constructs input:focus {
border-color: whitesmoke;
}
@@ -349,7 +349,7 @@ header {
MENU
*/
.menu-cryps {
.menu-constructs {
display: grid;
grid-template-rows: min-content min-content;
@@ -358,14 +358,14 @@ header {
"list";
}
.menu-cryps .list {
.menu-constructs .list {
grid-area: list;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.menu-cryp-ctr {
.menu-construct-ctr {
/*flex: 0 0 30%;*/
display: flex;
@@ -374,7 +374,7 @@ header {
justify-content: center;
}
.spawn-btn .menu-cryp {
.spawn-btn .menu-construct {
border: 1px solid #333;
color: #333;
display: flex;
@@ -399,7 +399,7 @@ header {
opacity: 0
}
.menu-cryp {
.menu-construct {
height: 100%;
margin: 0.5em;
box-sizing: border-box;
@@ -512,7 +512,7 @@ main .top {
}
@media (max-height: 900px), (max-width: 1500px) {
#cryps {
#constructs {
font-size: 75%;
}
client/assets/styles/styles.mobile.css
+1 -1
View File
@@ -1,5 +1,5 @@
@media (max-height: 800px), (max-width: 1000px) {
#cryps {
#constructs {
font-size: 8pt;
padding: 0;
grid-template-columns: min-content 1fr;
client/index.html
+2 -2
View File
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>cryps.gg - mnml pvp atbs</title>
<title>mnml pvp tbs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<meta name="description" content="cryps.gg - mnml pvp atbs">
<meta name="description" content="mnml pvp tbs">
<meta name="author" content="ntr@smokestack.io">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
client/manifest.webmanifest
+3 -3
View File
@@ -1,7 +1,7 @@
{
"name": "cryps.gg - mnml pvp atbs",
"description": "cryps.gg - mnml pvp atbs",
"short_name": "cryps.gg",
"name": "constructs.gg - mnml pvp atbs",
"description": "constructs.gg - mnml pvp atbs",
"short_name": "constructs.gg",
"icons": [
{
"src": "./assets/icons/726.png",
client/package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"name": "cryps-client",
"name": "mnml-client",
"version": "1.0.0",
"description": "",
"main": "index.js",
client/src/actions.jsx
+4 -4
View File
@@ -1,5 +1,5 @@
export const setAccount = value => ({ type: 'SET_ACCOUNT', value });
export const setCryps = value => ({ type: 'SET_CRYPS', value });
export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value });
export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
export const setSkip = value => ({ type: 'SET_SKIP', value });
export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
@@ -11,9 +11,9 @@ export const setGame = value => ({ type: 'SET_GAME', value });
export const setResolution = value => ({ type: 'SET_RESOLUTION', value });
export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });
export const setTeam = value => ({ type: 'SET_SELECTED_CRYPS', value: Array.from(value) });
export const setActiveSkill = (crypId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: crypId ? { crypId, skill } : null });
export const setActiveCryp = value => ({ type: 'SET_ACTIVE_CRYP', value });
export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) });
export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
export const setActiveConstruct = value => ({ type: 'SET_ACTIVE_CONSTRUCT', value });
export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
export const setInfo = value => ({ type: 'SET_INFO', value });
export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value });
client/src/app.jsx
+3 -3
View File
@@ -28,8 +28,8 @@ document.fonts.load('16pt "Jura"').then(() => {
store.dispatch(actions.setWs(ws));
ws.connect();
const Cryps = () => (
<div id="cryps" >
const Constructs = () => (
<div id="constructs" >
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" htmlFor="toggle-nav"><i className="fa fa-bars"></i></label>
<Header />
@@ -40,7 +40,7 @@ document.fonts.load('16pt "Jura"').then(() => {
const App = () => (
<Provider store={store}>
<Cryps />
<Constructs />
</Provider>
);
client/src/components/cryp.spawn.button.jsx
+3 -3
View File
@@ -1,6 +1,6 @@
const preact = require('preact');
function renderSpawnButton({ account, sendCrypSpawn }) {
function renderSpawnButton({ account, sendConstructSpawn }) {
let name = '';
if (!account) return <div>...</div>;
@@ -13,7 +13,7 @@ function renderSpawnButton({ account, sendCrypSpawn }) {
<input
className="input"
type="text"
placeholder="cryp name"
placeholder="construct name"
onChange={e => (name = e.target.value)}
/>
</div>
@@ -21,7 +21,7 @@ function renderSpawnButton({ account, sendCrypSpawn }) {
<button
className="button"
type="submit"
onClick={() => sendCrypSpawn(name)}>
onClick={() => sendConstructSpawn(name)}>
Spawn 👾
</button>
</div>
client/src/components/cryp.spawn.container.js
+5 -5
View File
@@ -1,16 +1,16 @@
const { connect } = require('react-redux');
const CrypSpawnButton = require('./cryp.spawn.button');
const ConstructSpawnButton = require('./construct.spawn.button');
const addState = connect(
function receiveState(state) {
const { ws } = state;
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name);
}
return { account: state.account, sendCrypSpawn };
return { account: state.account, sendConstructSpawn };
}
);
module.exports = addState(CrypSpawnButton);
module.exports = addState(ConstructSpawnButton);
client/src/components/game.component.jsx
+25 -25
View File
@@ -1,7 +1,7 @@
const preact = require('preact');
const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
const { animationDivs } = require('../animations');
const GameCryp = require('./game.cryp');
const GameConstruct = require('./game.construct');
function GamePanel(props) {
const {
@@ -10,7 +10,7 @@ function GamePanel(props) {
resolution,
activeSkill,
setActiveSkill,
setActiveCryp,
setActiveConstruct,
selectSkillTarget,
sendInstanceState,
sendGameReady,
@@ -76,9 +76,9 @@ function GamePanel(props) {
</div>
);
function findCryp(id) {
const team = game.players.find(t => t.cryps.find(c => c.id === id));
if (team) return team.cryps.find(c => c.id === id);
function findConstruct(id) {
const team = game.players.find(t => t.constructs.find(c => c.id === id));
if (team) return team.constructs.find(c => c.id === id);
return null;
}
@@ -109,39 +109,39 @@ function GamePanel(props) {
);
function PlayerTeam(team) {
const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);
const constructs = team.constructs.map((c, i) => <GameConstruct key={c.id} construct={c} />);
return (
<div className="team player">
{cryps}
{constructs}
</div>
);
}
function OpponentCryp(cryp, i) {
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, cryp);
function OpponentConstruct(construct, i) {
const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct);
const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
<figure key={j} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
<figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
</figure>
));
const [combatText, combatClass] = getCombatText(cryp, resolution);
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
? <div className={combatTextClass}>{combatText}</div>
: null;
const effects = cryp.effects.length
? cryp.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
: <div>&nbsp;</div>;
const playerTeamIds = playerTeam.cryps.map(c => c.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const targeting = game.stack
.filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
.filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id)
.map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
const anim = (
@@ -153,17 +153,17 @@ function GamePanel(props) {
return (
<div
key={i}
className={`game-cryp ${ko} ${classes}`}
className={`game-construct ${ko} ${classes}`}
style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(cryp.id)} >
onClick={() => selectSkillTarget(construct.id)} >
<div className="stats">{stats}</div>
<h3 className="name" >{cryp.name}</h3>
<h3 className="name" >{construct.name}</h3>
<div className="effects">{effects}</div>
<div className="targeting">{targeting}</div>
<figure
className="img"
onClick={() => selectSkillTarget(cryp.id)} >
{crypAvatar(cryp.name, cryp.id)}
onClick={() => selectSkillTarget(construct.id)} >
{constructAvatar(construct.name, construct.id)}
{combatTextEl}
{anim}
</figure>
@@ -173,10 +173,10 @@ function GamePanel(props) {
function OpponentTeam(team) {
const cryps = team.cryps.map(OpponentCryp);
const constructs = team.constructs.map(OpponentConstruct);
return (
<div className="team opponent">
{cryps}
{constructs}
</div>
);
}
@@ -185,7 +185,7 @@ function GamePanel(props) {
function gameClick(e) {
e.stopPropagation();
setActiveCryp(null);
setActiveConstruct(null);
}
return (
client/src/components/game.container.jsx
+11 -11
View File
@@ -13,12 +13,12 @@ const addState = connect(
resolution,
showLog,
activeSkill,
activeCryp,
activeConstruct,
} = state;
function selectSkillTarget(targetCrypId) {
function selectSkillTarget(targetConstructId) {
if (activeSkill) {
return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
return ws.sendGameSkill(game.id, activeSkill.constructId, targetConstructId, activeSkill.skill);
}
return false;
}
@@ -34,7 +34,7 @@ const addState = connect(
// intercept self casting skills
if (activeSkill && activeSkill.skill.self_targeting) {
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
}
return {
@@ -43,7 +43,7 @@ const addState = connect(
account,
resolution,
activeSkill,
activeCryp,
activeConstruct,
selectSkillTarget,
sendInstanceState,
sendGameReady,
@@ -51,13 +51,13 @@ const addState = connect(
},
function receiveDispatch(dispatch) {
function setActiveSkill(crypId, skill) {
dispatch(actions.setActiveSkill(crypId, skill));
// particlesJS(`particles-${crypId}`, config);
function setActiveSkill(constructId, skill) {
dispatch(actions.setActiveSkill(constructId, skill));
// particlesJS(`particles-${constructId}`, config);
}
function setActiveCryp(cryp) {
dispatch(actions.setActiveCryp(cryp));
function setActiveConstruct(construct) {
dispatch(actions.setActiveConstruct(construct));
}
function quit() {
@@ -73,7 +73,7 @@ const addState = connect(
dispatch(actions.setSkip(true));
}
return { setActiveSkill, setActiveCryp, quit, toggleLog, skip };
return { setActiveSkill, setActiveConstruct, quit, toggleLog, skip };
}
);
client/src/components/game.cryp.jsx
+22 -22
View File
@@ -3,7 +3,7 @@ const preact = require('preact');
const range = require('lodash/range');
const actions = require('../actions');
const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
const { STATS, eventClasses, getCombatText, constructAvatar } = require('../utils');
const { animationDivs } = require('../animations');
const SkillBtn = require('./skill.btn');
@@ -18,16 +18,16 @@ const addState = connect(
activeSkill,
} = state;
function selectSkillTarget(targetCrypId) {
function selectSkillTarget(targetConstructId) {
if (activeSkill) {
return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
return ws.sendGameSkill(game.id, activeSkill.constructId, targetConstructId, activeSkill.skill);
}
return false;
}
// intercept self casting skills
if (activeSkill && activeSkill.skill.self_targeting) {
ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill);
ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
}
return {
@@ -40,48 +40,48 @@ const addState = connect(
},
);
function GameCryp(props) {
function GameConstruct(props) {
const {
game,
account,
cryp,
construct,
resolution,
activeSkill,
setActiveCryp,
setActiveConstruct,
selectSkillTarget,
} = props;
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, cryp);
const ko = construct.green_life.value === 0 ? 'ko' : '';
const classes = eventClasses(resolution, construct);
const skills = range(0, 3)
.map(i => <SkillBtn key={i} cryp={cryp} i={i} />);
.map(i => <SkillBtn key={i} construct={construct} i={i} />);
const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => {
// i've seen this happen ;/
if (cryp[s.stat].value < 0) console.warn(cryp);
if (construct[s.stat].value < 0) console.warn(construct);
return <figure key={j} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
<figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
<figcaption>{construct[s.stat].value} / {construct[s.stat].max}</figcaption>
</figure>
});
const [combatText, combatClass] = getCombatText(cryp, resolution);
const [combatText, combatClass] = getCombatText(construct, resolution);
const combatTextClass = `combat-text ${combatClass}`;
const combatTextEl = combatText
? <div className={combatTextClass}>{combatText}</div>
: null;
const effects = cryp.effects.length
? cryp.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
const effects = construct.effects.length
? construct.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
: <div>&nbsp;</div>;
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.cryps.map(c => c.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const targeting = game.stack
.filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
.filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id)
.map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
const anim = (
@@ -93,9 +93,9 @@ function GameCryp(props) {
return (
<div
style={ activeSkill ? { cursor: 'pointer' } : {}}
className={`game-cryp ${ko} ${classes}`} >
className={`game-construct ${ko} ${classes}`} >
<h3 className="name">
{cryp.name}
{construct.name}
</h3>
<div className="skills">
{skills}
@@ -105,8 +105,8 @@ function GameCryp(props) {
</div>
<figure
className="img"
onClick={() => selectSkillTarget(cryp.id)} >
{crypAvatar(cryp.name, cryp.id)}
onClick={() => selectSkillTarget(construct.id)} >
{constructAvatar(construct.name, construct.id)}
{combatTextEl}
{anim}
</figure>
@@ -120,4 +120,4 @@ function GameCryp(props) {
);
}
module.exports = addState(GameCryp);
module.exports = addState(GameConstruct);
client/src/components/header.component.jsx
+1 -1
View File
@@ -23,7 +23,7 @@ function renderHeader(args) {
return (
<header>
<h1 className="header-title">
cryps.gg
mnml.gg
</h1>
{accountStatus}
</header>
client/src/components/info.component.jsx
+4 -4
View File
@@ -27,10 +27,10 @@ function Info(args) {
let red = 0;
let blue = 0;
let green = 0;
player.cryps.forEach(cryp => {
red += cryp.colours.red;
blue += cryp.colours.blue;
green += cryp.colours.green;
player.constructs.forEach(construct => {
red += construct.colours.red;
blue += construct.colours.blue;
green += construct.colours.green;
});
const teamColours = { red, blue, green };
client/src/components/instance.component.jsx
+2 -2
View File
@@ -3,7 +3,7 @@ const { connect } = require('react-redux');
const Vbox = require('./vbox.component');
const InfoContainer = require('./info.container');
const InstanceCrypsContainer = require('./instance.cryps');
const InstanceConstructsContainer = require('./instance.constructs');
const EquipmentContainer = require('./instance.equip');
const actions = require('../actions');
@@ -137,7 +137,7 @@ function Instance(args) {
<Vbox />
<InfoContainer />
<EquipmentContainer />
<InstanceCrypsContainer />
<InstanceConstructsContainer />
</main>
);
}
client/src/components/instance.create.form.jsx
+3 -3
View File
@@ -6,9 +6,9 @@ const addState = connect(
function receiveState(state) {
const { ws, team } = state;
function sendInstanceNew(sCryps, name, players) {
if (sCryps.length) {
return ws.sendInstanceNew(sCryps, name, players);
function sendInstanceNew(sConstructs, name, players) {
if (sConstructs.length) {
return ws.sendInstanceNew(sConstructs, name, players);
}
return false;
}
client/src/components/instance.cryps.jsx
+45 -45
View File
@@ -3,24 +3,24 @@ const preact = require('preact');
const range = require('lodash/range');
const shapes = require('./shapes');
const { SPECS, STATS, instanceCryp } = require('../utils');
const { SPECS, STATS, instanceConstruct } = require('../utils');
const actions = require('../actions');
const addState = connect(
function receiveState(state) {
const { ws, instance, account, itemInfo, itemEquip, activeCryp } = state;
const { ws, instance, account, itemInfo, itemEquip, activeConstruct } = state;
const player = instance.players.find(p => p.id === account.id);
function sendInstanceReady() {
return ws.sendInstanceReady(instance.id);
}
function sendVboxApply(crypId, i) {
return ws.sendVboxApply(instance.id, crypId, i);
function sendVboxApply(constructId, i) {
return ws.sendVboxApply(instance.id, constructId, i);
}
function sendUnequip(crypId, item) {
return ws.sendVboxUnequip(instance.id, crypId, item);
function sendUnequip(constructId, item) {
return ws.sendVboxUnequip(instance.id, constructId, item);
}
return {
@@ -31,7 +31,7 @@ const addState = connect(
sendVboxApply,
itemInfo,
itemEquip,
activeCryp,
activeConstruct,
sendUnequip,
};
},
@@ -45,8 +45,8 @@ const addState = connect(
dispatch(actions.setInfo(item));
}
function setActiveCryp(value) {
dispatch(actions.setActiveCryp(value));
function setActiveConstruct(value) {
dispatch(actions.setActiveConstruct(value));
}
function clearInfo() {
@@ -61,19 +61,19 @@ const addState = connect(
return dispatch(actions.setItemUnequip(v));
}
return { quit, clearInfo, setInfo, setActiveCryp, setItemUnequip, setItemEquip };
return { quit, clearInfo, setInfo, setActiveConstruct, setItemUnequip, setItemEquip };
}
);
function Cryp(props) {
function Construct(props) {
const {
activeCryp,
activeConstruct,
itemEquip,
cryp,
construct,
player,
sendVboxApply,
setActiveCryp,
setActiveConstruct,
setItemUnequip,
setItemEquip,
itemInfo,
@@ -84,9 +84,9 @@ function Cryp(props) {
function onClick(e) {
e.stopPropagation();
e.preventDefault();
if (itemEquip !== null) sendVboxApply(cryp.id, itemEquip);
if (itemEquip !== null) sendVboxApply(construct.id, itemEquip);
setItemEquip(null);
return setActiveCryp(cryp);
return setActiveConstruct(construct);
}
function hoverInfo(e, info) {
@@ -100,7 +100,7 @@ function Cryp(props) {
const specList = itemInfo.items.filter(v => v.spec).map(v => v.item);
const skills = range(0, 3).map(i => {
const skill = cryp.skills[i];
const skill = construct.skills[i];
const s = skill
? skill.skill
: (<span className="gray">+</span>);
@@ -108,15 +108,15 @@ function Cryp(props) {
function skillClick(e) {
if (!skill) return false;
setItemUnequip(skill.skill);
setActiveCryp(cryp);
setActiveConstruct(construct);
e.stopPropagation();
return true;
}
function skillDblClick(e) {
if (!skill) return false;
sendUnequip(cryp.id, skill.skill);
setActiveCryp(null);
sendUnequip(construct.id, skill.skill);
setActiveConstruct(null);
setItemUnequip(null);
e.stopPropagation();
e.preventDefault();
@@ -140,7 +140,7 @@ function Cryp(props) {
});
const specs = range(0, 6).map(i => {
const s = cryp.specs[i];
const s = construct.specs[i];
if (!s) {
const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
@@ -155,12 +155,12 @@ function Cryp(props) {
function specClick(e) {
e.stopPropagation();
setItemUnequip(s);
setActiveCryp(cryp);
setActiveConstruct(construct);
}
function specDblClick(e) {
sendUnequip(cryp.id, s);
setActiveCryp(null);
sendUnequip(construct.id, s);
setActiveConstruct(null);
setItemUnequip(null);
e.stopPropagation();
e.preventDefault();
@@ -183,14 +183,14 @@ function Cryp(props) {
const stats = Object.values(STATS).map(s => (
<figure key={s.stat} alt={s.stat} className={s.stat}>
{s.svg(`stat-icon ${s.colour} stat`)}
<figcaption>{cryp[s.stat].value}</figcaption>
<figcaption>{construct[s.stat].value}</figcaption>
</figure>
));
const activeId = activeCryp ? activeCryp.id : false;
const crypClass = activeId === cryp.id ? 'instance-cryp-active' : 'instance-cryp';
const activeId = activeConstruct ? activeConstruct.id : false;
const constructClass = activeId === construct.id ? 'instance-construct-active' : 'instance-construct';
// const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
// const colours = mapValues(cryp.colours, c => {
// const cTotal = construct.colours.red + construct.colours.blue + construct.colours.green;
// const colours = mapValues(construct.colours, c => {
// if (cTotal === 0) return 245;
// return Math.floor(c / cTotal * 255);
// });
@@ -204,13 +204,13 @@ function Cryp(props) {
// const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return (
<div key={cryp.id} className={crypClass} onClick={onClick} >
{instanceCryp(cryp.name, cryp.id)}
<h2 className="name" >{cryp.name}</h2>
<div className="skills" onMouseOver={e => hoverInfo(e, 'crypSkills')} >
<div key={construct.id} className={constructClass} onClick={onClick} >
{instanceConstruct(construct.name, construct.id)}
<h2 className="name" >{construct.name}</h2>
<div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
{skills}
</div>
<div className="specs" onMouseOver={e => hoverInfo(e, 'crypSpecs')} >
<div className="specs" onMouseOver={e => hoverInfo(e, 'constructSpecs')} >
{specs}
</div>
<div className="stats">
@@ -231,15 +231,15 @@ function Cryp(props) {
);
}
function InstanceCryps(props) {
function InstanceConstructs(props) {
const {
activeCryp,
activeConstruct,
itemEquip,
player,
instance,
// clearInfo,
setInfo,
setActiveCryp,
setActiveConstruct,
sendVboxApply,
itemInfo,
@@ -252,27 +252,27 @@ function InstanceCryps(props) {
if (!player) return false;
if (instance.phase === 'Lobby') return false;
const cryps = player.cryps.map((c, i) => Cryp({
cryp: c,
activeCryp,
const constructs = player.constructs.map((c, i) => Construct({
construct: c,
activeConstruct,
itemEquip,
setItemUnequip,
setItemEquip,
player,
sendVboxApply,
setInfo,
setActiveCryp,
setActiveConstruct,
itemInfo,
setVboxHighlight,
sendUnequip,
}));
const classes = `cryp-list`;
const classes = `construct-list`;
return (
<div className={classes} onClick={() => setActiveCryp(null)}>
{cryps}
<div className={classes} onClick={() => setActiveConstruct(null)}>
{constructs}
</div>
);
}
module.exports = addState(InstanceCryps);
module.exports = addState(InstanceConstructs);
client/src/components/instance.equip.jsx
+8 -8
View File
@@ -8,14 +8,14 @@ const { convertItem, SPECS } = require('./../utils');
const addState = connect(
function receiveState(state) {
const { account, activeCryp, itemInfo, info, ws, instance, itemUnequip } = state;
const { account, activeConstruct, itemInfo, info, ws, instance, itemUnequip } = state;
const player = instance.players.find(p => p.id === account.id);
function sendUnequip(crypId, item) {
return ws.sendVboxUnequip(instance.id, crypId, item);
function sendUnequip(constructId, item) {
return ws.sendVboxUnequip(instance.id, constructId, item);
}
return { player, itemInfo, instance, info, sendUnequip, activeCryp, itemUnequip };
return { player, itemInfo, instance, info, sendUnequip, activeConstruct, itemUnequip };
},
function receiveDispatch(dispatch) {
@@ -48,7 +48,7 @@ function Equipment(props) {
itemUnequip,
setItemEquip,
setItemUnequip,
activeCryp,
activeConstruct,
itemInfo,
sendUnequip,
@@ -65,7 +65,7 @@ function Equipment(props) {
const isSpec = fullInfo && fullInfo.spec;
function skillClick(e, i) {
if (itemUnequip && activeCryp) return false;
if (itemUnequip && activeConstruct) return false;
const value = vbox.bound[i];
setItemEquip(i);
return false;
@@ -74,9 +74,9 @@ function Equipment(props) {
function unequipClick(e) {
e.stopPropagation();
if (!itemUnequip) return false;
if (!activeCryp) return false;
if (!activeConstruct) return false;
setItemUnequip(null);
return sendUnequip(activeCryp.id, itemUnequip);
return sendUnequip(activeConstruct.id, itemUnequip);
}
function hoverInfo(e, info) {
client/src/components/list.jsx
+2 -2
View File
@@ -7,7 +7,7 @@ const InstanceCreateForm = require('./instance.create.form');
const addState = connect(
function receiveState(state) {
const { ws, cryps, team, instances, account } = state;
const { ws, constructs, team, instances, account } = state;
function sendInstanceJoin(instance) {
if (team.length) {
@@ -26,7 +26,7 @@ const addState = connect(
return {
account,
cryps,
constructs,
team,
sendInstanceJoin,
sendInstanceState,
client/src/components/menu.component.jsx
+21 -21
View File
@@ -3,7 +3,7 @@ const range = require('lodash/range');
const { NULL_UUID } = require('./../utils');
const { stringSort, crypAvatar } = require('./../utils');
const { stringSort, constructAvatar } = require('./../utils');
const SpawnButton = require('./spawn.button');
const InstanceCreateForm = require('./instance.create.form');
@@ -19,14 +19,14 @@ const COLOURS = [
function Menu(args) {
const {
account,
cryps,
constructs,
team,
setTeam,
sendInstanceState,
sendPlayerMmCrypsSet,
sendPlayerMmConstructsSet,
sendInstanceJoin,
sendInstanceList,
sendCrypSpawn,
sendConstructSpawn,
instances,
} = args;
@@ -61,7 +61,7 @@ function Menu(args) {
// <button
// className={'menu-instance-btn left'}
// disabled={instanceJoinHidden}
// onClick={() => sendPlayerMmCrypsSet()}>
// onClick={() => sendPlayerMmConstructsSet()}>
// Set Matchmaking Team
// </button>
// );
@@ -88,12 +88,12 @@ function Menu(args) {
);
}
function crypList() {
if (!cryps) return <div></div>;
function constructList() {
if (!constructs) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
function selectCryp(id) {
function selectConstruct(id) {
// remove
const i = team.findIndex(sid => sid === id);
if (i > -1) {
@@ -108,37 +108,37 @@ function Menu(args) {
return setTeam(team);
}
const crypPanels = cryps.sort(idSort).map(cryp => {
const colour = team.indexOf(cryp.id);
const constructPanels = constructs.sort(idSort).map(construct => {
const colour = team.indexOf(construct.id);
const selected = colour > -1;
const borderColour = selected ? COLOURS[colour] : '#000000';
return (
<div
key={cryp.id}
className="menu-cryp-ctr">
key={construct.id}
className="menu-construct-ctr">
<div
className="menu-cryp"
className="menu-construct"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectCryp(cryp.id)} >
{crypAvatar(cryp.name)}
<h2>{cryp.name}</h2>
onClick={() => selectConstruct(construct.id)} >
{constructAvatar(construct.name)}
<h2>{construct.name}</h2>
</div>
</div>
);
});
const spawnButtonsNum = cryps.length < 3
? (3 - cryps.length)
const spawnButtonsNum = constructs.length < 3
? (3 - constructs.length)
: 1;
const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
.map(i => <SpawnButton key={i} i={i} spawn={name => sendConstructSpawn(name)} />);
return (
<div className="menu-cryps">
{crypPanels}
<div className="menu-constructs">
{constructPanels}
{spawnButtons}
</div>
);
client/src/components/menu.container.jsx
+10 -10
View File
@@ -5,7 +5,7 @@ const actions = require('./../actions');
const addState = connect(
function receiveState(state) {
const { ws, cryps, team, instances, account } = state;
const { ws, constructs, team, instances, account } = state;
function sendInstanceJoin(instance) {
if (team.length) {
@@ -14,15 +14,15 @@ const addState = connect(
return false;
}
function sendPlayerMmCrypsSet() {
function sendPlayerMmConstructsSet() {
if (team.length) {
return ws.sendPlayerMmCrypsSet(team);
return ws.sendPlayerMmConstructsSet(team);
}
return false;
}
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name);
}
function sendInstanceState(instance) {
@@ -35,20 +35,20 @@ const addState = connect(
return {
account,
cryps,
constructs,
team,
sendInstanceJoin,
sendInstanceState,
sendInstanceList,
sendCrypSpawn,
sendPlayerMmCrypsSet,
sendConstructSpawn,
sendPlayerMmConstructsSet,
instances,
};
},
function receiveDispatch(dispatch) {
function setTeam(crypIds) {
dispatch(actions.setTeam(crypIds));
function setTeam(constructIds) {
dispatch(actions.setTeam(constructIds));
}
return {
client/src/components/nav.jsx
+5 -5
View File
@@ -15,7 +15,7 @@ const addState = connect(
account,
instances,
team,
cryps,
constructs,
game,
} = state;
@@ -27,7 +27,7 @@ const addState = connect(
account,
instances,
team,
cryps,
constructs,
game,
sendInstanceState,
};
@@ -60,7 +60,7 @@ function Nav(args) {
account,
sendInstanceState,
team,
cryps,
constructs,
instances,
game,
@@ -81,8 +81,8 @@ function Nav(args) {
const teamElements = team.map((c, i) => {
if (c) {
const cryp = cryps.find(f => f.id === c);
return <button key={c} onClick={() => navTo('team')}>{cryp.name}</button>;
const construct = constructs.find(f => f.id === c);
return <button key={c} onClick={() => navTo('team')}>{construct.name}</button>;
}
return <button key={i} onClick={() => navTo('team')}>+</button>;
});
client/src/components/skill.btn.jsx
+11 -11
View File
@@ -17,8 +17,8 @@ const addState = connect(
},
function receiveDispatch(dispatch) {
function setActiveSkill(crypId, skill) {
dispatch(actions.setActiveSkill(crypId, skill));
function setActiveSkill(constructId, skill) {
dispatch(actions.setActiveSkill(constructId, skill));
}
return { setActiveSkill };
@@ -28,7 +28,7 @@ const addState = connect(
function Skill(props) {
const {
cryp,
construct,
game,
i,
mobile,
@@ -36,14 +36,14 @@ function Skill(props) {
setActiveSkill,
} = props;
const s = cryp.skills[i];
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const s = construct.skills[i];
const ko = construct.green_life.value === 0 ? 'ko' : '';
if (!s) {
return (
<button
disabled='true'
className='cryp-skill-btn disabled'>
className='construct-skill-btn disabled'>
</button>
);
}
@@ -52,25 +52,25 @@ function Skill(props) {
? 'top'
: '';
const cdText = cryp.skills[i].cd > 0
const cdText = construct.skills[i].cd > 0
? `- ${s.cd}T`
: '';
const highlight = activeSkill
? activeSkill.crypId === cryp.id && activeSkill.skill === s.skill
? activeSkill.constructId === construct.id && activeSkill.skill === s.skill
: false;
function onClick(e) {
e.stopPropagation();
return setActiveSkill(cryp.id, s.skill);
return setActiveSkill(construct.id, s.skill);
}
const targeting = game.stack.some(stack => stack.source_cryp_id === cryp.id && stack.skill === s.skill);
const targeting = game.stack.some(stack => stack.source_construct_id === construct.id && stack.skill === s.skill);
return (
<button
disabled={!!cdText || ko}
className={`cryp-skill-btn ${side} ${(targeting || highlight) ? 'active' : ''}`}
className={`construct-skill-btn ${side} ${(targeting || highlight) ? 'active' : ''}`}
type="submit"
onClick={onClick}>
{s.skill} {cdText}
client/src/components/spawn.button.jsx
+2 -2
View File
@@ -31,9 +31,9 @@ class SpawnButton extends Component {
return (
<div
key={this.props.i}
className="menu-cryp-ctr spawn-btn">
className="menu-construct-ctr spawn-btn">
<div
className="menu-cryp"
className="menu-construct"
onClick={() => this.enable()} >
<h2>+</h2>
<input
client/src/components/targeting.arrows.jsx
+7 -7
View File
@@ -11,17 +11,17 @@ function TargetSvg(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));
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const outgoing = game.stack.filter(stack => playerTeamIds.includes(stack.source_construct_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 source = playerTeam.constructs.findIndex(c => c.id === cast.source_construct_id);
const defensive = playerTeamIds.includes(cast.target_construct_id);
const target = defensive
? playerTeam.cryps.findIndex(c => c.id === cast.target_cryp_id)
: otherTeam.cryps.findIndex(c => c.id === cast.target_cryp_id);
? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
: otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
const skillIndex = playerTeam.cryps[source].skills.findIndex(s => s.skill === cast.skill);
const skillIndex = playerTeam.constructs[source].skills.findIndex(s => s.skill === cast.skill);
const skillOffset = (100 * skillIndex) + 50;
const sourceY = 0;
client/src/components/team.jsx
+24 -24
View File
@@ -4,7 +4,7 @@ const range = require('lodash/range');
const actions = require('./../actions');
const { NULL_UUID } = require('./../utils');
const { stringSort, crypAvatar } = require('./../utils');
const { stringSort, constructAvatar } = require('./../utils');
const SpawnButton = require('./spawn.button');
const idSort = stringSort('id');
@@ -17,23 +17,23 @@ const COLOURS = [
const addState = connect(
function receiveState(state) {
const { ws, cryps, team, account } = state;
const { ws, constructs, team, account } = state;
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name);
}
return {
account,
cryps,
constructs,
team,
sendCrypSpawn,
sendConstructSpawn,
};
},
function receiveDispatch(dispatch) {
function setTeam(crypIds) {
dispatch(actions.setTeam(crypIds));
function setTeam(constructIds) {
dispatch(actions.setTeam(constructIds));
}
function navToList() {
@@ -53,19 +53,19 @@ const addState = connect(
function Team(args) {
const {
account,
cryps,
constructs,
team,
setTeam,
sendCrypSpawn,
sendConstructSpawn,
navToList,
} = args;
if (!cryps) return <div></div>;
if (!constructs) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
function selectCryp(id) {
function selectConstruct(id) {
// remove
const i = team.findIndex(sid => sid === id);
if (i > -1) {
@@ -80,31 +80,31 @@ function Team(args) {
return setTeam(team);
}
const crypPanels = cryps.sort(idSort).map(cryp => {
const colour = team.indexOf(cryp.id);
const constructPanels = constructs.sort(idSort).map(construct => {
const colour = team.indexOf(construct.id);
const selected = colour > -1;
const borderColour = selected ? COLOURS[colour] : '#000000';
return (
<div
key={cryp.id}
className="menu-cryp-ctr">
key={construct.id}
className="menu-construct-ctr">
<div
className="menu-cryp"
className="menu-construct"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectCryp(cryp.id)} >
{crypAvatar(cryp.name, cryp.id)}
<h2>{cryp.name}</h2>
onClick={() => selectConstruct(construct.id)} >
{constructAvatar(construct.name, construct.id)}
<h2>{construct.name}</h2>
</div>
</div>
);
});
const spawnButtonsNum = (3 - cryps.length % 3);
const spawnButtonsNum = (3 - constructs.length % 3);
const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
.map(i => <SpawnButton key={i} i={i} spawn={name => sendConstructSpawn(name)} />);
const header = (
@@ -119,10 +119,10 @@ function Team(args) {
);
return (
<main className="menu-cryps">
<main className="menu-constructs">
{header}
<div className="list">
{crypPanels}
{constructPanels}
{spawnButtons}
</div>
</main>
client/src/constants.jsx
+6 -6
View File
@@ -45,19 +45,19 @@ module.exports = {
},
equipSkills: {
item: 'QUICK ACCESS - SKILLS',
description: 'Click to select \nClick target CRYP to equip',
description: 'Click to select \nClick target CONSTRUCT to equip',
},
equipSpecs: {
item: 'QUICK ACCESS - SPECS',
description: 'Click to select \nClick target CRYP to equip',
description: 'Click to select \nClick target CONSTRUCT to equip',
},
crypSkills: {
constructSkills: {
item: 'SKILLS',
description: 'Skills are used by Cryps in-game.\nClick a SKILL above and select a CRYP to equip.\nDouble-click to unequip.',
description: 'Skills are used by Constructs in-game.\nClick a SKILL above and select a CONSTRUCT to equip.\nDouble-click to unequip.',
},
crypSpecs: {
constructSpecs: {
item: 'SPECS',
description: 'SPECS increase the STATS of a CRYP.\nSPECS have increased effect once they reach a THRESHOLD across your whole team.\nClick a SPEC above and select a CRYP to equip.\nDouble-click to unequip.',
description: 'SPECS increase the STATS of a CONSTRUCT.\nSPECS have increased effect once they reach a THRESHOLD across your whole team.\nClick a SPEC above and select a CONSTRUCT to equip.\nDouble-click to unequip.',
},
},
client/src/events.jsx
+22 -22
View File
@@ -3,13 +3,13 @@ const eachSeries = require('async/eachSeries');
const actions = require('./actions');
const { TIMES } = require('./constants');
const { getCombatSequence, resoCrypHealth } = require('./utils');
const { getCombatSequence, resoConstructHealth } = require('./utils');
function registerEvents(store) {
// timeout handlers
store.subscribe(() => {
const { game, instance, cryps, ws } = store.getState();
const { game, instance, constructs, ws } = store.getState();
if (!game) ws.clearGameStateTimeout();
if (!instance) ws.clearInstanceStateTimeout();
@@ -19,12 +19,12 @@ function registerEvents(store) {
store.dispatch(actions.setPing(ping));
}
function setCryps(cryps) {
console.log('EVENT ->', 'cryps', cryps);
function setConstructs(constructs) {
console.log('EVENT ->', 'constructs', constructs);
}
function setCrypList(cryps) {
store.dispatch(actions.setCryps(cryps));
function setConstructList(constructs) {
store.dispatch(actions.setConstructs(constructs));
}
function setWs(ws) {
@@ -50,8 +50,8 @@ function registerEvents(store) {
const stagedR = Object.create(r);
stagedR.stage = stage;
// Apply damage for each cryp
if (stage === 'POST_SKILL') resoCrypHealth(stagedR, currentGame);
// Apply damage for each construct
if (stage === 'POST_SKILL') resoConstructHealth(stagedR, currentGame);
store.dispatch(actions.setResolution(stagedR));
return setTimeout(sCb, TIMES[stage]);
@@ -98,7 +98,7 @@ function registerEvents(store) {
function clearInfo() {
store.dispatch(actions.setInfo(null));
store.dispatch(actions.setActiveCryp(null));
store.dispatch(actions.setActiveConstruct(null));
console.log('event clear item');
}
@@ -132,8 +132,8 @@ function registerEvents(store) {
console.log('EVENT ->', 'gameList', gameList);
}
function setCrypStatusUpdate(id, skill, target) {
console.log('EVENT ->', 'crypStatusUpdate', { id, skill, target });
function setConstructStatusUpdate(id, skill, target) {
console.log('EVENT ->', 'constructStatusUpdate', { id, skill, target });
}
function setItemInfo(v) {
@@ -142,22 +142,22 @@ function registerEvents(store) {
// events.on('SET_PLAYER', setInstance);
// events.on('SEND_SKILL', function skillActive(gameId, crypId, targetCrypId, skill) {
// ws.sendGameSkill(gameId, crypId, targetCrypId, skill);
// setCrypStatusUpdate(crypId, skill, targetCrypId);
// events.on('SEND_SKILL', function skillActive(gameId, constructId, targetConstructId, skill) {
// ws.sendGameSkill(gameId, constructId, targetConstructId, skill);
// setConstructStatusUpdate(constructId, skill, targetConstructId);
// });
// events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
// for (let i = 0; i < cryps.length; i += 1) {
// if (cryps[i].id === cryp.id) cryps[i].active = !cryps[i].active;
// events.on('CONSTRUCT_ACTIVE', function constructActiveCb(construct) {
// for (let i = 0; i < constructs.length; i += 1) {
// if (constructs[i].id === construct.id) constructs[i].active = !constructs[i].active;
// }
// return setCryps(cryps);
// return setConstructs(constructs);
// });
const errMessages = {
select_cryps: 'Select your cryps before battle using the numbered buttons next to the cryp avatar',
select_constructs: 'Select your constructs before battle using the numbered buttons next to the construct avatar',
complete_nodes: 'You need to complete the previously connected nodes first',
max_skills: 'Your cryp can only learn a maximum of 4 skills',
max_skills: 'Your construct can only learn a maximum of 4 skills',
};
@@ -185,8 +185,8 @@ function registerEvents(store) {
setAccount,
setActiveSkill,
setActiveItem,
setCryps,
setCrypList,
setConstructs,
setConstructList,
setGame,
clearInfo,
setMenu,
client/src/keyboard.jsx
+1 -1
View File
@@ -7,7 +7,7 @@ function setupKeys(store) {
key('esc', () => store.dispatch(actions.setCombiner([null, null, null])));
key('esc', () => store.dispatch(actions.setReclaiming(false)));
key('esc', () => store.dispatch(actions.setActiveSkill(null)));
key('esc', () => store.dispatch(actions.setActiveCryp(null)));
key('esc', () => store.dispatch(actions.setActiveConstruct(null)));
key('esc', () => store.dispatch(actions.setInfo(null)));
key('esc', () => store.dispatch(actions.setItemEquip(null)));
key('esc', () => store.dispatch(actions.setItemUnequip(null)));
client/src/reducers.jsx
+3 -3
View File
@@ -12,11 +12,11 @@ function createReducer(defaultState, actionType) {
/* eslint-disable key-spacing */
module.exports = {
account: createReducer(null, 'SET_ACCOUNT'),
activeCryp: createReducer(null, 'SET_ACTIVE_CRYP'),
activeConstruct: createReducer(null, 'SET_ACTIVE_CONSTRUCT'),
activeItem: createReducer(null, 'SET_ACTIVE_VAR'),
activeSkill: createReducer(null, 'SET_ACTIVE_SKILL'),
combiner: createReducer([null, null, null], 'SET_COMBINER'),
cryps: createReducer([], 'SET_CRYPS'),
constructs: createReducer([], 'SET_CONSTRUCTS'),
game: createReducer(null, 'SET_GAME'),
info: createReducer(null, 'SET_INFO'),
instance: createReducer(null, 'SET_INSTANCE'),
@@ -30,7 +30,7 @@ module.exports = {
resolution: createReducer(null, 'SET_RESOLUTION'),
showLog: createReducer(false, 'SET_SHOW_LOG'),
skip: createReducer(false, 'SET_SKIP'),
team: createReducer([null, null, null], 'SET_SELECTED_CRYPS'),
team: createReducer([null, null, null], 'SET_SELECTED_CONSTRUCTS'),
vboxHighlight: createReducer([], 'SET_VBOX_HIGHLIGHT'),
ws: createReducer(null, 'SET_WS'),
};
client/src/socket.jsx
+36 -36
View File
@@ -1,7 +1,7 @@
const toast = require('izitoast');
const cbor = require('borc');
const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://cryps.gg/ws' : 'ws://localhost:40000';
const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/ws' : 'ws://localhost:40000';
function errorToast(err) {
console.error(err);
@@ -47,8 +47,8 @@ function createSocket(events) {
send({ method: 'account_create', params: { name, password } });
}
function sendAccountCryps() {
send({ method: 'account_cryps', params: {} });
function sendAccountConstructs() {
send({ method: 'account_constructs', params: {} });
}
function sendAccountInstances() {
@@ -59,8 +59,8 @@ function createSocket(events) {
send({ method: 'account_zone', params: {} });
}
function sendCrypSpawn(name) {
send({ method: 'cryp_spawn', params: { name } });
function sendConstructSpawn(name) {
send({ method: 'construct_spawn', params: { name } });
}
function sendGameState(id) {
@@ -72,11 +72,11 @@ function createSocket(events) {
}
function sendSpecForget(id, spec) {
send({ method: 'cryp_unspec', params: { id, spec } });
send({ method: 'construct_unspec', params: { id, spec } });
}
function sendPlayerMmCrypsSet(crypIds) {
send({ method: 'player_mm_cryps_set', params: { cryp_ids: crypIds } });
function sendPlayerMmConstructsSet(constructIds) {
send({ method: 'player_mm_constructs_set', params: { construct_ids: constructIds } });
}
function sendInstanceState(instanceId) {
@@ -87,13 +87,13 @@ function createSocket(events) {
send({ method: 'player_vbox_accept', params: { instance_id: instanceId, group, index } });
}
function sendVboxApply(instanceId, crypId, index) {
send({ method: 'player_vbox_apply', params: { instance_id: instanceId, cryp_id: crypId, index } });
function sendVboxApply(instanceId, constructId, index) {
send({ method: 'player_vbox_apply', params: { instance_id: instanceId, construct_id: constructId, index } });
events.setActiveItem(null);
}
function sendVboxUnequip(instanceId, crypId, target) {
send({ method: 'player_vbox_unequip', params: { instance_id: instanceId, cryp_id: crypId, target } });
function sendVboxUnequip(instanceId, constructId, target) {
send({ method: 'player_vbox_unequip', params: { instance_id: instanceId, construct_id: constructId, target } });
events.clearInfo();
}
@@ -114,18 +114,18 @@ function createSocket(events) {
send({ method: 'item_info', params: {} });
}
function sendGameSkill(gameId, crypId, targetCrypId, skill) {
function sendGameSkill(gameId, constructId, targetConstructId, skill) {
send({
method: 'game_skill',
params: {
game_id: gameId, cryp_id: crypId, target_cryp_id: targetCrypId, skill,
game_id: gameId, construct_id: constructId, target_construct_id: targetConstructId, skill,
},
});
events.setActiveSkill(null);
}
function sendGameTarget(gameId, crypId, skillId) {
send({ method: 'game_target', params: { game_id: gameId, cryp_id: crypId, skill_id: skillId } });
function sendGameTarget(gameId, constructId, skillId) {
send({ method: 'game_target', params: { game_id: gameId, construct_id: constructId, skill_id: skillId } });
events.setActiveSkill(null);
}
@@ -133,20 +133,20 @@ function createSocket(events) {
send({ method: 'zone_create', params: {} });
}
function sendZoneJoin(zoneId, nodeId, crypIds) {
send({ method: 'zone_join', params: { zone_id: zoneId, node_id: nodeId, cryp_ids: crypIds } });
function sendZoneJoin(zoneId, nodeId, constructIds) {
send({ method: 'zone_join', params: { zone_id: zoneId, node_id: nodeId, construct_ids: constructIds } });
}
function sendZoneClose(zoneId) {
send({ method: 'zone_close', params: { zone_id: zoneId } });
}
function sendInstanceJoin(instanceId, cryps) {
send({ method: 'instance_join', params: { instance_id: instanceId, cryp_ids: cryps } });
function sendInstanceJoin(instanceId, constructs) {
send({ method: 'instance_join', params: { instance_id: instanceId, construct_ids: constructs } });
}
function sendInstanceNew(cryps, name, players) {
send({ method: 'instance_new', params: { cryp_ids: cryps, name, players } });
function sendInstanceNew(constructs, name, players) {
send({ method: 'instance_new', params: { construct_ids: constructs, name, players } });
}
function sendInstanceReady(instanceId) {
@@ -167,7 +167,7 @@ function createSocket(events) {
account = login;
localStorage.setItem('account', JSON.stringify(login));
events.setAccount(login);
sendAccountCryps();
sendAccountConstructs();
sendAccountInstances();
}
@@ -176,9 +176,9 @@ function createSocket(events) {
events.setInstanceList(playerList);
}
function accountCryps(response) {
const [structName, cryps] = response;
events.setCrypList(cryps);
function accountConstructs(response) {
const [structName, constructs] = response;
events.setConstructList(constructs);
}
function gameState(response) {
@@ -197,8 +197,8 @@ function createSocket(events) {
clearTimeout(gameStateTimeout);
}
function crypSpawn(response) {
const [structName, cryp] = response;
function constructSpawn(response) {
const [structName, construct] = response;
}
function zoneState(response) {
@@ -240,11 +240,11 @@ function createSocket(events) {
// when the server sends a reply it will have one of these message types
// this object wraps the reply types to a function
const handlers = {
cryp_spawn: crypSpawn,
construct_spawn: constructSpawn,
game_state: gameState,
account_login: accountLogin,
account_create: accountLogin,
account_cryps: accountCryps,
account_constructs: accountConstructs,
account_instances: accountInstanceList,
zone_create: res => console.log(res),
zone_state: zoneState,
@@ -264,9 +264,9 @@ function createSocket(events) {
switch (error) {
case 'invalid token': return logout();
case 'no active zone': return sendZoneCreate();
case 'no cryps selected': return events.errorPrompt('select_cryps');
case 'no constructs selected': return events.errorPrompt('select_constructs');
case 'node requirements not met': return events.errorPrompt('complete_nodes');
case 'cryp at max skills (4)': return events.errorPrompt('max_skills');
case 'construct at max skills (4)': return events.errorPrompt('max_skills');
default: return errorToast(error);
@@ -303,7 +303,7 @@ function createSocket(events) {
if (account) {
events.setAccount(account);
sendAccountInstances();
sendAccountCryps();
sendAccountConstructs();
setTimeout(sendItemInfo, 2000);
}
@@ -338,14 +338,14 @@ function createSocket(events) {
clearInstanceStateTimeout,
sendAccountLogin,
sendAccountCreate,
sendAccountCryps,
sendAccountConstructs,
sendAccountInstances,
sendAccountZone,
sendGameState,
sendGameReady,
sendGameSkill,
sendGameTarget,
sendCrypSpawn,
sendConstructSpawn,
sendSpecForget,
sendZoneCreate,
sendZoneJoin,
@@ -354,7 +354,7 @@ function createSocket(events) {
sendInstanceReady,
sendInstanceNew,
sendInstanceScores,
sendPlayerMmCrypsSet,
sendPlayerMmConstructsSet,
sendInstanceState,
sendVboxAccept,
sendVboxApply,
client/src/test.game.js
+15 -15
View File
@@ -2,7 +2,7 @@
function testGame(uuid) {
return {
"id": "667ad344-dc76-40b9-bb9c-0d20f0f7f5d2",
"player_cryps": 3,
"player_constructs": 3,
"player_num": 2,
"players": [
{
@@ -32,7 +32,7 @@ function testGame(uuid) {
"wins": 0,
"losses": 0
},
"cryps": [
"constructs": [
{
"id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
"account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1",
@@ -295,7 +295,7 @@ function testGame(uuid) {
"wins": 0,
"losses": 0
},
"cryps": [
"constructs": [
{
"id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
"account": uuid,
@@ -543,8 +543,8 @@ function testGame(uuid) {
{
"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",
"source_construct_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
"target_construct_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
"skill": "Attack",
"speed": 0,
"resolutions": []
@@ -552,8 +552,8 @@ function testGame(uuid) {
{
"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",
"source_construct_id": "ea302c35-d326-475c-a867-8ad5b162165a",
"target_construct_id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
"skill": "Attack",
"speed": 0,
"resolutions": []
@@ -561,8 +561,8 @@ function testGame(uuid) {
{
"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",
"source_construct_id": "82e8b940-411c-42a1-8fc2-484ec7207734",
"target_construct_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
"skill": "Attack",
"speed": 0,
"resolutions": []
@@ -570,8 +570,8 @@ function testGame(uuid) {
{
"id": "6bc9c3ce-587e-4bbe-ac81-2bc536ebbce4",
"source_player_id": uuid,
"source_cryp_id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
"target_cryp_id": "82e8b940-411c-42a1-8fc2-484ec7207734",
"source_construct_id": "5d49fe65-27f0-4372-90a3-334ef906a0f5",
"target_construct_id": "82e8b940-411c-42a1-8fc2-484ec7207734",
"skill": "Attack",
"speed": 0,
"resolutions": []
@@ -579,8 +579,8 @@ function testGame(uuid) {
{
"id": "9d2fc857-51c7-4640-a17c-a08496480830",
"source_player_id": uuid,
"source_cryp_id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
"target_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
"source_construct_id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
"target_construct_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
"skill": "Attack",
"speed": 0,
"resolutions": []
@@ -588,8 +588,8 @@ function testGame(uuid) {
{
"id": "e1bd2d77-181a-4f2d-a4f6-78c9ad3c5b3b",
"source_player_id": uuid,
"source_cryp_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
"target_cryp_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
"source_construct_id": "50e5d94e-8ebe-495c-a916-3eb509ff4683",
"target_construct_id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b",
"skill": "Attack",
"speed": 0,
"resolutions": []
client/src/test.instance.js
+16 -16
View File
@@ -34,7 +34,7 @@ function testInstance(uuid) {
"wins": 12,
"losses": 4
},
"cryps": [
"constructs": [
{
"id": "32ffeb78-e69d-4796-ba16-624a8db678c1",
"account": "681626d4-1c39-4968-a159-0921cf0fe497",
@@ -319,7 +319,7 @@ function testInstance(uuid) {
"wins": 13,
"losses": 3
},
"cryps": [
"constructs": [
{
"id": "d9bb5a7f-86d4-4075-9783-c899c91b48f4",
"account": "04e4bdbb-54d6-4d3a-9987-366520c05a04",
@@ -608,7 +608,7 @@ function testInstance(uuid) {
"wins": 1,
"losses": 15
},
"cryps": [
"constructs": [
{
"id": "4098d753-2196-46dc-98e0-bd5c86e3fbaa",
"account": "cbb7a327-1cec-464d-972c-96e4298d3941",
@@ -897,7 +897,7 @@ function testInstance(uuid) {
"wins": 4,
"losses": 12
},
"cryps": [
"constructs": [
{
"id": "b9c41633-73c1-4ce5-b9c6-3f18196b94d4",
"account": "04a13f79-145f-4cd4-bb4c-9108637f4c04",
@@ -1186,7 +1186,7 @@ function testInstance(uuid) {
"wins": 6,
"losses": 10
},
"cryps": [
"constructs": [
{
"id": "c7106871-91b4-4e13-96c8-13cf95878896",
"account": "d59b2bd4-01b3-4802-9e4d-d716b9f63114",
@@ -1475,7 +1475,7 @@ function testInstance(uuid) {
"wins": 6,
"losses": 10
},
"cryps": [
"constructs": [
{
"id": "52e54ac6-a254-4f74-aee7-0c8df4e92133",
"account": "64ddef5a-0af4-480d-8ed3-24e7fc3c0761",
@@ -1764,7 +1764,7 @@ function testInstance(uuid) {
"wins": 8,
"losses": 8
},
"cryps": [
"constructs": [
{
"id": "13d638ba-d738-42eb-9080-e0b9c6bbccd2",
"account": "fcdfcb93-da2e-4027-a360-7bc5a6328cd1",
@@ -2053,7 +2053,7 @@ function testInstance(uuid) {
"wins": 11,
"losses": 5
},
"cryps": [
"constructs": [
{
"id": "363f3902-8410-4984-bde8-cb7f77dc621f",
"account": "1f1145ad-def5-4e0e-b4f9-97310c1a58fb",
@@ -2342,7 +2342,7 @@ function testInstance(uuid) {
"wins": 9,
"losses": 7
},
"cryps": [
"constructs": [
{
"id": "9c490d3e-5509-439b-b197-f6fa80b8bee5",
"account": "eba6a766-7a95-4dc7-95a1-00a5a203921d",
@@ -2631,7 +2631,7 @@ function testInstance(uuid) {
"wins": 9,
"losses": 7
},
"cryps": [
"constructs": [
{
"id": "104f82e0-a053-4b77-b01b-7598998d5014",
"account": "78531f40-7e44-4ac9-90ae-23f51c3dea5a",
@@ -2920,7 +2920,7 @@ function testInstance(uuid) {
"wins": 12,
"losses": 4
},
"cryps": [
"constructs": [
{
"id": "6f1b51bd-b9ff-4269-b92e-b9d6629650f7",
"account": "74980fc0-c0ad-4a1d-a28e-e1f6ddc6bdc2",
@@ -3209,7 +3209,7 @@ function testInstance(uuid) {
"wins": 6,
"losses": 10
},
"cryps": [
"constructs": [
{
"id": "55116a6e-c872-464a-a470-e021cc7e80b6",
"account": "1dc41566-262e-4a95-b5f8-b347b532acec",
@@ -3498,7 +3498,7 @@ function testInstance(uuid) {
"wins": 14,
"losses": 2
},
"cryps": [
"constructs": [
{
"id": "8a34f320-ddc0-4d4b-99da-479da18fdb3a",
"account": "43e54b00-627d-459c-9d89-931e5c163602",
@@ -3783,7 +3783,7 @@ function testInstance(uuid) {
"wins": 15,
"losses": 1
},
"cryps": [
"constructs": [
{
"id": "0f93d522-3dce-429d-b373-9d3c0f97c4c1",
"account": "06e8a7b5-ca97-45cb-a8db-9aa1bfec5d23",
@@ -4068,7 +4068,7 @@ function testInstance(uuid) {
"wins": 2,
"losses": 14
},
"cryps": [
"constructs": [
{
"id": "ad0ba069-c20a-403e-b90e-024af247e5d6",
"account": "a5867e13-b591-47c7-b9e8-3bd7fe56e17e",
@@ -4367,7 +4367,7 @@ function testInstance(uuid) {
"wins": 0,
"losses": 16
},
"cryps": [
"constructs": [
{
"id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd",
"account": uuid,
client/src/utils.jsx
+28 -28
View File
@@ -57,10 +57,10 @@ function requestAvatar(name) {
}
const animations = {};
function animateCryp(id) {
function animateConstruct(id) {
if (animations[id]) return false;
animations[id] = true;
const duration = anime.random(2000, 20000);
const duration = anime.random(2000, 8000);
const target = document.getElementById(id);
return anime({
targets: target,
@@ -79,9 +79,9 @@ function clearAnimation(id) {
animations[id] = false;
}
function crypAvatar(name, id) {
function constructAvatar(name, id) {
useEffect(() => {
animateCryp(id);
animateConstruct(id);
return () => clearAnimation(id);
});
@@ -95,9 +95,9 @@ function crypAvatar(name, id) {
);
}
function instanceCryp(name, id) {
function instanceConstruct(name, id) {
useEffect(() => {
animateCryp(id);
animateConstruct(id);
return () => clearAnimation(id);
});
@@ -286,52 +286,52 @@ const COLOUR_ICONS = {
green: { colour: 'green', caption: 'green', svg: shapes.square },
};
function resoCrypHealth(resolution, currentGame) {
function resoConstructHealth(resolution, currentGame) {
if (!resolution) return false;
const modifyHealth = cryp => {
if (cryp.id !== resolution.target.id) return false; // not target
const modifyHealth = construct => {
if (construct.id !== resolution.target.id) return false; // not target
const [type, event] = resolution.event;
if (type === 'Damage') {
const { amount, mitigation, colour } = event;
cryp.green_life.value -= amount;
construct.green_life.value -= amount;
if (colour === 'Red') {
cryp.red_life.value -= mitigation;
construct.red_life.value -= mitigation;
}
if (colour === 'Blue') {
cryp.blue_life.value -= mitigation;
construct.blue_life.value -= mitigation;
}
}
if (type === 'Healing') {
const { amount } = event;
cryp.green_life.value += amount;
construct.green_life.value += amount;
}
if (type === 'Recharge') {
const { red, blue } = event;
cryp.red_life.value += red;
cryp.blue_life.value += blue;
construct.red_life.value += red;
construct.blue_life.value += blue;
}
return true;
};
currentGame.players.forEach(player => player.cryps.forEach(modifyHealth));
currentGame.players.forEach(player => player.constructs.forEach(modifyHealth));
return true;
}
function eventClasses(resolution, cryp) {
function eventClasses(resolution, construct) {
if (!resolution) return '';
const startSkill = resolution.stage === 'START_SKILL';
const endSkill = resolution.stage === 'END_SKILL';
const postSkill = resolution.stage === 'POST_SKILL';
const source = cryp.id === resolution.source.id;
const target = cryp.id === resolution.target.id;
const source = construct.id === resolution.source.id;
const target = construct.id === resolution.target.id;
// not involved at all. blur them
if (!(source || target)) return 'unfocus';
// not the target. just ignore for now
// if (cryp.id !== resolution.target.id) return '';
// if (construct.id !== resolution.target.id) return '';
const [type, event] = resolution.event;
@@ -357,7 +357,7 @@ function eventClasses(resolution, cryp) {
if (source && startSkill) return 'active-skill';
if (target && endSkill) return 'active-skill';
// Deal damage to cryp and return effect
// Deal damage to construct and return effect
if (target && postSkill) {
if (colour === 'Red') {
return 'red-damage';
@@ -457,13 +457,13 @@ function getCombatSequence(event) {
return ['START_SKILL', 'END_SKILL', 'POST_SKILL'];
}
function getCombatText(cryp, resolution) {
function getCombatText(construct, resolution) {
if (!resolution) return ['', ''];
const [type, event] = resolution.event;
const source = cryp.id === resolution.source.id;
const target = cryp.id === resolution.target.id;
const source = construct.id === resolution.source.id;
const target = construct.id === resolution.target.id;
const startSkill = resolution.stage === 'START_SKILL';
const endSkill = resolution.stage === 'END_SKILL';
const postSkill = resolution.stage === 'POST_SKILL';
@@ -567,18 +567,18 @@ function convertItem(v) {
}
module.exports = {
animateCryp,
animateConstruct,
stringSort,
convertItem,
numSort,
genAvatar,
crypAvatar,
instanceCryp,
constructAvatar,
instanceConstruct,
requestAvatar,
eventClasses,
getCombatSequence,
getCombatText,
resoCrypHealth,
resoConstructHealth,
NULL_UUID,
STATS,
SPECS,