wip

client/src/components/info.component.jsx

@@ -2,7 +2,7 @@ const preact = require('preact');
 const range = require('lodash/range');
 
 const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
-const { COLOUR_ICONS, STATS, SPECS } = require('../utils');
+const { COLOUR_ICONS, STATS, SPECS, convertVar, crypAvatar } = require('../utils');
 
 function Info(args) {
     const {
@@ -12,10 +12,16 @@ function Info(args) {
         instance,
         player,
         setInfo,
+        vboxInfo,
     } = args;
 
-    function infoVar([type, value]) {
-        let red = 0; let blue = 0; let green = 0;
+    function CrypVar() {
+        const [type, value] = info;
+        if (!type) return false;
+
+        let red = 0;
+        let blue = 0;
+        let green = 0;
         player.cryps.forEach(cryp => {
             red += cryp.colours.red;
             blue += cryp.colours.blue;
@@ -100,7 +106,12 @@ function Info(args) {
         }
     }
 
-    function infoCrypElement(cryp) {
+    function CrypInfo() {
+        if (!activeCryp) return false;
+        const cryp = player.cryps.find(c => c.id === activeCryp.id);
+
+        if (!cryp) return false;
+
         // onClick={() => setInfo('skill', { skill: s, cryp })}
         const skills = range(0, 3).map(i => {
             const skill = cryp.skills[i];
@@ -139,7 +150,6 @@ function Info(args) {
 
         return (
             <div className="info-cryp">
-                <h2>{cryp.name}</h2>
                 <div className="stats">
                     {stats}
                 </div>
@@ -158,10 +168,10 @@ function Info(args) {
         return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
     }
 
-    function playerText(player) {
-        const round = playerRound(player.id);
+    function playerText(p) {
+        const round = playerRound(p.id);
         if (!round) {
-            return player.ready
+            return p.ready
                 ? 'ready'
                 : '';
         }
@@ -169,12 +179,14 @@ function Info(args) {
         if (round.finished) return 'finished';
         if (round.game_id) return 'in game';
 
-        return player.ready
+        return p.ready
             ? 'ready'
             : '';
     }
 
-    function scoreBoard() {
+    function ScoreBoard() {
+        if (activeCryp || info[0]) return null;
+
         const players = instance.players.map((p, i) => {
             const pText = playerText(p);
             return (
@@ -196,29 +208,33 @@ function Info(args) {
         );
     }
 
-    const scoreBoardEl = activeCryp || info[0]
-        ? null
-        : scoreBoard();
-
-    const infoCryp = activeCryp
-        ? infoCrypElement(player.cryps.find(c => c.id === activeCryp.id))
-        : null;
-
-    const otherInfo = info[0]
-        ? infoVar(info)
-        : null;
+    function Combos() {
+        if (!info[0]) return false;
+        if (activeCryp) return false;
+        return (
+            <table>
+                <tbody>
+                    {vboxInfo.combos.filter(c => c.units.includes(info[1])).map((c, i) =>
+                        <tr key={i} >
+                            <td className="highlight" >{convertVar(c.var)}</td>
+                            {c.units.map(u => <td>{convertVar(u)}</td>)}
+                        </tr>
+                    )}
+                </tbody>
+            </table>
+        );
+    }
 
     // const beginningHdr = instance.phase === 'Lobby'
     //     ? <h2>game beginning...</h2>
     //     : null;
 
-    const instanceInfoClass = `instance-info ${!info[0] ? '' : 'hidden'}`;
-
     return (
-        <div className={instanceInfoClass} >
-            {scoreBoardEl}
-            {infoCryp}
-            {otherInfo}
+        <div className="instance-info" >
+            <ScoreBoard />
+            <CrypInfo />
+            <Combos />
+            <CrypVar />
         </div>
     );
 }

client/src/components/info.container.jsx

@@ -10,6 +10,7 @@ const addState = connect(
             info,
             ws,
             instance,
+            vboxInfo,
             player,
         } = state;
 
@@ -23,6 +24,7 @@ const addState = connect(
             sendUnequip,
             instance,
             player,
+            vboxInfo,
         };
     },
 

client/src/components/instance.cryps.jsx

@@ -69,7 +69,8 @@ function Cryp(props) {
             return setActiveCryp(cryp);
         }
 
-        return <button key={i} className="right" onClick={skillClick} >{s}</button>;
+        const classes = `right ${skill ? '' : 'action'}`;
+        return <button key={i} className={classes} onClick={skillClick} >{s}</button>;
     });
 
     // needed for ondrop to fire

client/src/components/vbox.component.jsx

@@ -3,19 +3,7 @@ const range = require('lodash/range');
 
 const shapes = require('./shapes');
 
-function convertVar(v) {
-    if (['Red', 'Green', 'Blue'].includes(v)) {
-        return (
-            shapes.vboxColour(v.toLowerCase())
-        );
-    }
-    return v || <span>&nbsp;</span>;
-    // uncomment for double borders in vbox;
-    // if (v) {
-    //     return <div>{v}</div>;
-    // }
-    // return;
-}
+const { convertVar } = require('./../utils');
 
 function Vbox(args) {
     const {
@@ -131,10 +119,7 @@ function Vbox(args) {
     function boundClick(e, i) {
         if (reclaiming && vbox.bound[i]) sendVboxReclaim(i);
         else if (vbox.bound[i]) {
-            const insert = ['Red', 'Green', 'Blue'].includes(vbox.bound[i])
-                ? combiner.findIndex(j => j === null)
-                : 2;
-
+            const insert = combiner.findIndex(j => j === null);
             if (insert === -1) return setCombiner([i, null, null]);
             combiner[insert] = i;
             boundTimer = null;