bold winner text

client/assets/styles/instance.less

@@ -419,14 +419,9 @@
         margin-top: 1em;
     }
 
-    .opponent-name {
-        margin-bottom: 1em;
-        grid-area: oppname;
-    }
-
-    .player-name {
-        margin-top: 1em;
-        grid-area: playername;
+    .winner {
+        color: @yellow;
+        font-weight: bold;
     }
 
     .team {
@@ -441,12 +436,12 @@
     font-size: 200%;
     text-transform: uppercase;
     letter-spacing: 1em;
+    font-weight: bold;
 
     color: @black;
     animation: faceoff 4s linear 0s 2 alternate;
 
     &.winner {
-        color: @yellow;
         animation: win 2s linear 0s 1;
     }
 }

client/assets/styles/player.less

@@ -46,6 +46,11 @@
         grid-area: msg;
         color: @white;
     }
+
+    &.winner {
+        color: @yellow;
+        font-weight: bold;
+    }
 }
 
 .chat {

client/src/components/faceoff.jsx

@@ -58,7 +58,8 @@ function Faceoff(props) {
         const constructs = team.constructs.map((c, i) =>
             <FaceoffConstruct key={c.id} construct={c}/>);
 
-        const classes = `team player ${team.ready ? 'ready' : ''}`
+        const winner = instance.winner === team.id;
+        const classes = `team player ${winner ? 'winner' : team.ready ? 'ready' : ''}`
         return (
             <div class={classes}>
                 {constructs}
@@ -71,7 +72,8 @@ function Faceoff(props) {
         const constructs = team.constructs.map((c, i) =>
             <FaceoffConstruct key={c.id} construct={c}/>);
 
-        const classes = `team opponent ${team.ready ? 'ready' : ''}`
+        const winner = instance.winner === team.id;
+        const classes = `team opponent ${winner ? 'winner' : team.ready ? 'ready' : ''}`
 
         return (
             <div class={classes}>

client/src/components/player.box.jsx

@@ -67,9 +67,11 @@ function Scoreboard(args) {
         return '';
     };
 
+    const winner = player.score === 'Win';
+
     if (!isPlayer) {
         return (
-            <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
+            <div class={`player-box top ${winner ? 'winner' : player.ready ? 'ready' : ''}`}>
                 <div></div>
                 <div class="score">{scoreText()}</div>
                 <div class="name">{player.name}</div>
@@ -80,7 +82,7 @@ function Scoreboard(args) {
     }
 
     return (
-        <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
+        <div class={`player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`}>
             <div class="msg">{chat || '\u00A0'}</div>
             <div class="score">{scoreText()}</div>
             <div class="name">{player.name}</div>