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

html-client/cryps.css

@@ -6,7 +6,9 @@ body {
     font-family: 'Jura';
     color: whitesmoke;
     font-size: 16pt;
-    padding: 1em;
+    padding: 1em 2em;
+    overflow: hidden;
+    user-select: none;
 }
 
 button, input {
@@ -29,7 +31,7 @@ button:hover {
     MENU
 */
 .header {
-    margin-bottom: 2em;
+    margin-bottom: 1.5em;
 }
 
 .home-cryp {
@@ -61,16 +63,15 @@ button:hover {
     text-align: right;
 }
 
-.ping-svg {
+.header-status svg {
-    background-color: black;
+    margin-left: 1em;
     height: 1em;
-    margin-right: 1em;
+    background-color: black;
 }
 
 .ping-path {
-    stroke: #f5f5f5;
     fill: none;
-    stroke-width: 4;
+    stroke-width: 4px;
     stroke-dasharray: 121, 242;
     animation: pulse 2s infinite linear;
 }
@@ -142,12 +143,24 @@ button:hover {
     padding: 0;
 }
 
+.vbox-hdr {
+    display: flex;
+    align-items: flex-end;
+}
+
+.vbox-hdr div {
+    flex-grow: 1;
+}
+
+.vbox-hdr h3 {
+    margin: 0;
+}
+
 .vbox-btn {
     margin: 0;
     padding: 0.5em;
     background-color: whitesmoke;
     color: black;
-    user-select: none;
 }
 
 .vbox-btn:hover {
@@ -174,4 +187,57 @@ button:hover {
 
 .spacer {
     min-width: 100%;
-}
+}
+
+/* CRYP BOX */
+.cryp-box {
+    display: flex;
+    flex-wrap: wrap;
+    /*
+        this controls the size of the box
+        as it fills the whole container
+    */
+    padding: 0 2em 0 0;
+    margin: 0 0 2em 0;
+}
+
+.cryp-box figure {
+    margin: 0;
+    flex-grow: 1;
+    border: 1px solid whitesmoke;
+}
+
+.cryp-box .skills {
+    width: 50%;
+}
+
+.cryp-skill-btn {
+    font-size: 125%;
+    border-width: 1px;
+    width: 100%;
+    height: 25%;
+    padding: 0;
+    margin: 0;
+    border-left-width: 0px;
+    border-bottom-width: 0px;
+}
+
+.cryp-skill-btn:last-child {
+    border-bottom-width: 1px;
+}
+
+.cryp-box .stats {
+    display: flex;
+    width: 100%;
+    text-align: center;
+}
+
+.cryp-box .stats figure {
+    border-top-width: 0;
+    flex: 1 1 0;
+}
+
+.cryp-box .stats svg {
+    height: 1em;
+    stroke-width: 2px;
+}

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"

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

@@ -1,7 +1,49 @@
 const preact = require('preact');
 // const key = require('keymaster');
+const range = require('lodash/range');
 
 const VboxContainer = require('./vbox.container');
+const molecule = require('./molecule');
+const saw = require('./saw.component');
+
+function Cryp(cryp) {
+    const skills = range(0, 4).map((i) => {
+        const s = cryp.skills[i]
+            ? cryp.skills[i].skill
+            : (<span>&nbsp;</span>);
+
+        return <button key={i} className="cryp-skill-btn" >{s}</button>;
+    });
+
+    const stats = [
+        { stat: 'hp', colour: '#1FF01F' },
+        { stat: 'green_damage', colour: '#1FF01F' },
+        { stat: 'red_shield', colour: '#a52a2a' },
+        { stat: 'red_damage', colour: '#a52a2a' },
+        { stat: 'blue_shield', colour: '#3498db' },
+        { stat: 'blue_damage', colour: '#3498db' },
+        { stat: 'speed', colour: '#FFD123' },
+    ].map((s, i) => (
+        <figure key={i} >
+            {saw(s.colour)}
+            <figcaption>{cryp[s.stat].value}</figcaption>
+        </figure>
+    ));
+
+    return (
+        <div className="cryp-box">
+            <figure className="img">
+                {molecule}
+            </figure>
+            <div className="skills">
+                {skills}
+            </div>
+            <div className="stats">
+                {stats}
+            </div>
+        </div>
+    );
+}
 
 function InstanceComponent(args) {
     const {
@@ -13,6 +55,8 @@ function InstanceComponent(args) {
 
     if (!instance) return <div>...</div>;
 
+    const cryps = instance.cryps.map(Cryp);
+
     return (
         <section>
             <div className="row">
@@ -24,7 +68,7 @@ function InstanceComponent(args) {
                     </button>
                 </div>
                 <div className="six columns">
-                    <h4>next game against: mmmmmashy</h4>
+                    <div>&nbsp;</div>
                 </div>
                 <div className="three columns">
                     <button
@@ -37,7 +81,7 @@ function InstanceComponent(args) {
             <div className="row">
                 <VboxContainer />
                 <div className="three columns">
-                    {JSON.stringify(instance.cryps)}
+                    {cryps}
                 </div>
             </div>
         </section>

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;

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

@@ -1,14 +1,13 @@
 // eslint-disable-next-line
 const preact = require('preact');
 
+const saw = require('./saw.component');
+
 function renderLogin({ account, submitLogin, submitRegister }) {
     if (account) return (
         <div className="header-status">
-            <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>
+            {saw('whitesmoke')}
         </div>
     );
 

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

@@ -0,0 +1,10 @@
+const preact = require('preact');
+
+module.exports = function saw(colour) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={{ stroke: colour }}>
+          <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
+          <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
+        </svg>
+    );
+}

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

@@ -71,7 +71,10 @@ function Vbox(args) {
 
     return (
         <div className="three columns">
-            <h3>vBox - {vbox.bits}b</h3>
+            <div className="vbox-hdr">
+                <div>VBOX</div>
+                <h3>{vbox.bits}b</h3>
+            </div>
             <button
                 className="instance-btn instance-ui-btn vbox-btn"
                 onClick={() => sendVboxDiscard()}>
@@ -93,7 +96,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()}>

server/WORKLOG.md

@@ -26,21 +26,13 @@ consolidate buffs debuffs and disables
 make strike *really* hit first / resolve at same time?
 
 ## SOON
-* Descriptions
-  * Stats - How they work
-  * Items - What they give
-    * Skills - What they do
-    * Specs - Bonuses
-
-* Balance Buff / Debuff durations
-* Balance Spec / Skill multipliers
-
 * vbox drops chances
   * 50% spec, 25% colour etc
 
 * confirm cryp without skill ready
+  * draw big warning !
+
 * iconography
-* aoe skills
 * combo skills
 
 * skills