account box

2019-09-22 18:10:05 +10:00
parent 05e1b19d11
commit 8151c37f96
6 changed files with 107 additions and 40 deletions
@@ -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);
@@ -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>
@@ -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>
    );
@@ -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
-                        class='pvp ready full'
-                        onClick={() => sendInstanceState(instances[0].id)}
-                        type="submit">
-                        Rejoin
-                    </button>
+                    {discordBtn}
+                    <div class="flex">
+                        <div>&nbsp;</div>
+                    </div>
+                    <AccountBox />
+                    <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
-                    class='pvp ready'
-                    onClick={() => sendInstanceQueue()}
-                    type="submit">
-                    PVP
-                </button>
-                {inviteBtn()}
-                <button
-                    class='practice ready'
-                    onClick={() => sendInstancePractice()}
-                    type="submit">
-                    Learn
-                </button>
-                <button
-                    class='discord-btn'
-                    onClick={() => window.open('https://discord.gg/YJJgurM') }>
-                        &nbsp;
-                </button>
+                {discordBtn}
+                <div class="flex">
+                    <button
+                        class='practice ready'
+                        onClick={() => sendInstancePractice()}
+                        type="submit">
+                        Learn
+                    </button>
+                    {inviteBtn()}
+                </div>
+                <AccountBox />
+                <div class="instance-ctrl-btns">
+                    <button disabled={true} >Chat</button>
+                    <button
+                        class='pvp ready'
+                        onClick={() => sendInstanceQueue()}
+                        type="submit">
+                        PVP
+                    </button>
+                </div>
            </div>
        </aside>
    );
@@ -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>