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

html-client/cryps.css

@@ -19,15 +19,29 @@ button, input {
     border-color: whitesmoke;
     border-radius: 0;
     letter-spacing: 0.25em;
+    box-sizing: border-box;
+
+    /*the transitions */
+    transition-property: box-shadow;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
 }
 
-/*colour necesary to bash skellington*/
+button:hover, button:focus {
-button:hover {
+    /*colour necesary to bash skellington*/
     color: whitesmoke;
-    animation: whiteglow 2000ms infinite;
     border-color: whitesmoke;
 }
 
+button.right:hover, button.right:focus {
+    box-shadow: inset -0.5em 0 0 0 whitesmoke;
+}
+
+button.left:hover, button.left:focus {
+    box-shadow: inset 0.5em 0 0 0 whitesmoke;
+}
+
 /*
     MENU
 */
@@ -51,7 +65,7 @@ button:hover {
     height: 100%;
     margin: 0.5em;
     box-sizing: border-box;
-    border: 2px solid whitesmoke;
+    border: 1px solid black;
 }
 
 .background {
@@ -91,10 +105,10 @@ button:hover {
     fill: none;
     stroke-width: 4px;
     stroke-dasharray: 121, 242;
-    animation: pulse 2s infinite linear;
+    animation: saw 2s infinite linear;
 }
 
-@keyframes pulse {
+@keyframes saw {
     0% {
         stroke-dashoffset: 363;
     }
@@ -103,50 +117,17 @@ button:hover {
     }
 }
 
-
-@keyframes whiteglow {
-    0% {
-        box-shadow: 0 0 0px whitesmoke;
-    }
-    20% {
-        box-shadow: 0 0 20px whitesmoke;
-    }
-    60% {
-        box-shadow: 0 0 20px whitesmoke;
-    }
-    100% {
-        box-shadow: 0 0 0px whitesmoke;
-    }
-}
-
-@keyframes greenglow {
-    0% {
-        box-shadow: 0 0 -20px forestgreen;
-    }
-    100% {
-        box-shadow: 0 0 30px forestgreen;
-        color: forestgreen;
-        border-color: forestgreen;
-    }
-}
-
-@keyframes whiteblackglow {
-    0% {
-        box-shadow: 0 0 0px black;
-    }
-    100% {
-        background: whitesmoke;
-        color: black;
-        box-shadow: 0 0 -30px black;
-    }
-}
-
 /*
     INSTANCE
 */
+
 .green-btn:hover {
-    animation: greenglow 2s ease 0s 1 normal forwards;
+    transition-property: all;
-    animation-iteration-count: 1;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+    color: forestgreen;
+    border-color: forestgreen;
+    /*box-shadow: inset -0.5em 0 0 0 forestgreen;*/
 }
 
 .instance-btn {
@@ -185,7 +166,6 @@ button:hover {
 
 .vbox-btn:hover {
     color: black;
-    animation: whiteblackglow 2s ease 0s 1 normal forwards;
 }
 
 .vbox-table {
@@ -304,9 +284,13 @@ button:hover {
     flex: 1 1 60%;
 }
 
-.cryp-skill-btn.active {
+.cryp-skill-btn[disabled] {
-    animation: whiteblackglow 1s ease 0s 1 normal forwards;
+    color: #333333;
-    animation-iteration-count: 1;
+}
+
+.game-cryp-ctr.ko {
+    animation: none;
+    opacity: 0.5;
 }
 
 .stack {

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]
+            const s = cryp.skills[i];
-                ? cryp.skills[i].skill
+            if (!s) {
-                : (<span>&nbsp;</span>);
+                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,13 +33,11 @@ function Vbox(args) {
             return sendVboxReclaim(i);
         }
 
-        if (combiner.indexOf(i) === -1) {
         const insert = combiner.findIndex(j => j === null);
+        if (insert === -1) return setCombiner([i, null, null]);
         combiner[insert] = i;
         return setCombiner(combiner);
     }
-        return setCombiner([i, null, null]);
-    }
 
     function combinerRmv(i) {
         combiner[i] = null;
@@ -72,7 +70,16 @@ function Vbox(args) {
         );
     });
 
-    const boundTds = range(0, 9).map(i => (
+    const boundTds = range(0, 9).map(i => {
+        if (combiner.indexOf(i) > -1) {
+            return (
+                <td
+                    key={i}>
+                    &nbsp;
+                </td>
+            );
+        }
+        return (
             <td
                 key={i}
                 draggable="true"
@@ -80,7 +87,8 @@ function Vbox(args) {
                 onClick={() => boundClick(i) }>
                 {convertVar(vbox.bound[i])}
             </td>
-    ));
+        );
+    });
 
     const boundRows = [
         <tr key={0} >

server/WORKLOG.md

@@ -26,8 +26,6 @@ put ticks on stack at start of phase
 cryp vbox
   update defensives in skill.rs
 
-  Skill::Slay     -> red attack with bonus somethingorother for blue / maim no healing
-
 consolidate buffs debuffs and disables
   no more red/blue