Merge branch 'develop' of ssh://mnml.gg:40022/~/mnml into develop

2019-07-23 15:05:19 +10:00 · 2019-07-23 15:05:19 +10:00 · d03eec1423
commit d03eec1423
parent a816e75554 4c6ee01b5d
9 changed files with 254 additions and 159 deletions
--- a/client/assets/styles/instance.less
+++ b/client/assets/styles/instance.less
@ -173,96 +173,89 @@
    border-left-width: 1px;
 }

-.construct-list .name {
-    grid-area: name;
-    margin-bottom: 0.5em;
-}
+.construct-list {
+    .avatar {
+        grid-area: avatar;
+        object-fit: contain;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        pointer-events: none;
+    }

-.construct-list .avatar {
-    grid-area: avatar;
-    object-fit: contain;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    pointer-events: none;
-}
+    .name {
+        grid-area: name;
+        margin-bottom: 0.5em;
+        text-align: center;
+    }

-.construct-list .name {
-    text-align: center;
-}
+    .skills {
+        grid-area: skills;
+        padding: 0 0.5em;
+        margin-bottom: 0.75em;

-.construct-list .skills {
-    grid-area: skills;
-    display: flex;
-    border-width: 0px;
-}
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 0 0.5em;

-.construct-list .skills button {
-    flex: 1;
-    /*border: 1px solid #222;*/
-    border: none;
-}
+        button {
+            height: 3em;
+        }
+    }

-.construct-list .specs {
-    margin-top: 1em;
-    grid-area: specs;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    border-width: 0px;
-}
+    .specs {
+        grid-area: specs;
+        padding: 0 0.5em;

-.construct-list .specs figure {
-    flex: 1;
-    border: 0;
-    align-items: center;
-    text-align: center;
-}
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 0 0.5em;

-.construct-list .specs figcaption {
-    font-size: 75%;
-}
+        button {
+            padding: 0.25em 0;
+        }

-.construct-list .stats {
-    grid-area: stats;
-    display: flex;
-    flex-flow: row;
-    flex: 1;
-    border-width: 0px;
-    text-align: center;
-}
+        figure {
+            flex: 1;
+            align-items: center;
+            text-align: center;
+        }

-.construct-list .stats figcaption {
-    font-size: 75%;
-}
+        figcaption {
+            font-size: 75%;
+            line-height: initial;
+        }
+    }

-.stats div:nth-child(4n) {
-    margin: 0 1em;
-}
+    .stats {
+        grid-area: stats;
+        display: flex;
+        flex-flow: row;
+        flex: 1;
+        border-width: 0px;
+        text-align: center;

-.stats div {
-    flex: 1;
-}
+        figcaption {
+            font-size: 75%;
+        }

-.construct-list .stats .damage-label {
-    grid-area: dl;
-    display: flex;
-    justify-content: center;
-    color: #666;
-}
+        // give speed some space
+        div:nth-child(4n) {
+            margin: 0 1em;
+        }

-.construct-list .stats .speed-label {
-    grid-area: sl;
-    display: flex;
-    justify-content: center;
-    color: #666;
-}
+        div {
+            flex: 1;
+        }
+    }

-.construct-list .stats .life-label {
-    grid-area: ll;
-    display: flex;
-    justify-content: center;
-    color: #666;
+    button {
+        margin: 0;
+
+        &.empty {
+            border-style: dashed;
+        }
+    }
 }

 /* Equipment */
@ -294,19 +287,6 @@
    flex: 1 0 100%;
 }

-.equip .skills {
-    flex: 1;
-    border: 2px solid #222;
-}
-
-.equip .skills button {
-    color: whitesmoke;
-    font-size: 1em;
-    padding: 0.2em;
-    border-width: 0px;
-    margin-bottom: 0.5em;
-}
-
 .equipping {
  position: relative;
 }
@ -349,11 +329,6 @@
    }
 }

-.equip .specs figure {
-    border: 0;
-    text-align: center;
-}
-
 .equip-spec {
    position: relative;
    stroke: #333;
@ -372,10 +347,6 @@
    opacity: 0;
 }

-.equip .specs figcaption {
-    font-size: 75%;
-}
-
 .thresholds {
    display: flex;
    flex-flow: column;
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@ -15,17 +15,17 @@
    .vbox-colours {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
        align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;
    }

    .vbox-items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 1em 2em;
+        grid-gap: 0.5em 1em;
        align-items: center;
-        margin-bottom: 1em;
+        margin-bottom: 0.5em;

        button {
            width: 100%;
@ -38,6 +38,8 @@
        background-color: @gray;
        border-width: 0;

+        height: 3em;
+
        :active, :hover, :focus {
            color: white;
        }
@ -62,9 +64,11 @@
    }

    button {
-        height: 3em;
+        height: 4em;
        margin: 0;

+        // text-transform: none;
+
        &.empty {
            border-style: dashed;
        }
@ -73,10 +77,26 @@
            color: black;
            background: @white;
            border: 1px solid @white;
+
+            ellipse.white {
+                stroke: black;
+            }
        }
    }

    svg {
        stroke: none;
    }
