diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less
index eebcc6c6..58bc0b9f 100644
--- a/client/assets/styles/controls.less
+++ b/client/assets/styles/controls.less
@@ -53,7 +53,7 @@ aside {
border-color: forestgreen;
}
- &:active, &:focus {
+ &:active, &:focus, &.enabled {
background: forestgreen;
color: black;
border-color: forestgreen;
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index 66bdb2cd..83ab40d9 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -286,3 +286,9 @@ li {
background-repeat: no-repeat;
background-position: center;
}
+
+#clipboard {
+ width: 1px;
+ height: 1px;
+ padding: 0px;
+}
\ No newline at end of file
diff --git a/client/src/actions.jsx b/client/src/actions.jsx
index d4fe0dc8..ccfadcaa 100644
--- a/client/src/actions.jsx
+++ b/client/src/actions.jsx
@@ -19,6 +19,7 @@ export const setConstructRename = value => ({ type: 'SET_CONSTRUCT_RENAME', valu
export const setGame = value => ({ type: 'SET_GAME', value });
export const setInfo = value => ({ type: 'SET_INFO', value });
export const setEmail = value => ({ type: 'SET_EMAIL', value });
+export const setInvite = value => ({ type: 'SET_INVITE', value });
export const setInstance = value => ({ type: 'SET_INSTANCE', value });
export const setInstances = value => ({ type: 'SET_INSTANCES', value });
export const setItemEquip = value => ({ type: 'SET_ITEM_EQUIP', value });
diff --git a/client/src/components/play.ctrl.jsx b/client/src/components/play.ctrl.jsx
index e87e01e5..0df4f4d0 100644
--- a/client/src/components/play.ctrl.jsx
+++ b/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 (
+
+ );
+ }
+
+ 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 (
+
+ );
+ };
+
return (