boxes wit msgs

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

@@ -67,6 +67,7 @@ function InstanceCtrlBtns(args) {
 
     return (
         <div class="instance-ctrl-btns">
+            <button>Chat</button>
             {game ? <button disabled={animating} onClick={sendGameSkillClear}>Clear</button> : null}
             <button class={abandonClasses} disabled={animating || finished} onClick={abandonAction}>Abandon</button>
         </div>

client/src/components/instance.ctrl.jsx

@@ -95,8 +95,8 @@ function Controls(args) {
             {timer}
             <div class="controls instance-ctrl">
                 <PlayerBox player={opponent} />
-                {ready}
                 <PlayerBox player={player} isPlayer={true} abandon={abandon}/>
+                {ready}
                 <InstanceCtrlBtns />
             </div>
         </aside>

client/src/components/player.box.jsx

@@ -10,12 +10,13 @@ function Scoreboard(args) {
     } = args;
 
     const scoreText = () => {
-        if (player.score === 'Zero') return '▫▫▫';
-        if (player.score === 'One') return '■▫▫';
-        if (player.score === 'Two') return '■■▫';
-        if (player.score === 'Win') return '■■■';
+        if (player.score === 'Zero') 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>];
         return '';
     };
+
     /*
     let scoreText = () => {
         if (player.score === 'Zero') return '▫▫▫▫';
@@ -33,18 +34,26 @@ function Scoreboard(args) {
             <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 class="name">{player.name}</div>
+                <div class="img avatar"
+                    id='a9edadda-2b44-4270-b9a7-d7bf30ae35a7'
+                    style={{ 'background-image': `url(/imgs/c170c913-7bd1-4196-97d0-97f404cfbbe9.svg)` }}>
+                    &nbsp;
                 </div>
+                <div class="msg">lucker noob</div>
             </div>
         );
     }
 
     return (
         <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
+            <div class="msg">reported</div>
             <div class="score">{scoreText()}</div>
-            <div class="img">
-                <div>{player.name}</div>
+            <div class="name">{player.name}</div>
+            <div class="img avatar"
+                id='a9edadda-2b44-4270-b9a7-d7bf30ae35a7'
+                style={{ 'background-image': `url(/imgs/a9edadda-2b44-4270-b9a7-d7bf30ae35a7.svg)` }}>
+                &nbsp;
             </div>
             <div class="ctrl">
                 {leave ? <button onClick={leave}>Leave</button> : null}