diff --git a/src/components/Join/Join.js b/src/components/Join/Join.js
index 77095c3..bf8d1a1 100644
--- a/src/components/Join/Join.js
+++ b/src/components/Join/Join.js
@@ -9,13 +9,13 @@ class Join extends Component {
};
}
- handleChange = (e) => {
+ handleChange = (e) => { // eslint-disable-line
this.setState({
[e.target.name]: e.target.value
});
};
- handleSubmit = (e) => {
+ handleSubmit = (e) => { // eslint-disable-line
e.preventDefault();
this.props.onSubmit(this.state.myName);
};
diff --git a/src/components/Share/Share.css b/src/components/Share/Share.css
new file mode 100644
index 0000000..77e79b5
--- /dev/null
+++ b/src/components/Share/Share.css
@@ -0,0 +1,60 @@
+.Share {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ margin: 0.5rem;
+ line-height: 1.5rem;
+
+ h1 {
+ display: inline-block;
+ font-size: 1.5rem;
+ font-weight: 100;
+
+ strong {
+ font-weight: 600;
+ }
+ }
+
+ input {
+ position: absolute;
+ left: -99999px;
+ }
+
+ a {
+ display: inline-block;
+ margin-left: 0.5rem;
+ border-bottom: 2px solid black;
+ color: inherit;
+ text-decoration: none;
+ vertical-align: top;
+ }
+
+ [aria-label] {
+ position: relative;
+ }
+
+ [aria-label]:hover:before {
+ content: ' ';
+ position: absolute;
+ top: 50%;
+ right: -1rem;
+ margin-top: -0.1rem;
+ width: 0.5rem;
+ height: 0.5rem;
+ background: black;
+ transform: rotate(45deg);
+ }
+
+ [aria-label]:hover:after {
+ content: attr(aria-label);
+ position: absolute;
+ margin-left: 0.7rem;
+ padding: 0.1rem 0.4rem;
+ border-radius: 3px;
+ background: black;
+ font-size: 0.5rem;
+ color: white;
+ white-space: nowrap;
+ }
+}
diff --git a/src/components/Share/Share.js b/src/components/Share/Share.js
new file mode 100644
index 0000000..2566b8e
--- /dev/null
+++ b/src/components/Share/Share.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import './Share.css';
+
+const defaultTooltip = 'Click to copy link';
+
+class Share extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ tooltip: defaultTooltip
+ };
+ }
+
+ handleCopy = (e) => { // eslint-disable-line
+ e.preventDefault();
+ this.textInput.select();
+ document.execCommand('copy');
+ this.setState({ tooltip: 'Copied!' });
+ };
+
+ handleDone = (e) => { // eslint-disable-line
+ this.setState({ tooltip: defaultTooltip });
+ };
+
+ render() {
+ const { roomName } = this.props;
+ const caption = `${process.env.REACT_APP_DOMAIN}/${roomName}`;
+ const link = `${window.location.protocol}//${caption}`;
+
+ return (
+
+
Poker4Fun
+
{ this.textInput = input; }} readOnly />
+
+ {caption}
+
+ );
+ }
+}
+
+export default Share;
diff --git a/src/components/Share/Share.test.js b/src/components/Share/Share.test.js
new file mode 100644
index 0000000..ed6133a
--- /dev/null
+++ b/src/components/Share/Share.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Share from './Share';
+
+it('renders without crashing', () => {
+ const div = document.createElement('div');
+ ReactDOM.render(, div);
+});
diff --git a/src/pages/App/App.css b/src/pages/App/App.css
index ef942eb..49b3374 100644
--- a/src/pages/App/App.css
+++ b/src/pages/App/App.css
@@ -3,4 +3,8 @@
justify-content: center;
align-items: center;
height: 100%;
+
+ input {
+ border-radius: none;
+ }
}
diff --git a/src/pages/Landing/Landing.js b/src/pages/Landing/Landing.js
index 91ff8e3..2f5abbb 100644
--- a/src/pages/Landing/Landing.js
+++ b/src/pages/Landing/Landing.js
@@ -11,13 +11,13 @@ class Landing extends Component {
};
}
- handleChange = (e) => {
+ handleChange = (e) => { // eslint-disable-line
this.setState({
roomName: e.target.value
});
};
- handleSubmit = (e) => {
+ handleSubmit = (e) => { // eslint-disable-line
e.preventDefault();
const roomName = this.state.roomName || this.state.randomRoomName;
this.props.history.push(roomName);
diff --git a/src/pages/Room/Room.js b/src/pages/Room/Room.js
index 1e53f56..5a0ea12 100644
--- a/src/pages/Room/Room.js
+++ b/src/pages/Room/Room.js
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+import Share from 'components/Share/Share';
import Notification from 'components/Notification/Notification';
import Join from 'components/Join/Join';
import Actions from 'components/Actions/Actions';
@@ -57,12 +58,12 @@ class Room extends Component {
this.socket.close();
}
- handleReconn = (e) => {
+ handleReconn = (e) => { // eslint-disable-line
e.preventDefault();
this.socket.open();
};
- handlePlayerJoin = (name) => {
+ handlePlayerJoin = (name) => { // eslint-disable-line
this.setState({
me: {
id: this.socket.id,
@@ -75,7 +76,7 @@ class Room extends Component {
this.socket.emit('play', name);
};
- handleVote = (e) => {
+ handleVote = (e) => { // eslint-disable-line
const score = e.target.value;
this.setState(prevState => ({
me: Object.assign({}, prevState.me, { score, voted: true }),
@@ -84,11 +85,11 @@ class Room extends Component {
this.socket.emit('vote', score);
};
- handleShow = () => {
+ handleShow = () => { // eslint-disable-line
this.socket.emit('show');
};
- handleClear = () => {
+ handleClear = () => { // eslint-disable-line
this.setState(prevState => ({
me: Object.assign({}, prevState.me, { score: null, voted: false }),
myScore: null,
@@ -105,6 +106,8 @@ class Room extends Component {
const playerName = localStorage.getItem('playerName') || '';
return (
+