added picking pattern

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,19 +368,42 @@ 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>
-							<JoinGatherButton gather={gather} thisGatherer={thisGatherer}
-								user={user} socket={socket} />
-						</li>
-						<li>
-							{regatherButton}
+							{pickPatternIndicator}
 						</li>
+						<ul className='list-inline no-bottom'>
+							<li className='padding-right-0'>
+								<JoinGatherButton gather={gather} thisGatherer={thisGatherer}
+									user={user} socket={socket} />
+							</li>
+							<li className='padding-right-0'>
+								{regatherButton}
+							</li>
+						</ul>
 					</ul>
 				</div>
 			</div>

app/stylesheets/app.css

@@ -332,7 +332,52 @@ html, body {
 
 /* minimized drawer gather icons */
 
-.gatherTypeIcons{
+.gatherTypeIcons {
 	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/controller.js

@@ -106,7 +106,7 @@ module.exports = function (namespace) {
 	});
 
 	// ***** Generate Test Users *****
-	if (process.env.POPULATE_GATHER) {
+	//if (process.env.POPULATE_GATHER) {
 		let helper = require("./helper");
 
 		GatherPool.forEach(gatherManager => {
@@ -114,7 +114,7 @@ module.exports = function (namespace) {
 				gather: gatherManager.current
 			}, refreshGather());
 		});
-	}
+	//}
 	
 	namespace.on("connection", function (socket) {
 		ArchivedGather.recent((error, recentGathers) => {

lib/gather/gather.js

@@ -48,7 +48,7 @@ function Gather (options) {
 	this.description = options.description || "No player requirements";
 
 	this.election = {
-		INTERVAL: 60000, // 1 Minute
+		INTERVAL: 5000, // 1 Minute
 		startTime: null,
 		timer: null
 	};
@@ -257,17 +257,9 @@ 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",
 		"alien",
 		"alien",
 		"marine",
@@ -280,6 +272,20 @@ Gather.prototype.pickingTurn = function () {
 		"alien",
 		"marine",
 	];
+	
+	return pickingPattern;
+}	
+
+// 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;
+	const pickingPattern = this.getPickingPattern();
 
 	const pickingTurn = alreadyPickedCount % pickingPattern.length;
 
@@ -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.pickingTurn()] !== "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.pickingTurn()] !== "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.pickingTurn()], 
+		pickingTurnIndex: this.pickingTurn(),
+		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/gather/gather_pool.js

@@ -23,7 +23,7 @@ const GATHER_CONFIGS = [
 		name: "Classic Gather",
 		description: "No Requirements",
 		serverMembershipTest: function (server) {
-			return server.name.toLowerCase().indexOf("promod") === -1;
+			//return server.name.toLowerCase().indexOf("promod") === -1;
 		}
 	},
 	/*{
@@ -45,7 +45,7 @@ const GATHER_CONFIGS = [
 			return InvitationalGather.list.some(m => m.id === user.id);
 		},
 		serverMembershipTest: function (server) {
-			return server.name.toLowerCase().indexOf("promod") === -1;
+			//return server.name.toLowerCase().indexOf("promod") === -1;
 		}
 	}
 	// {

lib/gather/helper.js

@@ -26,10 +26,10 @@ var createTestUsers = (options, callback) => {
 			console.log("Error while adding gatherers", error);
 		} else {
 			console.log("Loaded gatherers");
-			gather.gatherers.forEach((gatherer, index, array) => {
+			/*gather.gatherers.forEach((gatherer, index, array) => {
 				var candidate = Math.floor(Math.random() * array.length);
 				array[index].leaderVote = array[candidate].id;
-			});
+			});*/
 			console.log("Assigned vote for each gatherer");
 			if (typeof callback === 'function') return callback(gather);
 		}

lib/user/helper.js

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