Better game selection screen

Author: bigtimebuddy

app/routes/games/index.js

@@ -1,20 +1,21 @@
 var router = require('express').Router(),
-	Game = require('../../models/game.js');
+	Game = require('../../models/game'),
+	Pagination = require('../../helpers/pagination');
 
-router.post('/', function(req, res)
+router.get('/:local(page)?/:number([0-9]+)?', function(req, res)
 {
-	res.redirect('/games/game/'+req.body.slug);
-});
-
-router.get('/', function(req, res)
-{
-	res.render('select',
+	Game.getAll().count(function(err, count)
 	{
-		itemName: 'Game',
-		itemProperty: 'slug',
-		itemKey: 'slug',
-		itemValue: 'title',
-		items: Game.getAll().select('title slug').sort('title')
+		var nav = new Pagination('/games', count, req.params.number, 7, 2);
+		res.render('games/edit',
+		{
+			pagination: nav.result,
+			games: Game.getAll()
+				.select('title slug thumbnail releases')
+				.sort('title')
+				.skip(nav.start || 0)
+				.limit(nav.itemsPerPage)
+		});
 	});
 });
 

app/views/games/edit.jade

@@ -4,13 +4,24 @@ append title
 	| Edit Game - 
 
 append content
-	.col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
+	.col-sm-12
+		a.btn.btn-sm.btn-default.pull-right(href="/games/add")
+			span.glyphicon.glyphicon-pencil
+			|  Add
 		h3 Games
 		if !games.length
 			.alert.alert-warning.text-center No games have been added.
 				|    
 				a.btn.btn-warning.btn-sm(href="/games/add") Add Game
 		else
-			.list-group
+			.row
 				for game in games
-					a.list-group-item(href="/games/game/#{game.slug}")=game.title
+					.col-md-2.col-sm-3.col-xs-6
+						a.game(data-toggle="tooltip" title=game.title href="/games/game/#{game.slug}")
+							if game.thumbnail && game.thumbnail.length
+								img.preview(src="data:image/png;base64,#{game.thumbnail}")
+							else
+								img.preview(src="/images/none.png")
+							span.title=game.title
+							span.badge=game.releases.length
+			.row: include ../partials/pagination