styles clean

client/src/components/account.management.jsx

@@ -1,6 +1,8 @@
 const { connect } = require('preact-redux');
 const preact = require('preact');
 
+const SpawnButton = require('./spawn.button');
+
 const { postData } = require('./../utils');
 const actions = require('../actions');
 
@@ -9,6 +11,7 @@ const addState = connect(
         const {
             account,
             ping,
+            ws,
         } = state;
 
 
@@ -16,10 +19,15 @@ const addState = connect(
             postData('/logout').then(() => window.location.reload(true));
         }
 
+        function sendConstructSpawn(name) {
+            return ws.sendMtxConstructSpawn(name);
+        }
+
         return {
             account,
             ping,
             logout,
+            sendConstructSpawn,
         };
     },
 );
@@ -30,6 +38,7 @@ function AccountStatus(args) {
         account,
         ping,
         logout,
+        sendConstructSpawn,
     } = args;
 
     if (!account) return null;
@@ -83,6 +92,14 @@ function AccountStatus(args) {
                 />
                 <button>Change</button>
             </form>
+            <div class="list">
+                <figure>
+                    <figcaption>spawn new construct</figcaption>
+                    <button onClick={() => sendConstructSpawn()} type="submit">
+                        ¤50
+                    </button>
+                </figure>
+            </div>
         </section>
     );
 }

client/src/components/account.page.jsx

