Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

2019-04-08 14:19:05 +10:00 · 2019-04-08 14:19:05 +10:00 · 5aa9a1fa68
commit 5aa9a1fa68
parent b8789f831c 2f8ff69aee
13 changed files with 276 additions and 115 deletions
--- a/client/assets/icons/726.png
+++ b/client/assets/icons/726.png
--- a/client/cryps.css
+++ b/client/cryps.css
@ -10,7 +10,11 @@ html, body, .cryps {
    font-family: 'Jura';
    color: whitesmoke;
    font-size: 16pt;
+
    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;

    /* this is the sweet nectar to keep it full page*/
    height: 99%;
@ -395,33 +399,50 @@ header {
    min-width: 300px;
 }

+/*
+    INFO
+*/
 .thresholds {
    display: flex;
    flex-direction: row;
    justify-content: left;
 }

-.info-stats {
+.info-cryp .skills {
+    display: flex;
+}
+
+.info-cryp .skills .cryp-skill-btn {
+    border: 1px solid whitesmoke;
+}
+
+.info-cryp .stats, .info-cryp .specs {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
 }

-.info-stats .speed {
+.info-cryp .stats .speed {
    flex: 1 0 100%;
 }

-.info-stats figure {
+.info-cryp .stats figure {
    flex: 0 0 30%;
    border: 0;
    margin: 1em 0;
    text-align: center;
 }

-.info-stats .stat-icon {
+.info-cryp .stats .stat-icon {
    height: 2.5em;
 }

+.info-cryp .specs figure {
+    border: 0;
+    margin: 1em 0;
+    text-align: center;
+}
+

 /* CRYP BOX */
 .cryp-box {
@ -456,7 +477,7 @@ header {
    flex-flow: column;
 }

-.stats {
+.cryp-box .stats {
    flex: 0 0 20%;
    width: 100%;
    display: flex;
@ -492,7 +513,7 @@ header {
    border-right-width: 0px;
 }

-.cryp-skill-btn:first-child {
+.cryp-list .skills .cryp-skill-btn:first-child {
    border-top-width: 0;
 }

@ -581,6 +602,10 @@ header {
        order: 99;
    }

+    header {
+        font-size: 0.5em;
+    }
+
    .header-username {
        display: none;
    }
@ -636,8 +661,17 @@ header {
        flex: 1;
    }

+    .info-cryp {
+        text-align: center;
+    }
+
    .cryp-box {
-        margin: 0.5em;
+        margin: 0;
+        border-left-width: 0px;
+    }
+
+    .cryp-box:first-child {
+        border-left-width: 1px;
    }

    .spawn-btn button {
@ -685,7 +719,7 @@ header {
        height: 1em;
    }

-    .stats figcaption {
+    .cryp-list .stats figcaption {
        display: none;
    }

--- a/client/index.html
+++ b/client/index.html
@ -8,7 +8,7 @@
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name="description" content="cryps.gg - mnml pvp atbs">
    <meta name="author" content="ntr@smokestack.io">
-    <link rel="manifest" href="manifest.json">
+    <link rel="manifest" href="manifest.webmanifest">
    <link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
    <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
    <link rel="stylesheet" href="assets/normalize.css">
@ -17,5 +17,14 @@
  </head>
  <body>
  </body>
+  <script>
+    // Check that service workers are registered
+    if ('serviceWorker' in navigator) {
+      // Use the window load event to keep the page load performant
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('./service.worker.js');
+      });
+    }
+  </script>
  <script src="./index.js"></script>
 </html>
--- a/client/manifest.json
+++ b/client/manifest.json
@ -1,7 +0,0 @@
-{
-  "short_name": "cryps.gg",
-  "name": "cryps.gg - mnml pvp atbs",
-  "start_url": "/index.html",
-  "display": "fullscreen",
-  "orientation": "portrait"
-}
--- a/client/manifest.webmanifest
+++ b/client/manifest.webmanifest
@ -0,0 +1,22 @@
+{
+    "name": "cryps.gg - mnml pvp atbs",
+    "description": "cryps.gg - mnml pvp atbs",
+    "short_name": "cryps.gg",
+    "icons": [
+        {
+            "src": "./assets/icons/726.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        {
+            "src": "./assets/icons/726.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/index.html",
+    "display": "fullscreen",
+    "orientation": "portrait",
+    "theme_color": "#000000",
+    "background_color": "#000000"
+}
--- a/client/service.worker.js
+++ b/client/service.worker.js
@ -0,0 +1,13 @@
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function(response) {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+        return fetch(event.request);
+      }
+    )
+  );
+});
--- a/client/src/components/info.component.jsx
+++ b/client/src/components/info.component.jsx
@ -1,104 +1,143 @@
 const preact = require('preact');
-const { ITEMS: { SKILLS, SPECS, COLOURS } } = require('./constants');
-const { COLOUR_ICONS, STATS } = require('../utils');
+const range = require('lodash/range');
+
+const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./constants');
+const { COLOUR_ICONS, STATS, SPECS } = require('../utils');

 function Info(args) {
    const {
+        activeCryp,
        info,
        sendUnequip,
        instance,
    } = args;
-    if (!info.length) return (<div className="instance-info">&nbsp;</div>);
-    let red = 0; let blue = 0; let green = 0;
-    instance.cryps.forEach(cryp => {
-        red += cryp.colours.red;
-        blue += cryp.colours.blue;
-        green += cryp.colours.green;
-    });
-    const teamColours = { red, blue, green };
-    const [type, value] = info;
-    if (type === 'item') {
-        let itemDetails;
-        if (SKILLS[value]) {
-            itemDetails = SKILLS[value];
-        } else if (SPECS[value]) {
-            itemDetails = SPECS[value];
-        } else if (COLOURS[value]) {
-            itemDetails = COLOURS[value];
-        }
-        return (
-            <div className="instance-info">
-                {value} - {itemDetails.description}
-            </div>
-        );
-    }

-    if (type === 'skill') {
-        return (
-            <div className="instance-info">
-                <div>
-                    <div> {value.skill} </div>
-                    <div> {SKILLS[value.skill].description} </div>
-                    <button onClick={() => sendUnequip(value.cryp.id, value.skill)}>
+    function infoVar([type, value]) {
+        let red = 0; let blue = 0; let green = 0;
+        instance.cryps.forEach(cryp => {
+            red += cryp.colours.red;
+            blue += cryp.colours.blue;
+            green += cryp.colours.green;
+        });
+        const teamColours = { red, blue, green };
+
+        if (type === 'item') {
+            let itemDetails;
+            if (SKILLS[value]) {
+                itemDetails = SKILLS[value];
+            } else if (SPEC_CONSTANT[value]) {
+                itemDetails = SPEC_CONSTANT[value];
+            } else if (COLOURS[value]) {
+                itemDetails = COLOURS[value];
+            }
+            return (
+                <div className="info-var">
+                    {value} - {itemDetails.description}
+                </div>
+            );
+        }
+
+        if (type === 'skill') {
+            return (
+                <div className="info-skill">
+                    <div> {value.skill.skill} </div>
+                    <div> {SKILLS[value.skill.skill].description} </div>
+                    <button onClick={() => sendUnequip(value.cryp.id, value.skill.skill)}>
                    unequip
                    </button>
                </div>
-            </div>
-        );
-    }
+            );
+        }

-    function thresholds(t, spec) {
-        return (
-            SPECS[spec].colours.map((c, i) => (
-                <figure key={i} alt={c.colour}>
-                    {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
-                    <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
-                </figure>
-            ))
-        );
-    }
-
-
-    if (type === 'spec') {
-        const breaks = SPECS[value.spec].thresholds ? SPECS[value.spec].thresholds.map((t, i) => {
-            const threshold = thresholds(t, value.spec);
+        function thresholds(t, spec) {
            return (
-                <div className="thresholds" key={i} alt={t}>
-                    {threshold}
+                SPEC_CONSTANT[spec].colours.map((c, i) => (
+                    <figure key={i} alt={c.colour}>
+                        {COLOUR_ICONS[c].svg(`stat-icon ${COLOUR_ICONS[c].colour}`)}
+                        <figcaption>{Math.min(teamColours[c], t)} / {t}</figcaption>
+                    </figure>
+                ))
+            );
+        }
+
+        if (type === 'spec') {
+            const breaks = SPEC_CONSTANT[value.spec].thresholds ? SPEC_CONSTANT[value.spec].thresholds.map((t, i) => {
+                const threshold = thresholds(t, value.spec);
+                return (
+                    <div className="thresholds" key={i} alt={t}>
+                        {threshold}
+                    </div>
+                );
+            }) : null;
+            return (
+                <div className="info-spec">
+                    <div>
+                        <div> {value.spec} </div>
+                        <div> {SPEC_CONSTANT[value.spec].description} </div>
+                        {breaks}
+                    </div>
+                    <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
+                        unequip
+                    </button>
                </div>
            );
-        }) : null;
-        return (
-            <div className="instance-info">
-                <div>
-                    <div> {value.spec} </div>
-                    <div> {SPECS[value.spec].description} </div>
-                    {breaks}
-                </div>
-                <button onClick={() => sendUnequip(value.cryp.id, value.spec)}>
-                    unequip
-                </button>
-            </div>
-        );
+        }
    }

-    if (type === 'cryp') {
-        const cryp = value;
+    function infoCrypElement(cryp) {
+        // onClick={() => setInfo('skill', { skill: s, 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 right" >{s}</button>;
+        });
+
        const stats = Object.values(STATS).map((s, j) => (
            <figure key={j} alt={s.stat} className={s.stat}>
                {s.svg(`stat-icon ${s.colour}`)}
                <figcaption>{cryp[s.stat].value}</figcaption>
            </figure>
        ));
+
+        const specs = cryp.specs.map((s, i) => (
+            <figure key={i}>
+                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                <figcaption>{SPECS[s].caption}</figcaption>
+            </figure>
+        ));
+
+
        return (
-            <div className="instance-info">
+            <div className="info-cryp">
                <h5>{cryp.name}</h5>
-                <div className="info-stats">
+                <div className="stats">
                    {stats}
                </div>
+                <div className="specs">
+                    {specs}
+                </div>
+                <div className="skills">
+                    {skills}
+                </div>
            </div>
        );
    }
+
+    const infoCryp = activeCryp
+        ? infoCrypElement(activeCryp)
+        : null;
+
+    const otherInfo = info.length
+        ? infoVar(info)
+        : null;
+
+    return (
+        <div className="instance-info">
+            {infoCryp}
+            {otherInfo}
+        </div>
+    );
 }

 module.exports = Info;
--- a/client/src/components/info.container.jsx
+++ b/client/src/components/info.container.jsx
@ -6,12 +6,23 @@ const Info = require('./info.component');

 const addState = connect(
    function receiveState(state) {
-        const { info, ws, instance } = state;
+        const {
+            activeCryp,
+            info,
+            ws,
+            instance,
+        } = state;
+
        function sendUnequip(crypId, item) {
            return ws.sendVboxUnequip(instance.instance, crypId, item);
        }

-        return { info, sendUnequip, instance };
+        return {
+            activeCryp,
+            info,
+            sendUnequip,
+            instance,
+        };
    }
 /*
    function receiveDispatch(dispatch) {
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@ -7,15 +7,30 @@ const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
 const molecule = require('./molecule');

-const shapes = require('./shapes');
-const { STATS, SPECS } = require('../utils');
+const { SPECS } = require('../utils');
+
+function Cryp(props) {
+    const {
+        cryp,
+        sendVboxApply,
+        setInfo,
+        activeVar,
+        setActiveCryp,
+    } = props;

-function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
    const skills = range(0, 4).map(i => {
-        const s = cryp.skills[i]
-            ? cryp.skills[i].skill
+        const skill = cryp.skills[i];
+        const s = skill
+            ? skill.skill
            : (<span>&nbsp;</span>);
-        return <button key={i} className="cryp-skill-btn right" onClick={() => setInfo('skill', { skill: s, cryp })}>{s}</button>;
+
+        function skillClick() {
+            if (!skill) return false;
+            setInfo('skill', { skill, cryp });
+            return setActiveCryp(cryp);
+        }
+
+        return <button key={i} className="cryp-skill-btn right" onClick={skillClick} >{s}</button>;
    });

    // needed for ondrop to fire
@ -36,17 +51,22 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
        e.preventDefault();

        if (activeVar !== null) return sendVboxApply(cryp.id, activeVar);
-        document.getElementsByClassName('instance-info')[0].scrollIntoView();
-
-        return setInfo('cryp', cryp);
+        return setActiveCryp(cryp);
    }

-    const specs = cryp.specs.map((s, i) => (
-        <figure key={i} onClick={() => setInfo('spec', { spec: s, cryp })}>
-            {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
-            <figcaption>{SPECS[s].caption}</figcaption>
-        </figure>
-    ));
+    const specs = cryp.specs.map((s, i) => {
+        function specClick() {
+            setActiveCryp(cryp);
+            setInfo('spec', { spec: s, cryp });
+        }
+        return (
+            <figure key={i} onClick={specClick}>
+                {SPECS[s].svg(`stat-icon ${SPECS[s].colour}`)}
+                <figcaption>{SPECS[s].caption}</figcaption>
+            </figure>
+        );
+    });
+
    const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
    const colours = mapValues(cryp.colours, c => {
        if (cTotal === 0) return 245;
@ -84,19 +104,27 @@ function InstanceComponent(args) {
        // account,
        instance,
        quit,
+        // clearInfo,
        sendInstanceReady,
        sendVboxApply,
        setInfo,
        activeVar,
        setActiveVar,
+        setActiveCryp,
    } = args;

    if (!instance) return <div>...</div>;

-    const cryps = instance.cryps.map((c, i) => Cryp(c, sendVboxApply, setInfo, activeVar));
+    const cryps = instance.cryps.map((c, i) => Cryp({
+        cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp,
+    }));
+
+    function onClick(e) {
+        setActiveVar(null);
+    }

    return (
-        <main className="instance" onClick={() => setActiveVar(null)} >
+        <main className="instance" onClick={onClick} >
            <div className="instance-hdr">
                <button
                    className="instance-btn instance-ui-btn menu-btn left"
--- a/client/src/components/instance.container.jsx
+++ b/client/src/components/instance.container.jsx
@ -19,7 +19,7 @@ const addState = connect(
        return { instance, account, sendInstanceReady, sendVboxApply, activeVar };
    },

-    function receiveDispatch(dispatch, { instance, combiner }) {
+    function receiveDispatch(dispatch) {
        function quit() {
            dispatch(actions.setInstance(null));
        }
@ -32,7 +32,15 @@ const addState = connect(
            dispatch(actions.setActiveVar(value));
        }

-        return { quit, setInfo, setActiveVar };
+        function setActiveCryp(value) {
+            dispatch(actions.setActiveCryp(value));
+        }
+
+        function clearInfo() {
+            return dispatch(actions.setInfo([]));
+        }
+
+        return { quit, clearInfo, setInfo, setActiveVar, setActiveCryp };
    }

 );
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@ -88,14 +88,11 @@ function Vbox(args) {

    let boundTimer;
    function boundTouchStart(e, i) {
-        e.preventDefault();
-        e.stopPropagation();
+        // e.preventDefault();
+        // e.stopPropagation();
        boundTimer = (setTimeout(() => {
-            const insert = combiner.findIndex(j => j === null);
-            if (insert === -1) return setCombiner([i, null, null]);
-            combiner[insert] = i;
            boundTimer = null;
-            return setCombiner(combiner);
+            return setActiveVar(i);
        }, LONG_TOUCH_TIME));
        return true;
    }
@ -105,7 +102,12 @@ function Vbox(args) {
            clearTimeout(boundTimer);

            if (reclaiming && i) sendVboxReclaim(i);
-            else if (vbox.bound[i]) setActiveVar(i);
+            else if (vbox.bound[i]) {
+                const insert = combiner.findIndex(j => j === null);
+                if (insert === -1) return setCombiner([i, null, null]);
+                combiner[insert] = i;
+                return setCombiner(combiner);
+            }
        }
        return true;
    }
--- a/client/src/components/vbox.container.jsx
+++ b/client/src/components/vbox.container.jsx
@ -6,7 +6,7 @@ const Vbox = require('./vbox.component');

 const addState = connect(
    function receiveState(state) {
-        const { ws, instance, combiner, reclaiming, activeVar } = state;
+        const { ws, instance, combiner, reclaiming, activeVar, info } = state;

        function sendVboxDiscard() {
            return ws.sendVboxDiscard(instance.instance);
@ -29,6 +29,7 @@ const addState = connect(
            combiner,
            reclaiming,
            activeVar,
+            info,
            sendVboxAccept,
            sendVboxDiscard,
            sendVboxReclaim,
--- a/server/WORKLOG.md
+++ b/server/WORKLOG.md
@ -19,6 +19,7 @@
 *CLIENT*
 * general
  * icons change with %
+  * colour vbox icons
 * instance
  * cryp / vbox page separation