chat wheelu

client/src/actions.jsx

@@ -12,6 +12,9 @@ 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 setChatWheel = value => ({ type: 'SET_CHAT_WHEEL', value });
+export const setInstanceChat = value => ({ type: 'SET_INSTANCE_CHAT', 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

@@ -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} />

client/src/events.jsx

@@ -212,6 +212,14 @@ function registerEvents(store) {
         return store.dispatch(actions.setInstance(v));
     }
 
+    function setInstanceChat(v) {
+        return store.dispatch(actions.setInstanceChat(v));
+    }
+
+    function setChatWheel(v) {
+        return store.dispatch(actions.setChatWheel(v));
+    }
+
     function setItemInfo(v) {
         return store.dispatch(actions.setItemInfo(v));
     }
@@ -318,12 +326,14 @@ function registerEvents(store) {
         setAccountInstances,
         setActiveItem,
         setActiveSkill,
+        setChatWheel,
         setDemo,
         setConstructList,
         setNewConstruct,
         setGame,
         setEmail,
         setInstance,
+        setInstanceChat,
         setItemInfo,
         setInvite,
         setPing,

client/src/reducers.jsx

@@ -25,6 +25,8 @@ module.exports = {
     demo:               createReducer(null, 'SET_DEMO'),
 
     chatShow:           createReducer(null, 'SET_CHAT_SHOW'),
+    chatWheel:          createReducer([], 'SET_CHAT_WHEEL'),
+
     combiner:           createReducer([], 'SET_COMBINER'),
     constructs:         createReducer([], 'SET_CONSTRUCTS'),
     constructEditId:    createReducer(null, 'SET_CONSTRUCT_EDIT_ID'),
@@ -34,6 +36,7 @@ module.exports = {
     invite:             createReducer(null, 'SET_INVITE'),
     info:               createReducer(null, 'SET_INFO'),
     instance:           createReducer(null, 'SET_INSTANCE'),
+    instanceChat:       createReducer(null, 'SET_INSTANCE_CHAT'),
     instances:          createReducer([], 'SET_INSTANCES'),
     itemEquip:          createReducer(null, 'SET_ITEM_EQUIP'),
     itemInfo:           createReducer({ combos: [], items: [] }, 'SET_ITEM_INFO'),

client/src/socket.jsx

@@ -67,6 +67,10 @@ function createSocket(events) {
         send(['InstanceState', { instance_id: instanceId }]);
     }
 
+    function sendInstanceChat(instanceId, index) {
+        send(['InstanceChat', { instance_id: instanceId, index }]);
+    }
+
     function sendVboxAccept(instanceId, group, index) {
         send(['VboxAccept', { instance_id: instanceId, group, index }]);
         events.clearInstance();
@@ -253,8 +257,11 @@ function createSocket(events) {
         QueueJoined: () => events.notify('you have joined the pvp queue'),
         InviteRequested: () => events.notify('pvp queue request received'),
         Invite: code => events.setInvite(code),
+        InstanceChat: chat => events.setInstanceChat(chat),
+        ChatWheel: wheel => events.setChatWheel(wheel),
         Joining: () => events.notify('searching for instance...'),
 
+        Processing: () => true,
         Error: errHandler,
     };
 
@@ -358,6 +365,7 @@ function createSocket(events) {
         sendInstanceState,
         sendInstanceInvite,
         sendInstanceJoin,
+        sendInstanceChat,
 
         sendVboxAccept,
         sendVboxApply,