From 7b31b2529f39980c7d933f8b368beea777118c7e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Fri, 29 Mar 2019 11:39:45 +1100
Subject: [PATCH] cryp box wip

---
 html-client/cryps.css                         | 35 +++++++++++++++++--
 html-client/package.json                      |  2 +-
 .../src/components/instance.component.jsx     | 21 ++++++++++-
 .../components/instance.cryps.component.jsx   | 22 ++++++++++++
 .../src/components/login.component.jsx        |  2 +-
 html-client/src/components/molecule.jsx       |  4 +++
 html-client/src/components/vbox.component.jsx |  4 +--
 7 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100644 html-client/src/components/instance.cryps.component.jsx
 create mode 100644 html-client/src/components/molecule.jsx

diff --git a/html-client/cryps.css b/html-client/cryps.css
index 64cdc5da..a78b63aa 100644
--- a/html-client/cryps.css
+++ b/html-client/cryps.css
@@ -6,7 +6,7 @@ body {
     font-family: 'Jura';
     color: whitesmoke;
     font-size: 16pt;
-    padding: 1em;
+    padding: 1em 2em;
 }
 
 button, input {
@@ -64,7 +64,7 @@ button:hover {
 .ping-svg {
     background-color: black;
     height: 1em;
-    margin-right: 1em;
+    margin-left: 1em;
 }
 
 .ping-path {
@@ -174,4 +174,33 @@ button:hover {
 
 .spacer {
     min-width: 100%;
-}
\ No newline at end of file
+}
+
+/* CRYP BOX */
+.cryp-box {
+    display: flex;
+    padding: 0;
+}
+
+.cryp-box figure {
+    width: 50%;
+    margin: 0 0 2em 0;
+    border: 1px solid whitesmoke;
+}
+
+.cryp-box .skills {
+    width: 50%;
+}
+
+.cryp-skill-btn:first-child {
+    margin: 0 0 0 -1px;
+}
+
+.cryp-skill-btn {
+    font-size: 150%;
+    border-width: 1px;
+    width: 100%;
+    height: 25%;
+    padding: 0;
+    margin: -1px 0 0 -1px;
+}
diff --git a/html-client/package.json b/html-client/package.json
index b8201134..e7aaf6de 100755
--- a/html-client/package.json
+++ b/html-client/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "parcel index.html --port 40080",
+    "start": "parcel index.html --port 40080 --no-hmr --no-source-maps",
     "build": "rm -rf dist && parcel build index.html",
     "lint": "eslint --fix --ext .jsx src/",
     "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx
index 6dd18808..d50073d4 100644
--- a/html-client/src/components/instance.component.jsx
+++ b/html-client/src/components/instance.component.jsx
@@ -2,6 +2,23 @@ const preact = require('preact');
 // const key = require('keymaster');
 
 const VboxContainer = require('./vbox.container');
+const molecule = require('./molecule');
+
+function Cryp(cryp) {
+    const skills = cryp.skills.map((s, i) => (
+        <button className="cryp-skill-btn" >{s.skill}</button>
+    ));
+    return (
+        <div className="cryp-box">
+            <figure className="cryp-img">
+                {molecule}
+            </figure>
+            <div className="skills">
+                {skills}
+            </div>
+        </div>
+    );
+}
 
 function InstanceComponent(args) {
     const {
@@ -13,6 +30,8 @@ function InstanceComponent(args) {
 
     if (!instance) return <div>...</div>;
 
+    let cryps = instance.cryps.map(Cryp);
+
     return (
         <section>
             <div className="row">
@@ -37,7 +56,7 @@ function InstanceComponent(args) {
             <div className="row">
                 <VboxContainer />
                 <div className="three columns">
-                    {JSON.stringify(instance.cryps)}
+                    {cryps}
                 </div>
             </div>
         </section>
diff --git a/html-client/src/components/instance.cryps.component.jsx b/html-client/src/components/instance.cryps.component.jsx
new file mode 100644
index 00000000..5cda62a4
--- /dev/null
+++ b/html-client/src/components/instance.cryps.component.jsx
@@ -0,0 +1,22 @@
+const preact = require('preact');
+// const key = require('keymaster');
+
+function Vbox(args) {
+    const {
+        instance,
+        combiner,
+        sendVboxAccept,
+        sendVboxDiscard,
+        sendVboxReclaim,
+        sendVboxCombine,
+    } = args;
+
+    const { cryps } = instance;
+
+    return (
+        <div className="three columns">
+        </div>
+    );
+}
+
+module.exports = Vbox;
\ No newline at end of file
diff --git a/html-client/src/components/login.component.jsx b/html-client/src/components/login.component.jsx
index 8d31e7af..68b05fdf 100755
--- a/html-client/src/components/login.component.jsx
+++ b/html-client/src/components/login.component.jsx
@@ -4,11 +4,11 @@ const preact = require('preact');
 function renderLogin({ account, submitLogin, submitRegister }) {
     if (account) return (
         <div className="header-status">
+            <h3 className="header-username">{account.name}</h3>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" className="ping-svg">
               <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
               <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
             </svg>
-            <h3 className="header-username">{account.name}</h3>
         </div>
     );
 
diff --git a/html-client/src/components/molecule.jsx b/html-client/src/components/molecule.jsx
new file mode 100644
index 00000000..30960e83
--- /dev/null
+++ b/html-client/src/components/molecule.jsx
@@ -0,0 +1,4 @@
+const preact = require('preact');
+
+module.exports = (<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
+    <rect style="fill: none;"></rect><g transform="translate(-133.97462520598594, -116.025374794014) "><g><line x1="325.9602631261639" x2="296.95475676906796" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="433.01268739700697" y2="466.5063436985035" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="500" y2="466.5063436985035" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="299.038062191021" y2="265.5444058895245" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="232.050749588028" y2="265.5444058895245" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="500" x2="470.994493642904" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #1FF01F; stroke-width: 3; stroke-linecap: butt;"></line><line x1="441.98898728580804" x2="470.994493642904" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="470.994493642904" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="500" x2="470.994493642904" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="325.9602631261639" x2="296.95475676906796" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="354.96576948325986" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="354.96576948325986" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="412.98013156308195" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="412.98013156308195" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="325.9602631261639" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="325.9602631261639" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="383.9712758403558" x2="412.98013156308195" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="412.98013156308195" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="354.96576948325986" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="354.96576948325986" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="441.98898728580804" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="441.98898728580804" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g class="atom" transform="translate(267.949250411972, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 500) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 232.050749588028) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(267.949250411972, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g></g></svg>);
diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx
index 20e32d02..d066e0bf 100644
--- a/html-client/src/components/vbox.component.jsx
+++ b/html-client/src/components/vbox.component.jsx
@@ -71,7 +71,7 @@ function Vbox(args) {
 
     return (
         <div className="three columns">
-            <h3>vBox - {vbox.bits}b</h3>
+            <h3>VBOX <span className="u-pull-right">{vbox.bits}b</span></h3>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxDiscard()}>
@@ -93,7 +93,7 @@ function Vbox(args) {
                     {boundRows}
                 </tbody>
             </table>
-            <span>iCombinator</span>
+            <span>I-COMBINATOR</span>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxCombine()}>