Merge branch 'return-of-react' of ssh://cryps.gg:40022/~/cryps into return-of-react

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

@@ -48,10 +48,24 @@ function GamePanel(props) {
     }
 
     function Cryp(cryp) {
+        const ko = cryp.hp.value === 0 ? 'ko' : '';
+
         const skills = range(0, 4).map(i => {
-            const s = cryp.skills[i]
-                ? cryp.skills[i].skill
-                : (<span>&nbsp;</span>);
+            const s = cryp.skills[i];
+            if (!s) {
+                return (
+                    <button
+                        disabled='true'
+                        key={i}
+                        className='cryp-skill-btn disabled'>
+                        <span>&nbsp;</span>
+                    </button>
+                );
+            }
+
+            const cdText = cryp.skills[i].cd > 0
+                ? `- ${s.cd}`
+                : '';
 
             const highlight = activeSkill
                 ? activeSkill.crypId === cryp.id && activeSkill.skill === s
@@ -60,9 +74,11 @@ function GamePanel(props) {
             return (
                 <button
                     key={i}
-                    className={`cryp-skill-btn ${highlight ? 'active' : ''}`}
+                    disabled={!!cdText || ko}
+                    className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
                     type="submit"
-                    onClick={() => setActiveSkill(cryp.id, s)}>{s}
+                    onClick={() => setActiveSkill(cryp.id, s.skill)}>
+                    {s.skill} {cdText}
                 </button>
             );
         });
@@ -80,8 +96,9 @@ function GamePanel(props) {
             </figure>
         ));
 
+
         return (
-            <div className="game-cryp-ctr" >
+            <div className={`game-cryp-ctr ${ko}`} >
                 <div
                     key={cryp.id}
                     style={ activeSkill ? { cursor: 'pointer' } : {}}
@@ -160,7 +177,7 @@ function GamePanel(props) {
             <div className="row">
                 <div className="three columns">
                     <button
-                        className="instance-btn instance-ui-btn glow-btn"
+                        className="instance-btn instance-ui-btn left"
                         onClick={quit}>
                         Back
                     </button>

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

@@ -84,7 +84,7 @@ function InstanceComponent(args) {
             <div className="row">
                 <div className="three columns">
                     <button
-                        className="instance-btn instance-ui-btn glow-btn"
+                        className="instance-btn instance-ui-btn left"
                         onClick={quit}>
                         Menu
                     </button>

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

@@ -8,20 +8,20 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
 
     const instanceJoin = (
         <button
-            className="instance-btn glow-btn"
+            className="instance-btn right"
             onClick={() => sendInstanceJoin()}>
             Join New Instance
         </button>
     );
 
-    const instancePanels = instances.map((instance) => {
+    const instancePanels = instances.map(instance => {
         const name = instance.instance === NULL_UUID
             ? 'Normal Mode'
             : `${instance.instance.substring(0, 5)}`;
 
         return (
             <button
-                className="instance-btn glow-btn"
+                className="instance-btn right"
                 key={instance.id}
                 onClick={() => setActiveInstance(instance)}>
                 {name}

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

@@ -33,12 +33,10 @@ function Vbox(args) {
             return sendVboxReclaim(i);
         }
 
-        if (combiner.indexOf(i) === -1) {
-            const insert = combiner.findIndex(j => j === null);
-            combiner[insert] = i;
-            return setCombiner(combiner);
-        }
-        return setCombiner([i, null, null]);
+        const insert = combiner.findIndex(j => j === null);
+        if (insert === -1) return setCombiner([i, null, null]);
+        combiner[insert] = i;
+        return setCombiner(combiner);
     }
 
     function combinerRmv(i) {
@@ -72,15 +70,25 @@ function Vbox(args) {
         );
     });
 
-    const boundTds = range(0, 9).map(i => (
-        <td
-            key={i}
-            draggable="true"
-            onDragStart={e => e.dataTransfer.setData('text', i)}
-            onClick={() => boundClick(i) }>
-            {convertVar(vbox.bound[i])}
-        </td>
-    ));
+    const boundTds = range(0, 9).map(i => {
+        if (combiner.indexOf(i) > -1) {
+            return (
+                <td
+                    key={i}>
+                    &nbsp;
+                </td>
+            );
+        }
+        return (
+            <td
+                key={i}
+                draggable="true"
+                onDragStart={e => e.dataTransfer.setData('text', i)}
+                onClick={() => boundClick(i) }>
+                {convertVar(vbox.bound[i])}
+            </td>
+        );
+    });
 
     const boundRows = [
         <tr key={0} >