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 (
+