fix info

client/assets/styles/controls.less

@@ -0,0 +1,35 @@
+aside {
+    grid-area: ctrl;
+    display: grid;
+
+    padding: 1em;
+
+    button {
+        width: 100%;
+        font-size: 150%;
+    }
+
+    button.ready {
+        &:hover {
+            color: forestgreen;
+            border-color: forestgreen;
+        }
+
+        &:active, &:focus {
+            background: forestgreen;
+            color: black;
+            border-color: forestgreen;
+        }
+    }
+}
+
+.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
+    color: forestgreen;
+}
+
+.ready {
+    color: forestgreen;
+    transition-property: color, background;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}

client/assets/styles/game.less

@@ -4,20 +4,11 @@
     overflow: hidden;
     display: grid;
     grid-template-rows: 1fr 0.5fr 1.5fr;
-    grid-template-columns: 1fr 0.15fr;
+    grid-template-columns: 1fr;
     grid-template-areas:
-        "opponent controls"
+        "opponent"
-        "target   controls"
+        "target  "
-        "player   controls";
+        "player  ";
-
-    .controls {
-        margin: 1em 1em 0 0;
-        grid-area: controls;
-
-        button {
-            width: 100%;
-        }
-    }
 }
 
 .game .team {
@@ -430,10 +421,6 @@
 
         grid-template-rows: 1fr 0.2fr 1.5fr;
         grid-template-columns: 1fr;
-
-        .controls {
-            display: none;
-        }
     }
 
     .game .stats div {

client/assets/styles/instance.less

@@ -35,41 +35,26 @@
 }
 
 .scoreboard {
-    display: flex;
-    flex-flow: column;
-    align-items: center;
-
-    table {
     flex: 1;
-    }
-
-    button {
-        flex: 1;
-        margin-bottom: 1em;
-        width: 75%;
-        font-size: 150%;
-        line-height: 3em;
-    }
 }
 
 .instance .info {
     /*font-size: 75%;*/
-    margin-left: 1em;
+    margin: 3em 0 0 1em;
     grid-area: info;
     display: flex;
     flex-flow: column;
-    justify-content: center;
+    // white-space: pre-wrap;
-    white-space: pre-wrap;
+
+    > *:first-child {
+        margin-bottom: 1em;
+    }
 }
 
 .instance .info h2 {
     text-transform: uppercase;
 }
 
-.instance .info .combos {
-    margin-top: 1.5em;
-}
-
 .instance .constructs {
     grid-area: constructs;
 }
@@ -371,8 +356,7 @@
 
 .thresholds {
     display: flex;
-    flex-flow: column;
+    flex-flow: row;
-    text-align: center;
 }
 
 .thresholds svg {
@@ -383,13 +367,21 @@
     margin: 1em 0;
 }
 
