vbox accept

html-client/cryps.css

@@ -1,3 +1,6 @@
+/*
+    GLOBAL
+*/
 body {
     background-color: #000000;
     font-family: 'Jura';
@@ -22,6 +25,66 @@ button:hover {
     border-color: whitesmoke;
 }
 
+/*
+    MENU
+*/
+.header {
+    margin-bottom: 2em;
+}
+
+.home-cryp {
+}
+
+.background {
+    min-height: 100%;
+    min-width: 100%;
+    position: absolute;
+    z-index: -1000;
+    background-color: #000000
+}
+
+.cryps-title {
+    font-size: 200%;
+    display: inline;
+}
+
+.login {
+    display: inline;
+    margin-right: 0;
+}
+
+.header-username {
+    display: inline;
+}
+
+.header-status {
+    text-align: right;
+}
+
+.ping-svg {
+    background-color: black;
+    height: 1em;
+    margin-right: 1em;
+}
+
+.ping-path {
+    stroke: #f5f5f5;
+    fill: none;
+    stroke-width: 4;
+    stroke-dasharray: 121, 242;
+    animation: pulse 2s infinite linear;
+}
+
+@keyframes pulse {
+  0% {
+    stroke-dashoffset: 363;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+
 @keyframes whiteglow {
     0% {
         box-shadow: 0 0 0px whitesmoke;
@@ -57,6 +120,9 @@ button:hover {
     }
 }
 
+/*
+    INSTANCE
+*/
 .green-btn:hover {
     animation: greenglow 2s ease 0s 1 normal forwards;
     animation-iteration-count: 1;
@@ -81,6 +147,7 @@ button:hover {
     padding: 0.5em;
     background-color: whitesmoke;
     color: black;
+    user-select: none;
 }
 
 .vbox-btn:hover {
@@ -88,39 +155,6 @@ button:hover {
     animation: whiteblackglow 2s ease 0s 1 normal forwards;
 }
 
-.header {
-    margin-bottom: 2em;
-}
-
-.home-cryp {
-}
-
-.background {
-    min-height: 100%;
-    min-width: 100%;
-    position: absolute;
-    z-index: -1000;
-    background-color: #000000
-}
-
-.cryps-title {
-    font-size: 200%;
-    display: inline;
-}
-
-.login {
-    display: inline;
-    margin-right: 0;
-}
-
-.header-username {
-    display: inline;
-}
-
-.header-status {
-    text-align: right;
-}
-
 .vbox-table {
     table-layout: fixed;
     width: 100%;
@@ -131,35 +165,13 @@ button:hover {
     padding: 0.5em;
     text-align: center;
     height: 40px;
+    cursor: pointer;
 }
 
 .vbox-table th:first-child, td:first-child {
     padding: 0.5em;
 }
 
-.ping-svg {
-    background-color: black;
-    height: 1em;
-    margin-right: 1em;
-}
-
-.ping-path {
-    stroke: #f5f5f5;
-    fill: none;
-    stroke-width: 4;
-    stroke-dasharray: 121, 242;
-    animation: pulse 2s infinite linear;
-}
-
-@keyframes pulse {
-  0% {
-    stroke-dashoffset: 363;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
 .spacer {
     min-width: 100%;
 }

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

@@ -9,6 +9,7 @@ function Vbox(args) {
     const {
         instance,
         combiner,
+        sendVboxAccept,
         sendVboxDiscard,
         sendVboxReclaim,
         sendVboxCombine,
@@ -18,17 +19,25 @@ function Vbox(args) {
     if (!instance.vbox) return false;
 
     const free = [];
-    for (let i = 0 ; i < vbox.free[0].length; i++) {
+    for (let i = 0 ; i < 6; i++) {
         free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
     }
 
-    const freeRows = free.map((row, i) => (
-        <tr key={i}>
-            <td>{convertVar(row[0])}</td>
-            <td>{convertVar(row[1])}</td>
-            <td>{convertVar(row[2])}</td>
-        </tr>
-    ));
+    const freeRows = free.map((row, i) => {
+        const cells = row.map((c, j) => (
+            <td
+                key={j}
+                onClick={() => c && sendVboxAccept(j, i)} >
+                {convertVar(c)}
+            </td>
+        ));
+
+        return (
+            <tr key={i}>
+                {cells}
+            </tr>
+        );
+    });
 
     const boundRows = [
         <tr key={0} >
@@ -62,7 +71,7 @@ function Vbox(args) {
 
     return (
         <div className="three columns">
-            <span>vBox</span>
+            <h3>vBox - {vbox.bits}b</h3>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxDiscard()}>

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

@@ -12,6 +12,10 @@ const addState = connect(
             return ws.sendVboxDiscard(instance.instance);
         }
 
+        function sendVboxAccept(group, index) {
+            return ws.sendVboxAccept(instance.instance, group, index);
+        }
+
         function sendVboxCombine() {
             return console.log('combine', combiner);
             return ws.sendVboxDiscard(instance.instance);
@@ -25,6 +29,7 @@ const addState = connect(
         return {
             instance,
             combiner,
+            sendVboxAccept,
             sendVboxDiscard,
             sendVboxReclaim,
             sendVboxCombine,