fix game btns

client/src/components/chat.jsx

@@ -10,6 +10,7 @@ const addState = connect(
             chatShow,
             chatWheel,
             instance,
+            game,
         } = state;
 
         function sendInstanceChat(instance, i) {
@@ -18,6 +19,7 @@ const addState = connect(
 
         return {
             instance,
+            game,
             chatShow,
             chatWheel,
 
@@ -39,6 +41,7 @@ const addState = connect(
 function Chat(args) {
     const {
         instance,
+        game,
         chatShow,
         chatWheel,
 
@@ -47,7 +50,7 @@ function Chat(args) {
     } = args;
 
     function onClick(i) {
-        sendInstanceChat(instance.id, i);
+        sendInstanceChat(instance ? instance.id : game && game.id, i);
         setChatShow(false);
         return true;
     }

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

@@ -8,6 +8,8 @@ const addState = connect(
         const {
             ws,
             game,
+            account,
+            chatShow,
             animating,
         } = state;
 
@@ -30,6 +32,8 @@ const addState = connect(
 
         return {
             game,
+            account,
+            chatShow,
             sendAbandon,
             sendGameSkillClear,
             sendReady,
@@ -60,6 +64,8 @@ function GameCtrlBtns(args) {
     const {
         game,
         animating,
+        account,
+        chatShow,
 
         getInstanceState,
         sendGameSkillClear,

client/src/components/game.ctrl.jsx

@@ -4,6 +4,7 @@ const { connect } = require('preact-redux');
 const actions = require('../actions');
 
 const PlayerBox = require('./player.box');
+const Chat = require('./chat');
 const GameCtrlButtons = require('./game.ctrl.btns');
 const GameCtrlTopButtons = require('./game.ctrl.btns.top');
 
@@ -13,12 +14,16 @@ const addState = connect(
             animating,
             game,
             account,
+            chatShow,
+            instanceChat,
         } = state;
 
         return {
             animating,
             game,
             account,
+            chatShow,
+            instanceChat,
         };
     },
 );
@@ -28,6 +33,8 @@ function Controls(args) {
         animating,
         account,
         game,
+        chatShow,
+        instanceChat,
     } = args;
 
     if (!game) return false;
@@ -61,13 +68,17 @@ function Controls(args) {
         </div>
     );
 
+     const bottom = chatShow
+        ? <Chat />
+        : <PlayerBox player={player} isPlayer={true} chat={instanceChat && instanceChat[player.id]} />;
+
     return (
         <aside>
             {timer}
             <div class="controls instance-ctrl">
                 <GameCtrlTopButtons />
-                <PlayerBox player={opponent}/>
-                <PlayerBox player={player} isPlayer={true} />
+                <PlayerBox player={opponent} chat={instanceChat && instanceChat[opponent.id]}/>
+                {bottom}
                 <GameCtrlButtons />
             </div>
         </aside>