-.colour-reqs {
+.spec-goal {
+    margin-top: 0.5em;
+
+    div {
         display: flex;
-    flex-flow: row;
+        margin: 0 1em 1em 0;
-    justify-content: space-around;
+    }
+
+    .bonus {
+        justify-content: flex-end;
+    }
 }
 
 .thresholds figure svg {
+    margin-right: 0.25em;
     height: 1.5em;
 }
 

client/assets/styles/styles.less

@@ -77,12 +77,12 @@ figure {
 
 #mnml {
     display: grid;
-    grid-template-columns: minmax(min-content, 1fr) 8fr;
+    grid-template-columns: minmax(min-content, 1fr) 8fr 1fr;
     grid-template-rows: min-content 1fr min-content;
     grid-template-areas:
-      "hd  hd"
+      "hd  hd   ctrl"
-      "nav main"
+      "nav main ctrl"
-      "nav main";
+      "nav main ctrl";
 }
 
 nav {
@@ -453,6 +453,9 @@ header {
 .inventory {
     margin-right: 2em;
     grid-area: inventory;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
 }
 
 .inventory .list {
@@ -476,11 +479,11 @@ header {
     display: grid;
 
     grid-template-rows: minmax(min-content, 2fr) 1fr;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
 
     grid-template-areas:
-        "team team"
+        "team"
-        "inventory  join";
+        "inventory";
 
     .join {
         grid-area: join;
@@ -587,35 +590,6 @@ main .top button {
     width: 100%;
 }
 
-
-.ready-btn:hover, .ready-btn:focus, .ready-btn:active {
-    color: forestgreen;
-}
-
-.ready {
-    color: forestgreen;
-    transition-property: color, background;
-    transition-duration: 0.5s;
-    transition-timing-function: ease;
-}
-
-button.ready {
-    width: 75%;
-    font-size: 150%;
-    line-height: 3em;
-
-    &:hover {
-        color: forestgreen;
-        border-color: forestgreen;
-    }
-
-    &:active, &:focus {
-        background: forestgreen;
-        color: black;
-        border-color: forestgreen;
-    }
-}
-
 .timer-container {
     display: flex;
     flex: 1 1 100%;

client/assets/styles/styles.mobile.css

@@ -21,6 +21,10 @@
         display: none;
     }
 
+    aside {
+        display: none;
+    }
+
     footer {
         display: flex;
     }

client/index.js

@@ -1,9 +1,10 @@
 require('./assets/styles/styles.less');
-require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
-require('./assets/styles/instance.mobile.css');
 require('./assets/styles/game.less');
+require('./assets/styles/controls.less');
+require('./assets/styles/styles.mobile.css');
+require('./assets/styles/instance.mobile.css');
 
 // kick it off
 require('./src/app');

client/src/components/controls.jsx

@@ -1,33 +1,40 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
+const InstanceCtrl = require('./instance.ctrl');
+const GameCtrl = require('./game.ctrl');
+const PlayCtrl = require('./play.ctrl');
+
 const addState = connect(
     function receiveState(state) {
         const {
             ws,
-            game
+            game,
+            instance,
+            nav,
         } = state;
 
-        function sendGameReady() {
+        return {
-            document.activeElement.blur()
+            game,
-            return ws.sendGameReady(game.id);
+            instance,
-        }
+            nav,
-
+        };
-        return { game, sendGameReady };
     },
 );
 
 function Controls(args) {
     const {
         game,
-        sendGameReady
+        instance,
+        nav,
+        sendGameReady,
     } = args;
 
-    return (
+    if (instance) return <InstanceCtrl />;
-        <div class="controls">
+    if (game) return <GameCtrl />;
-            <button class="ready" onClick={() => sendGameReady()}>Ready</button>
+    if (nav === 'play' || !nav) return <PlayCtrl />
-        </div>
+
-    );
+    return false;
 }
 
 module.exports = addState(Controls);

client/src/components/faceoff.jsx

@@ -4,6 +4,7 @@ const { connect } = require('preact-redux');
 const actions = require('../actions');
 
 const { ConstructAvatar } = require('./construct');
+const Controls = require('./controls');
 
 const addState = connect(
     function receiveState(state) {
@@ -81,7 +82,6 @@ function Faceoff(props) {
             {OpponentTeam(otherTeam)}
             {PlayerTeam(playerTeam)}
             <h1 class={`player-name ${playerTeam.ready ? 'ready' : ''}`}>{playerTeam.name}</h1>
-            <button class="ready" onClick={() => sendInstanceReady()} >Ready</button>
         </main>
     );
 }

client/src/components/game.ctrl.jsx

@@ -0,0 +1,38 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const InstanceCtrl = require('./instance.ctrl');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            game,
+        } = state;
+
+        function sendGameReady() {
+            document.activeElement.blur()
+            return ws.sendGameReady(game.id);
+        }
+
+        return {
+            game,
+            sendGameReady,
+        };
+    },
+);
+
+function Controls(args) {
+    const {
+        game,
+        sendGameReady
+    } = args;
+
+    return (
+        <aside class="controls">
+            <button class="ready" onClick={() => sendGameReady()}>Ready</button>
+        </aside>
+    );
+}
+
+module.exports = addState(Controls);

client/src/components/game.jsx

@@ -101,7 +101,6 @@ function Game(props) {
             {otherTeams.map(OpponentTeam)}
             <Targeting />
             {PlayerTeam(playerTeam, setActiveSkill)}
-            <Controls />
         </main>
     );
 }

client/src/components/info.component.jsx

@@ -9,13 +9,16 @@ const ScoreBoard = require('./scoreboard');
 
 function InfoComponent(args) {
     const {
-        info,
         itemInfo,
         combiner,
         player,
         instance,
+        info,
     } = args;
 
+    // args.info = 'Life';
+    // const { info } = args;
+
     function Info() {
         if (!info) return false;
         const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
@@ -47,7 +50,12 @@ function InfoComponent(args) {
 
             const thresholds = colourReqs.map((bonus, i) => {
                 const colours = ['red', 'green', 'blue'];
-                const colourGoals = colours.map(c => {
+                const colourGoals = {
+                    red: [],
+                    green: [],
+                    blue: [],
+                };
+                colours.forEach(c => {
                     const colourReq = bonus.req[c];
                     if (colourReqs === 0) return false;
 
@@ -62,18 +70,16 @@ function InfoComponent(args) {
                             ? 'unmet'
                             : '';
 
-                        return (
+                        colourGoals[c].push(
                             <figure key={j} alt={c.colour} class={reqClass} >
-                                {shapes.square([c])}
+                                {shapes.vboxColour(c)}
                             </figure>
                         );
+
+                        return true;
                     });
 
-                    return (
+                    return dots;
-                        <div key={c}>
-                            {dots}
-                        </div>
-                    );
                 });
 
                 const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
@@ -82,14 +88,20 @@ function InfoComponent(args) {
                     ? ''
                     : 'unmet';
 
+                const goals = colours.map((c, j) => {
+                    if (colourGoals[c].length) {
+                        return (
+                            <div key={j}>{colourGoals[c]}</div>
+                        );
+                    }
+                    return false;
+                });
+
                 return (
                     <div key={i} class="spec-goal">
-                        <div class="colour-reqs">
+                        {goals}
-                            {colourGoals}
+                        <div class={`${reqClass} bonus`} >
-                        </div>
-                        <div class={reqClass}>
                             + {bonus.bonus}
-                            <hr />
                         </div>
                     </div>
                 );

client/src/components/instance.ctrl.jsx

@@ -0,0 +1,33 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            instance
+        } = state;
+
+        function sendInstanceReady() {
+            document.activeElement.blur()
+            return ws.sendInstanceReady(instance.id);
+        }
+
+        return { instance, sendInstanceReady };
+    },
+);
+
+function Controls(args) {
+    const {
+        instance,
+        sendInstanceReady
+    } = args;
+
+    return (
+        <aside class="controls">
+            <button class="ready" onClick={() => sendInstanceReady()}>Ready</button>
+        </aside>
+    );
+}
+
+module.exports = addState(Controls);

client/src/components/inventory.jsx

@@ -62,15 +62,19 @@ function Inventory(args) {
 
     return (
         <div class="inventory">
+            <div>
                 <h1>¤ {account.balance}</h1>
                 <div class='list'>
                     {shop.owned.map(useMtx)}
                 </div>
+            </div>
+            <div>
                 <h1>Shop</h1>
                 <div class='list'>
                     {shop.available.map(availableMtx)}
                 </div>
             </div>
+        </div>
     );
 }
 

client/src/components/main.jsx

@@ -27,8 +27,6 @@ function Main(props) {
         return <Login />;
     }
 
-    if (nav === 'play') return <Play />;
-
     if (game) {
         return <Game />;
     }
@@ -37,6 +35,7 @@ function Main(props) {
         return <Instance />;
     }
 
+    if (nav === 'play') return <Play />;
     if (nav === 'team') return <Team />;
 
     return (

client/src/components/mnml.jsx

@@ -4,6 +4,7 @@ const { connect } = require('preact-redux');
 // const Header = require('./header');
 const Main = require('./main');
 const Nav = require('./nav');
+const Controls = require('./controls');
 const Footer = require('./footer');
 
 const addState = connect(
@@ -14,6 +15,7 @@ const Mnml = ({ showNav }) =>
     <div id="mnml" class={showNav ? 'nav-visible' : ''}>
         <Nav />
         <Main />
+        <Controls />
         <Footer />
     </div>;
 

client/src/components/play.ctrl.jsx

@@ -27,23 +27,20 @@ function JoinButtons(args) {
     } = args;
 
     return (
-        <div class="join">
+        <aside>
-            <h1>Join Game</h1>
-            <div class="buttons">
-                <button
-                    class='practice'
-                    onClick={() => sendInstancePractice()}
-                    type="submit">
-                    Practice vs CPU
-                </button>
             <button
                 class='pvp'
                 onClick={() => sendInstanceQueue()}
                 type="submit">
                 PVP
             </button>
-            </div>
+            <button
-        </div>
+                class='practice'
+                onClick={() => sendInstancePractice()}
+                type="submit">
+                Practice
+            </button>
+        </aside>
     );
 }
 

client/src/components/play.jsx

@@ -4,7 +4,6 @@ const preact = require('preact');
 const { stringSort } = require('./../utils');
 const { ConstructAvatar } = require('./construct');
 const actions = require('./../actions');
-const Join = require('./join');
 const Inventory = require('./inventory');
 
 const idSort = stringSort('id');
@@ -113,7 +112,6 @@ function Play(args) {
                 {constructPanels}
             </div>
             <Inventory />
-            <Join />
         </main>
     );
 }

client/src/components/scoreboard.jsx

@@ -8,18 +8,13 @@ const addState = connect(
             instance
         } = state;
 
-        function sendInstanceReady() {
+        return { instance };
-            return ws.sendInstanceReady(instance.id);
-        }
-
-        return { instance, sendInstanceReady };
     },
 );
 
 function ScoreBoard(args) {
     const {
         instance,
-        sendInstanceReady
     } = args;
 
     const players = instance.players.map((p, i) => {
@@ -46,14 +41,11 @@ function ScoreBoard(args) {
     });
 
     return (
-        <div class="scoreboard">
+        <table class="scoreboard">
-            <button class="ready" onClick={() => sendInstanceReady()}>Ready</button>
-            <table>
             <tbody>
                 {players}
             </tbody>
         </table>
-        </div>
     );
 }
 

client/src/components/vertical.thresholds.js

@@ -0,0 +1,172 @@
+const preact = require('preact');
+const range = require('lodash/range');
+
+const { INFO } = require('./../constants');
+const { convertItem } = require('../utils');
+const shapes = require('./shapes');
+
+const ScoreBoard = require('./scoreboard');
+
+function InfoComponent(args) {
+    const {
+        itemInfo,
+        combiner,
+        player,
+        instance,
+    } = args;
+
+    args.info = 'PowerRG';
+    const { info } = args;
+
+    function Info() {
+        if (!info) return false;
+        const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
+        if (!fullInfo) return false;
+        const isSkill = fullInfo.skill;
+        const isSpec = fullInfo.spec;
+
+        if (isSkill) {
+            return (
+                <div class="info-skill">
+                    <h2>{fullInfo.item}</h2>
+                    <div>{fullInfo.description}</div>
+                </div>
+            );
+        }
+
+        if (isSpec) {
+            let red = 0;
+            let blue = 0;
+            let green = 0;
+            player.constructs.forEach(construct => {
+                red += construct.colours.red;
+                blue += construct.colours.blue;
+                green += construct.colours.green;
+            });
+            const teamColours = { red, blue, green };
+
+            const colourReqs = fullInfo.values.bonuses || [];
+
+            const thresholds = colourReqs.map((bonus, i) => {
+                const colours = ['red', 'green', 'blue'];
+                const colourGoals = colours.map(c => {
+                    const colourReq = bonus.req[c];
+                    if (colourReqs === 0) return false;
+
+                    const start = i === 0
+                        ? 0
+                        : colourReqs[i - 1].req[c];
+
+                    const dots = range(start, colourReq).map(j => {
+                        const unmet = teamColours[c] < j + 1;
+
+                        const reqClass = unmet
+                            ? 'unmet'
+                            : '';
+
+                        return (
+                            <figure key={j} alt={c.colour} class={reqClass} >
+                                {shapes.square([c])}
+                            </figure>
+                        );
+                    });
+
+                    return (
+                        <div key={c}>
+                            {dots}
+                        </div>
+                    );
+                });
+
+                const reqsMet = colours.every(c => teamColours[c] >= bonus.req[c]);
+
+                const reqClass = reqsMet
+                    ? ''
+                    : 'unmet';
+
+                return (
+                    <div key={i} class="spec-goal">
+                        <div class="colour-reqs">
+                            {colourGoals}
+                        </div>
+                        <div class={reqClass}>
+                            + {bonus.bonus}
+                            <hr />
+                        </div>
+                    </div>
+                );
+            });
+
+            return (
+                <div class="info-spec">
+                    <h2>{info}</h2>
+                    <div>{fullInfo.description}</div>
+                    <div class="thresholds">
+                        {thresholds}
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div class="info-item">
+                <h2>{fullInfo.item}</h2>
+                <div>{fullInfo.description}</div>
+            </div>
+        );
+    }
+
+    function Combos() {
+        if (!player) return false;
+
+        // show recipe for what's in combiner
+        if (combiner.some(u => u !== null)) {
+            const filteredCombos = itemInfo.combos
+                .filter(combo => combiner.every(u => u === null
+                    || combo.components.includes(player.vbox.bound[u])));
+            if (filteredCombos.length > 6) return false;
+            return (
+                <table>
+                    <tbody>
+                        {filteredCombos.map((c, i) =>
+                            <tr key={i} >
+                                <td class="highlight" >{convertItem(c.item)}</td>
+                                {c.components.map((u, j) => <td key={j}>{convertItem(u)}</td>)}
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            );
+        }
+
+        if (!info) return false;
+        const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info));
+        if (vboxCombos.length > 6) return false;
+        return (
+            <table class="combos">
+                <tbody>
+                    {vboxCombos.map((c, i) =>
+                        <tr key={i} >
+                            <td class="highlight" >{convertItem(c.item)}</td>
+                            {c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
+                        </tr>
+                    )}
+                </tbody>
+            </table>
+        );
+    }
+
+    const scoreboard = instance.phase === 'Lobby' || info
+        ? null
+        : <ScoreBoard />;
+
+    return (
+        <div class='info' >
+            {scoreboard}
+            <Info />
+            <Combos />
+        </div>
+    );
+}
+
+module.exports = InfoComponent;

client/src/socket.jsx

@@ -177,7 +177,7 @@ function createSocket(events) {
     let pongTimeout;
     function onPong() {
         events.setPing(Date.now() - ping);
-        pongTimeout = setTimeout(sendPing, 1000);
+        // pongTimeout = setTimeout(sendPing, 1000);
     }
 
     // -------------