pvp leave queue implemented

client/src/actions.jsx

@@ -41,6 +41,7 @@ export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });
 export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
 export const setShop = value => ({ type: 'SET_SHOP', value });
 export const setSubscription = value => ({ type: 'SET_SUBSCRIPTION', value });
+export const setPvp = value => ({ type: 'SET_PVP', value });
 
 export const setTeam = value => ({ type: 'SET_TEAM', value: Array.from(value) });
 export const setTeamPage = value => ({ type: 'SET_TEAM_PAGE', value });

client/src/components/play.jsx

@@ -14,6 +14,7 @@ const addState = connect(
             account,
             instances,
             invite,
+            pvp,
         } = state;
 
         function sendInstanceState(id) {
@@ -32,15 +33,21 @@ const addState = connect(
             ws.sendInstanceInvite();
         }
 
+        function sendInstanceLeave() {
+            ws.sendInstanceLeave();
+        }
+
         return {
             account,
             instances,
             invite,
+            pvp,
 
             sendInstanceState,
             sendInstanceQueue,
             sendInstancePractice,
             sendInstanceInvite,
+            sendInstanceLeave,
         };
     },
 
@@ -67,11 +74,13 @@ function Play(args) {
         account,
         instances,
         invite,
+        pvp,
 
         sendInstanceState,
         sendInstanceQueue,
         sendInstancePractice,
         sendInstanceInvite,
+        sendInstanceLeave,
 
         setNav,
     } = args;
@@ -125,6 +134,31 @@ function Play(args) {
         );
     };
 
+    const pvpBtn = () => {
+        if (pvp) return (
+            <figure>
+                <button
+                    class="ready"
+                    onClick={() => sendInstanceLeave()}
+                    >
+                    Cancel
+                </button>
+                <figcaption>Finding Opponent</figcaption>
+            </figure>
+        );
+
+        return (
+            <figure>
+                <button
+                    class="ready"
+                    onClick={() => sendInstanceQueue()}>
+                    PVP
+                </button>
+                <figcaption>Matchmaking</figcaption>
+            </figure>
+        );
+    }
+
     const subscription = account.subscribed
         ? <button
             class="yellow-btn"
@@ -142,14 +176,7 @@ function Play(args) {
         if (!instances.length) {
             return (
                 <div class='list play'>
-                    <figure>
-                        <button
-                            class="ready"
-                            onClick={() => sendInstanceQueue()}>
-                            PVP
-                        </button>
-                        <figcaption>Matchmaking</figcaption>
-                    </figure>
+                    {pvpBtn()}
                     {inviteBtn()}
                     <figure>
                         <button

client/src/events.jsx

@@ -30,6 +30,10 @@ function registerEvents(store) {
         store.dispatch(actions.setPing(ping));
     }
 
+    function setPvp(v) {
+        store.dispatch(actions.setPvp(v));
+    }
+
     function setNav(v) {
         store.dispatch(actions.setNav(v));
     }
@@ -210,6 +214,7 @@ function registerEvents(store) {
         const { account, instance, ws, tutorial } = store.getState();
         if (v) {
             setInvite(null);
+            setPvp(false);
             const player = v.players.find(p => p.id === account.id);
             store.dispatch(actions.setPlayer(player));
 
@@ -370,6 +375,7 @@ function registerEvents(store) {
         setItemInfo,
         setInvite,
         setPing,
+        setPvp,
         setShop,
         setTeam,
         setSubscription,

client/src/reducers.jsx

@@ -48,6 +48,7 @@ module.exports = {
     player:             createReducer(null, 'SET_PLAYER'),
     reclaiming:         createReducer(false, 'SET_RECLAIMING'),
     shop:               createReducer(false, 'SET_SHOP'),
+    pvp:                createReducer(null, 'SET_PVP'),
 
     subscription:       createReducer(null, 'SET_SUBSCRIPTION'),
 

client/src/socket.jsx

@@ -151,6 +151,10 @@ function createSocket(events) {
         send(['InstanceQueue', {}]);
     }
 
+    function sendInstanceLeave() {
+        send(['InstanceLeave', {}]);
+    }
+
     function sendInstanceInvite() {
         send(['InstanceInvite', {}]);
     }
@@ -274,8 +278,16 @@ function createSocket(events) {
         Pong: onPong,
         Demo: onDemo,
 
-        QueueRequested: () => events.notify('PVP queue request received.'),
-        QueueJoined: () => events.notify('You have joined the PVP queue.'),
+        // QueueRequested: () => events.notify('PVP queue request received.'),
+        QueueRequested: () => true,
+        QueueJoined: () => {
+            events.notify('You have joined the PVP queue.');
+            events.setPvp(true);
+        },
+        QueueLeft: () => {
+            events.notify('You have left the PVP queue.');
+            events.setPvp(false);
+        },
         QueueFound: () => events.notify('Your PVP game has started.'),
         InviteRequested: () => events.notify('PVP invite request received.'),
         Invite: code => events.setInvite(code),
@@ -343,7 +355,7 @@ function createSocket(events) {
             message: 'disconnected',
             position: 'topRight',
         });
-        return setTimeout(connect, 2000);
+        return setTimeout(connect, 5000);
     }
 
     function connect() {
@@ -390,6 +402,7 @@ function createSocket(events) {
         sendInstanceInvite,
         sendInstanceJoin,
         sendInstanceChat,
+        sendInstanceLeave,
 
         sendVboxAccept,
         sendVboxAcceptEquip,