game invites

client/src/components/play.ctrl.jsx

@@ -1,11 +1,14 @@
 const preact = require('preact');
 const { connect } = require('preact-redux');
 
+const { errorToast, infoToast } = require('../utils');
+
 const addState = connect(
     function receiveState(state) {
         const {
             ws,
             instances,
+            invite,
         } = state;
 
         function sendInstanceState(id) {
@@ -20,12 +23,18 @@ const addState = connect(
             ws.sendInstanceQueue();
         }
 
+        function sendInstanceInvite() {
+            ws.sendInstanceInvite();
+        }
+
         return {
             instances,
+            invite,
 
             sendInstanceState,
             sendInstanceQueue,
             sendInstancePractice,
+            sendInstanceInvite,
         };
     }
 );
@@ -33,10 +42,12 @@ const addState = connect(
 function JoinButtons(args) {
     const {
         instances,
+        invite,
 
         sendInstanceState,
         sendInstanceQueue,
         sendInstancePractice,
+        sendInstanceInvite,
     } = args;
 
     if (instances.length) {
@@ -55,6 +66,48 @@ function JoinButtons(args) {
         );
     }
 
+    const inviteBtn = () => {
+        if (!invite) {
+            return (
+                <button
+                    class='pvp ready'
+                    onClick={() => sendInstanceInvite()}
+                    type="submit">
+                    Invite
+                </button>
+            );
+        }
+
+        function copyClick(e) {
+            const link = `${document.location.origin}#join=${invite}`;
+            const textArea = document.createElement('textarea', { id: '#clipboard' });
+            textArea.value = link;
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+
+            try {
+                document.execCommand('copy');
+                infoToast('Invite link copied.');
+            } catch (err) {
+                console.error('link copy error', err);
+                errorToast('Invite link copy error.');
+            }
+
+            document.body.removeChild(textArea);
+            return true;
+        }
+
+        return (
+            <button
+                class='pvp ready enabled'
+                onClick={copyClick}
+                type="submit">
+                Copy Link
+            </button>
+        );
+    };
+
     return (
         <aside class='play-ctrl'>
             <div class="timer-container"></div>
@@ -65,6 +118,7 @@ function JoinButtons(args) {
                     type="submit">
                     PVP
                 </button>
+                {inviteBtn()}
                 <button
                     class='practice ready'
                     onClick={() => sendInstancePractice()}