chat wheelu

client/src/components/chat.jsx

@@ -8,18 +8,20 @@ const addState = connect(
         const {
             ws,
             chatShow,
+            chatWheel,
             instance,
         } = state;
 
-        function sendChat(i) {
-            // return ws.sendChat(i);
+        function sendInstanceChat(instance, i) {
+            return ws.sendInstanceChat(instance, i);
         }
 
         return {
             instance,
             chatShow,
+            chatWheel,
 
-            sendChat,
+            sendInstanceChat,
         };
     },
 
@@ -38,31 +40,21 @@ function Chat(args) {
     const {
         instance,
         chatShow,
+        chatWheel,
 
-        sendChat,
+        sendInstanceChat,
         setChatShow,
     } = args;
 
-    const chat = [
-        'gl',
-        'hf',
-        'gg',
-        'thx',
-        'nice',
-        'hmm',
-        'ok',
-        '...',
-    ];
-
     function onClick(i) {
-        sendChat(i);
+        sendInstanceChat(instance.id, i);
         setChatShow(false);
         return true;
     }
 
     return (
         <div class={`instance-ctrl-btns chat`}>
-            {chat.map((c, i) => <button key={i} onClick={() => onClick(i)} >{c}</button>)}
+            {chatWheel.map((c, i) => <button key={i} onClick={() => onClick(i)} >{c}</button>)}
         </div>
     );
 }

client/src/components/instance.ctrl.jsx

@@ -13,6 +13,7 @@ const addState = connect(
         const {
             ws,
             instance,
+            instanceChat,
             account,
             chatShow,
         } = state;
@@ -20,6 +21,7 @@ const addState = connect(
         return {
             chatShow,
             instance,
+            instanceChat,
             account,
         };
     },
@@ -29,6 +31,7 @@ function Controls(args) {
     const {
         account,
         instance,
+        instanceChat,
         chatShow,
     } = args;
 
@@ -65,14 +68,14 @@ function Controls(args) {
 
     const bottom = chatShow
         ? <Chat />
-        : <PlayerBox player={player} isPlayer={true} />;
+        : <PlayerBox player={player} isPlayer={true} chat={instanceChat && instanceChat[player.id]} />;
 
     return (
         <aside>
             {timer}
             <div class="controls instance-ctrl">
                 <InstanceCtrlTopBtns />
-                <PlayerBox player={opponent} />
+                <PlayerBox player={opponent} chat={instanceChat && instanceChat[opponent.id]}/>
                 {bottom}
                 <InstanceCtrlBtns />
             </div>

client/src/components/player.box.jsx

@@ -56,6 +56,7 @@ function Scoreboard(args) {
     const {
         isPlayer,
         player,
+        chat,
     } = args;
 
     const scoreText = () => {
@@ -73,14 +74,14 @@ function Scoreboard(args) {
                 <div class="score">{scoreText()}</div>
                 <div class="name">{player.name}</div>
                 <Img img={player.img} id={player.id} />
-                <div class="msg">&nbsp;</div>
+                <div class="msg">{chat || '\u00A0'}</div>
             </div>
         );
     }
 
     return (
         <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
-            <div class="msg">&nbsp;</div>
+            <div class="msg">{chat || '\u00A0'}</div>
             <div class="score">{scoreText()}</div>
             <div class="name">{player.name}</div>
             <Img img={player.img} id={player.id} />