account box

client/assets/styles/controls.less

@@ -14,28 +14,30 @@ aside {
 
     padding-left: 1em;
 
-    .instance-ctrl, .game-ctrl {
+    .controls {
+        grid-area: controls;
+        display: grid;
+
         grid-template-areas:
             "top"
             "p0"
             "p1"
             "bottom";
 
-        grid-template-rows: min-content 3fr 3fr 1fr;
+        .flex {
-    }
+            display: flex;
+            flex-flow: column;;
+        }
 
-    .controls {
+        grid-template-rows: min-content 3fr 3fr 1fr;
-        grid-area: controls;
-        display: grid;
-        grid-auto-rows: 1fr;
         grid-gap: 0.5em 0;
     }
 
-    &.play-ctrl {
+    // &.play-ctrl {
-        .controls {
+    //     .controls {
-            grid-template-rows: 4fr 4fr 1fr;
+    //         grid-template-rows: 4fr 4fr 1fr;
-        }
+    //     }
-    }
+    // }
 
     text-align: center;
 

client/src/components/account.box.jsx

@@ -0,0 +1,46 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            account,
+        } = state;
+
+        return {
+            account,
+        };
+    }
+);
+
+
+function AccountBox(args) {
+    const {
+        account,
+    } = args;
+
+    const imgStyle = account.img
+        ? { 'background-image': `url(/imgs/${account.img}.svg)` }
+        : null;
+
+    // if (!isTop) {
+    //     return (
+    //         <div class='player-box top'>
+    //             <div class="name">Processor</div>
+    //             <div class="img avatar" id={account.img} style={imgStyle}></div>
+    //             <div class="msg">&nbsp;</div>
+    //         </div>
+    //     );
+    // }
+
+    return (
+        <div class='player-box bottom'>
+            <div class="msg">&nbsp;</div>
+            <div class="img avatar" id={account.img} style={imgStyle}></div>
+            <div class="name">{account.name}</div>
+            <div class="score">0 MMR</div>
+        </div>
+    );
+}
+
+module.exports = addState(AccountBox);

client/src/components/game.ctrl.btns.jsx

@@ -62,7 +62,7 @@ function GameCtrlBtns(args) {
 
     return (
         <div class="game-ctrl-btns">
-            <button>Chat</button>
+            <button disabled={true} >Chat</button>
             <button disabled={animating} onClick={sendGameSkillClear}>Clear</button>
             <button disabled={animating} class="ready" onClick={() => sendReady()}>Ready</button>
         </div>

client/src/components/instance.ctrl.btns.jsx

@@ -40,7 +40,7 @@ function InstanceCtrlBtns(args) {
 
     return (
         <div class="instance-ctrl-btns">
-            <button>Chat</button>
+            <button disabled={true} >Chat</button>
             <button disabled={finished} class="ready" onClick={() => sendReady()}>Ready</button>
         </div>
     );

client/src/components/play.ctrl.jsx

@@ -3,6 +3,8 @@ const { connect } = require('preact-redux');
 
 const { errorToast, infoToast } = require('../utils');
 
+const AccountBox = require('./account.box');
+
 const addState = connect(
     function receiveState(state) {
         const {
@@ -50,17 +52,33 @@ function JoinButtons(args) {
         sendInstanceInvite,
     } = args;
 
+    const discordBtn = (
+        <button
+            class='discord-btn'
+            onClick={() => window.open('https://discord.gg/YJJgurM') }>
+                &nbsp;
+        </button>
+    );
+
     if (instances.length) {
         return (
             <aside class='play-ctrl'>
                 <div class="timer-container"></div>
                 <div class="controls">
-                    <button
+                    {discordBtn}
-                        class='pvp ready full'
+                    <div class="flex">
-                        onClick={() => sendInstanceState(instances[0].id)}
+                        <div>&nbsp;</div>
-                        type="submit">
+                    </div>
-                        Rejoin
+                    <AccountBox />
-                    </button>
+                    <div class="instance-ctrl-btns">
+                        <button disabled={true} >Chat</button>
+                        <button
+                            class='pvp ready full'
+                            onClick={() => sendInstanceState(instances[0].id)}
+                            type="submit">
+                            Rejoin
+                        </button>
+                    </div>
                 </div>
             </aside>
         );
@@ -112,24 +130,26 @@ function JoinButtons(args) {
         <aside class='play-ctrl'>
             <div class="timer-container"></div>
             <div class="controls">
-                <button
+                {discordBtn}
-                    class='pvp ready'
+                <div class="flex">
-                    onClick={() => sendInstanceQueue()}
+                    <button
-                    type="submit">
+                        class='practice ready'
-                    PVP
+                        onClick={() => sendInstancePractice()}
-                </button>
+                        type="submit">
-                {inviteBtn()}
+                        Learn
-                <button
+                    </button>
-                    class='practice ready'
+                    {inviteBtn()}
-                    onClick={() => sendInstancePractice()}
+                </div>
-                    type="submit">
+                <AccountBox />
-                    Learn
+                <div class="instance-ctrl-btns">
-                </button>
+                    <button disabled={true} >Chat</button>
-                <button
+                    <button
-                    class='discord-btn'
+                        class='pvp ready'
-                    onClick={() => window.open('https://discord.gg/YJJgurM') }>
+                        onClick={() => sendInstanceQueue()}
-                        &nbsp;
+                        type="submit">
-                </button>
+                        PVP
+                    </button>
+                </div>
             </div>
         </aside>
     );

client/src/components/player.box.jsx

@@ -7,7 +7,7 @@ function Scoreboard(args) {
     } = args;
 
     const scoreText = () => {
-        if (player.score === 'Zero') return [<span i={0}>▫</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
+        if (player.score === 'Zero' || player.score === 'Lose') return [<span i={0}>▫</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
         if (player.score === 'One') return [<span i={0}>■</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
         if (player.score === 'Two') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>▫</span>];
         if (player.score === 'Win') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>■</span>];
@@ -42,7 +42,6 @@ function Scoreboard(args) {
         );
     }
 
-
     return (
         <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
             <div class="msg">hfhf</div>