diff --git a/client/cryps.css b/client/cryps.css
index eb59a642..54d77bf4 100644
--- a/client/cryps.css
+++ b/client/cryps.css
@@ -340,6 +340,11 @@ header {
margin: 0;
}
+.instance-ui-btn[disabled] {
+ color: #333;
+ border-color: #333;
+}
+
.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
color: black;
}
diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx
index 008f141a..338f6121 100644
--- a/client/src/components/game.component.jsx
+++ b/client/src/components/game.component.jsx
@@ -57,6 +57,7 @@ function GamePanel(props) {
diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx
index e47790f3..c6e27fa0 100644
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@@ -10,12 +10,13 @@ function Info(args) {
info,
sendUnequip,
instance,
+ player,
setInfo,
} = args;
function infoVar([type, value]) {
let red = 0; let blue = 0; let green = 0;
- instance.cryps.forEach(cryp => {
+ player.cryps.forEach(cryp => {
red += cryp.colours.red;
blue += cryp.colours.blue;
green += cryp.colours.green;
@@ -152,18 +153,37 @@ function Info(args) {
);
}
+ function scoreBoard() {
+ const players = instance.players.map((p, i) =>
+
+ | {p.name} |
+ {p.score.wins} / {p.score.losses} |
+ {p.ready ? 'ready' : ''} |
+
+ );
+
+ return (
+
+ );
+ }
+
const infoCryp = activeCryp
- ? infoCrypElement(instance.cryps.find(c => c.id === activeCryp.id))
+ ? infoCrypElement(player.cryps.find(c => c.id === activeCryp.id))
: null;
const otherInfo = info.length
? infoVar(info)
: null;
- const instanceInfoClass = `instance-info ${activeCryp ? '' : 'hidden'}`;
+ const instanceInfoClass = `instance-info ${info.length ? '' : 'hidden'}`;
return (
+ {scoreBoard()}
{infoCryp}
{otherInfo}
diff --git a/client/src/components/info.container.jsx b/client/src/components/info.container.jsx
index b4cd2779..7507c31f 100644
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@@ -10,10 +10,11 @@ const addState = connect(
info,
ws,
instance,
+ player,
} = state;
function sendUnequip(crypId, item) {
- return ws.sendVboxUnequip(instance.instance, crypId, item);
+ return ws.sendVboxUnequip(instance.id, crypId, item);
}
return {
@@ -21,6 +22,7 @@ const addState = connect(
info,
sendUnequip,
instance,
+ player,
};
},
diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index f04e151d..7ff0d6a3 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -1,120 +1,16 @@
const preact = require('preact');
-// const key = require('keymaster');
-const range = require('lodash/range');
-const mapValues = require('lodash/mapValues');
const VboxContainer = require('./vbox.container');
const InfoContainer = require('./info.container');
-const molecule = require('./molecule');
-
-const { SPECS } = require('../utils');
-
-function Cryp(props) {
- const {
- cryp,
- sendVboxApply,
- setInfo,
- activeVar,
- setActiveCryp,
- } = props;
-
- const skills = range(0, 3).map(i => {
- const skill = cryp.skills[i];
- const s = skill
- ? skill.skill
- : (
);
-
- function skillClick() {
- if (!skill) return false;
- setInfo('skill', { skill: skill.skill, cryp });
- return setActiveCryp(cryp);
- }
-
- return
;
- });
-
- // needed for ondrop to fire
- function onDragOver(e) {
- e.preventDefault();
- return false;
- }
-
- function onDrop(e) {
- e.stopPropagation();
- e.preventDefault();
- const item = parseInt(e.dataTransfer.getData('text'), 10);
- return sendVboxApply(cryp.id, item);
- }
-
- function onClick(e) {
- e.stopPropagation();
- e.preventDefault();
-
- if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
- setInfo(null);
- return setActiveCryp(cryp);
- }
-
- const specs = cryp.specs.map((s, i) => {
- function specClick() {
- setActiveCryp(cryp);
- setInfo('spec', { spec: s, cryp });
- }
- return (
-
- {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
- {SPECS[s].caption}
-
- );
- });
-
- const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
- const colours = mapValues(cryp.colours, c => {
- if (cTotal === 0) return 245;
- return Math.floor(c / cTotal * 255);
- });
- const alpha = cTotal === 0 ? 1 : 0.75;
- const thickness = total => {
- if (total < 3) return 1;
- if (total < 6) return 2;
- if (total < 9) return 3;
- return 4;
- };
- const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
-
- return (
-
-
-
- {molecule()}
- {cryp.name}
-
-
- {skills}
-
-
-
- {specs}
-
-
- );
-}
+const InstanceCrypsContainer = require('./instance.cryps');
function InstanceComponent(args) {
const {
- account,
instance,
+ player,
quit,
// clearInfo,
sendInstanceReady,
- sendVboxApply,
- setInfo,
activeVar,
activeCryp,
setActiveVar,
@@ -123,12 +19,6 @@ function InstanceComponent(args) {
if (!instance) return
...
;
- const player = instance.players.find(p => p.account === account.id);
-
- const cryps = player.cryps.map((c, i) => Cryp({
- cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
- }));
-
function showVbox(e) {
setActiveVar(null);
setActiveCryp(null);
@@ -162,8 +52,6 @@ function InstanceComponent(args) {
? vboxBtn
: teamBtn;
- const crypListClass = `cryp-list ${infoSelected ? '' : 'hidden'}`;
-
const menuBtn = (
...
;
const instancePanels = instances.map(instance => {
- const player = instance.players.find(p => p.account === account.id);
- const name = `${instance.name} | ${player.score.wins} : ${player.score.losses}`;
+ const player = instance.players.find(p => p.id === account.id);
+ const scoreText = player
+ ? `| ${player.score.wins} : ${player.score.losses}`
+ : '';
+ const name = `${instance.name} ${scoreText}`;
+
+ function instanceClick() {
+ if (!player) return sendInstanceJoin(instance);
+ return sendInstanceState(instance);
+ }
return (