From d370709d90d129cc6848aa789e30ddd98893e2fa Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sat, 26 Oct 2019 16:13:32 +1100
Subject: [PATCH] fix name class

---
 client/src/components/account.box.jsx |  4 +++-
 client/src/components/play.footer.jsx |  2 --
 client/src/components/player.box.jsx  | 10 +++++++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/account.box.jsx b/client/src/components/account.box.jsx
index 4097816d..0ff61b8f 100644
--- a/client/src/components/account.box.jsx
+++ b/client/src/components/account.box.jsx
@@ -101,11 +101,13 @@ function AccountBox(args) {
     //     );
     // }
 
+    const nameClass = `name ${account.subscribed ? 'subscriber' : ''}`;
+
     return (
         <div class='player-box bottom'>
             <div class="msg">&nbsp;</div>
             <StateAccountAvatar />
-            <div class="name subscriber">{account.name}</div>
+            <div class={nameClass}>{account.name}</div>
             <div class="score">&nbsp;</div>
         </div>
     );
diff --git a/client/src/components/play.footer.jsx b/client/src/components/play.footer.jsx
index f8a8479a..1f059064 100644
--- a/client/src/components/play.footer.jsx
+++ b/client/src/components/play.footer.jsx
@@ -3,8 +3,6 @@ const { connect } = require('preact-redux');
 
 const { errorToast, infoToast } = require('../utils');
 
-const AccountBox = require('./account.box');
-
 const addState = connect(
     function receiveState(state) {
         const {
diff --git a/client/src/components/player.box.jsx b/client/src/components/player.box.jsx
index 29ee6532..2790d69f 100644
--- a/client/src/components/player.box.jsx
+++ b/client/src/components/player.box.jsx
@@ -70,22 +70,26 @@ function Scoreboard(args) {
     const winner = player.score === 'Win';
 
     if (!isPlayer) {
+        const nameClass = `name ${player.img ? 'subscriber' : ''}`;
         return (
             <div class={`player-box top ${winner ? 'winner' : player.ready ? 'ready' : ''}`}>
                 <div></div>
                 <div class="score">{scoreText()}</div>
-                <div class="name">{player.name}</div>
+                <div class={nameClass}>{player.name}</div>
                 <Img img={player.img} id={player.id} />
                 <div class="msg">{chat || '\u00A0'}</div>
             </div>
         );
     }
 
+    const boxClass = `player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`;
+    const nameClass = `name ${player.img ? 'subscriber' : ''}`;
+
     return (
-        <div class={`player-box bottom ${winner ? 'winner': player.ready ? 'ready' : ''}`}>
+        <div class={boxClass}>
             <div class="msg">{chat || '\u00A0'}</div>
             <div class="score">{scoreText()}</div>
-            <div class="name">{player.name}</div>
+            <div class={nameClass}>{player.name}</div>
             <Img img={player.img} id={player.id} />
         </div>
     );