controls and alignment

WORKLOG.md

@@ -4,6 +4,7 @@
 * serde serialize privatise
 * stripe prod
 * mobile styles
+* change score to enum
 * pct based translates for combat animation
 * account page
 * graphs n shit

client/assets/styles/styles.less

@@ -466,8 +466,7 @@ header {
 
         /* poor man's <hr>*/
         padding: 0.5em 2em 0 0;
-        margin-bottom: 2em;
-        border-bottom: 0.1em solid whitesmoke;
+        border-bottom: 0.1em solid #444;
 
     }
 
@@ -476,7 +475,7 @@ header {
     }
 
     .inventory {
-        margin-right: 2em;
+        margin: 2em 2em 0 0;
         grid-area: inventory;
 
         display: grid;

client/src/components/controls.jsx

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

client/src/components/game.ctrl.jsx

@@ -0,0 +1,96 @@
+const preact = require('preact');
+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 addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            game,
+            account,
+            animating,
+        } = state;
+
+        function sendReady() {
+            document.activeElement.blur();
+            return ws.sendGameReady(game.id);
+        }
+
+        return {
+            game,
+            sendReady,
+            account,
+            animating,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function quit() {
+            dispatch(actions.setGame(null));
+            dispatch(actions.setInstance(null));
+        }
+
+        return { quit };
+    }
+);
+
+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,
+        game,
+        animating,
+        sendReady,
+        quit,
+    } = args;
+
+    if (!game) return false;
+
+    const opponent = game.players.find(t => t.id !== account.id);
+    const player = game.players.find(t => t.id === account.id);
+
+    const readyBtn = <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>;
+    const quitBtn = <button disabled={animating} onClick={() => quit()}>Back</button>;
+
+    return (
+        <aside class="controls">
+            {scoreboard(game, opponent, true)}
+            {game.phase === 'Finish' ? quitBtn : readyBtn}
+            {scoreboard(game, player)}
+        </aside>
+    );
+}
+
+module.exports = addState(Controls);

client/src/components/game.footer.jsx

@@ -56,7 +56,6 @@ function GameFooter(props) {
         showNav,
 
         quit,
-        skip,
         setShowNav,
         sendGameReady,
         sendInstanceState,

client/src/components/instance.ctrl.jsx

@@ -1,30 +1,23 @@
 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 ws.sendInstanceReady(instance.id);
             return false;
         }
 
-        const gameObject = game || instance;
-
         return {
-            gameObject,
+            instance,
             sendReady,
             account,
             animating,
@@ -32,9 +25,9 @@ const addState = connect(
     },
 );
 
-function scoreboard(gameObject, player, isOpponent) {
-    const text = gameObject.phase === 'Finished'
-        ? player.wins > gameObject.rounds / 2 && 'Winner'
+function scoreboard(instance, player, isOpponent) {
+    const text = instance.phase === 'Finished'
+        ? player.wins > instance.rounds / 2 && 'Winner'
         : '';
 
     const classes =`scoreboard ${player.ready ? 'ready' : ''}`;
@@ -64,21 +57,20 @@ function scoreboard(gameObject, player, isOpponent) {
 function Controls(args) {
     const {
         account,
-        gameObject,
-        animating,
+        instance,
         sendReady,
     } = args;
 
-    if (!gameObject) return false;
+    if (!instance) return false;
 
-    const opponent = gameObject.players.find(t => t.id !== account.id);
-    const player = gameObject.players.find(t => t.id === account.id);
+    const opponent = instance.players.find(t => t.id !== account.id);
+    const player = instance.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)}
+            {scoreboard(instance, opponent, true)}
+            <button class="ready" onClick={() => sendReady()}>Ready</button>
+            {scoreboard(instance, player)}
         </aside>
     );
 }

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);
     }
 
     // -------------