invite link box

sass/components/game_share_box.scss

@@ -0,0 +1,38 @@
+.game-share-box {
+  width: 400px;
+  max-width: 100%;
+  margin: 2rem auto;
+  padding: 1rem;
+  background: linear-gradient(to bottom right, white, lighten($brand-primary, 35%));
+  border: 1px solid $brand-primary;
+  border-radius: 3px;
+  text-align: center;
+
+  .text {
+    margin-bottom: 0.5rem;
+    color: $brand-primary;
+
+    .sub-text {
+      font-size: 0.6rem;
+    }
+
+  }
+
+  input {
+    border: 1px solid lighten($brand-primary, 30%);
+    cursor: text;
+    border-radius: 3px;
+    box-shadow: none;
+    border-image: none;
+    color: lighten($brand-primary, 10%);
+    font-size: 0.8rem;
+    text-align: center;
+    width: 100%;
+    padding: 0.5rem;
+
+    &::selection {
+      background-color: $gray-dark;
+      color: white;
+    }
+  }
+}

sass/main.scss

@@ -18,6 +18,7 @@
 @import 'components/charts';
 @import 'components/login_modal';
 @import 'components/entry';
+@import 'components/game_share_box';
 
 body {
   font-family: $font-family-base;

src/components/GameShareBox.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const GameShareBox = ({url}) => {
+  return (
+    <div className='game-share-box'>
+      <div className='text'>
+        Invite Friends To Play With This Link
+        <div className='sub-text'>(click to select)</div>
+      </div>
+      <input
+        value={url}
+        readOnly
+        onClick={(e) => e.target.setSelectionRange(0, e.target.value.length)}
+      />
+    </div>
+  );
+};
+
+export default GameShareBox;

src/components/GameShow.js

@@ -3,6 +3,7 @@ import {Link} from 'react-router';
 import {colors} from '../constants';
 
 import EntriesList from './EntriesList';
+import GameShareBox from './GameShareBox';
 import ScoreDashboard from './ScoreDashboard';
 
 const GameShow = ({
@@ -16,11 +17,14 @@ const GameShow = ({
   totalPossible,
   currentPossible,
   toggleLoginModal,
+  hasGameStarted,
   onClickEntry
 }) => {
   return (
     <div>
       <div className='container game-show'>
+      {!hasGameStarted &&
+        <GameShareBox url={location.href} />}
         <EntriesList
           entries={entries}
           currentUserEntry={currentUserEntry}

src/components/UserGames.js

@@ -2,14 +2,13 @@ import React from 'react';
 import {colors} from '../constants';
 import calculateTotalPossible from '../helpers/calculate_total_possible';
 import calculateCurrentPossible from '../helpers/calculate_current_possible';
-import classNames from 'ClassNames';
+import classNames from 'classnames';
 
 import TitleBar from './TitleBar';
 
 const UserGames = ({
   user,
   currentUser,
-  gamesOwned,
   gamesPlaying,
   onClickGame,
   questionsById

src/containers/GameContainer.js

@@ -26,7 +26,6 @@ class GameContainer extends React.Component {
   render() {
     const {
       currentUser,
-      location,
       currentUserEntry,
       toggleLoginModal,
       game,

src/containers/UserContainer.js

@@ -61,14 +61,6 @@ class UserContainer extends React.Component {
 
 }
 
-function getGamesOwned(user, allGames) {
-  return Object.keys(allGames).filter((id) => {
-    return allGames[id].user === user.id;
-  }).map((id) => {
-    return allGames[id];
-  });
-}
-
 function getGamesPlaying(user, allGames, allEntries) {
   return Object.keys(allEntries).filter((id) => {
     return allEntries[id].user === user.id;
@@ -83,7 +75,6 @@ function mapStateToProps(state) {
     currentUser: state.client.currentUser,
     usersById: state.remote.usersById,
     questionsById: state.remote.questionsById,
-    gamesOwned: getGamesOwned(state.client.currentUser, state.remote.gamesById),
     gamesPlaying: getGamesPlaying(
       state.client.currentUser,
       state.remote.gamesById,