+
+    // figures don't scale well
+    figure {
+        svg {
+            height: 2em;
+            stroke-width: 8px;
+        }
+
+        figcaption {
+            line-height: initial;
+        }
+    }
 }
--- a/client/index.js
+++ b/client/index.js
@ -1,6 +1,6 @@
 require('./assets/styles/styles.css');
 require('./assets/styles/styles.mobile.css');
-require('./assets/styles/instance.css');
+require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/instance.mobile.css');
 require('./assets/styles/game.css');
--- a/client/src/components/instance.constructs.jsx
+++ b/client/src/components/instance.constructs.jsx
@ -124,12 +124,12 @@ function Construct(props) {
        }

        // const action = skill ? '' : 'action';
-        const equip = skillList.includes(vbox.bound[itemEquip]) && !skill ? 'equipping' : '';
-        const classes = `${equip}`;
+        const equipping = skillList.includes(vbox.bound[itemEquip]) && !skill;
+        const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''}`;
        return (
            <button
                key={i}
-                disabled={!skill && itemEquip === null}
+                disabled={!skill && !equipping}
                class={classes}
                onClick={skillClick}
                onDblClick={skillDblClick}
@ -143,12 +143,12 @@ function Construct(props) {
        const s = construct.specs[i];

        if (!s) {
-            const equip = specList.includes(vbox.bound[itemEquip]) ? 'equip-spec' : 'gray';
+            const equipping = specList.includes(vbox.bound[itemEquip]);
+            const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
            return (
-                <figure key={i} class={equip} >
-                    {shapes.diamond(equip)}
-                    <figcaption>&nbsp;</figcaption>
-                </figure>
+                <button key={i} class={classes} disabled={!equipping} >
+                    {shapes.None()}
+                </button>
            );
        }

@ -171,14 +171,13 @@ function Construct(props) {


        return (
-            <figure
+            <button
                key={i}
                onClick={specClick}
                onDblClick={specDblClick}
                onMouseOver={e => hoverInfo(e, s)} >
                {shapes[s]()}
-                <figcaption>{s}</figcaption>
-            </figure>
+            </button>
        );
    });

--- a/client/src/components/nav.jsx
+++ b/client/src/components/nav.jsx
@ -1,15 +1,9 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
-const { Fragment } = require('preact');

-const { postData } = require('../utils');
-console.log(postData);
 const actions = require('../actions');
 const AccountStatus = require('./account.status');

-const testGame = process.env.NODE_ENV === 'development' && require('./../test.game');
-const testInstance = process.env.NODE_ENV === 'development' && require('./../test.instance');
-
 const addState = connect(
    function receiveState(state) {
        const {
@ -115,15 +109,6 @@ function Nav(args) {
        return <button key={i.id} onClick={() => joinInstance(i)} >{`${phase} ${score.wins} / ${score.losses}`}</button>
    });

-    const haxSection = process.env.NODE_ENV === 'development'
-        ? (
-            <Fragment>
-                <h2>Hax</h2>
-                <button onClick={() => setTestGame(account.id)}>Test Game</button>
-                <button onClick={() => setTestInstance(account.id)}>Test Instance</button>
-            </Fragment>)
-        : null;
-
    const canJoin = team.some(c => !c);

    return (
@ -134,7 +119,6 @@ function Nav(args) {
            <button class="play-btn" disabled={canJoin} onClick={() => navTo('list')}>Play</button>
            <hr />
            {joined}
-            {haxSection}
        </nav>
    );
 }
--- a/client/src/components/shapes.jsx
+++ b/client/src/components/shapes.jsx
@ -1,3 +1,5 @@
+const preact = require('preact');
+
 const circle = require('./svgs/circle');
 const diamond = require('./svgs/diamond');
 const hexagon = require('./svgs/hexagon');
@ -20,6 +22,10 @@ module.exports = {
    saw,
    vboxColour,

+    Red: () => vboxColour('red'),
+    Green: () => vboxColour('green'),
+    Blue: () => vboxColour('blue'),
+
    // stats
    RedLife: () => square(['red']),
    GreenLife: () => square(['green']),
@ -29,33 +35,145 @@ module.exports = {
    BluePower: () => circle(['blue']),
    Speed: () => triangle(['white']),

+
    // specs
    // Base
-    Power: () => circle(['white']),
-    Life: () => square(['white']),
-    // Speed,
+
+    None: () =>
+    <figure>
+        {diamond(['gray'])}
+        <figcaption>&nbsp;</figcaption>
+    </figure>,
+
+
+    Power: () =>
+    <figure>
+        {circle(['white'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    Life: () =>
+    <figure>
+        {square(['white'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    // Speed:
+    // <figure>
+    //     {triangle(['white'])}
+    //     <figcaption>Speed</figcaption>
+    // </figure>,
+

    // Lifes Upgrades
-    LifeGG: () => square(['green']),
-    LifeRR: () => square(['red']),
-    LifeBB: () => square(['blue']),
-    LifeRG: () => square(['red', 'green']),
-    LifeGB: () => square(['green', 'blue']),
-    LifeRB: () => square(['red', 'blue']),
+    LifeGG: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRR: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeBB:() =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRG: () =>
+    <figure>
+        {square(['red', 'green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeGB: () =>
+    <figure>
+        {square(['green', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRB:() =>
+    <figure>
+        {square(['red', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+

    // Power Upgrades
-    PowerGG: () => circle(['green']),
-    PowerRR: () => circle(['red']),
-    PowerBB: () => circle(['blue']),
-    PowerRG: () => circle(['red', 'green']),
-    PowerGB: () => circle(['green', 'blue']),
-    PowerRB: () => circle(['red', 'blue']),
+    PowerGG: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRR: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerBB:() =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRG: () =>
+    <figure>
+        {circle(['red', 'green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerGB: () =>
+    <figure>
+        {circle(['green', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRB:() =>
+    <figure>
+        {circle(['red', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,

    // Speed Upgrades
-    SpeedGG: () => triangle(['green']),
-    SpeedRR: () => triangle(['red']),
-    SpeedBB: () => triangle(['blue']),
-    SpeedRG: () => triangle(['red', 'green']),
-    SpeedGB: () => triangle(['green', 'blue']),
-    SpeedRB: () => triangle(['red', 'blue']),
+    SpeedGG: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRR: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedBB:() =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRG: () =>
+    <figure>
+        {triangle(['red', 'green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedGB: () =>
+    <figure>
+        {triangle(['green', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRB:() =>
+    <figure>
+        {triangle(['red', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
 };
--- a/client/src/components/vbox.component.jsx
+++ b/client/src/components/vbox.component.jsx
@ -124,7 +124,7 @@ function Vbox(args) {
    function combinerChange(newCombiner) {
        setCombiner(newCombiner);

-        if (combiner.length === 1) {
+        if (newCombiner.length === 1) {
            setItemEquip(newCombiner[0]);
        } else {
            setItemEquip(null);
@ -171,12 +171,12 @@ function Vbox(args) {
            return setVboxSelected([group, index]);
        }

-        if (['Red', 'Green', 'Blue'].includes(v)) {
+        if (shapes[v]) {
            return (
                <button
                    onMouseOver={e => vboxHover(e, v)}
                    onClick={onClick}>
-                    {shapes.vboxColour(v.toLowerCase())}
+                    {shapes[v]()}
                </button>
            );
        }
@ -271,13 +271,13 @@ function Vbox(args) {
        const highlighted = combiner.indexOf(i) > -1;
        const classes = `${highlighted ? 'highlight' : ''}`;

-        if (['Red', 'Green', 'Blue'].includes(v)) {
+        if (shapes[v]) {
            return (
                <button
                    class={classes}
                    onMouseOver={e => vboxHover(e, v)}
                    onClick={onClick}>
-                    {shapes.vboxColour(v.toLowerCase())}
+                    {shapes[v]()}
                </button>
            );
        }
--- a/server/src/names.rs
+++ b/server/src/names.rs
@ -1,7 +1,7 @@
 use rand::prelude::*;
 use rand::{thread_rng};

-const FIRSTS: [&'static str; 33] = [
+const FIRSTS: [&'static str; 36] = [
    "artificial",
    "ambient",
    "borean",
@ -13,6 +13,8 @@ const FIRSTS: [&'static str; 33] = [
    "convex",
    "distorted",
    "dub",
+    "emotive",
+    "emotionless",
    "fierce",
    "inverted",
    "leafy",
@ -31,6 +33,7 @@ const FIRSTS: [&'static str; 33] = [
    "purified",
    "recalcitrant",
    "rogue",
+    "subversive",
    "subterranean",
    "synthetic",
    "sweet",
--- a/server/src/vbox.rs
+++ b/server/src/vbox.rs
@ -88,7 +88,7 @@ impl Vbox {
                };

                let dist = WeightedIndex::new(items.iter().map(|item| item.1)).unwrap();
-                iter::repeat_with(|| { 
+                iter::repeat_with(|| {
                    items[dist.sample(&mut rng)].0}).take(match item_type {
                        ItemType::Colours => 6,
                        _ => 3,