woah

WORKLOG.md

@@ -11,9 +11,6 @@
     * constructs jiggle when clicked
     * background colour changes depending on time of day
 
-* bug fixes
-  * pvp 1st round doesn't resolve until warden timer completes
-
 * bot game grind
 * stress test
 

client/assets/styles/account.less

@@ -1,9 +1,6 @@
 @import 'colours.less';
 
 .account {
-    margin-top: 2em;
-    grid-area: bottom;
-
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-gap: 0 1em;

client/assets/styles/controls.less

@@ -8,10 +8,17 @@ aside {
         "timer controls";
 
     grid-template-columns: min-content 1fr;
-    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
-    grid-gap: 0.5em 0;
 
-    padding: 1em 1em 1em 0;
+    padding-left: 1em;
+
+    .controls {
+        grid-area: controls;
+
+        display: grid;
+        grid-auto-rows: 1fr;
+        grid-gap: 0.5em 0;
+    }
 
     // fix chrome being inconsistent
     table {

client/assets/styles/instance.less

@@ -1,7 +1,7 @@
 @import 'colours.less';
 
 .instance {
-    overflow-x: hidden;
+    overflow: hidden;
     display: grid;
     grid-template-columns: 1fr minmax(min-content, 1fr);
     grid-template-rows: min-content 1fr;

client/assets/styles/menu.less

@@ -4,17 +4,16 @@
     height: 100%;
     display: grid;
 
-    grid-template-rows: minmax(min-content, 2fr) min-content 1fr;
+    grid-template-rows: min-content 1fr 2fr;
     grid-template-columns: 1fr;
 
     grid-template-areas:
+        "hdr"
         "top"
-        "tabs"
         "bottom";
 
     .top {
         grid-area: top;
-        padding: 0 0 0.5em 2em;
         border-bottom: 0.1em solid #222;
         box-sizing: border-box;
     }
@@ -25,9 +24,10 @@
 
     .team {
         display: grid;
-        grid-area: top;
+        grid-area: bottom;
         grid-template-columns: repeat(auto-fill, minmax(min-content, 33%));
         max-height: 100%;
+        margin-top: 1em;
 
         .team-select:not(:nth-child(3n)) {
             margin-right: 0.5em;
@@ -62,8 +62,6 @@
     }
 
     .inventory {
-        margin-top: 2em;
-        grid-area: bottom;
         display: grid;
         grid-template-columns: 1fr 1fr;
 
@@ -71,6 +69,10 @@
             margin-bottom: 0.5em;
         }
 
+        .news {
+            padding-right: 1em;
+        }
+
         .list {
             letter-spacing: 0.25em;
             text-transform: uppercase;
@@ -89,16 +91,19 @@
     }
 
     .options {
-        grid-area: tabs;
+        grid-area: hdr;
-        display: flex;
+
-        flex-flow: row;
         button {
+            width: 25%;
             border-top: 0;
             border: 1px solid #222;
             &:not(:last-child) {
                 border-right: 0;
             }
-            flex: 1;
+
+            &:last-child {
+                float: right;
+            }
         }
     }
 }

client/assets/styles/styles.less

@@ -84,16 +84,17 @@ dl {
 
 #mnml {
     display: grid;
-    grid-template-columns: minmax(min-content, 1fr) 8fr 1fr;
+    grid-template-columns: 9fr 1fr;
-    grid-template-rows: min-content 1fr min-content;
+    grid-template-rows: min-content min-content 1fr;
     grid-template-areas:
-      "hd  hd   ctrl"
+      "hdr  ctrl"
-      "main main ctrl"
+      "main ctrl"
-      "main main ctrl";
+      "main ctrl";
+
+    padding: 0.5em 1em;
 }
 
 main {
-    padding: 1em;
     grid-area: main;
 }
 
@@ -253,10 +254,17 @@ figure.gray {
     display: none;
 }
 
-.options {
+header {
-    display: flex;
+    .options {
-    flex-flow: row;
+        font-size: 150%;
+    }
 
+    button {
+        height: 2em;
+    }
+}
+
+.options {
     button {
         &.highlight {
             color: @white;
@@ -279,4 +287,4 @@ figure.gray {
 
 nav {
     display: none;
-}
+}

client/src/components/account.management.jsx

@@ -151,19 +151,9 @@ class AccountStatus extends Component {
         }
 
         return (
-            <section class='account' onClick={tlClick}>
+            <section class='account top' onClick={tlClick}>
                 <div>
-                    <h1>{account.name}</h1>
+                    {subInfo()}
-                    <div class="list">
-                        <figure>
-                            <figcaption>spawn new construct</figcaption>
-                            <button onClick={() => sendConstructSpawn()} type="submit">
-                                ¤50
-                            </button>
-                        </figure>
-                    </div>
-                    <button onClick={() => logout()}>Logout</button>
-                    <button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
                 </div>
                 <div>
                     <label for="email">Email Settings:</label>
@@ -216,7 +206,16 @@ class AccountStatus extends Component {
                     </button>
                 </div>
                 <div>
-                    {subInfo()}
+                    <div class="list">
+                        <figure>
+                            <figcaption>spawn new construct</figcaption>
+                            <button onClick={() => sendConstructSpawn()} type="submit">
+                                ¤50
+                            </button>
+                        </figure>
+                    </div>
+                    <button onClick={() => logout()}>Logout</button>
+                    <button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
                 </div>
             </section>
         );

client/src/components/account.page.jsx

@@ -2,6 +2,7 @@ const { connect } = require('preact-redux');
 const preact = require('preact');
 
 const Team = require('./team');
+const Header = require('./header');
 const AccountManagement = require('./account.management');
 
 const addState = connect(
@@ -24,6 +25,7 @@ function Account(args) {
 
     return (
         <main class="menu">
+            <Header />
             <Team />
             <AccountManagement />
         </main>

client/src/components/game.ctrl.jsx

@@ -125,9 +125,11 @@ function Controls(args) {
     return (
         <aside class="controls">
             {timer}
-            {scoreboard(game, opponent, true)}
+            <div class="controls">
-            {game.phase === 'Finish' ? quitBtn : readyBtn}
+                {scoreboard(game, opponent, true)}
-            {scoreboard(game, player)}
+                {game.phase === 'Finish' ? quitBtn : readyBtn}
+                {scoreboard(game, player)}
+            </div>
         </aside>
     );
 }

client/src/components/header.jsx

@@ -1,40 +1,121 @@
-// eslint-disable-next-line
-const preact = require('preact');
 const { connect } = require('preact-redux');
+const preact = require('preact');
 
-const { saw } = require('./shapes');
+const actions = require('../actions');
-const actions = require('./../actions');
+const AccountStatus = require('./account.status');
-
-function pingColour(ping) {
-    if (ping < 100) return 'forestgreen';
-    if (ping < 200) return 'yellow';
-    return 'red';
-}
 
 const addState = connect(
-    ({ account, ping, showNav }) => {
+    function receiveState(state) {
-        return { account, ping };
+        const {
+            ws,
+            account,
+            instances,
+            team,
+            nav,
+            ping,
+
+            game,
+        } = state;
+
+        function sendInstanceState(instance) {
+            return ws.sendInstanceState(instance.id);
+        }
+
+        function sendAccountStates() {
+            ws.sendEmailState();
+            ws.sendSubscriptionState();
+        }
+
+        return {
+            account,
+            instances,
+            team,
+            game,
+            ping,
+            nav,
+            sendInstanceState,
+            sendAccountStates,
+        };
     },
+    function receiveDispatch(dispatch) {
+        function setNav(place) {
+            dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
+            dispatch(actions.setCombiner([]));
+            dispatch(actions.setReclaiming(false));
+            dispatch(actions.setActiveSkill(null));
+            dispatch(actions.setActiveConstruct(null));
+            dispatch(actions.setInfo(null));
+            dispatch(actions.setItemEquip(null));
+            dispatch(actions.setItemUnequip([]));
+            dispatch(actions.setVboxHighlight([]));
+
+            return dispatch(actions.setNav(place));
+        }
+
+        function hideNav() {
+            return dispatch(actions.setShowNav(false));
+        }
+
+        return {
+            setNav,
+            hideNav,
+        };
+    }
 );
 
-function renderHeader(args) {
+function Nav(args) {
-    const { account, ping } = args;
+    const {
+        account,
+        game,
+        team,
+        nav,
 
-    const accountStatus = account
+        sendAccountStates,
-        ? (<div class="header-status">
+        sendInstanceState,
-            <h1 class="header-username">{account.name}</h1>
+
-            {saw(pingColour(ping))}
+        setNav,
-            <div class="ping-text">{ping}ms</div>
+        hideNav,
-        </div>)
+    } = args;
-        : '';
+
+    if (!account) return false;
+
+    function navTo(p) {
+        return setNav(p);
+    }
+
+    function joinInstance(i) {
+        sendInstanceState(i);
+        if (game) navTo('transition');
+        return true;
+    }
+
+    function accountClick() {
+        sendAccountStates();
+        navTo('account');
+    }
 
     return (
         <header>
-            <h1 class="header-title">mnml.gg</h1>
+            <div class="options">
-            {accountStatus}
+                <button
+                    onClick={() => navTo('play')}
+                    class={`login-btn ${nav === 'play' ? 'highlight' : ''}`}>
+                    MNML
+                </button>
+                <button
+                    onClick={() => navTo('news')}
+                    class={`login-btn ${nav === 'news' ? 'highlight' : ''}`}>
+                    Shop
+                </button>
+                <button
+                    onClick={accountClick}
+                    class={`login-btn ${nav === 'account' ? 'highlight' : ''}`}>
+                    ⚙ {account.name}
+                </button>
+            </div>
         </header>
     );
 }
 
-
+module.exports = addState(Nav);
-module.exports = addState(renderHeader);

client/src/components/info.component.jsx

@@ -18,7 +18,19 @@ function InfoComponent(args) {
     // const { info } = args;
 
     function Info() {
-        if (!info) return false;
+        if (!info) {
+            return (
+                <div>
+                    <h2>VBOX phase</h2>
+                    <p>double clicking items in the <b>VBOX</b> will purchase and move them to your <b>INVENTORY</b>.</p>
+                    <p>
+                        hover over an item to see its effects and combinations.<br />
+                        click an item and then click a construct to equip that item to it.<br />
+                    </p>
+                    <p>click the <b>READY</b> button on the right to progress to the <b>GAME PHASE</b>.</p>
+                </div>
+            );
+        }
         const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
         if (!fullInfo) return false;
         const isSkill = fullInfo.skill;

client/src/components/instance.constructs.jsx

@@ -98,7 +98,7 @@ function Construct(props) {
         const skill = construct.skills[i];
         const s = skill
             ? skill.skill
-            : (<span class="gray">+</span>);
+            : (<span class="gray">SKILL</span>);
 
         function skillClick(e) {
             if (!skill) return false;

client/src/components/instance.ctrl.jsx

@@ -93,11 +93,13 @@ function Controls(args) {
     );
 
     return (
-        <aside class="controls">
+        <aside>
             {timer}
-            {scoreboard(instance, opponent, true)}
+            <div class="controls">
-            <button class="ready" onClick={() => sendReady()}>Ready</button>
+                {scoreboard(instance, opponent, true)}
-            {scoreboard(instance, player)}
+                <button class="ready" onClick={() => sendReady()}>Ready</button>
+                {scoreboard(instance, player)}
+            </div>
         </aside>
     );
 }

client/src/components/inventory.jsx

@@ -7,6 +7,8 @@ const toast = require('izitoast');
 const actions = require('./../actions');
 const StripeBtns = require('./stripe.buttons');
 
+const VERSION = process.env.npm_package_version;
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -64,21 +66,32 @@ function Inventory(args) {
     );
 
     return (
-        <div class="inventory">
+        <div class="inventory top">
+            <div class="news">
+                <h1>v{VERSION}</h1>
+                <h2>welcome to mnml</h2>
+                <p>use the buttons on the right to join an instance.</p>
+                <p>
+                    select <b>PVP</b> to play against other players.<br />
+                    click <b>LEARN</b> to practice the game without time controls.
+                </p>
+                <p>
+                    if you enjoy the game please support its development by <b>subscribing</b> or purchasing <b>credits</b>.<br />
+                    glhf
+                </p>
+                <p>--ntr & mashy</p>
+            </div>
             <div>
-                <h1>Shop</h1>
+                <h1 class="credits">¤ {account.balance}</h1>
                 <Elements>
                     <StripeBtns account={account} />
                 </Elements>
-                <div class='list'>
-                    {shop.available.map(availableMtx)}
-                </div>
-            </div>
-            <div>
-                <h1 class="credits">¤ {account.balance}</h1>
                 <div class='list'>
                     {shop.owned.map(useMtx)}
                 </div>
+                <div class='list'>
+                    {shop.available.map(availableMtx)}
+                </div>
             </div>
         </div>
     );

client/src/components/main.jsx

@@ -38,7 +38,7 @@ function Main(props) {
 
     if (nav === 'transition') return false;
     if (nav === 'play') return <Play />;
-    if (nav === 'team') return <Team />;
+    // if (nav === 'team') return <Team />;
     if (nav === 'account') return <Account />;
 
     return (

client/src/components/mnml.jsx

@@ -1,7 +1,6 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-// const Header = require('./header');
 const Main = require('./main');
 const Nav = require('./nav');
 const Controls = require('./controls');

client/src/components/nav.jsx

@@ -92,7 +92,6 @@ function Nav(args) {
 
     const canJoin = team.some(c => !c);
 
-
     return (
         <nav onClick={hideNav} >
             <h1 class="header-title">mnml.gg</h1>

client/src/components/play.ctrl.jsx

@@ -3,7 +3,14 @@ const { connect } = require('preact-redux');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws } = state;
+        const {
+            ws,
+            instances,
+        } = state;
+
+        function sendInstanceState(id) {
+            ws.sendInstanceState(id);
+        }
 
         function sendInstancePractice() {
             ws.sendInstancePractice();
@@ -14,6 +21,9 @@ const addState = connect(
         }
 
         return {
+            instances,
+
+            sendInstanceState,
             sendInstanceQueue,
             sendInstancePractice,
         };
@@ -22,25 +32,46 @@ const addState = connect(
 
 function JoinButtons(args) {
     const {
+        instances,
+
+        sendInstanceState,
         sendInstanceQueue,
         sendInstancePractice,
     } = args;
 
+    if (instances.length) {
+        return (
+            <aside class='play-ctrl'>
+                <div class="timer-container"></div>
+                <div class="controls">
+                    <button
+                        class='pvp ready full'
+                        onClick={() => sendInstanceState(instances[0].id)}
+                        type="submit">
+                        Rejoin
+                    </button>
+                </div>
+            </aside>
+        );
+    }
+
     return (
         <aside class='play-ctrl'>
             <div class="timer-container"></div>
-            <button
+            <div class="controls">
-                class='pvp ready'
+                <button
-                onClick={() => sendInstanceQueue()}
+                    class='pvp ready'
-                type="submit">
+                    onClick={() => sendInstanceQueue()}
-                PVP
+                    type="submit">
-            </button>
+                    PVP
-            <button
+                </button>
-                class='practice ready'
+                <button
-                onClick={() => sendInstancePractice()}
+                    class='practice ready'
-                type="submit">
+                    onClick={() => sendInstancePractice()}
-                Practice
+                    type="submit">
-            </button>
+                    Learn
+                </button>
+            </div>
         </aside>
     );
 }

client/src/components/play.jsx

@@ -5,6 +5,7 @@ const { stringSort } = require('./../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('./../actions');
 const Inventory = require('./inventory');
+const Header = require('./header');
 
 const idSort = stringSort('id');
 
@@ -108,28 +109,11 @@ function Play(args) {
 
     return (
         <main class="menu">
-            <div class="team top">
+            <Header />
+            <Inventory />
+            <div class="team">
                 {constructPanels}
             </div>
-            <div class="options">
-                <button
-                    class={`login-btn highlight`}>
-                    Play
-                </button>
-                <button
-                    class={`login-btn`}>
-                    News
-                </button>
-                <button
-                    class={`login-btn`}>
-                    Store
-                </button>
-                <button
-                    class={`login-btn`}>
-                    ⚙ Account
-                </button>
-            </div>
-            <Inventory />
         </main>
     );
 }

client/src/components/shapes.jsx

@@ -42,7 +42,7 @@ module.exports = {
     None: () =>
     <figure>
         {diamond(['gray'])}
-        <figcaption>&nbsp;</figcaption>
+        <figcaption>SPEC</figcaption>
     </figure>,
 
 

client/src/components/team.ctrl.jsx

@@ -52,7 +52,7 @@ function TeamCtrl(args) {
                 class='ready'
                 disabled={teamSelect.some(c => !c)}
                 onClick={sendAccountSetTeam}>
-                Set Team
+                Set
             </button>
             <div class="team-page-ctrl">
                 <button onClick={() => setTeamPage(teamPage - 1)} disabled={disableDecrement}> &laquo; </button>

client/src/components/team.jsx

@@ -58,7 +58,7 @@ function Team(args) {
     }
     console.log(constructs.length);
     const dispConstructs = constructs.length >= ((teamPage + 1) * 6)
-        ? constructs.slice(teamPage * 6, (teamPage + 1) * 6) 
+        ? constructs.slice(teamPage * 6, (teamPage + 1) * 6)
         : constructs.slice(teamPage * 6, constructs.length);
 
     const constructPanels = dispConstructs.map(construct => {
@@ -80,7 +80,7 @@ function Team(args) {
     });
 
     return (
-        <section class="team top">
+        <section class="team">
             {constructPanels}
         </section>
     );

server/src/img.rs

@@ -53,16 +53,15 @@ pub fn invader_write(id: Uuid) -> Result<Uuid, Error> {
     colours.push("none".to_string());
 
     // add up to 100 for %
-    // [3] is the transparent colour
     let weights = [
         5,
         5,
         65,
-        25,
+        25, // the transparent colour
     ];
     let colour_dist = WeightedIndex::new(&weights)?;
 
-    write!(&mut svg, "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='-250 -250 1000 1000' width='500' height='500'><g>")?;
+    write!(&mut svg, "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='-250 -250 1000 1000' width='375' height='375'><g>")?;
     for i in 0..50 {
         let x = (i % 5) * 50;
         let y = (i / 5) * 50;