JogoShugh/client_app.js

## client_app.js
//client only code

Template.teams.teams = function () {
  return Teams.find();
};

Template.teams.events({
  'click .spin': function() {
    Meteor.call('spin');
  }
});

Template.teams.selectedName = function () {
  var player = Teams.findOne(Session.get("selectedTeam"));
  return player && player.name;
};

Template.player.selected = function () {
  return Session.equals("selectedTeam", this._id) ? "selected" : '';
};

## common.js
//code shared between client and server

Teams = new Meteor.Collection("teams");

## main.html
<head>
  <title>Team Order</title>
</head>

<body>
  <div id="outer">
    {{> teams}}
  </div>
</body>

<template name="teams">
  <div class="teams">
    <ol>
    {{#each teams}}
      <li>{{> team}}</li>
    {{/each}}
    </ol>
  </div>

  {{#if selectedName}}
  <div class="details">
    <div class="name">{{selectedName}}</div>
  </div>
  {{else}}
    <br />
    <a class="btn btn-success spin">Click to randomize!</a>
  {{/if}}
</template>

<template name="team">
  <div class="team {{selected}}">
    <span class="name">{{name}}</span>
  </div>
</template>


## server_app.js
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}


Meteor.startup(function () {
  var names = ["openAgile Sprint",
               "openAgile Evolve",
               "Imua",
               "Q",
               "Heisenberg",
               "Cashier"];
  names = names.sort();

  function insertNames() {
    for (var i = 0; i < names.length; i++)
      Teams.insert({name: names[i]});
  }

  if (Teams.find().count() === 0) {
    insertNames();
  }

  Meteor.methods({
    spin: function() {
      names = shuffle(names);
      console.log(names);
      Teams.remove({});
      insertNames();
      return true;
    }
  });
});

## style.css
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 200;
    margin: 50px 0;
    padding: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#outer {
    width: 600px;
    margin: 0 auto;
}

.team .name {
    display: inline-block;
    width: 300px;
    font-size: 1.75em;
    padding: 5px;
    border: 1px solid black;
}

.details, .none {
    font-weight: bold;
    font-size: 2em;
    border-color: #ccc;
    border-width: 4px;
    margin: 50px 10px;
    padding: 10px 0px;
}

.none {
    color: #777;
}

.inc {
  cursor: pointer;
}
	//client only code

	Template.teams.teams = function () {
	return Teams.find();
	};

	Template.teams.events({
	'click .spin': function() {
	Meteor.call('spin');
	}
	});

	Template.teams.selectedName = function () {
	var player = Teams.findOne(Session.get("selectedTeam"));
	return player && player.name;
	};

	Template.player.selected = function () {
	return Session.equals("selectedTeam", this._id) ? "selected" : '';
	};
	//code shared between client and server

	Teams = new Meteor.Collection("teams");
	<head>
	<title>Team Order</title>
	</head>

	<body>
	<div id="outer">
	{{> teams}}
	</div>
	</body>

	<template name="teams">
	<div class="teams">
	<ol>
	{{#each teams}}
	<li>{{> team}}</li>
	{{/each}}
	</ol>
	</div>

	{{#if selectedName}}
	<div class="details">
	<div class="name">{{selectedName}}</div>
	</div>
	{{else}}
	<br />
	<a class="btn btn-success spin">Click to randomize!</a>
	{{/if}}
	</template>

	<template name="team">
	<div class="team {{selected}}">
	<span class="name">{{name}}</span>
	</div>
	</template>
	function shuffle(array) {
	var currentIndex = array.length, temporaryValue, randomIndex ;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {

	// Pick a remaining element...
	randomIndex = Math.floor(Math.random() * currentIndex);
	currentIndex -= 1;

	// And swap it with the current element.
	temporaryValue = array[currentIndex];
	array[currentIndex] = array[randomIndex];
	array[randomIndex] = temporaryValue;
	}

	return array;
	}


	Meteor.startup(function () {
	var names = ["openAgile Sprint",
	"openAgile Evolve",
	"Imua",
	"Q",
	"Heisenberg",
	"Cashier"];
	names = names.sort();

	function insertNames() {
	for (var i = 0; i < names.length; i++)
	Teams.insert({name: names[i]});
	}

	if (Teams.find().count() === 0) {
	insertNames();
	}

	Meteor.methods({
	spin: function() {
	names = shuffle(names);
	console.log(names);
	Teams.remove({});
	insertNames();
	return true;
	}
	});
	});
	body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 200;
	margin: 50px 0;
	padding: 0;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

	#outer {
	width: 600px;
	margin: 0 auto;
	}

	.team .name {
	display: inline-block;
	width: 300px;
	font-size: 1.75em;
	padding: 5px;
	border: 1px solid black;
	}

	.details, .none {
	font-weight: bold;
	font-size: 2em;
	border-color: #ccc;
	border-width: 4px;
	margin: 50px 10px;
	padding: 10px 0px;
	}

	.none {
	color: #777;
	}

	.inc {
	cursor: pointer;
	}