pvp leave queue implemented

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