wip

client/cryps.css

@@ -617,7 +617,7 @@ table td svg {
 }
 
 .info-spec {
-    margin-top: 1em;
+    margin-top: 2em;
 }
 
 .spec-goals figure {

client/src/components/info.component.jsx

@@ -3,6 +3,9 @@ const range = require('lodash/range');
 
 const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
 const { COLOUR_ICONS, STATS, SPECS, convertVar, crypAvatar } = require('../utils');
+const shapes = require('./shapes');
+
+const InfoCryp = require('./info.cryp');
 
 function Info(args) {
     const {
@@ -14,6 +17,7 @@ function Info(args) {
         player,
         setInfo,
         vboxInfo,
+        setVboxHidden,
         vboxHidden,
     } = args;
 
@@ -108,65 +112,6 @@ function Info(args) {
         }
     }
 
-    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];
-
-            function skillClick(e) {
-                if (!skill) setInfo('highlight', 'skill');
-                else setInfo('skill', { skill: skill.skill, cryp });
-                e.stopPropagation();
-                return setActiveCryp(cryp);
-            }
-
-            const s = cryp.skills[i]
-                ? cryp.skills[i].skill
-                : (<span>&nbsp;</span>);
-            return <button key={i} alt={s} onClick={skillClick} >{s}</button>;
-        });
-
-        const stats = Object.values(STATS).map((s, j) => (
-            <figure key={j} alt={s.stat} className={s.stat}>
-                {s.svg(`stat-icon ${s.colour}`)}
-                <figcaption>{cryp[s.stat].value}</figcaption>
-            </figure>
-        ));
-
-        const specs = cryp.specs.map((s, i) => {
-            function specClick() {
-                setInfo('spec', { spec: s, cryp });
-            }
-
-            return (
-                <figure key={i} onClick={specClick} >
-                    {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
-                    <figcaption>{SPECS[s].caption}</figcaption>
-                </figure>
-            );
-        });
-
-
-        return (
-            <div className="info-cryp">
-                <div className="stats">
-                    {stats}
-                </div>
-                <div className="specs">
-                    {specs}
-                </div>
-                <div className="skills">
-                    {skills}
-                </div>
-            </div>
-        );
-    }
-
     function playerRound(id) {
         if (!instance.rounds.length) return null;
         return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
@@ -237,10 +182,10 @@ function Info(args) {
 
     return (
         <div className={classes} >
-            <ScoreBoard />
+            <InfoCryp />
-            <CrypInfo />
             <Combos />
             <CrypVar />
+            <ScoreBoard />
         </div>
     );
 }

client/src/components/info.container.jsx

@@ -39,13 +39,13 @@ const addState = connect(
             dispatch(actions.setActiveCryp(value));
         }
 
-        function setActiveVar(value) {
+        function setVboxHidden(value) {
-            dispatch(actions.setActiveVar(value));
+            dispatch(actions.setVboxHidden(value));
         }
 
         return {
             setInfo,
-            setActiveVar,
+            setVboxHidden,
             setActiveCryp,
         };
     }

client/src/components/info.cryp.jsx

@@ -0,0 +1,121 @@
+const preact = require('preact');
+const range = require('lodash/range');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+const { STATS, SPECS, crypAvatar } = require('../utils');
+const shapes = require('./shapes');
+
+const addState = connect(
+    function receiveState(state) {
+        const { activeCryp, player } = state;
+        return { activeCryp, player };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setInfo(item, value) {
+            dispatch(actions.setInfo([item, value]));
+        }
+
+        function setActiveCryp(value) {
+            dispatch(actions.setActiveCryp(value));
+        }
+
+        function setVboxHidden(value) {
+            dispatch(actions.setVboxHidden(value));
+        }
+
+        return { setInfo, setActiveCryp, setVboxHidden };
+    }
+
+);
+
+function InfoCryp(args) {
+    const {
+        activeCryp,
+        player,
+
+        setVboxHidden,
+        setInfo,
+        setActiveCryp,
+    } = args;
+
+    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];
+
+        function skillClick(e) {
+            if (!skill) {
+                setVboxHidden(false);
+                setInfo('highlight', 'skill');
+            } else setInfo('skill', { skill: skill.skill, cryp });
+            e.stopPropagation();
+            return setActiveCryp(cryp);
+        }
+
+        const s = cryp.skills[i]
+            ? cryp.skills[i].skill
+            : (<span>&nbsp;</span>);
+        return <button key={i} alt={s} onClick={skillClick} >{s}</button>;
+    });
+
+    const stats = Object.values(STATS).map((s, j) => (
+        <figure key={j} alt={s.stat} className={s.stat}>
+            {s.svg(`stat-icon ${s.colour}`)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
+    const specs = range(0, 6).map(i => {
+        const s = cryp.specs[i];
+
+        function blankSpecClick(e) {
+            e.stopPropagation();
+            setActiveCryp(cryp);
+            setInfo('highlight', 'spec');
+        }
+
+        if (!s) {
+            return (
+                <figure key={i} className="gray" onClick={blankSpecClick}>
+                    {shapes.diamond('stat-icon gray')}
+                    <figcaption>&nbsp;</figcaption>
+                </figure>
+            );
+        }
+
+        function specClick(e) {
+            e.stopPropagation();
+            setActiveCryp(cryp);
+            setInfo('spec', { spec: s, cryp });
+        }
+
+        return (
+            <figure key={i} onClick={specClick}>
+                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                <figcaption>{SPECS[s].caption}</figcaption>
+            </figure>
+        );
+    });
+
+    return (
+        <div className="info-cryp">
+            <div className="stats">
+                {stats}
+            </div>
+            <div className="specs">
+                {specs}
+            </div>
+            <div className="skills">
+                {skills}
+            </div>
+        </div>
+    );
+}
+
+module.exports = addState(InfoCryp);

client/src/components/instance.cryps.jsx

@@ -120,9 +120,9 @@ function Cryp(props) {
     // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
 
     return (
-        <div key={cryp.id} className="instance-cryp" >
+        <div key={cryp.id} className="instance-cryp" onClick={onClick} >
             <div className="instance-cryp-top">
-                <figure className="img" onClick={onClick}>
+                <figure className="img">
                     {crypAvatar(cryp.name)}
                     <figcaption>{cryp.name}</figcaption>
                 </figure>