Initial commit

Author: sgdavis1

.bowerrc

@@ -0,0 +1,4 @@
+{
+  "directory": "public/components",
+  "json": "bower.json"
+}

.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+public/components
+.sass-cache
+semantic/
+public/semantic.js
+public/semantic.css
+data/

app.js

@@ -0,0 +1,18 @@
+
+
+var express = require('express'),
+  config = require('./config/config'),
+  db = require('./app/models');
+
+var app = express();
+
+require('./config/express')(app, config);
+
+db.sequelize
+  .sync()
+  .then(function () {
+    app.listen(config.port);
+  }).catch(function (e) {
+    throw new Error(e);
+  });
+

app/controllers/game.js

@@ -0,0 +1,265 @@
+var express = require('express'),
+  router = express.Router(),
+  router2 = express.Router(),
+  Sequelize = require('sequelize'),
+  db = require('../models');
+
+/**
+ * Get a static list of unique Players given a list of Games.
+ */
+function getStaticPlayerList(games)
+{
+  var list = [];
+  games.forEach(function(game) {
+    if (!game.Players) return;
+    game.Players.forEach(function(player) {
+      var exists = false;
+      list.forEach(function(li) {
+        exists = exists || (li.id == player.id);
+      });
+      if (!exists)
+        list.push({id: player.id, name: player.name, email: player.email});
+    });
+  });
+
+  return list;
+}
+
+module.exports = function (app) {
+  app.use('/games', router);
+  app.use('/game', router2);
+};
+
+/**
+ * Page templates:
+ */
+router2.get('/:id/', function(req, res, next) {
+  db.Game.find({ where: { id: req.params.id }}).then(function (game) {
+    // TODO: redirect to index but put the messages in a session (so URL is updated)
+    if (!game) res.render('index', {messages: ["Cannot find that Game!"] });
+    else res.render('game', {gameStart: game.when, gameThreshold: game.threshold, gameId: game.id});
+  });
+});
+
+/**
+ * JSON routes:
+ */
+// See the list of the game history (most recent first)
+// TODO: pagination eventually?
+router.get('/all', function (req, res, next) {
+  db.Game.findAll({ order: [['when', 'DESC']]}).then(function (games) {
+    // Just return list of id / timestamps
+    var ret = {games: []};
+    var details = {};
+    games.forEach(function(game) {
+      details = {id: game.id, when: game.when};
+      ret.games.push(details);
+    });
+    res.json(ret);
+  });
+});
+
+// See the list of the games for the last week (for the homepage)
+router.get('/last-week', function (req, res, next) {
+  // Calculate midnight of the current day
+  var midnight = new Date();
+  midnight.setHours(0, 0, 0, 0);
+  midnight.setDate(midnight.getDate() - 7);
+  var ret = {games: []};
+  db.Game.findAll({ 
+      where: {when: {$gte: midnight}}, 
+      include: [db.Player, db.Goal],
+      order: [['when', 'DESC']]
+    }).then(function (games) {
+    
+    // For the week, actually return player goals
+    // NOTE: To aid in the D3 viz, we ensure that all games have the
+    //   same list of players, in the same order. So start by building
+    //   the information for the players list for this week.
+    var playerList = getStaticPlayerList(games);
+    console.log(playerList);
+
+    // Now build the information for the games themselves:
+    var details = {};
+    games.forEach(function(game) {
+      details = {id: game.id, when: game.when};
+      details.players = [];
+      // Instantiate the player list in the same order with the same values
+      playerList.forEach(function(player) {
+        details.players.push({id: player.id, name: player.name, email: player.email, goals: 0});
+      });
+      game.Players.forEach(function(player){
+        // Count this user's goals
+        var goalCount = 0;
+        game.Goals.forEach(function(goal) {
+          if (goal.PlayerId == player.id) goalCount++;
+        });
+
+        // Update the goals for this player (others remain at 0)
+        details.players.forEach(function(inner) {
+          if (player.id == inner.id) inner.goals = goalCount;
+        });
+      });
+      ret.games.push(details);
+    });
+
+    res.json(ret);
+  });
+});
+
+// Details for a single game
+router.get('/:id', function (req, res, next) {
+  // Return value
+  var targetGame = {};
+
+  db.Game.find({ where: { id: req.params.id }}).then(function (game) {
+    if (!game) res.json(targetGame);
+    else
+    {
+      targetGame.when = game.when;
+      targetGame.threshold = game.threshold;
+      targetGame.players = {};
+
+      // Get Players Scores
+      game.getPlayers().then(function(players) {
+        // Initialize goals to zero
+        players.forEach(function (player) { 
+          targetGame.players[player.id] = {
+            id: player.id,
+            name: player.name,
+            email: player.email,
+            goals: 0
+          };
+        });
+
+        // Now record actual counts
+        game.getGoals().then(function(goals) {
+          goals.forEach(function(goal) {
+            targetGame.players[goal.PlayerId].goals++;
+          });
+
+          // Send back data
+          res.json(targetGame);
+        });
+      });
+    }
+  });
+});
+
+// Create
+router.post('/create', function(req, res, next) {
+  db.Game.create({when: new Date()}).then(function(game) {
+    res.json({success: true, id: game.id});
+  });
+});
+
+/**
+ * Helper methods.
+ */
+// Add a Player to an existing game
+router.post('/:id/add/player/:pid', function(req, res, next) {
+  console.log('Adding a Player to a Game');
+  db.Game.find({ where: { id: req.params.id }}).then(function (game) {
+    if (!game) res.json({error: 'Invalid Game ID'});
+    else
+    {
+      db.Player.find({ where: { id: req.params.pid }}).then(function(player) {
+        if (!player) res.json({error: 'Invalid Player ID'});
+        else
+        {
+          game.addPlayer(player).then(function() {
+            res.json({success: 'Player ' + player.name + ' added to Game ID ' + game.id});
+          });
+        }
+      });
+    }
+  });
+});
+
+// Remove a player from a game (they must not have any goals)
+router.post('/:id/remove/player/:pid', function(req, res, next) {
+  console.log('Removing a Player from a Game');
+  db.Game.find({ where: { id: req.params.id }}).then(function (game) {
+    if (!game) res.json({error: 'Invalid Game ID'});
+    else
+    {
+      db.Player.find({ where: { id: req.params.pid }}).then(function(player) {
+        if (!player) res.json({error: 'Invalid Player ID'});
+        else
+        {
+          game.getGoals().then(function(goals) {
+            var count = 0;
+            goals.forEach(function(goal) {
+              if (goal.PlayerId == player.id) count++;
+            });
+
+            if (count > 0)
+            {
+              res.json({error: "Cannot remove a Player that has already scored. FINISH THAT GAME!"});
+            }
+            else
+            {
+              game.removePlayer(player).then(function() {
+                res.json({success: 'Player ' + player.name + ' removed from Game ID ' + game.id});
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+});
+
+// Score a goal
+router.post('/:id/goal/player/:pid', function(req, res, next) {
+  console.log('GOOOOOOOOOOAL!');
+  db.Game.find({ where: { id: req.params.id }}).then(function (game) {
+    if (!game) res.json({error: 'Invalid Game ID'});
+    else
+    {
+      db.Player.find({ where: { id: req.params.pid }}).then(function(player) {
+        if (!player) res.json({error: 'Invalid Player ID'});
+        else
+        {
+          // Verify that the game is still open
+          var sql = "SELECT PlayerId, COUNT(PlayerId) AS c FROM Goals WHERE GameId=? GROUP BY PlayerId ORDER BY c DESC";
+          db.sequelize.query(sql, { replacements: [game.id], type: Sequelize.QueryTypes.SELECT }).then(function(rows) {
+            if (rows.length > 0 && rows[0].c >= game.threshold)
+            {
+              res.json({error: 'Game is already closed, Winner (PlayerId): ' + rows[0].PlayerId});
+            }
+            else
+            {
+              // Create the goal
+              db.Goal.create({ when: new Date() }).then(function(goal) {
+                goal.setPlayer(player);
+                goal.setGame(game);
+                res.json({success: 'Player ' + player.name + ': GOOOOOOOOOOOOOAL!', id: goal.id});
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+});
+
+// Undo a goal (delete)
+router.delete('/:id/goal/:gid', function(req, res, next) {
+  console.log('Undoing accidental goal button press...');
+  db.Game.find({ where: { id: req.params.id }}).then(function (game) {
+    if (!game) res.json({error: 'Invalid Game ID'});
+    else
+    {
+      db.Goal.find({ where: { id: req.params.gid }}).then(function(goal) {
+        if (!goal) res.json({error: 'Invalid Goal ID'});
+        else
+        {
+          goal.destroy().then(function() {
+            res.json({success: 'Goal undone'});
+          });
+        }
+      });
+    }
+  });
+});

app/controllers/home.js

@@ -0,0 +1,23 @@
+var express = require('express'),
+  router = express.Router(),
+  db = require('../models');
+
+module.exports = function (app) {
+  app.use('/', router);
+};
+
+router.get('/', function (req, res, next) {
+  res.render('index', {title: 'BN Foosball Score Tracker'});
+});
+router.get('/history', function (req, res, next) {
+  // TODO: get score of last game
+  // Maybe graph?
+  res.render('history', {title: 'Score History :: BN Foosball Score Tracker'});
+});
+
+  /*db.Game.findAll().success(function (games) {
+    res.render('index', {
+      title: 'Foosball Score Tracker',
+      games: games
+    });
+  });*/

app/controllers/player.js

@@ -0,0 +1,74 @@
+var express = require('express'),
+  router = express.Router(),
+  db = require('../models');
+
+module.exports = function (app) {
+  app.use('/players', router);
+};
+
+router.get('/all', function (req, res, next) {
+  db.Player.findAll().success(function (players) {
+    var ret = {players: []};
+    var details = {};
+    players.forEach(function(player) {
+      details = {id: player.id, name: player.name, email: player.email };
+      ret.players.push(details);
+    });
+    res.json(ret);
+  });
+});
+router.get('/:id', function (req, res, next) {
+  db.Player.find({ where: { id: req.params.id }}).success(function (player) {
+    // Get Player's last game?
+    if (player) res.json(player);
+    else res.json({});
+  });
+});
+
+// Update a player's name (email cannot change)
+router.put('/:id', function(req, res, next) {
+  db.Player.find({ where: { id: req.params.id, email: req.body.email }}).then(function (player) {
+    if (!player)
+    {
+      res.json({error: 'You cannot update an email address, just a name. Create a new user for each email.'});
+    }
+    else
+    {
+      player.updateAttributes({ name: req.body.name }).then(function() {
+        res.json(player);
+      });
+    }
+  });
+});
+
+// Create
+router.post('/create', function(req, res, next) {
+  db.Player.find({ where: { email: req.body.email }}).then(function (player) {
+    if (player)
+    {
+      res.json({error: 'Email address already used'});
+    }
+    else
+    {
+      db.Player.create({name: req.body.name, email: req.body.email}).then(function(player) {
+        res.json(player);
+      });
+    }
+  });
+});
+
+// Delete a player
+router.delete('/:id', function(req, res, next) {
+  db.Player.find({ where: { id: req.params.id }}).then(function (player) {
+    if (!player)
+    {
+      res.json({error: 'Player not found with that ID'});
+    }
+    else
+    {
+      player.destroy().then(function() {
+        res.json({success: true});
+      });
+    }
+  });
+});

app/models/games.js

@@ -0,0 +1,20 @@
+/**
+ * Games history
+ */
+module.exports = function (sequelize, DataTypes) {
+
+  var Game = sequelize.define('Game', {
+    when: DataTypes.DATE,
+    threshold: { type: DataTypes.INTEGER, allowNull: false, defaultValue: 5}
+  }, {
+    classMethods: {
+      associate: function (models) {
+        Game.belongsToMany(models.Player, { through: 'GamePlayers' });
+        Game.hasMany(models.Goal);
+      }
+    }
+  });
+
+  return Game;
+};
+

app/models/goals.js

@@ -0,0 +1,19 @@
+/**
+ * Goals scored in a single game
+ */
+module.exports = function (sequelize, DataTypes) {
+
+  var Goal = sequelize.define('Goal', {
+    when: DataTypes.DATE
+  }, {
+    classMethods: {
+      associate: function (models) {
+        Goal.belongsTo(models.Player);
+        Goal.belongsTo(models.Game);
+      }
+    }
+  });
+
+  return Goal;
+};
+

app/models/index.js

@@ -0,0 +1,27 @@
+var fs = require('fs'),
+  path = require('path'),
+  Sequelize = require('sequelize'),
+  config = require('../../config/config'),
+  db = {};
+
+var sequelize = new Sequelize(config.db, {
+  storage: config.storage
+});
+
+fs.readdirSync(__dirname).filter(function (file) {
+  return (file.indexOf('.') !== 0) && (file !== 'index.js');
+}).forEach(function (file) {
+  var model = sequelize['import'](path.join(__dirname, file));
+  db[model.name] = model;
+});
+
+Object.keys(db).forEach(function (modelName) {
+  if ('associate' in db[modelName]) {
+    db[modelName].associate(db);
+  }
+});
+
+db.sequelize = sequelize;
+db.Sequelize = Sequelize;
+
+module.exports = db;

app/models/players.js

@@ -0,0 +1,18 @@
+/**
+ * Players for the game score history
+ */
+module.exports = function (sequelize, DataTypes) {
+  var Player = sequelize.define('Player', {
+    name: DataTypes.STRING,
+    email: DataTypes.STRING
+  }, {
+    classMethods: {
+      associate: function (models) {
+        Player.belongsToMany(models.Game, { through: 'GamePlayers' });
+      }
+    }
+  });
+
+  return Player;
+};
+

app/views/error.swig

@@ -0,0 +1,7 @@
+{% extends 'layout.swig' %}
+
+{% block content %}
+  <h1>{{ message }}</h1>
+  <h2>{{ error.status }}</h2>
+  <pre>{{ error.stack }}</pre>
+{% endblock %}

app/views/game.swig

@@ -0,0 +1,43 @@
+{% extends 'layout.swig' %}
+
+{% block scripts %}
+<script>
+  var gameStart = new Date(Date.parse('{{ gameStart.toISOString() }}'));
+  var gameThreshold = {{gameThreshold}};
+  var gameId = {{gameId}};
+  var game = {};
+</script>
+<script src="/js/main.js"></script>
+<script src="/js/game.js"></script>
+<script>
+  $(document).on('ready', function() {
+    initGamePage();
+  });
+</script>
+{% endblock %}
+
+{% block content %}
+  <h1>Let's Play FOOSBALL!</h1>
+  
+  <div class="ui center aligned equal width grid">
+    <div id="scoreboard" class="ui row"></div>
+  </div>
+
+  <div id="players" class="ui center aligned equal width grid">
+    <div class="ui row"><div class="ui column"><h2 class="ui header teal">Players</h2></div></div>
+
+    <ul id="players-list" class="ui row"></ul>
+
+    <div class="ui row controls">
+      <div class="ui column">
+        <select class="ui dropdown">
+          <option value="0">Select a Player...</option>
+        </select>
+        <button class="ui large button" onclick="joinGame();" id="player-game-join">Join Game</button>
+      </div> 
+    </div>
+  </div>
+  <div id="winner" class="ui inverted teal segment center aligned"></div>
+
+  <div id="start-time" class="ui inverted segment footer">{{ gameStart.toString() }}</div>
+{% endblock %}

app/views/index.swig

@@ -0,0 +1,30 @@
+{% extends 'layout.swig' %}
+
+{% block content %}
+  <h1>{{ title }}</h1>
+  <div id="messages">
+    {% for msg in messages %}
+      {% if loop.first %}<ul>{% endif %}
+      <li>{{ msg }}</li>
+      {% if loop.last %}</ul>{% endif %}
+    {% endfor %}
+  </div>
+  <div class="ui segment basic">
+    <button class="ui button" onclick="newGame();">Start a New Game</button>
+  </div>
+
+  <div class="ui segment basic" id="last-game">
+    <button class="ui tiny button" onclick="loadLastGame();" title="Last Game">L</button>
+    <button class="ui tiny button" onclick="loadGameDay();" title="Last Game Day">GD</button>
+    <button class="ui tiny button" onclick="loadWeek();" title="Last Week">W</button>
+  </div>
+{% endblock %}
+
+{% block scripts %}
+  <script src="/js/main.js"></script>
+  <script src="/js/history.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+  <script>
+    $(document).on('ready', function() { initHomePage(); });
+  </script>
+{% endblock %}

app/views/layout.swig

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width">
+  <title>{{ title }}</title>
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/semantic.min.css">
+  {% if ENV_DEVELOPMENT %}
+    <script src="http://localhost:35729/livereload.js"></script>
+  {% endif %}
+</head>
+<body>
+  <div class="ui container">
+    {% block content %}{% endblock %}
+  </div>
+  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+  <script src="/semantic.min.js"></script>
+  {% block scripts %}{% endblock %}
+</body>
+</html>

bower.json

@@ -0,0 +1,9 @@
+{
+  "name": "foos-tracker",
+  "version": "0.0.1",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "components"
+  ]
+}

config/config.js

@@ -0,0 +1,37 @@
+var path = require('path'),
+    rootPath = path.normalize(__dirname + '/..'),
+    env = process.env.NODE_ENV || 'development';
+
+var config = {
+  development: {
+    root: rootPath,
+    app: {
+      name: 'foos-tracker'
+    },
+    port: 3000,
+    db: 'sqlite://localhost/foos-tracker-development',
+    storage: rootPath + '/data/foos-tracker-development'
+  },
+
+  test: {
+    root: rootPath,
+    app: {
+      name: 'foos-tracker'
+    },
+    port: 3000,
+    db: 'sqlite://localhost/foos-tracker-test',
+    storage: rootPath + '/data/foos-tracker-test'
+  },
+
+  production: {
+    root: rootPath,
+    app: {
+      name: 'foos-tracker'
+    },
+    port: 3000,
+    db: 'sqlite://localhost/foos-tracker-production',
+    storage: rootPath + 'data/foos-tracker-production'
+  }
+};
+
+module.exports = config[env];

config/express.js

@@ -0,0 +1,63 @@
+var express = require('express');
+var glob = require('glob');
+
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+var compress = require('compression');
+var methodOverride = require('method-override');
+var swig = require('swig');
+
+module.exports = function(app, config) {
+  app.engine('swig', swig.renderFile);
+  app.set('views', config.root + '/app/views');
+  app.set('view engine', 'swig');
+
+  var env = process.env.NODE_ENV || 'development';
+  app.locals.ENV = env;
+  app.locals.ENV_DEVELOPMENT = env == 'development';
+
+  // app.use(favicon(config.root + '/public/img/favicon.ico'));
+  app.use(logger('dev'));
+  app.use(bodyParser.json());
+  app.use(bodyParser.urlencoded({
+    extended: true
+  }));
+  app.use(cookieParser());
+  app.use(compress());
+  app.use(express.static(config.root + '/public'));
+  app.use(methodOverride());
+
+  var controllers = glob.sync(config.root + '/app/controllers/*.js');
+  controllers.forEach(function (controller) {
+    require(controller)(app);
+  });
+
+  app.use(function (req, res, next) {
+    var err = new Error('Not Found');
+    err.status = 404;
+    next(err);
+  });
+  
+  if(app.get('env') === 'development'){
+    app.use(function (err, req, res, next) {
+      res.status(err.status || 500);
+      res.render('error', {
+        message: err.message,
+        error: err,
+        title: 'error'
+      });
+    });
+  }
+
+  app.use(function (err, req, res, next) {
+    res.status(err.status || 500);
+      res.render('error', {
+        message: err.message,
+        error: {},
+        title: 'error'
+      });
+  });
+
+};

gulpfile.js

@@ -0,0 +1,32 @@
+var gulp = require('gulp'),
+  nodemon = require('gulp-nodemon'),
+  livereload = require('gulp-livereload'),
+  sass = require('gulp-ruby-sass');
+
+gulp.task('sass', function () {
+  return sass('./public/css/')
+    .pipe(gulp.dest('./public/css'))
+    .pipe(livereload());
+});
+
+gulp.task('watch', function() {
+  gulp.watch('./public/css/*.scss', ['sass']);
+});
+
+gulp.task('develop', function () {
+  livereload.listen();
+  nodemon({
+    script: 'app.js',
+    ext: 'js coffee swig',
+  }).on('restart', function () {
+    setTimeout(function () {
+      livereload.changed(__dirname);
+    }, 500);
+  });
+});
+
+gulp.task('default', [
+  'sass',
+  'develop',
+  'watch'
+]);

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "foos-tracker",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node app.js"
+  },
+  "dependencies": {
+    "express": "~4.12.0",
+    "serve-favicon": "~2.2.0",
+    "morgan": "~1.5.0",
+    "cookie-parser": "~1.3.3",
+    "body-parser": "~1.12.0",
+    "compression": "~1.4.1",
+    "method-override": "~2.3.0",
+    "glob": "~5.0.3",
+    "sequelize": "~2.0.5",
+    "sqlite3": "~3.0.5",
+    "swig": "~1.4.2"
+  },
+  "devDependencies": {
+    "better-console": "^0.2.4",
+    "del": "^1.2.1",
+    "extend": "^3.0.0",
+    "gulp": "~3.8.10",
+    "gulp-autoprefixer": "^2.3.1",
+    "gulp-chmod": "^1.2.0",
+    "gulp-clone": "^1.0.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-concat-css": "^2.2.0",
+    "gulp-copy": "0.0.2",
+    "gulp-flatten": "^0.1.1",
+    "gulp-header": "^1.2.2",
+    "gulp-help": "^1.6.0",
+    "gulp-if": "^1.2.5",
+    "gulp-less": "^3.0.3",
+    "gulp-livereload": "~3.8.0",
+    "gulp-minify-css": "^1.2.0",
+    "gulp-nodemon": "~2.0.2",
+    "gulp-notify": "^2.2.0",
+    "gulp-plumber": "^1.0.1",
+    "gulp-print": "^1.1.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.5.4",
+    "gulp-rtlcss": "^0.1.4",
+    "gulp-ruby-sass": "~1.0.1",
+    "gulp-uglify": "^1.2.0",
+    "gulp-util": "^3.0.6",
+    "gulp-watch": "^4.3.4",
+    "map-stream": "0.0.6",
+    "require-dot-file": "^0.4.0",
+    "semantic-ui": "^2.0.8",
+    "yamljs": "^0.2.3"
+  }
+}

public/css/style.css

@@ -0,0 +1,8 @@
+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
+
+a {
+  color: #00B7FF; }
+
+#winner { display: none; }

public/css/style.scss

@@ -0,0 +1,8 @@
+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #00B7FF;
+}

public/js/game.js

@@ -0,0 +1,131 @@
+/**
+ * Fill up the players-list with the current players of this game, 
+ * and add their GOAL buttons, then add the remaining players to the
+ * controls for addition to this game. Finally initialize the current
+ * score for the game.
+ *
+ * NOTE: This method should only be called once the document is ready.
+ */
+function initGamePage()
+{
+  $.get('/players/all/', {}, function(data, text, xhr) {
+    var allPlayers = data.players;
+    $.get('/games/' + gameId, {}, function(data, text, xhr) {
+      // Player info
+      allPlayers.forEach(function(player) {
+        if (data.players[player.id])
+          addActivePlayer(player);
+        else
+          addAvailablePlayer(player);
+      });
+
+      // Current Game info
+      refreshGameInfo();
+    });
+  });
+
+  // Init our Semantic UI dropdown
+  $('.ui.dropdown').dropdown();
+}
+
+/**
+ * Helper method to add an active player for the Game Init method. 
+ * Includes their "Goal" button, and placeholder on the Scoreboard.
+ */
+function addActivePlayer(player)
+{
+  var button = '<button class="ui button" onclick="score(' + player.id + ');">Goal!</button>';
+  $('#players-list').append('<li class="ui column"><p>' + player.name + '</p>' + button + '</li>');
+
+  // Add player to the Scoreboard
+  $('#scoreboard').append('<div class="ui column" id="player-score-' + player.id + '">' + 
+    '<h2>0</h2><p>' + player.name + '</p>' +
+    '</div>');
+
+  // Add player score to memory
+  game[player.id] = 0;
+}
+
+/**
+ * Helper method to add an available player to the dropdown list.
+ */
+function addAvailablePlayer(player)
+{
+  var opt = '<option id="player-available-' + player.id + '" value="' + player.id + '">' + player.name + '</option>';
+  $('#players .controls select').append(opt);
+}
+
+/**
+ * Add the currently selected available player to the game.
+ */
+function joinGame()
+{
+  var pid = $('#players .controls select').val();
+  if (pid <= 0) return;
+
+  $.get('/players/' + pid, {}, function(player, text, xhr) {
+    $.post('/games/' + gameId + '/add/player/' + pid, {}, function(data, text, xhr) {
+      addActivePlayer(player);
+      // Success! Remove from available list
+      $('#player-available-' + pid).remove();
+    });
+  });
+}
+
+/**
+ * Score a goal.
+ */
+function score(pid)
+{
+  $.post('/games/' + gameId + '/goal/player/' + pid, {}, function(data, text, xhr) {
+    // Update Scoreboard
+    game[pid]++;
+    $('#player-score-' + pid).children('h2').replaceWith('<h2>' + game[pid] + '</h2>');
+
+    // We have a winner (verify by talking to the server)
+    if (game[pid] >= gameThreshold) refreshGameInfo();
+  });
+}
+
+/**
+ * Get the game info. (Display winner if anyone has > 5 goals)
+ */
+function refreshGameInfo()
+{
+  $.get('/games/' + gameId, {}, function(data, text, xhr) {
+    var winner = null;
+    for (pid in data.players)
+    {
+      // Check for a winner
+      if (data.players[pid].goals >= data.threshold) 
+      {
+        // Just in case threshold was set wrong
+        if (!winner || data.players[pid].goals > winner.goals)
+          winner = data.players[pid];
+      }
+
+      // Update player score
+      game[pid] = data.players[pid].goals;
+      $('#player-score-' + pid).children('h2').replaceWith('<h2>' + game[pid] + '</h2>');
+    } 
+
+    // Close the game out
+    if (winner) showWinner(winner);
+  });
+}
+
+/**
+ * Display the winner of this game, and button to create a new game.
+ */
+function showWinner(winner)
+{
+  $('#winner').append('<h2>' + winner.name + ' Crushed It!!!</h2>');
+  // Disable all goal buttons
+  $('#players-list li button').prop("disabled", true);
+  // Disable Join button
+  $('#players .controls button').prop("disabled", true);
+
+  // New game button
+  $('#winner').append('<button class="ui massive button" onclick="newGame();">Play a new Game</button>');
+  $('#winner').fadeIn();
+}

public/js/history.js

@@ -0,0 +1,200 @@
+var gameHistory = {};
+
+/**
+ * Display the pie chart for the most recently played game.
+ */
+function initHomePage()
+{
+  $.get('/games/last-week', {}, function(data, text, xhr) {
+    // Put a link to the most recent game
+    if (data && data.games)
+    {
+      if (data.games.length == 0)
+        $('#last-game').append('<h2>No Game History!</h2>');
+      else
+      {
+        var when = new Date(Date.parse(data.games[0].when));
+        var h = when.getHours();
+        var m = when.getMinutes() < 10 ? "0" + when.getMinutes() : when.getMinutes();
+        var time = (h > 12) ? (h - 12) + ':' + m + 'pm' : h + ':' + m + 'am';
+        var date = getDay(when) + ' @ ' + time;
+        $('#last-game').append('<h2><a href="/game/' + data.games[0].id + '">' + date + '</h2>');
+
+        // Get most recent data into memory
+        gameHistory = data.games;
+
+        // And kick off the D3 rendering of the pie chart
+        setupVisualization();
+      }
+    }
+  });
+}
+
+// Global namespace for caching some of the configured d3 settings
+var viz = {};
+
+/**
+ * Setup visualization. Using data from the most recent game.
+ */
+function setupVisualization()
+{
+  var width = 500, height = 350;
+  var radius = Math.min(width, height) / 2;
+
+  // Define our palette
+  var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+  var outer = radius - 10;
+  viz.arc = d3.svg.arc().outerRadius(outer).innerRadius(0);
+  viz.textarc = d3.svg.arc().outerRadius(outer).innerRadius(outer / 3);
+
+  viz.pie = d3.layout.pie()
+    // default sort is descending order
+    // Grab data using the "goals" property on a player
+    .value(function(d) { return d.goals; });
+
+  var svg = d3.select("#last-game").append("svg")
+      .attr("width", width)
+      .attr("height", height)
+    .append("g")
+      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+  // Load data from the most recent game in the gameHistory global, (or nothing if empty)
+  //   D3 needs an array of values that can be read using the FUNC from
+  //   "d3.layout.pie().value(FUNC)"
+  var data = (gameHistory) ? gameHistory[0].players : [];
+
+  var g = svg.selectAll()
+      .data(viz.pie(data))
+    .enter().append("g")
+      .attr("class", "arc");
+
+  g.append("path")
+      .attr("d", viz.arc)
+      .style("fill", function(d) { return color(d.data.name); });
+
+  var label = g.append("g")
+      .attr("transform", function(d) { return "translate(" + viz.textarc.centroid(d) + ")"; })
+      .attr("id", function(d) { return "player-arc-" + d.data.id; } )
+      .style("text-anchor", "middle");
+  label.append("text")
+      .style("font-weight", "bold")
+      .attr("class", "name")
+      .text(function(d) { return (d.data.goals > 0) ? d.data.name : ""; });
+  label.append("text")
+      .attr("dy", "1.1em")
+      .attr("class", "goals")
+      .text(function(d) { return (d.data.goals > 0) ? d.data.goals : ""; });
+}
+
+/**
+ * Load data into the graph from the last game.
+ */
+function loadLastGame()
+{
+  if (!gameHistory) return;
+  var gameDay = new Date(Date.parse(gameHistory[0].when));
+  var h = gameDay.getHours();
+  var m = gameDay.getMinutes() < 10 ? "0" + gameDay.getMinutes() : gameDay.getMinutes();
+  var time = (h > 12) ? (h - 12) + ':' + m + 'pm' : h + ':' + m + 'am';
+  var date = getDay(gameDay) + ' @ ' + time;
+  $('#last-game h2').replaceWith('<h2><a href="/game/' + gameHistory[0].id + '">' + date + '</a></h2>');
+
+  changeData(first(gameHistory));
+}
+
+/**
+ * Load data into graph for the last "game day".
+ */
+function loadGameDay()
+{
+  if (!gameHistory) return;
+  var gameDay = new Date(Date.parse(gameHistory[0].when));
+  $('#last-game h2').replaceWith('<h2>' + getDay(gameDay) + '</h2>');
+
+  // Sum all data from the same y/m/d of the latest game in our gameHistory
+  var data = first(gameHistory);
+  for (var i = 1; i < gameHistory.length; i++)
+  {
+    var day = new Date(Date.parse(gameHistory[i].when));
+    if (!(day.getYear() == gameDay.getYear() && 
+      day.getMonth() == gameDay.getMonth() &&
+      day.getDay() == gameDay.getDay()))
+      continue;
+    for (var pidx = 0; pidx < data.length; pidx++)
+    {
+      data[pidx].goals += gameHistory[i].players[pidx].goals;
+    }
+  }
+
+  changeData(data);
+}
+
+/**
+ * Get a day as a string.
+ */
+function getDay(d)
+{
+  var date = d.getFullYear() + ' / ' + d.getMonth() + ' / ' + d.getDay()
+  return date;
+}
+
+/**
+ * Load data into graph for the last "week" (our full gameHistory).
+ */
+function loadWeek()
+{
+  if (!gameHistory) return;
+
+  var gameDay = new Date(Date.parse(gameHistory[0].when));
+  var startDay = gameDay;
+  startDay.setDate(gameDay.getDate() - 7);
+  $('#last-game h2').replaceWith('<h2>' + getDay(startDay) + ' &mdash; ' + getDay(gameDay) + '</h2>');
+
+  // Sum all data from the same y/m/d of the latest game in our gameHistory
+  var data = first(gameHistory);
+  for (var i = 1; i < gameHistory.length; i++)
+    for (var pidx = 0; pidx < data.length; pidx++)
+      data[pidx].goals += gameHistory[i].players[pidx].goals;
+
+  changeData(data);
+}
+
+/**
+ * Clone the first value out of this players array.
+ */
+function first(game)
+{
+  var ret = [];
+  game[0].players.forEach(function(player) {
+    ret.push({id: player.id, name: player.name, email: player.email, goals: player.goals});
+  });
+  return ret;
+}
+
+/**
+ *
+
+/**
+ * Change the pie chart to display the new data as specified by the parameter.
+ */
+function changeData(data)
+{
+  // All current pie slices (just the paths)
+  var sliceLayer = d3.selectAll("#last-game svg .arc");
+
+  // Update data to new values (on the .arc, and all children)
+  sliceLayer.data(viz.pie(data));
+
+  // Create a transition
+  var t1 = sliceLayer.transition().duration(1000);
+
+  // Animate the path change
+  t1.select("path").attr("d", viz.arc);
+  // And the text position
+  t1.select("g").attr("transform", function(d) { return "translate(" + viz.textarc.centroid(d) + ")"; });
+  // And text values (after the objects move)
+  var t2 = t1.transition();
+  t2.select("g .name").text(function(d) { return (d.data.goals > 0) ? d.data.name : ""; });
+  t2.select("g .goals").text(function(d) { return (d.data.goals > 0) ? d.data.goals : ""; });
+}

public/js/main.js

@@ -0,0 +1,9 @@
+/**
+ * Create a new game and redirect to that game.
+ */
+function newGame()
+{
+  $.post('/games/create', {}, function(data, text, xhr) {
+    window.location = '/game/' + data.id;
+  });
+}

public/semantic.min.css

@@ -0,0 +1,49 @@
+{
+  "base": "semantic/",
+  "paths": {
+    "source": {
+      "config": "src/theme.config",
+      "definitions": "src/definitions/",
+      "site": "src/site/",
+      "themes": "src/themes/"
+    },
+    "output": {
+      "packaged": "../public/",
+      "uncompressed": "public/components/",
+      "compressed": "public/components/",
+      "themes": "public/themes/"
+    },
+    "clean": "public/"
+  },
+  "permission": false,
+  "rtl": "No",
+  "components": [
+    "reset",
+    "site",
+    "button",
+    "container",
+    "divider",
+    "header",
+    "icon",
+    "image",
+    "input",
+    "label",
+    "list",
+    "loader",
+    "segment",
+    "form",
+    "grid",
+    "menu",
+    "message",
+    "table",
+    "accordion",
+    "checkbox",
+    "dropdown",
+    "modal",
+    "transition",
+    "api",
+    "form",
+    "state"
+  ],
+  "version": "2.0.8"
+}