player box

client/assets/styles/player.less

@@ -0,0 +1,37 @@
+@import 'colours.less';
+
+.player-box {
+    display: grid;
+
+    grid-template-areas:
+        "score"
+        "img"
+        "ctrl";
+
+    &.top {
+        grid-template-areas:
+            "ctrl"
+            "img"
+            "score";
+
+        .img {
+            display: flex;
+            flex-flow: column;
+            justify-content: flex-end;
+        }
+    }
+
+    grid-template-rows: min-content 1fr min-content;
+
+    .score {
+        grid-area: score;
+    }
+
+    .img {
+        grid-area: img;
+    }
+
+    .ctrl {
+        grid-area: ctrl;
+    }
+}

client/index.js

@@ -7,6 +7,7 @@ require('./assets/styles/controls.less');
 require('./assets/styles/instance.less');
 require('./assets/styles/vbox.less');
 require('./assets/styles/game.less');
+require('./assets/styles/player.less');
 require('./assets/styles/styles.mobile.css');
 require('./assets/styles/instance.mobile.css');
 

client/src/components/game.ctrl.jsx

@@ -3,8 +3,7 @@ const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
-// dunno if this is a good idea
-// bashing together instance and game to save having two panels
+const PlayerBox = require('./player.box');
 
 const addState = connect(
     function receiveState(state) {
@@ -44,35 +43,6 @@ const addState = connect(
     }
 );
 
-function scoreboard(game, player, isOpponent) {
-    const text = game.phase === 'Finished'
-        ? player.wins > game.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,
@@ -126,9 +96,9 @@ function Controls(args) {
         <aside class="controls">
             {timer}
             <div class="controls">
-                {scoreboard(game, opponent, true)}
+                <PlayerBox player={opponent}/>
                 {game.phase === 'Finish' ? quitBtn : readyBtn}
-                {scoreboard(game, player)}
+                <PlayerBox player={player} isPlayer={true}/>
             </div>
         </aside>
     );

client/src/components/instance.ctrl.jsx

@@ -1,6 +1,10 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
+const actions = require('../actions');
+
+const PlayerBox = require('./player.box');
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -23,42 +27,23 @@ const addState = connect(
             animating,
         };
     },
+    function receiveDispatch(dispatch) {
+        function leave() {
+            dispatch(actions.setNav('play'));
+            dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
+        }
+
+        return { leave };
+    }
 );
 
-function scoreboard(instance, player, isOpponent) {
-    const text = instance.phase === 'Finished'
-        ? player.wins > instance.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,
         instance,
         sendReady,
+        leave,
     } = args;
 
     if (!instance) return false;
@@ -96,9 +81,9 @@ function Controls(args) {
         <aside>
             {timer}
             <div class="controls">
-                {scoreboard(instance, opponent, true)}
+                <PlayerBox player={opponent} />
                 <button class="ready" onClick={() => sendReady()}>Ready</button>
-                {scoreboard(instance, player)}
+                <PlayerBox player={player} isPlayer={true} leave={leave}/>
             </div>
         </aside>
     );

client/src/components/player.box.jsx

@@ -0,0 +1,47 @@
+const preact = require('preact');
+
+function Scoreboard(args) {
+    const {
+        isPlayer,
+        ready,
+        player,
+
+        leave,
+    } = args;
+
+    let scoreText = () => {
+        if (player.score === 'Zero') return '▫▫▫▫';
+        if (player.score === 'One') return '■▫▫▫';
+        if (player.score === 'Two') return '■■▫▫';
+        if (player.score === 'Three') return '■■■▫';
+        if (player.score === 'Adv') return '■■■+';
+        if (player.score === 'Win') return '■■■■';
+        return '';
+    };
+
+    if (!isPlayer) {
+        return (
+            <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
+                <div class="ctrl">&nbsp;</div>
+                <div class="score">{scoreText()}</div>
+                <div class="img">
+                    <div>{player.name}</div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
+            <div class="score">{scoreText()}</div>
+            <div class="img">
+                <div>{player.name}</div>
+            </div>
+            <div class="ctrl">
+                {leave ? <button onClick={leave}>Leave</button> : null}
+            </div>
+        </div>
+    );
+}
+
+module.exports = Scoreboard;