chat wip

client/assets/styles/player.less

@@ -45,5 +45,9 @@
         grid-area: msg;
         color: @white;
     }
-
 }
+
+.chat {
+    justify-content: flex-end;
+}
+

client/src/actions.jsx

@@ -11,6 +11,7 @@ export const setAnimText   = value => ({ type: 'SET_ANIM_TEXT', value });
 
 export const setDemo = value => ({ type: 'SET_DEMO', value });
 
+export const setChatShow = value => ({ type: 'SET_CHAT_SHOW', value });
 export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value });
 export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null });
 export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) });

client/src/components/chat.jsx

@@ -0,0 +1,70 @@
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const actions = require('../actions');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            chatShow,
+            instance,
+        } = state;
+
+        function sendChat(i) {
+            // return ws.sendChat(i);
+        }
+
+        return {
+            instance,
+            chatShow,
+
+            sendChat,
+        };
+    },
+
+    function receiveDispatch(dispatch) {
+        function setChatShow(v) {
+            dispatch(actions.setChatShow(v));
+        }
+
+        return {
+            setChatShow,
+        };
+    }
+);
+
+function Chat(args) {
+    const {
+        instance,
+        chatShow,
+
+        sendChat,
+        setChatShow,
+    } = args;
+
+    const chat = [
+        'gl',
+        'hf',
+        'gg',
+        'thx',
+        'nice',
+        'hmm',
+        'ok',
+        '...',
+    ];
+
+    function onClick(i) {
+        sendChat(i);
+        setChatShow(false);
+        return true;
+    }
+
+    return (
+        <div class={`instance-ctrl-btns chat`}>
+            {chat.map((c, i) => <button key={i} onClick={() => onClick(i)} >{c}</button>)}
+        </div>
+    );
+}
+
+module.exports = addState(Chat);

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

@@ -7,6 +7,7 @@ const addState = connect(
     function receiveState(state) {
         const {
             ws,
+            chatShow,
             instance,
         } = state;
 
@@ -21,19 +22,32 @@ const addState = connect(
 
         return {
             instance,
+            chatShow,
 
             sendAbandon,
             sendReady,
         };
     },
+
+    function receiveDispatch(dispatch) {
+        function setChatShow(v) {
+            dispatch(actions.setChatShow(v));
+        }
+
+        return {
+            setChatShow,
+        };
+    }
 );
 
 function InstanceCtrlBtns(args) {
     const {
         instance,
+        chatShow,
 
         sendAbandon,
         sendReady,
+        setChatShow,
     } = args;
 
     const finished = instance && instance.phase === 'Finished';
@@ -49,7 +63,7 @@ function InstanceCtrlBtns(args) {
 
     return (
         <div class="instance-ctrl-btns">
-            <button disabled={true} >Chat</button>
+            <button onClick={() => setChatShow(!chatShow)}>Chat</button>
             <button disabled={finished} class="ready" onClick={() => sendReady()}>Ready</button>
         </div>
     );

client/src/components/instance.ctrl.jsx

@@ -1,20 +1,24 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
-const actions = require('../actions');
 const PlayerBox = require('./player.box');
+const Chat = require('./chat');
 const InstanceCtrlBtns = require('./instance.ctrl.btns');
 const InstanceCtrlTopBtns = require('./instance.ctrl.top.btns');
 
+const actions = require('../actions');
+
 const addState = connect(
     function receiveState(state) {
         const {
             ws,
             instance,
             account,
+            chatShow,
         } = state;
 
         return {
+            chatShow,
             instance,
             account,
         };
@@ -25,6 +29,7 @@ function Controls(args) {
     const {
         account,
         instance,
+        chatShow,
     } = args;
 
     if (!instance) return false;
@@ -58,13 +63,17 @@ function Controls(args) {
         </div>
     );
 
+    const bottom = chatShow
+        ? <Chat />
+        : <PlayerBox player={player} isPlayer={true} />;
+
     return (
         <aside>
             {timer}
             <div class="controls instance-ctrl">
                 <InstanceCtrlTopBtns />
                 <PlayerBox player={opponent} />
-                <PlayerBox player={player} isPlayer={true} />
+                {bottom}
                 <InstanceCtrlBtns />
             </div>
         </aside>

client/src/reducers.jsx

@@ -24,6 +24,7 @@ module.exports = {
 
     demo:               createReducer(null, 'SET_DEMO'),
 
+    chatShow:           createReducer(null, 'SET_CHAT_SHOW'),
     combiner:           createReducer([], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
     constructEditId:    createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),