Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

client/src/components/info.component.jsx

@@ -1,104 +1,143 @@
 const preact = require('preact');
-const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
-const { COLOUR_ICONS, STATS } = require('../utils');
+const range = require('lodash/range');
+
+const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./constants');
+const { COLOUR_ICONS, STATS, SPECS } = require('../utils');
 
 function Info(args) {
     const {
+        activeCryp,
         info,
         sendUnequip,
         instance,
     } = args;
-    if (!info.length) return (<div className="instance-info">&nbsp;</div>);
-    let red = 0; let blue = 0; let green = 0;
-    instance.cryps.forEach(cryp => {
-        red += cryp.colours.red;
-        blue += cryp.colours.blue;
-        green += cryp.colours.green;
-    });
-    const teamColours = { red, blue, green };
-    const [type, value] = info;
-    if (type === 'item') {
-        let itemDetails;
-        if (SKILLS[value]) {
-            itemDetails = SKILLS[value];
-        } else if (SPECS[value]) {
-            itemDetails = SPECS[value];
-        } else if (COLOURS[value]) {
-            itemDetails = COLOURS[value];
-        }
-        return (
-            <div className="instance-info">
-                {value} - {itemDetails.description}
-            </div>
-        );
-    }
 
-    if (type === 'skill') {
-        return (
-            <div className="instance-info">
-                <div>
-                    <div> {value.skill} </div>
-                    <div> {SKILLS[value.skill].description} </div>
-                    <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
+    function infoVar([type, value]) {
+        let red = 0; let blue = 0; let green = 0;
+        instance.cryps.forEach(cryp => {
+            red += cryp.colours.red;
+            blue += cryp.colours.blue;
+            green += cryp.colours.green;
+        });
+        const teamColours = { red, blue, green };
+
+        if (type === 'item') {
+            let itemDetails;
+            if (SKILLS[value]) {
+                itemDetails = SKILLS[value];
+            } else if (SPEC_CONSTANT[value]) {
+                itemDetails = SPEC_CONSTANT[value];
+            } else if (COLOURS[value]) {
+                itemDetails = COLOURS[value];
+            }
+            return (
+                <div className="info-var">
+                    {value} - {itemDetails.description}
+                </div>
+            );
+        }
+
+        if (type === 'skill') {
+            return (
+                <div className="info-skill">
+                    <div> {value.skill.skill} </div>
+                    <div> {SKILLS[value.skill.skill].description} </div>
+                    <button onClick={() => sendUnequip(value.cryp.id, value.skill.skill)}>
                     unequip
                     </button>
                 </div>
-            </div>
-        );
-    }
+            );
+        }
 
-    function thresholds(t, spec) {
-        return (
-            SPECS[spec].colours.map((c, i) => (
-                <figure key={i} alt={c.colour}>
-                    {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
-                    <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
-                </figure>
-            ))
-        );
-    }
-
-
-    if (type === 'spec') {
-        const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
-            const threshold = thresholds(t, value.spec);
+        function thresholds(t, spec) {
             return (
-                <div className="thresholds" key={i} alt={t}>
-                    {threshold}
+                SPEC_CONSTANT[spec].colours.map((c, i) => (
+                    <figure key={i} alt={c.colour}>
+                        {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
+                        <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
+                    </figure>
+                ))
+            );
+        }
+
+        if (type === 'spec') {
+            const breaks = SPEC_CONSTANT[value.spec].thresholds ? SPEC_CONSTANT[value.spec].thresholds.map((t, i) => {
+                const threshold = thresholds(t, value.spec);
+                return (
+                    <div className="thresholds" key={i} alt={t}>
+                        {threshold}
+                    </div>
+                );
+            }) : null;
+            return (
+                <div className="info-spec">
+                    <div>
+                        <div> {value.spec} </div>
+                        <div> {SPEC_CONSTANT[value.spec].description} </div>
+                        {breaks}
+                    </div>
+                    <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
+                        unequip
+                    </button>
                 </div>
             );
-        }) : null;
-        return (
-            <div className="instance-info">
-                <div>
-                    <div> {value.spec} </div>
-                    <div> {SPECS[value.spec].description} </div>
-                    {breaks}
-                </div>
-                <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
-                    unequip
-                </button>
-            </div>
-        );
+        }
     }
 
-    if (type === 'cryp') {
-        const cryp = value;
+    function infoCrypElement(cryp) {
+        // onClick={() => setInfo('skill', { skill: s, cryp })}
+        const skills = range(0, 4).map(i => {
+            const s = cryp.skills[i]
+                ? cryp.skills[i].skill
+                : (<span>&nbsp;</span>);
+            return <button key={i} className="cryp-skill-btn right" >{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) => (
+            <figure key={i}>
+                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                <figcaption>{SPECS[s].caption}</figcaption>
+            </figure>
+        ));
+
+
         return (
-            <div className="instance-info">
+            <div className="info-cryp">
                 <h5>{cryp.name}</h5>
-                <div className="info-stats">
+                <div className="stats">
                     {stats}
                 </div>
+                <div className="specs">
+                    {specs}
+                </div>
+                <div className="skills">
+                    {skills}
+                </div>
             </div>
         );
     }
+
+    const infoCryp = activeCryp
+        ? infoCrypElement(activeCryp)
+        : null;
+
+    const otherInfo = info.length
+        ? infoVar(info)
+        : null;
+
+    return (
+        <div className="instance-info">
+            {infoCryp}
+            {otherInfo}
+        </div>
+    );
 }
 
 module.exports = Info;

client/src/components/info.container.jsx

@@ -6,12 +6,23 @@ const Info = require('./info.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { info, ws, instance } = state;
+        const {
+            activeCryp,
+            info,
+            ws,
+            instance,
+        } = state;
+
         function sendUnequip(crypId, item) {
             return ws.sendVboxUnequip(instance.instance, crypId, item);
         }
 
-        return { info, sendUnequip, instance };
+        return {
+            activeCryp,
+            info,
+            sendUnequip,
+            instance,
+        };
     }
 /*
     function receiveDispatch(dispatch) {

client/src/components/instance.component.jsx

@@ -7,15 +7,30 @@ const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
 const molecule = require('./molecule');
 
-const shapes = require('./shapes');
-const { STATS, SPECS } = require('../utils');
+const { SPECS } = require('../utils');
+
+function Cryp(props) {
+    const {
+        cryp,
+        sendVboxApply,
+        setInfo,
+        activeVar,
+        setActiveCryp,
+    } = props;
 
-function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
     const skills = range(0, 4).map(i => {
-        const s = cryp.skills[i]
-            ? cryp.skills[i].skill
+        const skill = cryp.skills[i];
+        const s = skill
+            ? skill.skill
             : (<span>&nbsp;</span>);
-        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', { skill: s, cryp })}>{s}</button>;
+
+        function skillClick() {
+            if (!skill) return false;
+            setInfo('skill', { skill, cryp });
+            return setActiveCryp(cryp);
+        }
+
+        return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
     });
 
     // needed for ondrop to fire
@@ -36,17 +51,22 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
         e.preventDefault();
 
         if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
-        document.getElementsByClassName('instance-info')[0].scrollIntoView();
-
-        return setInfo('cryp', cryp);
+        return setActiveCryp(cryp);
     }
 
-    const specs = cryp.specs.map((s, i) => (
-        <figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
-            {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
-            <figcaption>{SPECS[s].caption}</figcaption>
-        </figure>
-    ));
+    const specs = cryp.specs.map((s, i) => {
+        function specClick() {
+            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>
+        );
+    });
+
     const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
     const colours = mapValues(cryp.colours, c => {
         if (cTotal === 0) return 245;
@@ -84,19 +104,27 @@ function InstanceComponent(args) {
         // account,
         instance,
         quit,
+        // clearInfo,
         sendInstanceReady,
         sendVboxApply,
         setInfo,
         activeVar,
         setActiveVar,
+        setActiveCryp,
     } = args;
 
     if (!instance) return <div>...</div>;
 
-    const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar));
+    const cryps = instance.cryps.map((c, i) => Cryp({
+        cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
+    }));
+
+    function onClick(e) {
+        setActiveVar(null);
+    }
 
     return (
-        <main className="instance" onClick={() => setActiveVar(null)} >
+        <main className="instance" onClick={onClick} >
             <div className="instance-hdr">
                 <button
                     className="instance-btn instance-ui-btn menu-btn left"

client/src/components/instance.container.jsx

@@ -19,7 +19,7 @@ const addState = connect(
         return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
     },
 
-    function receiveDispatch(dispatch, { instance, combiner }) {
+    function receiveDispatch(dispatch) {
         function quit() {
             dispatch(actions.setInstance(null));
         }
@@ -32,7 +32,15 @@ const addState = connect(
             dispatch(actions.setActiveVar(value));
         }
 
-        return { quit, setInfo, setActiveVar };
+        function setActiveCryp(value) {
+            dispatch(actions.setActiveCryp(value));
+        }
+
+        function clearInfo() {
+            return dispatch(actions.setInfo([]));
+        }
+
+        return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
     }
 
 );

client/src/components/vbox.component.jsx

@@ -88,14 +88,11 @@ function Vbox(args) {
 
     let boundTimer;
     function boundTouchStart(e, i) {
-        e.preventDefault();
-        e.stopPropagation();
+        // e.preventDefault();
+        // e.stopPropagation();
         boundTimer = (setTimeout(() => {
-            const insert = combiner.findIndex(j => j === null);
-            if (insert === -1) return setCombiner([i, null, null]);
-            combiner[insert] = i;
             boundTimer = null;
-            return setCombiner(combiner);
+            return setActiveVar(i);
         }, LONG_TOUCH_TIME));
         return true;
     }
@@ -105,7 +102,12 @@ function Vbox(args) {
             clearTimeout(boundTimer);
 
             if (reclaiming && i) sendVboxReclaim(i);
-            else if (vbox.bound[i]) setActiveVar(i);
+            else if (vbox.bound[i]) {
+                const insert = combiner.findIndex(j => j === null);
+                if (insert === -1) return setCombiner([i, null, null]);
+                combiner[insert] = i;
+                return setCombiner(combiner);
+            }
         }
         return true;
     }

client/src/components/vbox.container.jsx

@@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, instance, combiner, reclaiming, activeVar } = state;
+        const { ws, instance, combiner, reclaiming, activeVar, info } = state;
 
         function sendVboxDiscard() {
             return ws.sendVboxDiscard(instance.instance);
@@ -29,6 +29,7 @@ const addState = connect(
             combiner,
             reclaiming,
             activeVar,
+            info,
             sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,