account ctrl

client/assets/styles/controls.less

@@ -1,9 +1,15 @@
 aside {
     grid-area: ctrl;
     display: grid;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 0.5em 0;
 
     padding: 1em;
 
+    div {
+        text-align: right;
+    }
+
     button {
         width: 100%;
         font-size: 150%;

client/assets/styles/instance.less

@@ -119,7 +119,6 @@
 
 .vbox-hdr {
     display: flex;
-    align-items: flex-end;
 }
 
 .vbox-hdr h3 {
@@ -398,14 +397,10 @@
     text-align: center;
     overflow: hidden;
     display: grid;
-    grid-template-rows: min-content 1fr 1.5fr min-content min-content;
+    grid-template-rows: 1fr 1.5fr;
     grid-template-areas:
-        "oppname"
         "opponent"
-        "player"
-        "playername"
-        "ready";
-
+        "player";
 
     h1 {
         text-align: center;

client/src/components/controls.jsx

@@ -1,8 +1,7 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const InstanceCtrl = require('./instance.ctrl');
-const GameCtrl = require('./game.ctrl');
+const PlayerCtrl = require('./player.ctrl');
 const PlayCtrl = require('./play.ctrl');
 
 const addState = connect(
@@ -30,8 +29,7 @@ function Controls(args) {
         sendGameReady,
     } = args;
 
-    if (game) return <GameCtrl />;
-    if (instance) return <InstanceCtrl />;
+    if (game || instance) return <PlayerCtrl />;
     if (nav === 'play' || !nav) return <PlayCtrl />
 
     return false;

client/src/components/faceoff.jsx

@@ -78,10 +78,8 @@ function Faceoff(props) {
 
     return (
         <main class="faceoff">
-            <h1 class={`opponent-name ${otherTeam.ready ? 'ready' : ''}`}>{otherTeam.name}</h1>
             {OpponentTeam(otherTeam)}
             {PlayerTeam(playerTeam)}
-            <h1 class={`player-name ${playerTeam.ready ? 'ready' : ''}`}>{playerTeam.name}</h1>
         </main>
     );
 }

client/src/components/game.ctrl.jsx

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

client/src/components/game.jsx

@@ -5,7 +5,6 @@ const actions = require('../actions');
 
 const GameConstruct = require('./game.construct');
 const Targeting = require('./targeting.arrows');
-const Controls = require('./controls');
 
 const addState = connect(
     function receiveState(state) {

client/src/components/info.component.jsx

@@ -5,14 +5,11 @@ const { INFO } = require('./../constants');
 const { convertItem } = require('../utils');
 const shapes = require('./shapes');
 
-const ScoreBoard = require('./scoreboard');
-
 function InfoComponent(args) {
     const {
         itemInfo,
         combiner,
         player,
-        instance,
         info,
     } = args;
 
@@ -166,13 +163,8 @@ function InfoComponent(args) {
         );
     }
 
-    const scoreboard = instance.phase === 'Lobby' || info
-        ? null
-        : <ScoreBoard />;
-
     return (
         <div class='info' >
-            {scoreboard}
             <Info />
             <Combos />
         </div>

client/src/components/instance.component.jsx

@@ -5,7 +5,6 @@ const Vbox = require('./vbox.component');
 const InfoContainer = require('./info.container');
 const InstanceConstructsContainer = require('./instance.constructs');
 // const EquipmentContainer = require('./instance.equip');
-const ScoreBoard = require('./scoreboard');
 const Faceoff = require('./faceoff');
 
 const actions = require('../actions');

client/src/components/instance.ctrl.jsx

@@ -1,33 +0,0 @@
-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/player.ctrl.jsx

@@ -0,0 +1,86 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+// dunno if this is a good idea
+// bashing together instance and game to save having two panels
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            instance,
+            game,
+            account,
+            animating,
+        } = state;
+
+        function sendReady() {
+            document.activeElement.blur()
+            if (game) return ws.sendGameReady(game.id);
+            if (instance) return ws.sendInstanceReady(instance.id);
+            return false;
+        }
+
+        const gameObject = game || instance;
+
+        return {
+            gameObject,
+            sendReady,
+            account,
+            animating,
+        };
+    },
+);
+
+function scoreboard(gameObject, player, isOpponent) {
+    const text = gameObject.phase === 'Finished'
+        ? player.wins > gameObject.rounds / 2 && 'Winner'
+        : '';
+
+    const classes =`scoreboard ${player.ready ? 'ready' : ''}`;
+
+    const body = isOpponent
+        ? (
+            <tbody>
+                <tr><td>{player.name}</td></tr>
+                <tr><td>{player.wins} / {player.losses}</td></tr>
+                <tr><td>{player.ready ? 'ready' : ''}</td></tr>
+            </tbody>
+        ) : (
+            <tbody>
+                <tr><td>{player.ready ? 'ready' : ''}</td></tr>
+                <tr><td>{player.wins} / {player.losses}</td></tr>
+                <tr><td>{player.name}</td></tr>
+            </tbody>
+        );
+
+    return (
+        <table class={classes}>
+            {body}
+        </table>
+    );
+}
+
+function Controls(args) {
+    const {
+        account,
+        gameObject,
+        animating,
+        sendReady,
+    } = args;
+
+    if (!gameObject) return false;
+
+    const opponent = gameObject.players.find(t => t.id !== account.id);
+    const player = gameObject.players.find(t => t.id === account.id);
+
+    return (
+        <aside class="controls">
+            {scoreboard(gameObject, opponent, true)}
+            <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>
+            {scoreboard(gameObject, player)}
+        </aside>
+    );
+}
+
+module.exports = addState(Controls);

client/src/events.jsx

@@ -15,7 +15,7 @@ function registerEvents(store) {
 
     function setTeam(team) {
         store.dispatch(actions.setTeam(team));
-        setNav('list');
+        setNav('play');
     }
 
     function setConstructList(constructs) {