Simple no games error handling

assets/css/custom.styl

@@ -57,18 +57,20 @@ a
 		p
 			margin 0 20px 15px
 
-	form.overflow
-		overflow hidden
+	form
+		position relative
+		height 124px
+
+		&.overflow
+			overflow hidden
 
 	.step
-		position relative
-		height 84px
+		box-sizing border-box
+		absolute top left
+		size 100%
 		padding 20px
 		transition transform 0.3s
 
-		+ .step
-			margin-top -124px
-
 		&.hidden
 			display none
 

assets/js/main.js

@@ -21,7 +21,7 @@ $(function () {
 	var $error = $('#error');
 	var errorTimeout;
 
-	var showError = function (msg) {
+	var showError = function (msg, duration) {
 		$error.text(msg);
 		$error.show();
 		setTimeout(function () {
@@ -31,21 +31,43 @@ $(function () {
 		clearTimeout(errorTimeout);
 		errorTimeout = setTimeout(function () {
 			$error.removeClass('show');
-		}, 2000);
+		}, duration || 2000);
 	};
 
+	if (window.location.search.indexOf('nogames') !== -1) {
+		showError('You should have at least one purchased game to use this app', 4000);
+	}
+
 	var screenWidth = screen.width;
 	var screenHeight = screen.height;
 	var isRetina = window.devicePixelRatio && window.devicePixelRatio > 1 || false;
 
-	var augmentForm = function (selector) {
-		var $form = $(selector);
+	var goToStep = function (stepIndex) {
+		var $form = $('#form');
+		var $steps = $('.step1, .step2', $form);
+		var $oldStep = $steps.eq(1 - stepIndex);
+		var $newStep = $steps.eq(stepIndex);
+
+		$form.addClass('overflow');
+		$oldStep.addClass('hide');
+		$newStep.removeClass('hidden');
+
+		setTimeout(function () {
+			$newStep.removeClass('hide');
+			$newStep.on('webkitTransitionEnd transitionend', function () {
+				$newStep.off('webkitTransitionEnd transitionend');
+				$oldStep.addClass('hidden');
+				$form.removeClass('overflow');
+			});
+		}, 1);
+	};
+
+	var augmentForm = function () {
+		var $form = $('#form');
 		var $width = $('input[name="width"]', $form);
 		var $height = $('input[name="height"]', $form);
 		var $isRetina = $('input[name="is-retina"]', $form);
 		var $btnGenerate = $('.btn-generate', $form);
-		var $step1 = $('.step1', $form);
-		var $step2 = $('.step2', $form);
 
 		$width.val(screenWidth);
 		$height.val(screenHeight);
@@ -70,20 +92,19 @@ $(function () {
 			}
 
 			generateCanvas();
-			$form.addClass('overflow');
-			$step1.addClass('hide');
-			$step2.removeClass('hidden');
-			setTimeout(function () {
-				$step2.removeClass('hide');
-			}, 1);
+			goToStep(1);
 		});
 	};
-	augmentForm('#form');
+	augmentForm();
 
 	var fetchImages = function (imageUrls, done) {
 		var images = [];
 		var counter = 0;
 
+		if (!imageUrls.length) {
+			done(null, images);
+		}
+
 		var finishLoad = function () {
 			counter += 1;
 
@@ -140,8 +161,13 @@ $(function () {
 			fetchImages(pluckImageUrls(games), function (error, images) {
 				if (error) { return console.error(error); }
 
-				var canvasGrid = new CanvasGrid(canvas);
-				canvasGrid.fitImages(images);
+				if (!images.length) {
+					goToStep(0);
+					showError('You should have at least one purchased game to use this app', 4000);
+				} else {
+					var canvasGrid = new CanvasGrid(canvas);
+					canvasGrid.fitImages(images);
+				}
 
 				hideLoader();
 			});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "steamwall",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Generate a unique wallpaper using games from your Steam library",
   "engines": {
     "node": "0.11.13"

routes/router.js

@@ -72,8 +72,12 @@ router.post('/download', bodyParser, function* () {
 		return typeof image !== 'undefined';
 	});
 
-	this.set('Content-Disposition', 'attachment; filename=steamwall.png');
-	this.body = yield Steam.makeCollage(images, canvasWidth, canvasHeight);
+	if (!images.length) {
+		this.redirect('/?nogames');
+	} else {
+		this.set('Content-Disposition', 'attachment; filename=steamwall.png');
+		this.body = yield Steam.makeCollage(images, canvasWidth, canvasHeight);
+	}
 });
 
 router.get('/auth', function* () {