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>
+                    {pvpBtn()}
-                        <button
-                            class="ready"
-                            onClick={() => sendInstanceQueue()}>
-                            PVP
-                        </button>
-                        <figcaption>Matchmaking</figcaption>
-                    </figure>
                     {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.'),
+        // QueueRequested: () => events.notify('PVP queue request received.'),
-        QueueJoined: () => events.notify('You have joined the PVP queue.'),
+        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,

server/src/events.rs

@@ -60,6 +60,7 @@ pub enum Event {
     Invite(Id),
     Join(Id, String),
     Joined(Id),
+    Leave(Id),
 
     Chat(Id, Uuid, String),
     ChatClear(Id, Uuid),
@@ -249,6 +250,7 @@ impl Events {
                 // or flag the requester as pvp ready
                 let requester = self.clients.get_mut(&id).unwrap();
                 requester.pvp = true;
+                requester.tx.send(RpcMessage::QueueJoined(()))?;
                 info!("joined game queue id={:?} account={:?}", requester.id, requester.account);
                 return Ok(());
             },
@@ -305,6 +307,18 @@ impl Events {
                 return Ok(());
             },
 
+            Event::Leave(id) => {
+                // check whether request is valid
+                let c = self.clients.get_mut(&id)
+                    .ok_or(format_err!("connection not found id={:?}", id))?;
+
+                c.pvp = false;
+                c.tx.send(RpcMessage::QueueLeft(()))?;
+                info!("left game queue id={:?} account={:?}", c.id, c.account);
+                return Ok(());
+            },
+
+
             Event::Chat(id, instance, msg) => {
                 // set the chat state of this connection
                 {

server/src/rpc.rs

@@ -63,7 +63,7 @@ pub enum RpcMessage {
 
     QueueRequested(()),
     QueueJoined(()),
-    QueueCancelled(()),
+    QueueLeft(()),
     QueueFound(()),
 
     InviteRequested(()),
@@ -105,6 +105,7 @@ pub enum RpcRequest {
     InstanceInvite {},
     InstanceJoin { code: String },
     InstanceQueue {},
+    InstanceLeave {},
     InstancePractice {},
     InstanceAbandon { instance_id: Uuid },
     InstanceReady { instance_id: Uuid },
@@ -168,6 +169,10 @@ impl Connection {
                         self.events.send(Event::Join(self.id, code))?;
                         Ok(RpcMessage::Joining(()))
                     },
+                    RpcRequest::InstanceLeave {} => {
+                        self.events.send(Event::Leave(self.id))?;
+                        Ok(RpcMessage::Processing(()))
+                    },
 
                     RpcRequest::InstanceChat { instance_id, index } => {
                         if !account.subscribed {