From 6a81c128918b13e92e6e8f96b8f8da470ffe8adc Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Fri, 1 Feb 2019 00:41:50 -0600
Subject: [PATCH 01/12] Added teams stuff

---
 ui/source/css/basics/text.css                 |  4 +
 .../css/components/status/status-list.css     |  4 +
 ui/source/js/components/controls.js           | 55 ++++++-----
 ui/source/js/components/game.js               | 39 +++++---
 ui/source/js/components/stats.js              |  8 +-
 ui/source/js/components/teamlist.js           |  9 +-
 ui/source/js/helpers/generateWordList.js      | 78 ++++++++++++---
 ui/source/js/helpers/seed.js                  | 24 +++++
 ui/source/js/helpers/teams.js                 | 99 +++++++++++++------
 9 files changed, 233 insertions(+), 87 deletions(-)
 create mode 100644 ui/source/js/helpers/seed.js

diff --git a/ui/source/css/basics/text.css b/ui/source/css/basics/text.css
index fae60e7..1a76829 100644
--- a/ui/source/css/basics/text.css
+++ b/ui/source/css/basics/text.css
@@ -8,4 +8,8 @@ body {
 
 p {
 	margin: 0 0 var(--spacing-vertical) 0;
+}
+
+.text-center {
+	text-align: center;
 }
\ No newline at end of file
diff --git a/ui/source/css/components/status/status-list.css b/ui/source/css/components/status/status-list.css
index 683ba37..a71f523 100644
--- a/ui/source/css/components/status/status-list.css
+++ b/ui/source/css/components/status/status-list.css
@@ -25,4 +25,8 @@
 
 .text-outline {
     text-shadow: 1px 1px 0 rgba(255,255,255,1), 1px 1px 0 rgba(0,0,0,1);
+}
+
+.display-score {
+    font-size: 1.8rem;
 }
\ No newline at end of file
diff --git a/ui/source/js/components/controls.js b/ui/source/js/components/controls.js
index 47da6a0..f793f04 100644
--- a/ui/source/js/components/controls.js
+++ b/ui/source/js/components/controls.js
@@ -1,55 +1,64 @@
 import React from 'react';
+import {getPlayerTeam, getPlayerIsMaster} from '../helpers/teams.js';
 
 function Controls(props) {
 
-    function getViewerState(viewerId, controlId) {
-        return viewerId === controlId;
+    function isMaster(viewerId, controlId) {
+        return getPlayerIsMaster(props.teams, props.playerId);
     }
 
-    function isWinner(winnerName) {
-        if (winnerName !== null) {
-            return true;
-        }
-        return false;
+    function isOtherTeamsTurn(teamArray, playerId, isBlueTurn) {
+        return getPlayerTeam(teamArray, playerId) === 1 ? !isBlueTurn : true;
+    }
+
+    function isGameOver(winnerName) {
+        return winnerName !== null ? true : false;
     }
 
     return (
         <aside className="sidebar sidebar--right">
             <div className="button-set">
-                <button type="button" className="button" disabled={isWinner(props.winner)} onClick={props.onClickSwitchTeams}>End Turn</button>
+                <button type="button" className="button"
+                    disabled={(isGameOver(props.winner) || isOtherTeamsTurn(props.teams, props.playerId, props.isBlueTurn))}
+                    onClick={props.onClickSwitchTeams}
+                >
+                    End Turn
+                </button>
                 <button type="button" className="button button--alt" onClick={props.onClickPromptNewGame}>New Game</button>
                 <fieldset className="control-set">
-                    <legend>Viewer</legend>
+                    <legend>I'm ...</legend>
                     <div className="toggleSwitches">
-                        <div className="switchItem">
-                            <input
-                                type="radio"
-                                name="viewer"
-                                id="viewAsMaster"
-                                defaultChecked={getViewerState(props.viewer, 0)}
-                                onClick={props.onClickViewMaster}
-                            />
-                            <label htmlFor="viewAsMaster">Master</label>
-                        </div>
                         <div className="switchItem">
                             <input
                                 type="radio"
                                 name="viewer"
                                 id="viewAsBlue"
-                                defaultChecked={getViewerState(props.viewer, 1)}
+                                defaultChecked={getPlayerTeam(props.teams, props.playerId) === 1}
                                 onClick={props.onClickViewBlue}
                             />
-                            <label htmlFor="viewAsBlue">Blue Player</label>
+                            <label htmlFor="viewAsBlue">on Blue Team</label>
                         </div>
                         <div className="switchItem">
                             <input
                                 type="radio"
                                 name="viewer"
                                 id="viewAsRed"
-                                defaultChecked={getViewerState(props.viewer, 2)}
+                                defaultChecked={getPlayerTeam(props.teams, props.playerId) === 2}
                                 onClick={props.onClickViewRed}
                             />
-                            <label htmlFor="viewAsRed">Red Player</label>
+                            <label htmlFor="viewAsRed">on Red Team</label>
+                        </div>
+                    </div>
+                    <div className="">
+                        <div className="switchItem">
+                            <input
+                                type="checkbox"
+                                name="master"
+                                id="setAsMaster"
+                                defaultChecked={isMaster(props.teams, props.playerId)}
+                                onClick={e => props.onClickViewMaster(e)}
+                            />
+                            <label htmlFor="setAsMaster">a Master</label>
                         </div>
                     </div>
                 </fieldset>
diff --git a/ui/source/js/components/game.js b/ui/source/js/components/game.js
index 594f508..815429c 100644
--- a/ui/source/js/components/game.js
+++ b/ui/source/js/components/game.js
@@ -2,9 +2,10 @@ import React, {Component} from 'react';
 import Board from './board.js';
 import Stats from './stats.js';
 import Controls from './controls.js';
+import getSeed from '../helpers/seed.js';
 import getWordlist from '../helpers/generateWordList.js';
 import getOwnershipList from '../helpers/generateOwners.js';
-import generateTeams from '../helpers/teams.js';
+import {generateTeams, setPlayerTeam, setPlayerIsMaster} from '../helpers/teams.js';
 import switchTurns from '../helpers/switchTurns.js';
 import keepScore from '../helpers/keepScore.js';
 import calculateWinner from '../helpers/winner.js';
@@ -14,6 +15,8 @@ const blackPieceCount = 1;
 const bluePiecesCount = 9;
 const redPiecesCount = 8;
 
+const currentPlayerId = 1;
+
 const strResetGame = 'Start a new game?';
 
 function buildPieceArray() {
@@ -36,15 +39,17 @@ class Game extends React.Component {
 		super(props);
 		this.state = {
 			isBlueTurn: true,
+			seed: getSeed(),
 			score: {
 				black: blackPieceCount,
 				blue: bluePiecesCount,
 				red: redPiecesCount
 			},
 			pieces: buildPieceArray(),
-			viewer: 0,
 			winner: null,
-			teams: generateTeams()
+			teams: generateTeams(),
+			viewer: 0,
+			currentPlayerId: currentPlayerId
 		};
 	}
 
@@ -52,10 +57,6 @@ class Game extends React.Component {
 		this.setState({ isBlueTurn: !this.state.isBlueTurn });
 	}
 
-	setViewer(i) {
-		this.setState({ viewer: i });
-	}
-
 	pieceChosenClick(i) {
 		if (this.state.winner === null) {
 			let updatedPieces = Array.from(this.state.pieces);
@@ -84,6 +85,7 @@ class Game extends React.Component {
 
 	newGame() {
 		this.setState({
+			seed: getSeed(),
 			winner: null,
 			isBlueTurn: true,
 			pieces: buildPieceArray()
@@ -117,10 +119,25 @@ class Game extends React.Component {
 				<Controls
 					viewer={this.state.viewer}
 					winner={this.state.winner}
-					onClickSwitchTeams={() => this.switchTeamsClick()}
-					onClickViewMaster={() => this.setViewer(0)}
-					onClickViewBlue={() => this.setViewer(1)}
-					onClickViewRed={() => this.setViewer(2)}
+					teams={this.state.teams}
+					playerId={this.state.currentPlayerId}
+					isBlueTurn={this.state.isBlueTurn}
+					onClickSwitchTeams={() => switchTeamsClick()}
+					onClickViewMaster={
+						(e) => this.setState({
+							teams: setPlayerIsMaster(this.state.teams, this.state.currentPlayerId, e.target.checked)
+						})
+					}
+					onClickViewBlue={
+						(e) => this.setState({
+							teams: setPlayerTeam(this.state.teams, this.state.currentPlayerId, 1)
+						})
+					}
+					onClickViewRed={
+						(e) => this.setState({
+							teams: setPlayerTeam(this.state.teams, this.state.currentPlayerId, 2)
+						})
+					}
 					onClickPromptNewGame={() => this.promptNewGame()}
 				/>
 			</div>
diff --git a/ui/source/js/components/stats.js b/ui/source/js/components/stats.js
index e9cff79..043c323 100644
--- a/ui/source/js/components/stats.js
+++ b/ui/source/js/components/stats.js
@@ -7,7 +7,7 @@ function Stats(props) {
 
     function getStatus(winner, isBlueTurn) {
 		if (winner === null) {
-			return `Current Turn: ${(isBlueTurn ? 'Blue' : 'Red')}`;
+			return `${(isBlueTurn ? 'Blue' : 'Red')} Turn`;
 		}
 		winner = capitalizeFirstLetter(winner);
 		return `${winner} team wins.`;
@@ -16,15 +16,15 @@ function Stats(props) {
     return (
         <aside className="sidebar sidebar--left">
             <ul className="status-list">
-                <li className="status-list__item">
+                <li className="status-list__item display-score text-center">
                     <span className="team--blue text-outline">{props.score.blue}</span>
                     <span className="seperator"> - </span>
                     <span className="team--red text-outline">{props.score.red}</span>
                 </li>
-                <li className={"status-list__item status-list__item--" + getActiveTeamColorCSS(props.isBlueTurn, props.winner)}>
+                <li className={"status-list__item text-center status-list__item--" + getActiveTeamColorCSS(props.isBlueTurn, props.winner)}>
                     {getStatus(props.winner, props.isBlueTurn)}
                 </li>
-                <li className={"status-list__item status-list__item--" + getViewerColorCSS(props.viewer)}>
+                <li className={"status-list__item  text-center status-list__item--" + getViewerColorCSS(props.viewer)}>
                     Viewing as: {getViewerName(props.viewer)}
                 </li>
             </ul>
diff --git a/ui/source/js/components/teamlist.js b/ui/source/js/components/teamlist.js
index 813dd29..f69e8fd 100644
--- a/ui/source/js/components/teamlist.js
+++ b/ui/source/js/components/teamlist.js
@@ -10,9 +10,10 @@ function TeamList(props) {
 		/>;
     }
 
-    function generateList(teamArray) {
+    function generateList(teamArray, teamId) {
         let listItemsArray = [];
-        teamArray.forEach((player,i) => listItemsArray.push(renderPlayer(player, i)));
+        teamArray.filter(player => player.team === teamId)
+            .forEach((player,i) => listItemsArray.push(renderPlayer(player, i)));
         return listItemsArray;
     }
 
@@ -20,11 +21,11 @@ function TeamList(props) {
         <div className="teams-list">
             <ul className="team-list">
                 <li className="team-list__item team-list__item--title team--blue text-outline">Blue</li>
-                {generateList(props.teams.blue)}
+                {generateList(props.teams, 1)}
             </ul>
             <ul className="team-list">
                 <li className="team-list__item team-list__item--title team--red text-outline">Red</li>
-                {generateList(props.teams.red)}
+                {generateList(props.teams, 2)}
             </ul>
         </div>
     );
diff --git a/ui/source/js/helpers/generateWordList.js b/ui/source/js/helpers/generateWordList.js
index e1f4121..c9a9876 100644
--- a/ui/source/js/helpers/generateWordList.js
+++ b/ui/source/js/helpers/generateWordList.js
@@ -2,20 +2,70 @@ import {shuffleArray} from './random.js';
 
 function getWordlist(count) {
     const wordList = [
-        'press', 'fan', 'pyramid', 'torch', 'fall',
-        'Himalayas', 'staff', 'pupil', 'drop', 'cotton',
-        'bottle', 'belt', 'stadium', 'glove', 'robot',
-        'glass', 'concert', 'bill', 'dress', 'pilot',
-        'green', 'turkey', 'ketchup', 'crown', 'cliff',
-        'bed', 'mass', 'Washington', 'box', 'dice',
-        'honey', 'hole', 'olive', 'star', 'litter',
-        'opera', 'shot', 'scientist', 'horn', 'time',
-        'apple', 'Olympus', 'telescope', 'snow', 'pan',
-        'princess', 'ivory', 'death', 'bugle', 'bark',
-        'duck', 'dinosaur', 'paste', 'orange', 'bow',
-        'straw', 'bug', 'doctor', 'cover', 'crane',
-        'point', 'pool', 'pirate', 'eagle', 'teacher',
-        'tie', 'cap', 'check', 'vacuum', 'shadow'
+        'air', 'ambulance', 'ammonia', 'apple', 'appendix', 'archipelago',
+
+        'ball', 'bark', 'baron', 'barrier', 'bed', 'belt', 'bill', 'bingo', 'blackberry', 'bonus',
+        'bottle', 'bow', 'box', 'broccoli', 'brunch', 'bug', 'bugle',
+
+        'cap', 'cartridge', 'cassette', 'catfish', 'cemetery', 'check', 'Chihuahua', 'cilantro', 'circus',
+        'cliff', 'coaster', 'coconut', 'code', 'command', 'concert', 'cover', 'conflict', 'cotton', 'coyote',
+        'cracker', 'crane', 'crown', 'curfew', 'cursor',
+
+        'dad', 'dawn', 'death', 'demon', 'dentist', 'diagnosis', 'dice', 'dinosaur', 'discovery', 'doctor',
+        'donkey', 'dress', 'drop', 'duchess', 'duck',
+
+        'Easter', 'eagle', 'editor', 'epilepsy', 'equator', 'error', 'espionage',
+
+        'fall', 'fan', 'flask', 'flora', 'fries', 'fundraiser', 'fusion',
+
+        'glass', 'glove', 'glucose', 'google', 'green', 'gun',
+
+        'hallway', 'hamburger', 'hammock', 'hand', 'head', 'heart', 'Himalayas', 'hole', 'honey', 'horn',
+        'horseman', 'hurricane',
+
+        'iceberg', 'illness', 'intersection', 'ivory',
+
+        'jerky', 'joker', 'juror',
+
+        'kangaroo', 'ketchup', 'kingdom',
+
+        'leopard', 'ligament', 'litter', 'logic', 'lookout',
+
+        'mango', 'mass', 'matrix', 'medic', 'mirth', 'molasses', 'morale', 'motto', 'murder',
+
+        'network', 'nexus', 'nightmare', 'noodle',
+
+        'oasis', 'offense', 'olive', 'Olympus', 'opera', 'oracle', 'orange', 'oxygen',
+
+        'pan', 'panther', 'pasta', 'paste', 'patriotism', 'pilot', 'pirate', 'plaza', 'point', 'poker',
+        'pool', 'potassium', 'pottery', 'poultry', 'press', 'princess', 'prisoner', 'privacy', 'processor',
+        'protein', 'prototype', 'puberty', 'pupil', 'pyramid',
+
+        'quart', 'quartz', 'queen',
+
+        'racism', 'ranger', 'recipe', 'recreation', 'refrigerator', 'reins', 'repository', 'republic', 'restaurant', 'roadblock',
+        'robber', 'robot', 'rodeo', 'rocks',
+
+        'saloon', 'Saturday', 'scenario', 'scholarship', 'scientist', 'scissors', 'scrum', 'seduction', 'senator', 'sesame',
+        'setup', 'shadow', 'shop', 'shot', 'siding', 'sister', 'skate', 'snack', 'snail', 'snapshot',
+        'snow', 'soccer', 'spaghetti', 'spoiler', 'squad', 'staff', 'stadium', 'stage', 'stairway', 'straw',
+        'statement', 'star', 'stocks', 'subscription', 'suburb', 'success', 'sweater', 'syndrome', 'syntax',
+
+        'tavern', 'teacher', 'technology', 'telescope', 'telephone', 'terror', 'theater', 'therapy', 'thunder', 'tie',
+        'tiger', 'time', 'today', 'touchdown', 'torch', 'tourist', 'tractor', 'transmission', 'trauma', 'treadmill',
+        'trilogy', 'trout', 'turkey', 'tyrant',
+
+        'underdog', 'underwear', 'university',
+
+        'vaccination', 'vacuum', 'vampire', 'vanguard', 'victory', 'viewpoint', 'villa', 'vista', 'vocalist', 'volcano',
+        'voltage',
+
+        'waistcoat', 'waitress', 'wardrobe', 'warmth', 'Washington', 'watchdog', 'wealth', 'whereabouts', 'whisky', 'widget',
+        'width', 'windfall', 'wiring', 'witchcraft', 'words', 'workman',
+
+        'yak', 'yogurt', 'youngster',
+
+        'Zanzibar', 'zibra', 'zoo'
     ];
     return shuffleArray(wordList).slice(0, count);
 }
diff --git a/ui/source/js/helpers/seed.js b/ui/source/js/helpers/seed.js
new file mode 100644
index 0000000..081c61d
--- /dev/null
+++ b/ui/source/js/helpers/seed.js
@@ -0,0 +1,24 @@
+import getWordlist from '../helpers/generateWordList.js';
+
+function getSeed() {
+    let seed = window.location.hash;
+    if (!seed) {
+        seed = createSeed();
+    }
+    setSeed(seed);
+    return seed;
+}
+
+function createSeed(newSeed) {
+    if (!newSeed) {
+        return getWordlist(2).join('-');
+    } else {
+        return newSeed;
+    }
+}
+
+function setSeed(newSeed) {
+    window.location.hash = newSeed;
+}
+
+export default getSeed;
\ No newline at end of file
diff --git a/ui/source/js/helpers/teams.js b/ui/source/js/helpers/teams.js
index 5894c40..b260928 100644
--- a/ui/source/js/helpers/teams.js
+++ b/ui/source/js/helpers/teams.js
@@ -1,34 +1,71 @@
+function setPlayerTeam(playerArray, playerId, newPlayerTeam) {
+    const position = getPlayerPositionInArray(playerArray, playerId);
+    playerArray[position].team = newPlayerTeam;
+    return playerArray;
+}
+
+function setPlayerIsMaster(playerArray, playerId, newPlayerIsMaster) {
+    const position = getPlayerPositionInArray(playerArray, playerId);
+    playerArray[position].isMaster = newPlayerIsMaster;
+    return playerArray;
+}
+
+function getPlayerPositionInArray(playerArray, playerId) {
+    if (!playerArray) {
+        console.error('No team array');
+    }
+    return playerArray.map(player => player.id).indexOf(playerId);
+}
+
+function getPlayerTeam(playerArray, playerId) {
+    const position = getPlayerPositionInArray(playerArray, playerId);
+    return playerArray[position].team;
+}
+
+function getPlayerIsMaster(playerArray, playerId) {
+    const position = getPlayerPositionInArray(playerArray, playerId);
+    return playerArray[position].isMaster;
+}
+
 function generateTeams() {
-    return {
-        blue: [
-            {
-                name: 'Joseph',
-                isMaster: true
-            },
-            {
-                name: 'Jac',
-                isMaster: false
-            },
-            {
-                name: 'Jeff',
-                isMaster: false
-            }
-        ],
-        red: [
-            {
-                name: 'Aaron',
-                isMaster: true
-            },
-            {
-                name: 'Anna',
-                isMaster: false
-            },
-            {
-                name: 'Andy',
-                isMaster: false
-            }
-        ]
-    };
+    return [
+        {
+            id: 1,
+            name: 'Joseph',
+            isMaster: true,
+            team: 1
+        },
+        {
+            id: 2,
+            name: 'Jac',
+            isMaster: false,
+            team: 1
+        },
+        {
+            id: 3,
+            name: 'Jeff',
+            isMaster: false,
+            team: 1
+        },
+        {
+            id: 4,
+            name: 'Aaron',
+            isMaster: true,
+            team: 2
+        },
+        {
+            id: 5,
+            name: 'Anna',
+            isMaster: false,
+            team: 2
+        },
+        {
+            id: 6,
+            name: 'Andy',
+            isMaster: false,
+            team: 2
+        }
+    ];
 }
 
-export default generateTeams;
\ No newline at end of file
+export {generateTeams, setPlayerTeam, setPlayerIsMaster, getPlayerTeam, getPlayerIsMaster};
\ No newline at end of file

From 845576f62c6f388ed8306d5c74de92c252d0c3db Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Fri, 1 Feb 2019 01:55:45 -0600
Subject: [PATCH 02/12] Removed viewer and added styles.

---
 ui/source/css/basics/icons.css                | 24 +++---
 ui/source/css/basics/labels.css               |  4 +
 ui/source/css/basics/switch.css               | 83 +++++++++++++------
 ui/source/css/utilities/00-variables.css      |  5 ++
 ui/source/js/components/board.js              |  3 +-
 ui/source/js/components/controls.js           | 40 +++++----
 ui/source/js/components/game.js               | 10 +--
 ui/source/js/components/piece.js              |  4 +-
 ui/source/js/components/stats.js              |  5 +-
 ...codeViewersAndWinners.js => classNames.js} |  0
 10 files changed, 113 insertions(+), 65 deletions(-)
 rename ui/source/js/helpers/{decodeViewersAndWinners.js => classNames.js} (100%)

diff --git a/ui/source/css/basics/icons.css b/ui/source/css/basics/icons.css
index 2779fe1..83dd204 100644
--- a/ui/source/css/basics/icons.css
+++ b/ui/source/css/basics/icons.css
@@ -1,13 +1,17 @@
 .icon {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
-    transition: transform var(--anim-duration-fast) var(--anim-easing);
-    svg {
-        max-width: 100%;
-        max-height: 100%;
+    &::after {
+		content: '';
+		display: inline-block;
+		margin-left: 0.5rem;
+		width: 1rem;
+		height: 1rem;
+        vertical-align: -1px;
     }
+}
+
+.icon--master {
+	&::after {
+		background: transparent url('../images/eye.svg') 50% 50% no-repeat;
+        background-size: 1rem 1rem;
+	}
 }
\ No newline at end of file
diff --git a/ui/source/css/basics/labels.css b/ui/source/css/basics/labels.css
index ddc5592..18a529a 100644
--- a/ui/source/css/basics/labels.css
+++ b/ui/source/css/basics/labels.css
@@ -2,6 +2,10 @@ legend {
 
 }
 
+label[for] {
+    cursor: pointer;
+}
+
 .label {
 
 }
\ No newline at end of file
diff --git a/ui/source/css/basics/switch.css b/ui/source/css/basics/switch.css
index 1356b64..794c1f2 100644
--- a/ui/source/css/basics/switch.css
+++ b/ui/source/css/basics/switch.css
@@ -1,36 +1,69 @@
-.switch {
+.switch,
+.switch-toggle {
+    margin: 0.5rem auto 1rem auto;
+    border: 2px solid var(--color-border);
+    border-radius: var(--border-radius);
+}
+
+.switch-toggle {
     display: flex;
 }
 
-.switch__item {
-    &:first-child {
-        .switch__label {
-            border-radius: 0.5rem 0 0 0.5rem;
-        }
-    }
-    &:last-child {
-        .switch__label {
-            border-radius: 0 0.5rem 0.5rem 0;
-        }
-    }
-    & + .switch__item {
-        .switch__label {
-            border-left: 0;
+.switch {
+    display: block;
+    position: relative;
+    text-align: center;
+}
+
+.switch__label,
+.switch-toggle__label {
+    display: block;
+    color: var(--color-text);
+    background-color: var(--color-gray-30);
+    transition: background-color var(--anim-duration);
+}
+
+.switch__control,
+.switch-toggle__control {
+    display: none;
+    overflow: hidden;
+    height: 0;
+	width: 0;
+	visibility: hidden;
+}
+
+.switch__control {
+    &:checked {
+        & + .switch__label {
+            background-color: var(--color-white);
         }
     }
 }
 
-.switch__label {
-    padding: 0.25rem 1rem;
-    box-shadow: 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
-    border: 1px solid var(--color-gray-30);
-    background: linear-gradient(to bottom, var(--color-gray-40) 0%, var(--color-gray-50) 100%);
+.switch-toggle__item {
+    flex-grow: 1;
+    text-align: center;
+    & + & {
+        border-left: 1px solid var(--color-border);
+    }
+    &:first-child {
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
+    }
+    &:last-child {
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    }
 }
 
-.switch__input:checked + .switch__label {
-    color: var(--color-white);
-    background: linear-gradient(to bottom, var(--color-green-10) 0%, var(--color-green-20) 100%);
-    .sub-label {
-        font-weight: var(--font-weight-normal);
+.switch-toggle__control {
+    &:checked {
+        & + .switch-toggle__label {
+            color: var(--color-white);
+            &.switch--blue {
+                background-color: var(--color-team-blue);
+            }
+            &.switch--red {
+                background-color: var(--color-team-red);
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/ui/source/css/utilities/00-variables.css b/ui/source/css/utilities/00-variables.css
index bddfd5e..17da0a9 100644
--- a/ui/source/css/utilities/00-variables.css
+++ b/ui/source/css/utilities/00-variables.css
@@ -1,11 +1,16 @@
 :root {
 	--color-black: #000;
 	--color-white: #fff;
+	--color-gray-10: #333;
+	--color-gray-20: #666;
+	--color-gray-30: #999;
+	--color-gray-40: #ccc;
 
 	--color-team-blue: rgb(0,0,255);
 	--color-team-red: rgb(255,0,0);
 
 	--color-text: var(--color-black);
+	--color-border: var(--color-gray-30);
 
 	--font-family-primary: 'Montserrat', sans-serif;
 	--font-size-base: 1rem;
diff --git a/ui/source/js/components/board.js b/ui/source/js/components/board.js
index c6c4fc2..1e7a441 100644
--- a/ui/source/js/components/board.js
+++ b/ui/source/js/components/board.js
@@ -5,7 +5,8 @@ function Board(props) {
 
 	function renderPiece(i) {
 		return <Piece {...props.pieces[i]}
-			viewer = {props.viewer}
+			teams = {props.teams}
+			playerId = {props.playerId}
 			key = {i}
 			onClick = {() => props.onClick(i)}
 		/>;
diff --git a/ui/source/js/components/controls.js b/ui/source/js/components/controls.js
index f793f04..2ccaaa6 100644
--- a/ui/source/js/components/controls.js
+++ b/ui/source/js/components/controls.js
@@ -27,39 +27,43 @@ function Controls(props) {
                 <button type="button" className="button button--alt" onClick={props.onClickPromptNewGame}>New Game</button>
                 <fieldset className="control-set">
                     <legend>I'm ...</legend>
-                    <div className="toggleSwitches">
-                        <div className="switchItem">
+                    <div className="switch-toggle">
+                        <div className="switch-toggle__item">
                             <input
                                 type="radio"
-                                name="viewer"
+                                name="playerTeam"
                                 id="viewAsBlue"
                                 defaultChecked={getPlayerTeam(props.teams, props.playerId) === 1}
                                 onClick={props.onClickViewBlue}
+                                className="switch-toggle__control"
                             />
-                            <label htmlFor="viewAsBlue">on Blue Team</label>
+                            <label htmlFor="viewAsBlue" className="switch--blue switch-toggle__label">Blue</label>
                         </div>
-                        <div className="switchItem">
+                        <div className="switch-toggle__item">
                             <input
                                 type="radio"
-                                name="viewer"
+                                name="playerTeam"
                                 id="viewAsRed"
                                 defaultChecked={getPlayerTeam(props.teams, props.playerId) === 2}
                                 onClick={props.onClickViewRed}
+                                className="switch-toggle__control"
                             />
-                            <label htmlFor="viewAsRed">on Red Team</label>
+                            <label htmlFor="viewAsRed" className="switch--red switch-toggle__label">Red</label>
                         </div>
                     </div>
-                    <div className="">
-                        <div className="switchItem">
-                            <input
-                                type="checkbox"
-                                name="master"
-                                id="setAsMaster"
-                                defaultChecked={isMaster(props.teams, props.playerId)}
-                                onClick={e => props.onClickViewMaster(e)}
-                            />
-                            <label htmlFor="setAsMaster">a Master</label>
-                        </div>
+                    <div className="switch">
+                        <input
+                            type="checkbox"
+                            name="master"
+                            id="setAsMaster"
+                            defaultChecked={isMaster(props.teams, props.playerId)}
+                            onClick={e => props.onClickViewMaster(e)}
+                            className="switch__control"
+                        />
+                        <label htmlFor="setAsMaster" className="switch__label">
+                            a Master
+                            <i className="icon icon--master"></i>
+                        </label>
                     </div>
                 </fieldset>
             </div>
diff --git a/ui/source/js/components/game.js b/ui/source/js/components/game.js
index 815429c..41c640e 100644
--- a/ui/source/js/components/game.js
+++ b/ui/source/js/components/game.js
@@ -48,12 +48,11 @@ class Game extends React.Component {
 			pieces: buildPieceArray(),
 			winner: null,
 			teams: generateTeams(),
-			viewer: 0,
 			currentPlayerId: currentPlayerId
 		};
 	}
 
-	switchTeamsClick() {
+	switchTeamTurnClick() {
 		this.setState({ isBlueTurn: !this.state.isBlueTurn });
 	}
 
@@ -105,24 +104,23 @@ class Game extends React.Component {
 				<Stats
 					isBlueTurn={this.state.isBlueTurn}
 					winner={this.state.winner}
-					viewer={this.state.viewer}
 					score={this.state.score}
 					teams={this.state.teams}
 				/>
 				<Board
 					totalPieces={gamePiecesCount}
 					pieces={this.state.pieces}
-					viewer={this.state.viewer}
+					teams={this.state.teams}
+					playerId={this.state.currentPlayerId}
 					winner={this.state.winner}
 					onClick={(i) => this.pieceChosenClick(i)}
 				/>
 				<Controls
-					viewer={this.state.viewer}
 					winner={this.state.winner}
 					teams={this.state.teams}
 					playerId={this.state.currentPlayerId}
 					isBlueTurn={this.state.isBlueTurn}
-					onClickSwitchTeams={() => switchTeamsClick()}
+					onClickSwitchTeams={() => this.switchTeamTurnClick()}
 					onClickViewMaster={
 						(e) => this.setState({
 							teams: setPlayerIsMaster(this.state.teams, this.state.currentPlayerId, e.target.checked)
diff --git a/ui/source/js/components/piece.js b/ui/source/js/components/piece.js
index ccdb771..18d2472 100644
--- a/ui/source/js/components/piece.js
+++ b/ui/source/js/components/piece.js
@@ -1,9 +1,11 @@
 import React from 'react';
+import {getPlayerIsMaster} from '../helpers/teams.js';
 
 function Piece(props) {
 
 	function getVisibleClass() {
-		return (props.isChosen || props.viewer === 0) ? `piece--${props.owner}` : 'piece--neutral';
+		return (props.isChosen || getPlayerIsMaster(props.teams, props.playerId) === true)
+			? `piece--${props.owner}` : 'piece--neutral';
 	}
 
 	return (
diff --git a/ui/source/js/components/stats.js b/ui/source/js/components/stats.js
index 043c323..2343311 100644
--- a/ui/source/js/components/stats.js
+++ b/ui/source/js/components/stats.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import TeamList from './teamlist.js';
-import {getActiveTeamColorCSS, getViewerColorCSS, getViewerName} from '../helpers/decodeViewersAndWinners.js';
+import {getActiveTeamColorCSS} from '../helpers/classNames.js';
 import capitalizeFirstLetter from '../helpers/stringFunctions.js';
 
 function Stats(props) {
@@ -24,9 +24,6 @@ function Stats(props) {
                 <li className={"status-list__item text-center status-list__item--" + getActiveTeamColorCSS(props.isBlueTurn, props.winner)}>
                     {getStatus(props.winner, props.isBlueTurn)}
                 </li>
-                <li className={"status-list__item  text-center status-list__item--" + getViewerColorCSS(props.viewer)}>
-                    Viewing as: {getViewerName(props.viewer)}
-                </li>
             </ul>
             <TeamList teams={props.teams} />
         </aside>
diff --git a/ui/source/js/helpers/decodeViewersAndWinners.js b/ui/source/js/helpers/classNames.js
similarity index 100%
rename from ui/source/js/helpers/decodeViewersAndWinners.js
rename to ui/source/js/helpers/classNames.js

From e45a67dd07f273fcae162093eb5dbbfe008eff59 Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Sun, 3 Feb 2019 20:39:39 -0600
Subject: [PATCH 03/12] Updated interface.

---
 ui/source/css/basics/icons.css      |  2 +-
 ui/source/js/components/controls.js | 16 +++++++++-------
 ui/source/js/components/stats.js    |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/ui/source/css/basics/icons.css b/ui/source/css/basics/icons.css
index 83dd204..4af4133 100644
--- a/ui/source/css/basics/icons.css
+++ b/ui/source/css/basics/icons.css
@@ -5,7 +5,7 @@
 		margin-left: 0.5rem;
 		width: 1rem;
 		height: 1rem;
-        vertical-align: -1px;
+        vertical-align: -2px;
     }
 }
 
diff --git a/ui/source/js/components/controls.js b/ui/source/js/components/controls.js
index 2ccaaa6..2e29d08 100644
--- a/ui/source/js/components/controls.js
+++ b/ui/source/js/components/controls.js
@@ -3,9 +3,8 @@ import {getPlayerTeam, getPlayerIsMaster} from '../helpers/teams.js';
 
 function Controls(props) {
 
-    function isMaster(viewerId, controlId) {
-        return getPlayerIsMaster(props.teams, props.playerId);
-    }
+    let playerIsMaster = getPlayerIsMaster(props.teams, props.playerId);
+    let masterIcon = generateMasterIcon();
 
     function isOtherTeamsTurn(teamArray, playerId, isBlueTurn) {
         return getPlayerTeam(teamArray, playerId) === 1 ? !isBlueTurn : true;
@@ -15,6 +14,10 @@ function Controls(props) {
         return winnerName !== null ? true : false;
     }
 
+    function generateMasterIcon() {
+        return playerIsMaster ? <span>Master <i className="icon icon--master"></i></span> : <span>Player</span>;
+    }
+
     return (
         <aside className="sidebar sidebar--right">
             <div className="button-set">
@@ -26,7 +29,7 @@ function Controls(props) {
                 </button>
                 <button type="button" className="button button--alt" onClick={props.onClickPromptNewGame}>New Game</button>
                 <fieldset className="control-set">
-                    <legend>I'm ...</legend>
+                    <legend>I'm a...</legend>
                     <div className="switch-toggle">
                         <div className="switch-toggle__item">
                             <input
@@ -56,13 +59,12 @@ function Controls(props) {
                             type="checkbox"
                             name="master"
                             id="setAsMaster"
-                            defaultChecked={isMaster(props.teams, props.playerId)}
+                            defaultChecked={playerIsMaster}
                             onClick={e => props.onClickViewMaster(e)}
                             className="switch__control"
                         />
                         <label htmlFor="setAsMaster" className="switch__label">
-                            a Master
-                            <i className="icon icon--master"></i>
+                            { masterIcon }
                         </label>
                     </div>
                 </fieldset>
diff --git a/ui/source/js/components/stats.js b/ui/source/js/components/stats.js
index 2343311..a24c4a4 100644
--- a/ui/source/js/components/stats.js
+++ b/ui/source/js/components/stats.js
@@ -10,7 +10,7 @@ function Stats(props) {
 			return `${(isBlueTurn ? 'Blue' : 'Red')} Turn`;
 		}
 		winner = capitalizeFirstLetter(winner);
-		return `${winner} team wins.`;
+		return `${winner} Wins`;
     }
 
     return (

From 10a5b43835603898b645943235d750ed0593a3dc Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Sun, 3 Feb 2019 23:03:18 -0600
Subject: [PATCH 04/12] Added entry screen.

---
 ui/source/css/basics/inputs.css               |  7 ++
 ui/source/css/components/lobby/prompt.css     | 31 +++++++
 ui/source/js/components/entry.js              | 83 +++++++++++++++++++
 ui/source/js/components/game.js               |  2 +-
 ui/source/js/components/lobby.js              | 24 ++++++
 ui/source/js/components/stats.js              |  2 +-
 ui/source/js/helpers/playerUtilities.js       | 13 +++
 ui/source/js/helpers/seed.js                  | 24 ------
 ui/source/js/helpers/seedUtilities.js         | 25 ++++++
 ui/source/js/helpers/stringFunctions.js       |  5 --
 ui/source/js/helpers/stringUtilities.js       |  9 ++
 .../js/helpers/{teams.js => teamUtilities.js} |  0
 ui/source/js/main.js                          |  4 +-
 13 files changed, 197 insertions(+), 32 deletions(-)
 create mode 100644 ui/source/css/components/lobby/prompt.css
 create mode 100644 ui/source/js/components/entry.js
 create mode 100644 ui/source/js/components/lobby.js
 create mode 100644 ui/source/js/helpers/playerUtilities.js
 delete mode 100644 ui/source/js/helpers/seed.js
 create mode 100644 ui/source/js/helpers/seedUtilities.js
 delete mode 100644 ui/source/js/helpers/stringFunctions.js
 create mode 100644 ui/source/js/helpers/stringUtilities.js
 rename ui/source/js/helpers/{teams.js => teamUtilities.js} (100%)

diff --git a/ui/source/css/basics/inputs.css b/ui/source/css/basics/inputs.css
index a3ffd62..03076b6 100644
--- a/ui/source/css/basics/inputs.css
+++ b/ui/source/css/basics/inputs.css
@@ -1,5 +1,12 @@
 .input {
+    display: inline-block;
+	appearance: none;
+	padding: 0.5rem 0.75rem;
+	font-size: 1rem;
     font-family: var(--font-family-primary);
+	box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.15);
+    border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
 }
 
 .input--select {
diff --git a/ui/source/css/components/lobby/prompt.css b/ui/source/css/components/lobby/prompt.css
new file mode 100644
index 0000000..b48ad28
--- /dev/null
+++ b/ui/source/css/components/lobby/prompt.css
@@ -0,0 +1,31 @@
+.lobby-prompt__form {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 1rem;
+    max-width: 45rem;
+    & > * {
+        display: block;
+    }
+    .label {
+        align-self: center;
+    }
+
+}
+
+@media (--small) {
+    .lobby-prompt__form {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (--medium) {
+    .lobby-prompt__form {
+        grid-template-columns: 1fr 2fr 1fr;
+        input[type='submit'] {
+            grid-column: 1 / 4;
+        }
+        input[name='nameInput'] {
+            grid-column: 2/4;
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/source/js/components/entry.js b/ui/source/js/components/entry.js
new file mode 100644
index 0000000..387e533
--- /dev/null
+++ b/ui/source/js/components/entry.js
@@ -0,0 +1,83 @@
+import React, {Component} from 'react';
+import Lobby from './lobby.js';
+import {getSeed, createSeed, setSeed} from '../helpers/seedUtilities.js';
+import {getPlayerName, setPlayerName} from '../helpers/playerUtilities.js';
+import {stripSpecialCharacters} from '../helpers/stringUtilities.js';
+
+class Entry extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+            seed: '',
+            playerName: getPlayerName(),
+            lobbyValue: getSeed()
+        };
+        this.handleLobbyChange = this.handleLobbyChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleNameChange = this.handleNameChange.bind(this);
+        this.handleRandomClick = this.handleRandomClick.bind(this);
+    }
+
+    handleLobbyChange(event) {
+        this.setState({ lobbyValue: event.target.value.toLowerCase().substr(0,20) });
+    }
+
+    handleNameChange(event) {
+        this.setState({ playerName: stripSpecialCharacters(event.target.value).substr(0,20) });
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        setSeed(this.state.lobbyValue);
+        setPlayerName(this.state.playerName);
+        this.setState({ seed: this.state.lobbyValue });
+    }
+
+    handleRandomClick(event) {
+        this.setState({ lobbyValue: createSeed() });
+    }
+
+    render() {
+        return (
+            <div className="lobby-prompt">
+                <form onSubmit={this.handleSubmit} className="lobby-prompt__form">
+                    <label htmlFor="playerName" className="playerName">Player Name:</label>
+                    <input
+                        type="text"
+                        id="nameInput"
+                        name="nameInput"
+                        className="input"
+                        placeholder="Enter Player Name"
+                        value={this.state.playerName}
+                        maxLength="20"
+                        onChange={this.handleNameChange}
+                    />
+                    <label htmlFor="lobbyInput" className="label">Lobby Name:</label>
+                    <input
+                        type="text"
+                        id="lobbyInput"
+                        name="lobbySeed"
+                        className="input"
+                        placeholder="Enter a Lobby"
+                        value={this.state.lobbyValue}
+                        maxLength="20"
+                        onChange={this.handleLobbyChange}
+                    />
+                    <input
+                        type="button"
+                        className="button"
+                        value="Random Lobby"
+                        onClick={this.handleRandomClick}
+                    />
+                    <input
+                        type="submit"
+                        className="button button--alt"
+                        value="Enter Lobby"
+                    />
+                </form>
+            </div>
+        );
+	}
+}
+
+export default Entry;
\ No newline at end of file
diff --git a/ui/source/js/components/game.js b/ui/source/js/components/game.js
index 41c640e..ecfdf3a 100644
--- a/ui/source/js/components/game.js
+++ b/ui/source/js/components/game.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import Board from './board.js';
 import Stats from './stats.js';
 import Controls from './controls.js';
-import getSeed from '../helpers/seed.js';
+import {getSeed} from '../helpers/seed.js';
 import getWordlist from '../helpers/generateWordList.js';
 import getOwnershipList from '../helpers/generateOwners.js';
 import {generateTeams, setPlayerTeam, setPlayerIsMaster} from '../helpers/teams.js';
diff --git a/ui/source/js/components/lobby.js b/ui/source/js/components/lobby.js
new file mode 100644
index 0000000..e4d3c32
--- /dev/null
+++ b/ui/source/js/components/lobby.js
@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import {generateTeams} from '../helpers/teamUtilities.js';
+import Player from './player.js';
+
+const maxPlayers = 16;
+
+class Lobby extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+            teams: generateTeams()
+		};
+	}
+
+    render() {
+        return (
+            <div className="lobby">
+                Such a lobby!
+            </div>
+        );
+	}
+}
+
+export default Lobby;
\ No newline at end of file
diff --git a/ui/source/js/components/stats.js b/ui/source/js/components/stats.js
index a24c4a4..89f55e1 100644
--- a/ui/source/js/components/stats.js
+++ b/ui/source/js/components/stats.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import TeamList from './teamlist.js';
 import {getActiveTeamColorCSS} from '../helpers/classNames.js';
-import capitalizeFirstLetter from '../helpers/stringFunctions.js';
+import {capitalizeFirstLetter} from '../helpers/stringUtilities.js';
 
 function Stats(props) {
 
diff --git a/ui/source/js/helpers/playerUtilities.js b/ui/source/js/helpers/playerUtilities.js
new file mode 100644
index 0000000..72d75ad
--- /dev/null
+++ b/ui/source/js/helpers/playerUtilities.js
@@ -0,0 +1,13 @@
+function getPlayerName() {
+    const playerName = window.localStorage.getItem('playerName');
+    return playerName ? playerName : '';
+}
+
+function setPlayerName(playerName) {
+    console.log(playerName);
+    if (playerName) {
+        window.localStorage.setItem('playerName', playerName);
+    }
+}
+
+export {getPlayerName, setPlayerName};
\ No newline at end of file
diff --git a/ui/source/js/helpers/seed.js b/ui/source/js/helpers/seed.js
deleted file mode 100644
index 081c61d..0000000
--- a/ui/source/js/helpers/seed.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import getWordlist from '../helpers/generateWordList.js';
-
-function getSeed() {
-    let seed = window.location.hash;
-    if (!seed) {
-        seed = createSeed();
-    }
-    setSeed(seed);
-    return seed;
-}
-
-function createSeed(newSeed) {
-    if (!newSeed) {
-        return getWordlist(2).join('-');
-    } else {
-        return newSeed;
-    }
-}
-
-function setSeed(newSeed) {
-    window.location.hash = newSeed;
-}
-
-export default getSeed;
\ No newline at end of file
diff --git a/ui/source/js/helpers/seedUtilities.js b/ui/source/js/helpers/seedUtilities.js
new file mode 100644
index 0000000..8fb609e
--- /dev/null
+++ b/ui/source/js/helpers/seedUtilities.js
@@ -0,0 +1,25 @@
+import getWordlist from './generateWordList.js';
+import {stripSpecialCharacters} from './stringUtilities.js';
+
+function getSeed() {
+    let seed = stripSpecialCharacters(window.location.hash).toLowerCase().substr(0,20);
+    if (!seed) {
+        seed = createSeed();
+    }
+    setSeed(seed);
+    return seed;
+}
+
+function createSeed(newSeed) {
+    if (!newSeed) {
+        return getWordlist(2).join('-').toLowerCase();
+    } else {
+        return newSeed.toLowerCase();
+    }
+}
+
+function setSeed(newSeed) {
+    window.location.hash = newSeed;
+}
+
+export {getSeed, setSeed, createSeed};
\ No newline at end of file
diff --git a/ui/source/js/helpers/stringFunctions.js b/ui/source/js/helpers/stringFunctions.js
deleted file mode 100644
index 6206bfa..0000000
--- a/ui/source/js/helpers/stringFunctions.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function capitalizeFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-export default capitalizeFirstLetter;
\ No newline at end of file
diff --git a/ui/source/js/helpers/stringUtilities.js b/ui/source/js/helpers/stringUtilities.js
new file mode 100644
index 0000000..eb0a38d
--- /dev/null
+++ b/ui/source/js/helpers/stringUtilities.js
@@ -0,0 +1,9 @@
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function stripSpecialCharacters(string) {
+    return string.replace(/[^a-zA-Z-]/g, '');
+}
+
+export {capitalizeFirstLetter, stripSpecialCharacters};
\ No newline at end of file
diff --git a/ui/source/js/helpers/teams.js b/ui/source/js/helpers/teamUtilities.js
similarity index 100%
rename from ui/source/js/helpers/teams.js
rename to ui/source/js/helpers/teamUtilities.js
diff --git a/ui/source/js/main.js b/ui/source/js/main.js
index a00b355..fad01f0 100644
--- a/ui/source/js/main.js
+++ b/ui/source/js/main.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import {render} from 'react-dom';
+import Entry from './components/entry.js';
+import Lobby from './components/lobby.js';
 import Game from './components/game.js';
 
 const rootEl = document.getElementById('app');
 
 render(
-	<Game />,
+	<Entry />,
 	rootEl
 );
\ No newline at end of file

From 400bcf98c4882e4819ed81e5ae3240f8c1e4329b Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Mon, 4 Feb 2019 16:12:32 -0600
Subject: [PATCH 05/12] Refrence namechange updates.

---
 ui/source/js/components/controls.js | 2 +-
 ui/source/js/components/game.js     | 4 ++--
 ui/source/js/components/piece.js    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/source/js/components/controls.js b/ui/source/js/components/controls.js
index 2e29d08..67f30f7 100644
--- a/ui/source/js/components/controls.js
+++ b/ui/source/js/components/controls.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {getPlayerTeam, getPlayerIsMaster} from '../helpers/teams.js';
+import {getPlayerTeam, getPlayerIsMaster} from '../helpers/teamUtilities.js';
 
 function Controls(props) {
 
diff --git a/ui/source/js/components/game.js b/ui/source/js/components/game.js
index ecfdf3a..96139ed 100644
--- a/ui/source/js/components/game.js
+++ b/ui/source/js/components/game.js
@@ -2,10 +2,10 @@ import React, {Component} from 'react';
 import Board from './board.js';
 import Stats from './stats.js';
 import Controls from './controls.js';
-import {getSeed} from '../helpers/seed.js';
+import {getSeed} from '../helpers/seedUtilities.js';
 import getWordlist from '../helpers/generateWordList.js';
 import getOwnershipList from '../helpers/generateOwners.js';
-import {generateTeams, setPlayerTeam, setPlayerIsMaster} from '../helpers/teams.js';
+import {generateTeams, setPlayerTeam, setPlayerIsMaster} from '../helpers/teamUtilities.js';
 import switchTurns from '../helpers/switchTurns.js';
 import keepScore from '../helpers/keepScore.js';
 import calculateWinner from '../helpers/winner.js';
diff --git a/ui/source/js/components/piece.js b/ui/source/js/components/piece.js
index 18d2472..ff2ef8e 100644
--- a/ui/source/js/components/piece.js
+++ b/ui/source/js/components/piece.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {getPlayerIsMaster} from '../helpers/teams.js';
+import {getPlayerIsMaster} from '../helpers/teamUtilities.js';
 
 function Piece(props) {
 

From 1f5be72631670737316ef7812a2d6587b7617029 Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Tue, 5 Feb 2019 19:10:06 -0600
Subject: [PATCH 06/12] Start moving things to controller.

---
 ui/source/js/components/controller.js    | 20 ++++++++++++++++++++
 ui/source/js/helpers/generateWordList.js |  2 +-
 ui/source/js/main.js                     |  6 ++----
 3 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 ui/source/js/components/controller.js

diff --git a/ui/source/js/components/controller.js b/ui/source/js/components/controller.js
new file mode 100644
index 0000000..bc0dd4b
--- /dev/null
+++ b/ui/source/js/components/controller.js
@@ -0,0 +1,20 @@
+import React, {Component} from 'react';
+
+class Game extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			page: 1
+		};
+	}
+
+	render() {
+		return (
+			<div className="controller">
+				<h1>Controller!</h1>
+			</div>
+		);
+	}
+}
+
+export default Game;
\ No newline at end of file
diff --git a/ui/source/js/helpers/generateWordList.js b/ui/source/js/helpers/generateWordList.js
index c9a9876..35cae96 100644
--- a/ui/source/js/helpers/generateWordList.js
+++ b/ui/source/js/helpers/generateWordList.js
@@ -60,7 +60,7 @@ function getWordlist(count) {
         'vaccination', 'vacuum', 'vampire', 'vanguard', 'victory', 'viewpoint', 'villa', 'vista', 'vocalist', 'volcano',
         'voltage',
 
-        'waistcoat', 'waitress', 'wardrobe', 'warmth', 'Washington', 'watchdog', 'wealth', 'whereabouts', 'whisky', 'widget',
+        'waistcoat', 'waitress', 'wardrobe', 'warmth', 'Washington', 'watchdog', 'wealth', 'werewolf', 'whisky', 'widget',
         'width', 'windfall', 'wiring', 'witchcraft', 'words', 'workman',
 
         'yak', 'yogurt', 'youngster',
diff --git a/ui/source/js/main.js b/ui/source/js/main.js
index fad01f0..100b13f 100644
--- a/ui/source/js/main.js
+++ b/ui/source/js/main.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import {render} from 'react-dom';
-import Entry from './components/entry.js';
-import Lobby from './components/lobby.js';
-import Game from './components/game.js';
+import Controller from './components/controller.js';
 
 const rootEl = document.getElementById('app');
 
 render(
-	<Entry />,
+	<Controller />,
 	rootEl
 );
\ No newline at end of file

From d2e933983a32bdb03b8cf4302f4ac2e56ec9afa6 Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Wed, 6 Feb 2019 00:48:46 -0600
Subject: [PATCH 07/12] Added some routing

---
 ui/source/css/components/frame/sidebar.css    |  5 ++
 .../lobby/{prompt.css => entry.css}           |  6 +-
 ui/source/css/components/lobby/lobby.css      | 15 +++++
 ui/source/css/components/player/team-list.css | 17 ++---
 ui/source/css/utilities/00-variables.css      |  9 ++-
 ui/source/js/components/controller.js         | 67 +++++++++++++++++--
 ui/source/js/components/entry.js              | 32 ++++-----
 ui/source/js/components/lobby.js              | 52 ++++++++++++--
 ui/source/js/components/player.js             | 29 +++++++-
 ui/source/js/components/teamlist.js           | 11 ++-
 ui/source/js/helpers/teamUtilities.js         | 21 +++---
 11 files changed, 203 insertions(+), 61 deletions(-)
 rename ui/source/css/components/lobby/{prompt.css => entry.css} (86%)
 create mode 100644 ui/source/css/components/lobby/lobby.css

diff --git a/ui/source/css/components/frame/sidebar.css b/ui/source/css/components/frame/sidebar.css
index d2e464f..8034dd7 100644
--- a/ui/source/css/components/frame/sidebar.css
+++ b/ui/source/css/components/frame/sidebar.css
@@ -3,6 +3,11 @@
     margin: 1rem 0;
     border: solid;
     background-color: rgba(255,255,255,0.5);
+    .team-list {
+        & + & {
+            margin-top: 1rem;
+        }
+    }
 }
 
 @media (--large) {
diff --git a/ui/source/css/components/lobby/prompt.css b/ui/source/css/components/lobby/entry.css
similarity index 86%
rename from ui/source/css/components/lobby/prompt.css
rename to ui/source/css/components/lobby/entry.css
index b48ad28..5781d4e 100644
--- a/ui/source/css/components/lobby/prompt.css
+++ b/ui/source/css/components/lobby/entry.css
@@ -1,4 +1,4 @@
-.lobby-prompt__form {
+.entry-prompt__form {
     display: grid;
     grid-template-columns: 1fr;
     grid-gap: 1rem;
@@ -13,13 +13,13 @@
 }
 
 @media (--small) {
-    .lobby-prompt__form {
+    .entry-prompt__form {
         grid-template-columns: 1fr 1fr;
     }
 }
 
 @media (--medium) {
-    .lobby-prompt__form {
+    .entry-prompt__form {
         grid-template-columns: 1fr 2fr 1fr;
         input[type='submit'] {
             grid-column: 1 / 4;
diff --git a/ui/source/css/components/lobby/lobby.css b/ui/source/css/components/lobby/lobby.css
new file mode 100644
index 0000000..3ba1a55
--- /dev/null
+++ b/ui/source/css/components/lobby/lobby.css
@@ -0,0 +1,15 @@
+.lobby-prompt__form {
+
+}
+
+@media (--medium) {
+    .lobby-prompt__form {
+        .teams-list {
+            display: flex;
+            justify-content: center;
+        }
+        .team-list {
+            margin: 0 1rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/source/css/components/player/team-list.css b/ui/source/css/components/player/team-list.css
index bb3270a..feb96f9 100644
--- a/ui/source/css/components/player/team-list.css
+++ b/ui/source/css/components/player/team-list.css
@@ -2,16 +2,6 @@
 	margin: 1rem 0;
 }
 
-.team-list {
-	& + & {
-		margin-top: 1rem;
-	}
-}
-
-.team-list__item {
-
-}
-
 .team-list__item--title {
 	font-weight: var(--font-weight-light);
 	border-bottom: 1px dotted var(--color-text);
@@ -40,4 +30,11 @@
 		background: transparent url('../images/eye.svg') 50% 50% no-repeat;
 		background-size: 1rem 1rem;
 	}
+}
+
+.team-list__item--ready {
+	&::before {
+		content: '✓';
+		color: var(--color-positive);
+	}
 }
\ No newline at end of file
diff --git a/ui/source/css/utilities/00-variables.css b/ui/source/css/utilities/00-variables.css
index 17da0a9..af7572d 100644
--- a/ui/source/css/utilities/00-variables.css
+++ b/ui/source/css/utilities/00-variables.css
@@ -6,8 +6,13 @@
 	--color-gray-30: #999;
 	--color-gray-40: #ccc;
 
-	--color-team-blue: rgb(0,0,255);
-	--color-team-red: rgb(255,0,0);
+	--color-team-blue: rgb(10,10,255);
+	--color-team-red: rgb(255,10,10);
+
+	--color-green: rgb(25,150,25);
+	--color-positive: var(--color-green);
+	--color-red: rgb(255,0,0);
+	--color-negative: var(--color-red);
 
 	--color-text: var(--color-black);
 	--color-border: var(--color-gray-30);
diff --git a/ui/source/js/components/controller.js b/ui/source/js/components/controller.js
index bc0dd4b..1f5f290 100644
--- a/ui/source/js/components/controller.js
+++ b/ui/source/js/components/controller.js
@@ -1,20 +1,75 @@
 import React, {Component} from 'react';
+import Entry from './entry.js';
+import Lobby from './lobby.js';
+import Game from './game.js';
 
-class Game extends React.Component {
+import {setSeed} from '../helpers/seedUtilities.js';
+
+class Controller extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			page: 1
-		};
-	}
+            page: 1,
+            seed: null,
+            teams: null,
+            currentPlayerId: null,
+            currentPlayerName: null,
+            currentLobbyName: null,
+            pieces: null,
+			score: null,
+			winner: null,
+            isBlueTurn: true
+        };
+        this.handleEntrySubmit = this.handleEntrySubmit.bind(this);
+        this.handleLobbySubmit = this.handleLobbySubmit.bind(this);
+    }
+
+    setPage(pageId) {
+        setState({ page: pageId });
+    }
+
+    getPage(pageId) {
+        let pageRoute;
+        switch(pageId) {
+            case 1:
+                pageRoute = <Entry handleEntrySubmit={this.handleEntrySubmit} />;
+                break;
+            case 2:
+                pageRoute = <Lobby
+                    handleLobbySubmit={this.handleLobbySubmit}
+                    currentPlayerId={this.currentPlayerId}
+                    currentPlayerName={this.currentPlayerName}
+                    currentLobbyName={this.currentLobbyName}
+                />;
+                break;
+            case 3:
+                pageRoute = <Game />;
+                break;
+            default:
+                console.error('Invalid Page Id');
+        }
+        return pageRoute;
+    }
+
+    handleEntrySubmit(entryState) {
+        const newState = {...this.state, ...entryState};
+        newState.page = 2;
+        newState.seed = newState.currentLobbyName;
+        setSeed(newState.seed);
+        this.setState({ ...newState });
+    }
+
+    handleLobbySubmit(lobbyState) {
+        console.log('lobby Done');
+    }
 
 	render() {
 		return (
 			<div className="controller">
-				<h1>Controller!</h1>
+                { this.getPage(this.state.page) }
 			</div>
 		);
 	}
 }
 
-export default Game;
\ No newline at end of file
+export default Controller;
\ No newline at end of file
diff --git a/ui/source/js/components/entry.js b/ui/source/js/components/entry.js
index 387e533..20e21d8 100644
--- a/ui/source/js/components/entry.js
+++ b/ui/source/js/components/entry.js
@@ -1,5 +1,4 @@
 import React, {Component} from 'react';
-import Lobby from './lobby.js';
 import {getSeed, createSeed, setSeed} from '../helpers/seedUtilities.js';
 import {getPlayerName, setPlayerName} from '../helpers/playerUtilities.js';
 import {stripSpecialCharacters} from '../helpers/stringUtilities.js';
@@ -8,47 +7,39 @@ class Entry extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-            seed: '',
-            playerName: getPlayerName(),
-            lobbyValue: getSeed()
+            currentPlayerName: getPlayerName(),
+            currentLobbyName: getSeed()
         };
         this.handleLobbyChange = this.handleLobbyChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
         this.handleNameChange = this.handleNameChange.bind(this);
         this.handleRandomClick = this.handleRandomClick.bind(this);
     }
 
     handleLobbyChange(event) {
-        this.setState({ lobbyValue: event.target.value.toLowerCase().substr(0,20) });
+        this.setState({ currentLobbyName: event.target.value.toLowerCase().substr(0,20) });
     }
 
     handleNameChange(event) {
-        this.setState({ playerName: stripSpecialCharacters(event.target.value).substr(0,20) });
-    }
-
-    handleSubmit(event) {
-        event.preventDefault();
-        setSeed(this.state.lobbyValue);
-        setPlayerName(this.state.playerName);
-        this.setState({ seed: this.state.lobbyValue });
+        this.setState({ currentPlayerName: stripSpecialCharacters(event.target.value).substr(0,20) });
     }
 
     handleRandomClick(event) {
-        this.setState({ lobbyValue: createSeed() });
+        this.setState({ currentLobbyName: createSeed() });
     }
 
     render() {
         return (
-            <div className="lobby-prompt">
-                <form onSubmit={this.handleSubmit} className="lobby-prompt__form">
-                    <label htmlFor="playerName" className="playerName">Player Name:</label>
+            <div className="entry-prompt">
+                <form onSubmit={() => this.props.handleEntrySubmit(this.state)} className="entry-prompt__form">
+                    <label htmlFor="currentPlayerName" className="currentPlayerName">Player Name:</label>
                     <input
                         type="text"
                         id="nameInput"
                         name="nameInput"
                         className="input"
                         placeholder="Enter Player Name"
-                        value={this.state.playerName}
+                        required="required"
+                        value={this.state.currentPlayerName}
                         maxLength="20"
                         onChange={this.handleNameChange}
                     />
@@ -59,7 +50,8 @@ class Entry extends React.Component {
                         name="lobbySeed"
                         className="input"
                         placeholder="Enter a Lobby"
-                        value={this.state.lobbyValue}
+                        required="required"
+                        value={this.state.currentLobbyName}
                         maxLength="20"
                         onChange={this.handleLobbyChange}
                     />
diff --git a/ui/source/js/components/lobby.js b/ui/source/js/components/lobby.js
index e4d3c32..4c4ad49 100644
--- a/ui/source/js/components/lobby.js
+++ b/ui/source/js/components/lobby.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {generateTeams} from '../helpers/teamUtilities.js';
 import Player from './player.js';
+import TeamList from './teamlist.js';
 
 const maxPlayers = 16;
 
@@ -8,14 +9,57 @@ class Lobby extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-            teams: generateTeams()
-		};
-	}
+            teams: generateTeams(),
+            allPlayersReady: false
+        };
+        //this.addCurrentPlayer(this.state.teams);
+    }
+
+    allPlayersReady() {
+        console.log('Are all teams ready');
+    }
+
+    togglePlayerReady() {
+
+    }
+
+    addCurrentPlayer(currentTeams) {
+        if (currentTeams.length < maxPlayers) {
+            const currentPlayer = {
+                id: 1,
+                name: this.props.currentPlayer,
+                isMaster: true,
+                team: 1,
+                isReady: false
+            };
+            currentTeams.push(currentPlayer);
+            this.setState({ teams: currentTeams });
+        } else {
+            console.error('Too many people');
+        }
+    }
 
     render() {
         return (
             <div className="lobby">
-                Such a lobby!
+                <form onSubmit={() => this.props.handleLobbySubmit(this.state)} className="lobby-prompt__form">
+                    <TeamList
+                        teams={this.state.teams}
+                        currentPlayerId={this.props.currentPlayerId}
+                    />
+                    Change Team Arrows
+                    Make me a master
+                    <button
+                        className="button"
+                        onClick={() => this.togglePlayerReady()}
+                    >Ready</button>
+                    <input
+                        type="submit"
+                        value="Start Game"
+                        className="button button--alt"
+                        disabled={!this.state.allPlayersReady}
+                    />
+                </form>
             </div>
         );
 	}
diff --git a/ui/source/js/components/player.js b/ui/source/js/components/player.js
index 4bd78b9..556812f 100644
--- a/ui/source/js/components/player.js
+++ b/ui/source/js/components/player.js
@@ -1,10 +1,35 @@
 import React from 'react';
 
 function Player(props) {
+    function playerIsCurrentPlayer() {
+        if (props.player.id === props.currentPlayerId) {
+            return 'team-list__item--current-player '
+        }
+        return '';
+    }
+
+    function playerIsReady() {
+        if (props.player.isReady === true) {
+            return 'team-list__item--ready '
+        }
+        return '';
+    }
+
+    function playerIsMaster() {
+        if (props.player.isMaster) {
+            return 'team-list__item--master ';
+        }
+        return '';
+    }
+
 	return (
         <li
-            className={'team-list__item team-list__item--player ' +
-            (props.player.isMaster ? 'team-list__item--master' : '')}
+            className={
+                'team-list__item team-list__item--player ' +
+                playerIsMaster() +
+                playerIsCurrentPlayer() +
+                playerIsReady()
+            }
         >
             {props.player.name}
         </li>
diff --git a/ui/source/js/components/teamlist.js b/ui/source/js/components/teamlist.js
index f69e8fd..f42354b 100644
--- a/ui/source/js/components/teamlist.js
+++ b/ui/source/js/components/teamlist.js
@@ -7,14 +7,19 @@ function TeamList(props) {
         return <Player
             player={player}
             key={i}
+            currentPlayerId={props.currentPlayerId}
 		/>;
     }
 
     function generateList(teamArray, teamId) {
         let listItemsArray = [];
-        teamArray.filter(player => player.team === teamId)
-            .forEach((player,i) => listItemsArray.push(renderPlayer(player, i)));
-        return listItemsArray;
+        if (teamArray) {
+            teamArray.filter(player => player.team === teamId)
+                .forEach((player,i) => listItemsArray.push(renderPlayer(player, i)));
+            return listItemsArray;
+        }
+        console.error('No team array provided');
+        return <span className="error">Error</span>;
     }
 
     return (
diff --git a/ui/source/js/helpers/teamUtilities.js b/ui/source/js/helpers/teamUtilities.js
index b260928..8e18904 100644
--- a/ui/source/js/helpers/teamUtilities.js
+++ b/ui/source/js/helpers/teamUtilities.js
@@ -29,41 +29,40 @@ function getPlayerIsMaster(playerArray, playerId) {
 
 function generateTeams() {
     return [
-        {
-            id: 1,
-            name: 'Joseph',
-            isMaster: true,
-            team: 1
-        },
         {
             id: 2,
             name: 'Jac',
             isMaster: false,
-            team: 1
+            team: 1,
+            isReady: true
         },
         {
             id: 3,
             name: 'Jeff',
             isMaster: false,
-            team: 1
+            team: 1,
+            isReady: true
         },
         {
             id: 4,
             name: 'Aaron',
             isMaster: true,
-            team: 2
+            team: 2,
+            isReady: true
         },
         {
             id: 5,
             name: 'Anna',
             isMaster: false,
-            team: 2
+            team: 2,
+            isReady: true
         },
         {
             id: 6,
             name: 'Andy',
             isMaster: false,
-            team: 2
+            team: 2,
+            isReady: true
         }
     ];
 }

From 3cc9ccf79c1280107082c33c5bd5b3371690266e Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Wed, 6 Feb 2019 15:59:27 -0600
Subject: [PATCH 08/12] Updated lobby code.

---
 ui/source/js/components/controller.js |  5 ++--
 ui/source/js/components/lobby.js      | 37 +++++++++++++++++----------
 ui/source/js/helpers/teamUtilities.js |  2 +-
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/ui/source/js/components/controller.js b/ui/source/js/components/controller.js
index 1f5f290..e5f06c7 100644
--- a/ui/source/js/components/controller.js
+++ b/ui/source/js/components/controller.js
@@ -37,9 +37,8 @@ class Controller extends React.Component {
             case 2:
                 pageRoute = <Lobby
                     handleLobbySubmit={this.handleLobbySubmit}
-                    currentPlayerId={this.currentPlayerId}
-                    currentPlayerName={this.currentPlayerName}
-                    currentLobbyName={this.currentLobbyName}
+                    currentPlayerName={this.state.currentPlayerName}
+                    currentLobbyName={this.state.currentLobbyName}
                 />;
                 break;
             case 3:
diff --git a/ui/source/js/components/lobby.js b/ui/source/js/components/lobby.js
index 4c4ad49..c6c310b 100644
--- a/ui/source/js/components/lobby.js
+++ b/ui/source/js/components/lobby.js
@@ -1,42 +1,50 @@
 import React, {Component} from 'react';
-import {generateTeams} from '../helpers/teamUtilities.js';
+import {generateTeams, getPlayerPositionInArray} from '../helpers/teamUtilities.js';
 import Player from './player.js';
 import TeamList from './teamlist.js';
 
 const maxPlayers = 16;
+const currentPlayerId = 1;
 
 class Lobby extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-            teams: generateTeams(),
+            teams: this.populateTeams(),
+            currentPlayerId: currentPlayerId,
             allPlayersReady: false
         };
-        //this.addCurrentPlayer(this.state.teams);
     }
 
     allPlayersReady() {
         console.log('Are all teams ready');
     }
 
-    togglePlayerReady() {
-
+    togglePlayerReady(currentTeams, playerId) {
+        const playerIndex = getPlayerPositionInArray(currentTeams, playerId);
+        if (playerIndex >= 0) {
+            currentTeams[playerIndex].isReady = !currentTeams[playerIndex].isReady;
+            this.setState({ teams: currentTeams });
+        } else {
+            console.error('Player not found');
+        }
     }
 
-    addCurrentPlayer(currentTeams) {
-        if (currentTeams.length < maxPlayers) {
+    populateTeams() {
+        const players = generateTeams();
+        if (players.length < maxPlayers) {
             const currentPlayer = {
-                id: 1,
-                name: this.props.currentPlayer,
+                id: currentPlayerId,
+                name: this.props.currentPlayerName,
                 isMaster: true,
                 team: 1,
                 isReady: false
             };
-            currentTeams.push(currentPlayer);
-            this.setState({ teams: currentTeams });
-        } else {
-            console.error('Too many people');
+            players.push(currentPlayer);
+            return players;
         }
+        console.error('Too many people');
+        return players;
     }
 
     render() {
@@ -51,7 +59,8 @@ class Lobby extends React.Component {
                     Make me a master
                     <button
                         className="button"
-                        onClick={() => this.togglePlayerReady()}
+                        type="button"
+                        onClick={() => this.togglePlayerReady(this.state.teams, this.state.currentPlayerId)}
                     >Ready</button>
                     <input
                         type="submit"
diff --git a/ui/source/js/helpers/teamUtilities.js b/ui/source/js/helpers/teamUtilities.js
index 8e18904..00750df 100644
--- a/ui/source/js/helpers/teamUtilities.js
+++ b/ui/source/js/helpers/teamUtilities.js
@@ -67,4 +67,4 @@ function generateTeams() {
     ];
 }
 
-export {generateTeams, setPlayerTeam, setPlayerIsMaster, getPlayerTeam, getPlayerIsMaster};
\ No newline at end of file
+export {generateTeams, setPlayerTeam, setPlayerIsMaster, getPlayerTeam, getPlayerIsMaster, getPlayerPositionInArray};
\ No newline at end of file

From ee248340de77999ad9a35b66df08aed8f436fae0 Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Thu, 7 Feb 2019 20:09:44 -0600
Subject: [PATCH 09/12] End router refactor (?)

---
 ui/source/css/basics/headings.css             |  4 +
 ui/source/css/basics/labels.css               |  3 +-
 ui/source/css/basics/switch.css               |  2 +-
 ui/source/css/components/frame/sidebar.css    |  6 +-
 ui/source/css/components/player/team-list.css |  4 +
 ui/source/js/components/app.js                | 87 +++++++++++++++++++
 ui/source/js/components/changePlayer.js       | 67 ++++++++++++++
 ui/source/js/components/controller.js         | 74 ----------------
 ui/source/js/components/controls.js           | 47 ++--------
 ui/source/js/components/game.js               | 24 +----
 ui/source/js/components/lobby.js              | 59 ++++++++-----
 .../js/components/{entry.js => start.js}      |  8 +-
 ui/source/js/helpers/router.js                |  7 ++
 ui/source/js/helpers/teamUtilities.js         |  8 +-
 ui/source/js/main.js                          |  4 +-
 15 files changed, 238 insertions(+), 166 deletions(-)
 create mode 100644 ui/source/js/components/app.js
 create mode 100644 ui/source/js/components/changePlayer.js
 delete mode 100644 ui/source/js/components/controller.js
 rename ui/source/js/components/{entry.js => start.js} (90%)
 create mode 100644 ui/source/js/helpers/router.js

diff --git a/ui/source/css/basics/headings.css b/ui/source/css/basics/headings.css
index 657b08d..25020bd 100644
--- a/ui/source/css/basics/headings.css
+++ b/ui/source/css/basics/headings.css
@@ -25,4 +25,8 @@ h6 {
 .site-title {
     font-size: 1.75rem;
     font-weight: var(--font-weight-bold);
+}
+
+.lobby__title {
+    font-size: 1.5rem;
 }
\ No newline at end of file
diff --git a/ui/source/css/basics/labels.css b/ui/source/css/basics/labels.css
index 18a529a..3af836f 100644
--- a/ui/source/css/basics/labels.css
+++ b/ui/source/css/basics/labels.css
@@ -7,5 +7,6 @@ label[for] {
 }
 
 .label {
-
+    font-size: 0.8rem;
+    font-weight: var(--font-weight-light);
 }
\ No newline at end of file
diff --git a/ui/source/css/basics/switch.css b/ui/source/css/basics/switch.css
index 794c1f2..f1f51fa 100644
--- a/ui/source/css/basics/switch.css
+++ b/ui/source/css/basics/switch.css
@@ -19,7 +19,7 @@
 .switch-toggle__label {
     display: block;
     color: var(--color-text);
-    background-color: var(--color-gray-30);
+    background-color: transparent;
     transition: background-color var(--anim-duration);
 }
 
diff --git a/ui/source/css/components/frame/sidebar.css b/ui/source/css/components/frame/sidebar.css
index 8034dd7..9a0bfbc 100644
--- a/ui/source/css/components/frame/sidebar.css
+++ b/ui/source/css/components/frame/sidebar.css
@@ -4,10 +4,14 @@
     border: solid;
     background-color: rgba(255,255,255,0.5);
     .team-list {
-        & + & {
+        & + .team-list {
             margin-top: 1rem;
         }
     }
+    .switch__label,
+    .switch-toggle__label {
+        background-color: var(--color-gray-30);
+    }
 }
 
 @media (--large) {
diff --git a/ui/source/css/components/player/team-list.css b/ui/source/css/components/player/team-list.css
index feb96f9..bd93e43 100644
--- a/ui/source/css/components/player/team-list.css
+++ b/ui/source/css/components/player/team-list.css
@@ -37,4 +37,8 @@
 		content: '✓';
 		color: var(--color-positive);
 	}
+}
+
+.team-list__item--current-player {
+	font-weight: var(--font-weight-bold);
 }
\ No newline at end of file
diff --git a/ui/source/js/components/app.js b/ui/source/js/components/app.js
new file mode 100644
index 0000000..99ce096
--- /dev/null
+++ b/ui/source/js/components/app.js
@@ -0,0 +1,87 @@
+import React, {Component} from 'react';
+import Start from './start.js';
+import Lobby from './lobby.js';
+import Game from './game.js';
+
+import {setSeed} from '../helpers/seedUtilities.js';
+import {setPlayerIsMaster} from '../helpers/teamUtilities.js';
+import router from '../helpers/router.js';
+
+class App extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+            page: 1,
+            seed: null,
+            teams: null,
+            currentPlayerId: null,
+            currentPlayerName: null,
+            currentLobbyName: null
+        };
+        this.handleEntrySubmit = this.handleEntrySubmit.bind(this);
+        this.handleLobbySubmit = this.handleLobbySubmit.bind(this);
+        this.updateTeams = this.updateTeams.bind(this);
+    }
+
+    updateTeams(newTeams) {
+        this.setState({ teams: newTeams });
+    }
+
+    getPage(pageId) {
+        let pageRoute;
+        switch(pageId) {
+            case 1:
+                pageRoute = <Start handleEntrySubmit={this.handleEntrySubmit} />;
+                break;
+            case 2:
+                pageRoute = <Lobby
+                    handleLobbySubmit={this.handleLobbySubmit}
+                    currentPlayerName={this.state.currentPlayerName}
+                    currentLobbyName={this.state.currentLobbyName}
+                    updateTeams={this.updateTeams}
+                />;
+                break;
+            case 3:
+                pageRoute = <Game
+                    updateTeams={this.updateTeams}
+                    currentPlayerId={this.state.currentPlayerId}
+                    currentPlayerName={this.state.currentPlayerName}
+                    seed={this.state.seed}
+                    teams={this.state.teams}
+
+                />;
+                break;
+            default:
+                console.error('Invalid Page Id');
+        }
+        return pageRoute;
+    }
+
+    handleEntrySubmit(currentPlayerName, currentLobbyName) {
+        setSeed(currentLobbyName);
+        this.setState({
+            page: 2,
+            currentPlayerName: currentPlayerName,
+            currentLobbyName: currentLobbyName,
+            seed: currentLobbyName
+        });
+    }
+
+    handleLobbySubmit(lobbyTeams, currentPlayerId) {
+        this.setState({
+            page: 3,
+            teams: lobbyTeams,
+            currentPlayerId: currentPlayerId
+        });
+    }
+
+	render() {
+		return (
+			<div className="controller">
+                { this.getPage(this.state.page) }
+			</div>
+		);
+	}
+}
+
+export default App;
\ No newline at end of file
diff --git a/ui/source/js/components/changePlayer.js b/ui/source/js/components/changePlayer.js
new file mode 100644
index 0000000..47e53c2
--- /dev/null
+++ b/ui/source/js/components/changePlayer.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import {getPlayerTeam, setPlayerTeam, getPlayerIsMaster, setPlayerIsMaster} from '../helpers/teamUtilities.js';
+
+function ChangePlayer(props) {
+
+    let playerIsMaster = getPlayerIsMaster(props.teams, props.currentPlayerId);
+    let masterIcon = generateMasterIcon();
+
+    function generateMasterIcon() {
+        return playerIsMaster ? <span>Master <i className="icon icon--master"></i></span> : <span>Player</span>;
+    }
+
+    function updatePlayerTeam(players, currentPlayerId, teamId) {
+        const updatedTeams = setPlayerTeam(players, currentPlayerId, teamId);
+        props.updateTeams(updatedTeams);
+    }
+
+    function togglePlayerIsMaster(players, currentPlayerId, toggleStatus) {
+        const updatedTeams = setPlayerIsMaster(players, currentPlayerId, toggleStatus);
+        props.updateTeams(updatedTeams);
+    }
+
+    return (
+        <fieldset className="control-set">
+            <legend>I'm a...</legend>
+            <div className="switch-toggle">
+                <div className="switch-toggle__item">
+                    <input
+                        type="radio"
+                        name="playerTeam"
+                        id="viewAsBlue"
+                        defaultChecked={getPlayerTeam(props.teams, props.currentPlayerId) === 1}
+                        onClick={() => updatePlayerTeam(props.teams, props.currentPlayerId, 1)}
+                        className="switch-toggle__control"
+                    />
+                    <label htmlFor="viewAsBlue" className="switch--blue switch-toggle__label">Blue</label>
+                </div>
+                <div className="switch-toggle__item">
+                    <input
+                        type="radio"
+                        name="playerTeam"
+                        id="viewAsRed"
+                        defaultChecked={getPlayerTeam(props.teams, props.currentPlayerId) === 2}
+                        onClick={() => updatePlayerTeam(props.teams, props.currentPlayerId, 2)}
+                        className="switch-toggle__control"
+                    />
+                    <label htmlFor="viewAsRed" className="switch--red switch-toggle__label">Red</label>
+                </div>
+            </div>
+            <div className="switch">
+                <input
+                    type="checkbox"
+                    name="master"
+                    id="setAsMaster"
+                    defaultChecked={playerIsMaster}
+                    onClick={e => togglePlayerIsMaster(props.teams, props.currentPlayerId, e.target.checked)}
+                    className="switch__control"
+                />
+                <label htmlFor="setAsMaster" className="switch__label">
+                    { masterIcon }
+                </label>
+            </div>
+        </fieldset>
+    );
+}
+
+export default ChangePlayer;
\ No newline at end of file
diff --git a/ui/source/js/components/controller.js b/ui/source/js/components/controller.js
deleted file mode 100644
index e5f06c7..0000000
--- a/ui/source/js/components/controller.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, {Component} from 'react';
-import Entry from './entry.js';
-import Lobby from './lobby.js';
-import Game from './game.js';
-
-import {setSeed} from '../helpers/seedUtilities.js';
-
-class Controller extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-            page: 1,
-            seed: null,
-            teams: null,
-            currentPlayerId: null,
-            currentPlayerName: null,
-            currentLobbyName: null,
-            pieces: null,
-			score: null,
-			winner: null,
-            isBlueTurn: true
-        };
-        this.handleEntrySubmit = this.handleEntrySubmit.bind(this);
-        this.handleLobbySubmit = this.handleLobbySubmit.bind(this);
-    }
-
-    setPage(pageId) {
-        setState({ page: pageId });
-    }
-
-    getPage(pageId) {
-        let pageRoute;
-        switch(pageId) {
-            case 1:
-                pageRoute = <Entry handleEntrySubmit={this.handleEntrySubmit} />;
-                break;
-            case 2:
-                pageRoute = <Lobby
-                    handleLobbySubmit={this.handleLobbySubmit}
-                    currentPlayerName={this.state.currentPlayerName}
-                    currentLobbyName={this.state.currentLobbyName}
-                />;
-                break;
-            case 3:
-                pageRoute = <Game />;
-                break;
-            default:
-                console.error('Invalid Page Id');
-        }
-        return pageRoute;
-    }
-
-    handleEntrySubmit(entryState) {
-        const newState = {...this.state, ...entryState};
-        newState.page = 2;
-        newState.seed = newState.currentLobbyName;
-        setSeed(newState.seed);
-        this.setState({ ...newState });
-    }
-
-    handleLobbySubmit(lobbyState) {
-        console.log('lobby Done');
-    }
-
-	render() {
-		return (
-			<div className="controller">
-                { this.getPage(this.state.page) }
-			</div>
-		);
-	}
-}
-
-export default Controller;
\ No newline at end of file
diff --git a/ui/source/js/components/controls.js b/ui/source/js/components/controls.js
index 67f30f7..6dd47c9 100644
--- a/ui/source/js/components/controls.js
+++ b/ui/source/js/components/controls.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import ChangePlayer from './changePlayer.js';
+
 import {getPlayerTeam, getPlayerIsMaster} from '../helpers/teamUtilities.js';
 
 function Controls(props) {
@@ -28,46 +30,11 @@ function Controls(props) {
                     End Turn
                 </button>
                 <button type="button" className="button button--alt" onClick={props.onClickPromptNewGame}>New Game</button>
-                <fieldset className="control-set">
-                    <legend>I'm a...</legend>
-                    <div className="switch-toggle">
-                        <div className="switch-toggle__item">
-                            <input
-                                type="radio"
-                                name="playerTeam"
-                                id="viewAsBlue"
-                                defaultChecked={getPlayerTeam(props.teams, props.playerId) === 1}
-                                onClick={props.onClickViewBlue}
-                                className="switch-toggle__control"
-                            />
-                            <label htmlFor="viewAsBlue" className="switch--blue switch-toggle__label">Blue</label>
-                        </div>
-                        <div className="switch-toggle__item">
-                            <input
-                                type="radio"
-                                name="playerTeam"
-                                id="viewAsRed"
-                                defaultChecked={getPlayerTeam(props.teams, props.playerId) === 2}
-                                onClick={props.onClickViewRed}
-                                className="switch-toggle__control"
-                            />
-                            <label htmlFor="viewAsRed" className="switch--red switch-toggle__label">Red</label>
-                        </div>
-                    </div>
-                    <div className="switch">
-                        <input
-                            type="checkbox"
-                            name="master"
-                            id="setAsMaster"
-                            defaultChecked={playerIsMaster}
-                            onClick={e => props.onClickViewMaster(e)}
-                            className="switch__control"
-                        />
-                        <label htmlFor="setAsMaster" className="switch__label">
-                            { masterIcon }
-                        </label>
-                    </div>
-                </fieldset>
+                <ChangePlayer
+                    teams={props.teams}
+                    currentPlayerId={props.playerId}
+                    updateTeams={props.updateTeams}
+                />
             </div>
         </aside>
     );
diff --git a/ui/source/js/components/game.js b/ui/source/js/components/game.js
index 96139ed..cad7feb 100644
--- a/ui/source/js/components/game.js
+++ b/ui/source/js/components/game.js
@@ -15,8 +15,6 @@ const blackPieceCount = 1;
 const bluePiecesCount = 9;
 const redPiecesCount = 8;
 
-const currentPlayerId = 1;
-
 const strResetGame = 'Start a new game?';
 
 function buildPieceArray() {
@@ -39,7 +37,7 @@ class Game extends React.Component {
 		super(props);
 		this.state = {
 			isBlueTurn: true,
-			seed: getSeed(),
+			seed: this.props.seed,
 			score: {
 				black: blackPieceCount,
 				blue: bluePiecesCount,
@@ -47,8 +45,8 @@ class Game extends React.Component {
 			},
 			pieces: buildPieceArray(),
 			winner: null,
-			teams: generateTeams(),
-			currentPlayerId: currentPlayerId
+			teams: this.props.teams,
+			currentPlayerId: this.props.currentPlayerId
 		};
 	}
 
@@ -121,22 +119,8 @@ class Game extends React.Component {
 					playerId={this.state.currentPlayerId}
 					isBlueTurn={this.state.isBlueTurn}
 					onClickSwitchTeams={() => this.switchTeamTurnClick()}
-					onClickViewMaster={
-						(e) => this.setState({
-							teams: setPlayerIsMaster(this.state.teams, this.state.currentPlayerId, e.target.checked)
-						})
-					}
-					onClickViewBlue={
-						(e) => this.setState({
-							teams: setPlayerTeam(this.state.teams, this.state.currentPlayerId, 1)
-						})
-					}
-					onClickViewRed={
-						(e) => this.setState({
-							teams: setPlayerTeam(this.state.teams, this.state.currentPlayerId, 2)
-						})
-					}
 					onClickPromptNewGame={() => this.promptNewGame()}
+					updateTeams={this.props.updateTeams}
 				/>
 			</div>
 		);
diff --git a/ui/source/js/components/lobby.js b/ui/source/js/components/lobby.js
index c6c310b..7f22b59 100644
--- a/ui/source/js/components/lobby.js
+++ b/ui/source/js/components/lobby.js
@@ -1,7 +1,8 @@
 import React, {Component} from 'react';
-import {generateTeams, getPlayerPositionInArray} from '../helpers/teamUtilities.js';
-import Player from './player.js';
-import TeamList from './teamlist.js';
+import TeamList from './teamList.js';
+import ChangePlayer from './changePlayer.js';
+
+import {generateTeams, getPlayerPositionInArray, getAllPlayersReady} from '../helpers/teamUtilities.js';
 
 const maxPlayers = 16;
 const currentPlayerId = 1;
@@ -12,19 +13,21 @@ class Lobby extends React.Component {
 		this.state = {
             teams: this.populateTeams(),
             currentPlayerId: currentPlayerId,
+            currentPlayerIsReady: false,
             allPlayersReady: false
         };
     }
 
-    allPlayersReady() {
-        console.log('Are all teams ready');
-    }
-
     togglePlayerReady(currentTeams, playerId) {
         const playerIndex = getPlayerPositionInArray(currentTeams, playerId);
         if (playerIndex >= 0) {
             currentTeams[playerIndex].isReady = !currentTeams[playerIndex].isReady;
-            this.setState({ teams: currentTeams });
+            const isAllPlayersReady = getAllPlayersReady(currentTeams);
+            this.setState({
+                teams: currentTeams,
+                currentPlayerIsReady: currentTeams[playerIndex].isReady,
+                allPlayersReady: isAllPlayersReady
+            });
         } else {
             console.error('Player not found');
         }
@@ -36,7 +39,7 @@ class Lobby extends React.Component {
             const currentPlayer = {
                 id: currentPlayerId,
                 name: this.props.currentPlayerName,
-                isMaster: true,
+                isMaster: false,
                 team: 1,
                 isReady: false
             };
@@ -48,26 +51,36 @@ class Lobby extends React.Component {
     }
 
     render() {
+        const buttonReadyText = this.state.currentPlayerIsReady ? 'Ready' : 'Unready';
+
         return (
             <div className="lobby">
-                <form onSubmit={() => this.props.handleLobbySubmit(this.state)} className="lobby-prompt__form">
+                <form onSubmit={() => this.props.handleLobbySubmit(this.state.teams, this.state.currentPlayerId)} className="lobby-prompt__form">
+                    <h1 className="lobby__title">#{this.props.currentLobbyName}</h1>
                     <TeamList
                         teams={this.state.teams}
-                        currentPlayerId={this.props.currentPlayerId}
+                        currentPlayerId={this.state.currentPlayerId}
                     />
-                    Change Team Arrows
-                    Make me a master
-                    <button
-                        className="button"
-                        type="button"
-                        onClick={() => this.togglePlayerReady(this.state.teams, this.state.currentPlayerId)}
-                    >Ready</button>
-                    <input
-                        type="submit"
-                        value="Start Game"
-                        className="button button--alt"
-                        disabled={!this.state.allPlayersReady}
+                    <ChangePlayer
+                        teams={this.state.teams}
+                        currentPlayerId={this.state.currentPlayerId}
+                        updateTeams={this.props.updateTeams}
                     />
+                    <div className="button-set">
+                        <span className="label">...who is...</span>
+                        <button
+                            className="button"
+                            type="button"
+                            onClick={() => this.togglePlayerReady(this.state.teams, this.state.currentPlayerId)}
+                        >{buttonReadyText}</button>
+                        <span className="label">...to...</span>
+                        <input
+                            type="submit"
+                            value="Start the Game"
+                            className="button button--alt"
+                            disabled={!this.state.allPlayersReady}
+                        />
+                    </div>
                 </form>
             </div>
         );
diff --git a/ui/source/js/components/entry.js b/ui/source/js/components/start.js
similarity index 90%
rename from ui/source/js/components/entry.js
rename to ui/source/js/components/start.js
index 20e21d8..42c6e81 100644
--- a/ui/source/js/components/entry.js
+++ b/ui/source/js/components/start.js
@@ -3,7 +3,7 @@ import {getSeed, createSeed, setSeed} from '../helpers/seedUtilities.js';
 import {getPlayerName, setPlayerName} from '../helpers/playerUtilities.js';
 import {stripSpecialCharacters} from '../helpers/stringUtilities.js';
 
-class Entry extends React.Component {
+class Start extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -30,7 +30,9 @@ class Entry extends React.Component {
     render() {
         return (
             <div className="entry-prompt">
-                <form onSubmit={() => this.props.handleEntrySubmit(this.state)} className="entry-prompt__form">
+                <form onSubmit={
+                        () => this.props.handleEntrySubmit(this.state.currentPlayerName, this.state.currentLobbyName)
+                    } className="entry-prompt__form">
                     <label htmlFor="currentPlayerName" className="currentPlayerName">Player Name:</label>
                     <input
                         type="text"
@@ -72,4 +74,4 @@ class Entry extends React.Component {
 	}
 }
 
-export default Entry;
\ No newline at end of file
+export default Start;
\ No newline at end of file
diff --git a/ui/source/js/helpers/router.js b/ui/source/js/helpers/router.js
new file mode 100644
index 0000000..54d9071
--- /dev/null
+++ b/ui/source/js/helpers/router.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function router(route) {
+    console.log("Router online", route);
+}
+
+export default router;
\ No newline at end of file
diff --git a/ui/source/js/helpers/teamUtilities.js b/ui/source/js/helpers/teamUtilities.js
index 00750df..b582cd9 100644
--- a/ui/source/js/helpers/teamUtilities.js
+++ b/ui/source/js/helpers/teamUtilities.js
@@ -27,6 +27,12 @@ function getPlayerIsMaster(playerArray, playerId) {
     return playerArray[position].isMaster;
 }
 
+function getAllPlayersReady(playerArray) {
+    const readyPlayersArray = playerArray.filter(player => player.isReady);
+    const allPlayersReady = (playerArray.length === readyPlayersArray.length);
+    return allPlayersReady;
+}
+
 function generateTeams() {
     return [
         {
@@ -67,4 +73,4 @@ function generateTeams() {
     ];
 }
 
-export {generateTeams, setPlayerTeam, setPlayerIsMaster, getPlayerTeam, getPlayerIsMaster, getPlayerPositionInArray};
\ No newline at end of file
+export {generateTeams, setPlayerTeam, setPlayerIsMaster, getPlayerTeam, getPlayerIsMaster, getPlayerPositionInArray, getAllPlayersReady};
\ No newline at end of file
diff --git a/ui/source/js/main.js b/ui/source/js/main.js
index 100b13f..0b1fcae 100644
--- a/ui/source/js/main.js
+++ b/ui/source/js/main.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import {render} from 'react-dom';
-import Controller from './components/controller.js';
+import App from './components/app.js';
 
 const rootEl = document.getElementById('app');
 
 render(
-	<Controller />,
+	<App />,
 	rootEl
 );
\ No newline at end of file

From 5e2a6affd3d1ec5b8723b8e7d66b23c1fb588be4 Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Thu, 7 Feb 2019 20:49:47 -0600
Subject: [PATCH 10/12] Routes are now words.

---
 ui/source/js/components/app.js           | 12 ++++++------
 ui/source/js/helpers/generateWordList.js |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/source/js/components/app.js b/ui/source/js/components/app.js
index 99ce096..80f8a97 100644
--- a/ui/source/js/components/app.js
+++ b/ui/source/js/components/app.js
@@ -11,7 +11,7 @@ class App extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-            page: 1,
+            page: 'start',
             seed: null,
             teams: null,
             currentPlayerId: null,
@@ -30,10 +30,10 @@ class App extends React.Component {
     getPage(pageId) {
         let pageRoute;
         switch(pageId) {
-            case 1:
+            case 'start':
                 pageRoute = <Start handleEntrySubmit={this.handleEntrySubmit} />;
                 break;
-            case 2:
+            case 'lobby':
                 pageRoute = <Lobby
                     handleLobbySubmit={this.handleLobbySubmit}
                     currentPlayerName={this.state.currentPlayerName}
@@ -41,7 +41,7 @@ class App extends React.Component {
                     updateTeams={this.updateTeams}
                 />;
                 break;
-            case 3:
+            case 'game':
                 pageRoute = <Game
                     updateTeams={this.updateTeams}
                     currentPlayerId={this.state.currentPlayerId}
@@ -60,7 +60,7 @@ class App extends React.Component {
     handleEntrySubmit(currentPlayerName, currentLobbyName) {
         setSeed(currentLobbyName);
         this.setState({
-            page: 2,
+            page: 'lobby',
             currentPlayerName: currentPlayerName,
             currentLobbyName: currentLobbyName,
             seed: currentLobbyName
@@ -69,7 +69,7 @@ class App extends React.Component {
 
     handleLobbySubmit(lobbyTeams, currentPlayerId) {
         this.setState({
-            page: 3,
+            page: 'game',
             teams: lobbyTeams,
             currentPlayerId: currentPlayerId
         });
diff --git a/ui/source/js/helpers/generateWordList.js b/ui/source/js/helpers/generateWordList.js
index 35cae96..695d78f 100644
--- a/ui/source/js/helpers/generateWordList.js
+++ b/ui/source/js/helpers/generateWordList.js
@@ -4,7 +4,7 @@ function getWordlist(count) {
     const wordList = [
         'air', 'ambulance', 'ammonia', 'apple', 'appendix', 'archipelago',
 
-        'ball', 'bark', 'baron', 'barrier', 'bed', 'belt', 'bill', 'bingo', 'blackberry', 'bonus',
+        'ball', 'banana', 'bark', 'baron', 'barrier', 'bed', 'belt', 'bill', 'bingo', 'blackberry', 'bonus',
         'bottle', 'bow', 'box', 'broccoli', 'brunch', 'bug', 'bugle',
 
         'cap', 'cartridge', 'cassette', 'catfish', 'cemetery', 'check', 'Chihuahua', 'cilantro', 'circus',
@@ -16,12 +16,12 @@ function getWordlist(count) {
 
         'Easter', 'eagle', 'editor', 'epilepsy', 'equator', 'error', 'espionage',
 
-        'fall', 'fan', 'flask', 'flora', 'fries', 'fundraiser', 'fusion',
+        'fall', 'fan', 'flask', 'flora', 'fox', 'fries', 'fundraiser', 'fusion',
 
         'glass', 'glove', 'glucose', 'google', 'green', 'gun',
 
         'hallway', 'hamburger', 'hammock', 'hand', 'head', 'heart', 'Himalayas', 'hole', 'honey', 'horn',
-        'horseman', 'hurricane',
+        'horseman', 'hurricane', 'hydra',
 
         'iceberg', 'illness', 'intersection', 'ivory',
 

From 70110b096280d8b3a71dc8806f14fa7d26b3c06a Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Thu, 7 Feb 2019 20:53:38 -0600
Subject: [PATCH 11/12] Added for Ryan.

---
 ui/source/js/helpers/generateWordList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/source/js/helpers/generateWordList.js b/ui/source/js/helpers/generateWordList.js
index 695d78f..5516587 100644
--- a/ui/source/js/helpers/generateWordList.js
+++ b/ui/source/js/helpers/generateWordList.js
@@ -25,7 +25,7 @@ function getWordlist(count) {
 
         'iceberg', 'illness', 'intersection', 'ivory',
 
-        'jerky', 'joker', 'juror',
+        'Jabberwocky', 'jack', 'jerky', 'joker', 'juror',
 
         'kangaroo', 'ketchup', 'kingdom',
 

From ea9fc90488978a626e472ed2c1f62fa74d1a297e Mon Sep 17 00:00:00 2001
From: Joseph Lawhorn <jlawhorn@degdigital.com>
Date: Fri, 8 Feb 2019 15:47:57 -0600
Subject: [PATCH 12/12] Applied Ryan's suggested optimization.

---
 ui/source/js/components/teamlist.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/source/js/components/teamlist.js b/ui/source/js/components/teamlist.js
index f42354b..8c12834 100644
--- a/ui/source/js/components/teamlist.js
+++ b/ui/source/js/components/teamlist.js
@@ -14,9 +14,8 @@ function TeamList(props) {
     function generateList(teamArray, teamId) {
         let listItemsArray = [];
         if (teamArray) {
-            teamArray.filter(player => player.team === teamId)
-                .forEach((player,i) => listItemsArray.push(renderPlayer(player, i)));
-            return listItemsArray;
+            return teamArray.filter(player => player.team === teamId)
+                .map((player,i) => (renderPlayer(player, i)));
         }
         console.error('No team array provided');
         return <span className="error">Error</span>;