Added graphic element to show the picking pattern (#142)

* added picking pattern

* removed all changes to helpers

app/javascripts/components/gather.js

@@ -349,10 +349,12 @@ const GatherActions = React.createClass({
 
 	render() {
 		let regatherButton;
+		let pickPatternIndicator;
 		const user = this.props.user;
 		const gather = this.props.gather;
 		const socket = this.props.socket;
 		const thisGatherer = this.props.thisGatherer;
+		let pickIndex = this.props.gather.pickingTurnIndex - 1;
 		if (thisGatherer) {
 			let regatherVotes = this.regatherVotes();
 			if (thisGatherer.regatherVote) {
@@ -366,20 +368,43 @@ const GatherActions = React.createClass({
 					{`Vote Regather (${regatherVotes}/8)`}
 				</button>;
 			}
+
+			pickPatternIndicator = <ul className="list-inline">
+  				{gather.pickingPattern.map((team, index) => {
+  					if (team === 'alien') {
+  						if (index <= pickIndex) {
+       						return <li className="padding-y-1"><div className="pick-pattern-box alien-box-active"></div></li>
+  						}else{
+  							return <li className="padding-y-1"><div className="pick-pattern-box alien-box"></div></li>
+  						}
+  					} else {
+  						if (index <= pickIndex) {
+       						return <li className="padding-y-1"><div className="pick-pattern-box marine-box-active"></div></li>
+  						}else{
+  							return <li className="padding-y-1"><div className="pick-pattern-box marine-box"></div></li>
+  						}
+  					}
+      			})}
+			</ul>;
 		}
 
 		return (
 			<div>
 				<div className="text-right">
-					<ul className="list-inline no-bottom">
+					<ul className="list-inline no-bottom content-center">
 						<li>
+							{pickPatternIndicator}
+						</li>
+						<ul className='list-inline no-bottom'>
+							<li className='padding-right-0'>
 								<JoinGatherButton gather={gather} thisGatherer={thisGatherer}
 									user={user} socket={socket} />
 							</li>
-						<li>
+							<li className='padding-right-0'>
 								{regatherButton}
 							</li>
 						</ul>
+					</ul>
 				</div>
 			</div>
 		);

app/stylesheets/app.css

@@ -336,3 +336,48 @@ html, body {
 	width: 35px;
 }
 
+/* pick pattern */
+
+.float-left {
+	float: left;
+}
+
+.pick-pattern-box {
+	width: 75px;
+	height: 6px;
+	border-radius: 1px;
+}
+
+.marine-box {
+	background-color: #2c689c;
+}
+
+.alien-box {
+	background-color: #9c602c;
+}
+
+.marine-box-active {
+	box-shadow: 0px 0px 4px 0px #0072ff;
+	background-color: #0072ff;
+}
+
+.alien-box-active {
+	box-shadow: 0px 0px 4px 0px #ff8e00;
+	background-color: #ff8e00;
+}
+
+.content-center {
+	display: flex;
+  	align-items: center;
+  	justify-content: space-between;
+}
+
+.padding-right-0 {
+	padding-right: 0 !important;
+}
+
+.padding-y-1 {
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+

lib/gather/gather.js

@@ -257,15 +257,7 @@ Gather.prototype.modifyGatherer = function (user, callback){
 		.forEach(callback);
 };
 
-// Determines picking order of teams
-// Marine pick first
-Gather.prototype.pickingTurn = function () {
-	if (this.current !== 'selection') return null;
-
-	const captainCount = 2;
-	const alienCount = this.aliens().length;
-	const marineCount = this.marines().length;
-	const alreadyPickedCount = (marineCount + alienCount) - captainCount;
+Gather.prototype.getPickingPattern = function () {
 	const pickingPattern = [ // 1-2-2-2-2-2-1
 		"marine",
 		"alien",
@@ -281,6 +273,20 @@ Gather.prototype.pickingTurn = function () {
 		"marine",
 	];
 	
+	return pickingPattern;
+}	
+
+// Determines picking order of teams
+// Marine pick first
+Gather.prototype.pickingTurnIndex = function () {
+	if (this.current !== 'selection') return null;
+
+	const captainCount = 2;
+	const alienCount = this.aliens().length;
+	const marineCount = this.marines().length;
+	const alreadyPickedCount = (marineCount + alienCount) - captainCount;
+	const pickingPattern = this.getPickingPattern();
+
 	const pickingTurn = alreadyPickedCount % pickingPattern.length;
 
 	// prevent any team from growing beyond the team size limit
@@ -290,7 +296,7 @@ Gather.prototype.pickingTurn = function () {
 		return "marine";
 	}
 
-	return pickingPattern[pickingTurn];
+	return pickingTurn;
 };
 
 // Moves player to marine
@@ -303,7 +309,7 @@ Gather.prototype.moveToMarine = function (user, mover) {
 		let leader = this.getGatherer(mover);
 		if (leader.team !== "marine" ||
 				!leader.leader ||
-				this.pickingTurn() !== "marine") return;
+				this.pickingPattern()[this.pickingTurnIndex()] !== "marine") return;
 
 		if (user && this.containsUser(user)) {
 			if (this.getGatherer(user).team !== "lobby") return;
@@ -324,7 +330,7 @@ Gather.prototype.moveToAlien = function (user, mover) {
 		let leader = this.getGatherer(mover);
 		if (leader.team !== "alien" ||
 				!leader.leader ||
-				this.pickingTurn() !== "alien") return;
+				this.getPickingPattern()[this.pickingTurnIndex()] !== "alien") return;
 
 		if (user && this.containsUser(user)) {
 			if (this.getGatherer(user).team !== "lobby") return;
@@ -368,7 +374,9 @@ Gather.prototype.toJson = function () {
 		gatherers: this.gatherers,
 		servers: this.getServers(),
 		state: this.current,
-		pickingTurn: this.pickingTurn(),
+		pickingTurn: this.getPickingPattern()[this.pickingTurnIndex()], 
+		pickingTurnIndex: this.pickingTurnIndex(),
+		pickingPattern: this.getPickingPattern().splice(0, this.getPickingPattern().length-2), //why is the picking pattern length 12 anyway ? 12 - 2 captains
 		election: {
 			startTime: this.electionStartTime(),
 			interval: this.election.INTERVAL

lib/user/helper.js

@@ -15,3 +15,5 @@ var getRandomUser = callback => {
 module.exports = {
 	getRandomUser: getRandomUser
 };
+
+