figcap

html-client/cryps.css

@@ -241,6 +241,11 @@ button:hover {
     padding: 0.25em 0;
 }
 
+.cryp-box .stats figcaption {
+    font-size: 75%;
+}
+
+
 .cryp-box .stats svg {
     height: 1.5em;
     stroke-width: 2px;

html-client/src/components/cryp.list.component.jsx

@@ -0,0 +1,57 @@
+const preact = require('preact');
+
+const { stringSort } = require('./../utils');
+const molecule = require('./molecule');
+
+const idSort = stringSort('id');
+
+const COLOURS = [
+    '#a52a2a',
+    '#1FF01F',
+    '#3498db',
+];
+
+function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
+    if (!cryps) return <div>not ready</div>;
+
+    // redux limitation + suggested workaround
+    // so much for dumb components
+    function selectCryp(id) {
+        if (selectedCryps.length < 3) {
+            selectedCryps.push(id);
+            return setSelectedCryps(selectedCryps);
+        }
+        return false;
+    }
+
+    const crypPanels = cryps.sort(idSort).map(cryp => {
+        const colour = selectedCryps.indexOf(cryp.id);
+        const selected = colour > -1;
+
+        const borderColour = selected ? COLOURS[colour] : '#000000';
+
+        return (
+            <div
+                key={cryp.id}
+                className="menu-cryp-ctr">
+                <div
+                    className="menu-cryp"
+                    style={ { 'border-color': borderColour || 'whitesmoke' } }
+                    onClick={() => selectCryp(cryp.id)} >
+                    <figure className="img">
+                        {molecule}
+                    </figure>
+                    <h2>{cryp.name}</h2>
+                </div>
+            </div>
+        );
+    });
+
+    return (
+        <div className="menu-cryps">
+            {crypPanels}
+        </div>
+    );
+}
+
+module.exports = CrypList;

html-client/src/components/vbox.component.jsx

@@ -108,7 +108,7 @@ function Vbox(args) {
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxCombine()}>
-                combine
+                repurpose
             </button>
             {combinerElement}
         </div>