boxes wit msgs

client/assets/styles/controls.less

@@ -38,7 +38,7 @@ aside {
     }
 
     div {
-        text-align: right;
+        text-align: center;
     }
 
     button {

client/assets/styles/instance.less

@@ -195,15 +195,6 @@
 }
 
 .construct-list {
-    .avatar {
-        grid-area: avatar;
-        object-fit: contain;
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
-        // pointer-events: none;
-    }
-
     .name {
         grid-area: name;
         margin-bottom: 0.5em;

client/assets/styles/player.less

@@ -2,29 +2,35 @@
 
 .player-box {
     display: grid;
-
     grid-template-areas:
-        "score"
+        "msg"
         "img"
+        "name"
+        "score"
         "ctrl";
 
+    grid-template-rows: min-content 1fr min-content min-content min-content;
+
     &.top {
         grid-template-areas:
             "ctrl"
+            "score"
+            "name"
             "img"
-            "score";
+            "msg";
 
-        .img {
+        grid-template-rows: min-content min-content min-content 1fr min-content;
-            display: flex;
-            flex-flow: column;
-            justify-content: flex-end;
-        }
     }
 
-    grid-template-rows: min-content 1fr min-content;
-
     .score {
         grid-area: score;
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+
+        span {
+            flex: 1;
+        }
     }
 
     .img {
@@ -34,4 +40,10 @@
     .ctrl {
         grid-area: ctrl;
     }
+
+    .msg {
+        grid-area: msg;
+        color: @white;
+    }
+
 }

client/assets/styles/styles.less

@@ -299,6 +299,15 @@ li {
     background-position: center;
 }
 
+.avatar {
+    grid-area: avatar;
+    object-fit: contain;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    // pointer-events: none;
+}
+
 #clipboard {
   width: 1px;
   height: 1px;

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 === 'Zero') return [<span i={0}>▫</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
-        if (player.score === 'One') return '■▫▫';
+        if (player.score === 'One') return [<span i={0}>■</span>, <span i={1}>▫</span>, <span i={2}>▫</span>];
-        if (player.score === 'Two') return '■■▫';
+        if (player.score === 'Two') return [<span i={0}>■</span>, <span i={1}>■</span>, <span i={2}>▫</span>];
-        if (player.score === 'Win') return '■■■';
+        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 class="name">{player.name}</div>
-                    <div>{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 class="name">{player.name}</div>
-                <div>{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}

server/src/skill.rs

@@ -1237,9 +1237,6 @@ impl Skill {
             Skill::Reflect|
             Skill::ReflectPlus |
             Skill::ReflectPlusPlus |
-            Skill::Link|
-            Skill::LinkPlus |
-            Skill::LinkPlusPlus |
             Skill::Triage|
             Skill::TriagePlus |
             Skill::TriagePlusPlus => true,