scoreboard

client/assets/styles/instance.css

@@ -28,6 +28,10 @@
     grid-area: top;
 }
 
+.instance .scoreboard {
+    grid-area: cryps;
+}
+
 .instance-ui-btn {
     font-size: 100%;
     padding: 0;

client/src/components/info.component.jsx

@@ -91,51 +91,6 @@ function Info(args) {
         );
     }
 
-    function playerRound(id) {
-        if (!instance.rounds.length) return null;
-        return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
-    }
-
-    function playerText(p) {
-        const round = playerRound(p.id);
-        if (!round) {
-            return p.ready
-                ? 'ready'
-                : '';
-        }
-
-        if (round.finished) return 'finished';
-        if (round.game_id) return 'in game';
-
-        return p.ready
-            ? 'ready'
-            : '';
-    }
-
-    function ScoreBoard() {
-        if (info[0]) return null;
-
-        const players = instance.players.map((p, i) => {
-            const pText = playerText(p);
-            return (
-                <tr key={i}
-                    className={p.ready ? 'ready' : ''}>
-                    <td>{p.name}</td>
-                    <td>{p.score.wins} / {p.score.losses}</td>
-                    <td>{pText}</td>
-                </tr>
-            );
-        });
-
-        return (
-            <table>
-                <tbody>
-                    {players}
-                </tbody>
-            </table>
-        );
-    }
-
     function Combos() {
         if (!player) return false;
 
@@ -185,6 +140,4 @@ function Info(args) {
     );
 }
 
-// <ScoreBoard /> Takes up too much space maybe a context switch
-
 module.exports = Info;

client/src/components/instance.component.jsx

@@ -46,10 +46,13 @@ function Instance(args) {
     }
 
     const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
+    const readyInfo = instance.phase === 'Lobby'
+        ? 'lobbyReady'
+        : 'ready';
     const readyBtn = (
         <button
             className={rdyClasses}
-            onMouseOver={e => hoverInfo(e, 'ready')}
+            onMouseOver={e => hoverInfo(e, readyInfo)}
             onClick={() => sendInstanceReady()}>
             Ready
         </button>
@@ -69,6 +72,51 @@ function Instance(args) {
         background: player.ready ? 'forestgreen' : 'whitesmoke',
     };
 
+    function playerRound(id) {
+        if (!instance.rounds.length) return null;
+        return instance.rounds[instance.rounds.length - 1].find(r => r.player_ids.includes(id));
+    }
+
+    function playerText(p) {
+        const round = playerRound(p.id);
+        if (!round) {
+            return p.ready
+                ? 'ready'
+                : '';
+        }
+
+        if (round.finished) return 'finished';
+        if (round.game_id) return 'in game';
+
+        return p.ready
+            ? 'ready'
+            : '';
+    }
+
+    function ScoreBoard() {
+        if (instance.phase !== 'Lobby') return null;
+
+        const players = instance.players.map((p, i) => {
+            const pText = playerText(p);
+            return (
+                <tr key={i}
+                    className={p.ready ? 'ready' : ''}>
+                    <td>{p.name}</td>
+                    <td>{p.score.wins} / {p.score.losses}</td>
+                    <td>{pText}</td>
+                </tr>
+            );
+        });
+
+        return (
+            <table className="scoreboard" >
+                <tbody>
+                    {players}
+                </tbody>
+            </table>
+        );
+    }
+
     const timer = (
         <div className="timer-container">
             <div className="timer" style={timerStyles} >&nbsp;</div>
@@ -84,6 +132,7 @@ function Instance(args) {
 
             <input type="checkbox" id="toggle-vbox"/>
             <label id="toggle-vbox-label" htmlFor="toggle-vbox">&nbsp;</label>
+            <ScoreBoard />
             <Vbox />
             <InfoContainer />
             <EquipmentContainer />

client/src/components/instance.equip.jsx

@@ -14,7 +14,7 @@ const addState = connect(
             return ws.sendVboxUnequip(instance.id, crypId, item);
         }
 
-        return { player, itemInfo, info, sendUnequip, activeCryp, itemUnequip };
+        return { player, itemInfo, instance, info, sendUnequip, activeCryp, itemUnequip };
     },
 
     function receiveDispatch(dispatch) {
@@ -42,6 +42,7 @@ const addState = connect(
 function Equipment(props) {
     const {
         player,
+        instance,
 
         itemUnequip,
         setItemEquip,
@@ -54,6 +55,8 @@ function Equipment(props) {
         setInfo,
     } = props;
 
+    if (instance.phase === 'Lobby') return false;
+
     const { vbox } = player;
 
     const fullInfo = itemInfo.items.find(i => i.item === itemUnequip);

client/src/constants.jsx

@@ -27,6 +27,10 @@ module.exports = {
             item: 'READY',
             description: 'Ends the VBOX PHASE. If your opponent is also ready the GAME PHASE begins.',
         },
+        lobbyReady: {
+            item: 'READY',
+            description: 'Ready for the game to begin. When all players are ready the first VBOX PHASE begins.',
+        },
         reclaim: {
             item: 'RECLAIM',
             description: 'Reclaim ITEMS for half the purchase cost of their combined ITEMS.\nClick to enable and click ITEM to reclaim.',