@@ -23,7 +23,7 @@ function Account(args) {
     } = args;
 
     return (
-        <main class="account-page">
+        <main class="menu">
             <Team />
             <AccountManagement />
         </main>

client/src/components/game.ctrl.jsx

@@ -20,16 +20,22 @@ const addState = connect(
             return ws.sendGameReady(game.id);
         }
 
+        function getInstanceState() {
+            return ws.sendInstanceState(game.instance);
+        }
+
         return {
             game,
             sendReady,
             account,
+            getInstanceState,
             animating,
         };
     },
 
     function receiveDispatch(dispatch) {
         function quit() {
+            dispatch(actions.setNav('transition'));
             dispatch(actions.setGame(null));
             dispatch(actions.setInstance(null));
         }
@@ -74,6 +80,7 @@ function Controls(args) {
         animating,
         sendReady,
         quit,
+        getInstanceState,
     } = args;
 
     if (!game) return false;
@@ -81,11 +88,43 @@ function Controls(args) {
     const opponent = game.players.find(t => t.id !== account.id);
     const player = game.players.find(t => t.id === account.id);
 
+    function quitClick() {
+        getInstanceState();
+        quit();
+    }
+
+    const zero = Date.parse(game.phase_start);
+    const now = Date.now();
+    const end = Date.parse(game.phase_end);
+    const timerPct = game.phase_end
+        ? ((now - zero) / (end - zero) * 100)
+        : 100;
+
+    const displayColour = !game.phase_end
+        ? '#222'
+        : player.ready
+            ? 'forestgreen'
+            : timerPct > 80
+                ? 'red'
+                : 'whitesmoke';
+
+    const timerStyles = {
+        height: `${timerPct > 100 ? 100 : timerPct}%`,
+        background: displayColour,
+    };
+
+    const timer = (
+        <div class="timer-container">
+            <div class="timer" style={timerStyles} >&nbsp;</div>
+        </div>
+    );
+
     const readyBtn = <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>;
-    const quitBtn = <button disabled={animating} onClick={() => quit()}>Back</button>;
+    const quitBtn = <button disabled={animating} onClick={quitClick}>Back</button>;
 
     return (
         <aside class="controls">
+            {timer}
             {scoreboard(game, opponent, true)}
             {game.phase === 'Finish' ? quitBtn : readyBtn}
             {scoreboard(game, player)}

client/src/components/instance.ctrl.jsx

@@ -66,8 +66,35 @@ function Controls(args) {
     const opponent = instance.players.find(t => t.id !== account.id);
     const player = instance.players.find(t => t.id === account.id);
 
+    const zero = Date.parse(instance.phase_start);
+    const now = Date.now();
+    const end = Date.parse(instance.phase_end);
+    const timerPct = instance.phase_end
+        ? ((now - zero) / (end - zero) * 100)
+        : 100;
+
+    const displayColour = !instance.phase_end
+        ? '#222'
+        : player.ready
+            ? 'forestgreen'
+            : timerPct > 80
+                ? 'red'
+                : 'whitesmoke';
+
+    const timerStyles = {
+        height: `${timerPct > 100 ? 100 : timerPct}%`,
+        background: displayColour,
+    };
+
+    const timer = (
+        <div class="timer-container">
+            <div class="timer" style={timerStyles} >&nbsp;</div>
+        </div>
+    );
+
     return (
         <aside class="controls">
+            {timer}
             {scoreboard(instance, opponent, true)}
             <button class="ready" onClick={() => sendReady()}>Ready</button>
             {scoreboard(instance, player)}

client/src/components/play.ctrl.jsx

@@ -27,7 +27,8 @@ function JoinButtons(args) {
     } = args;
 
     return (
-        <aside>
+        <aside class='play-ctrl'>
+            <div class="timer-container"></div>
             <button
                 class='pvp ready'
                 onClick={() => sendInstanceQueue()}

client/src/components/play.jsx

@@ -97,7 +97,7 @@ function Play(args) {
                         if (mtxActive === 'Rename') return setConstructRename(construct.id);
                         return sendConstructAvatarReroll(construct.id);
                     }}
-                    class="menu-construct" >
+                    class="construct">
                     <ConstructAvatar construct={construct} />
                     {constructName}
                     {confirm}
@@ -107,8 +107,8 @@ function Play(args) {
         });
 
     return (
-        <main class="play">
-            <div class="team">
+        <main class="menu">
+            <div class="team top">
                 {constructPanels}
             </div>
             <Inventory />

client/src/components/team.ctrl.jsx

@@ -29,6 +29,7 @@ function TeamCtrl(args) {
 
     return (
         <aside>
+            <div class="timer-container"></div>
             <button
                 class='ready'
                 disabled={teamSelect.some(c => !c)}

client/src/components/team.jsx

@@ -1,11 +1,8 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
-const range = require('lodash/range');
 
 const actions = require('./../actions');
 const { COLOURS } = require('./../utils');
-const { stringSort } = require('./../utils');
-const SpawnButton = require('./spawn.button');
 const { ConstructAvatar } = require('./construct');
 
 const addState = connect(
@@ -19,7 +16,6 @@ const addState = connect(
         return {
             constructs,
             teamSelect,
-            sendConstructSpawn,
         };
     },
     function receiveDispatch(dispatch) {
@@ -31,7 +27,6 @@ const addState = connect(
             setTeam,
         };
     }
-
 );
 
 function Team(args) {
@@ -39,7 +34,6 @@ function Team(args) {
         constructs,
         teamSelect,
         setTeam,
-        sendConstructSpawn,
     } = args;
 
     if (!constructs) return <div></div>;
@@ -70,28 +64,18 @@ function Team(args) {
         return (
             <div
                 key={construct.id}
-                class="menu-construct"
+                class="construct team-select"
                 style={ { 'border-color': borderColour || 'whitesmoke' } }
                 onClick={() => selectConstruct(construct.id)} >
-                <div class="controls">
-                    <h2>
-                        {construct.name}
-                    </h2>
-                </div>
                 <ConstructAvatar construct={construct} />
+                <h2>{construct.name}</h2>
             </div>
         );
     });
 
-    const spawnButtonsNum = (3 - constructs.length % 3);
-
-    const spawnButtons = range(spawnButtonsNum)
-        .map(i => <SpawnButton key={constructs.length + i} spawn={() => sendConstructSpawn()} />);
-
     return (
-        <section class="team">
+        <section class="team top">
             {constructPanels}
-            {spawnButtons}
         </section>
     );
 }