#32 If error on image load, fail gracefully

justc0de · Dec 31, 2013 · 6adb11e · 6adb11e
1 parent fdc0efc
commit 6adb11e
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 50 deletions.
diff --git a/WebContent/choose.html b/WebContent/choose.html
@@ -44,7 +44,7 @@
 				</ol>
 
 
-				<form id="pieceSelection" action="game.html" method="get" onsubmit="return PicPuzzle_Utils.validateForm()">
+				<form id="pieceSelection" action="game.html" method="get">
 
 					<div id="imageInput">
 						<input type="text" id="image" name="image" value="images/stock/walkin.jpg"

diff --git a/WebContent/index.html b/WebContent/index.html
@@ -11,7 +11,7 @@
 		<script type="text/javascript" src="js/Utils.js"></script>
 	</head>                                                
 
-	<body onload="PicPuzzle_Utils.initButtons();">
+	<body onload="ImagePuzzle_Utils.initButtons();">
 	  <header id="game_header"><img src="images/assets/Logo.png"></header>
 		<section id="container">  
 		    <section id="content">

diff --git a/WebContent/js/Choose.js b/WebContent/js/Choose.js
@@ -1,5 +1,5 @@
 $(document).ready(function(){
 
-	PicPuzzle_Utils.initUIElements();
-	PicPuzzle_Utils.initButtons();
+	ImagePuzzle_Utils.initUIElements();
+	ImagePuzzle_Utils.initButtons();
 });
diff --git a/WebContent/js/Image.js b/WebContent/js/Image.js
@@ -4,6 +4,20 @@ var ImagePuzzle_ImageActions = {
 
 		var img = new Image();
 
+		img.onerror = function() {
+
+			$('<div><p>Please choose a stock image\nor paste a valid url</p></div>').dialog({
+		    	modal: true,
+			    title: 'Invalid image',
+			    buttons:[{ 
+			    	text: "Ok", click: function() {
+			    		$(this).dialog("close");
+			    		window.location = "choose.html";
+				    }
+				}]
+			});
+		};
+
 		img.onload = function(){
 
 			callback(img);

diff --git a/WebContent/js/Puzzle.js b/WebContent/js/Puzzle.js
@@ -16,19 +16,19 @@ $(document).ready(function() {
 		win_snd = new Audio("sounds/success1.wav");
 
 
-	PicPuzzle_Utils.checkCookie();
-	PicPuzzle_Utils.initButtons();
+	ImagePuzzle_Utils.checkCookie();
+	ImagePuzzle_Utils.initButtons();
 
 	//validate row input
 	if(rowCount > 9){
 
 		rowCount = 9;
-		PicPuzzle_Utils.dialog('Invalid input', '9x9 is the maximum grid size.');
+		ImagePuzzle_Utils.dialog('Invalid input', '9x9 is the maximum grid size.');
 
 	} else if (rowCount < 2){
 
 		rowCount = 2;
-		PicPuzzle_Utils.dialog('Invalid input', '2x2 is the minimum grid size.');
+		ImagePuzzle_Utils.dialog('Invalid input', '2x2 is the minimum grid size.');
 	}		
 
 	//check for sound toggle
@@ -99,14 +99,14 @@ $(document).ready(function() {
 					shuffle_snd.play();
 				}
 
-				PicPuzzle_Utils.setStartTime(new Date());
+				ImagePuzzle_Utils.setStartTime(new Date());
 
 				// ensuring timerIntervalId is cleared
 				if (timerIntervalId){
 					clearInterval(timerIntervalId);
 				}
 
-				timerIntervalId = setInterval(PicPuzzle_Utils.initTimer, 100);
+				timerIntervalId = setInterval(ImagePuzzle_Utils.initTimer, 100);
 
 				jumblePuzzle(rowCount);
 
@@ -266,16 +266,16 @@ $(document).ready(function() {
 
 		    	//remove the opposite direction from the possible choices
 		    	if (prevDir == 'u')
-		    		dirs = PicPuzzle_Utils.removeItemFromList(dirs,'d');
+		    		dirs = ImagePuzzle_Utils.removeItemFromList(dirs,'d');
 		    	else if (prevDir == 'd')
-		    		dirs = PicPuzzle_Utils.removeItemFromList(dirs,'u');
+		    		dirs = ImagePuzzle_Utils.removeItemFromList(dirs,'u');
 		    	else if (prevDir == 'r')
-		    		dirs = PicPuzzle_Utils.removeItemFromList(dirs,'l');
+		    		dirs = ImagePuzzle_Utils.removeItemFromList(dirs,'l');
 		    	else
-		    		dirs = PicPuzzle_Utils.removeItemFromList(dirs,'r');
+		    		dirs = ImagePuzzle_Utils.removeItemFromList(dirs,'r');
 		    }
 
-		    var randDir = PicPuzzle_Utils.randomChoice(dirs);
+		    var randDir = ImagePuzzle_Utils.randomChoice(dirs);
 		    prevDir = randDir; 
 		    moveEmptyCell(ex,ey,randDir);
 		}
@@ -310,7 +310,7 @@ $(document).ready(function() {
 				move_snd.play();
 			}
 
-			PicPuzzle_Utils.updateText('moveCount', noOfMoves);
+			ImagePuzzle_Utils.updateText('moveCount', noOfMoves);
 	    }
 
 	    // Check if puzzle is complete after each move
@@ -332,15 +332,15 @@ $(document).ready(function() {
 					clearInterval(timerIntervalId);	
 
 					var endTime = new Date(),
-						duration = PicPuzzle_Utils.diffBetweenTimes(
-		            		PicPuzzle_Utils.getStartTime(), 
+						duration = ImagePuzzle_Utils.diffBetweenTimes(
+		            		ImagePuzzle_Utils.getStartTime(), 
 		            		endTime); 
-					PicPuzzle_Utils.updateText('timer', duration);
+					ImagePuzzle_Utils.updateText('timer', duration);
 
-					PicPuzzle_Utils.increasePuzzlesSolved();
-					PicPuzzle_Utils.updateText('puzzlesSolved', PicPuzzle_Utils.getCookie("puzzlesSolved"));
+					ImagePuzzle_Utils.increasePuzzlesSolved();
+					ImagePuzzle_Utils.updateText('puzzlesSolved', ImagePuzzle_Utils.getCookie("puzzlesSolved"));
 
-					PicPuzzle_Utils.playAgain(
+					ImagePuzzle_Utils.playAgain(
 							"Congratulations!<br/>" +
 							"You solved the puzzle in<br/>" +
 					        + noOfMoves + " move(s)<br/>" +

diff --git a/WebContent/js/Utils.js b/WebContent/js/Utils.js
@@ -1,10 +1,9 @@
-var PicPuzzle_Utils = {
+var ImagePuzzle_Utils = {
 
 	startTime: null,
 	notificationIntervalId: null,
 
 	getStartTime: function(){
-
 		return this.startTime;
 	},
 
@@ -57,12 +56,11 @@ var PicPuzzle_Utils = {
 
 
 	//Get the time difference between two javascript date objects
-	//Paramaters: Two Date Objects
 	//Returns a string containing the time.
 	diffBetweenTimes: function(beginTime, endTime){
 		var timeTaken = new Date(endTime.getTime() - beginTime.getTime());
 
-	 	return PicPuzzle_Utils.formatTime(timeTaken);
+	 	return ImagePuzzle_Utils.formatTime(timeTaken);
 	},
 
 	formatTime: function(timeTaken){
@@ -109,8 +107,7 @@ var PicPuzzle_Utils = {
 	//Parameters: the winning message
 	playAgain: function(message){
 
-		var NewDialog = $('<div id="playAgainDialog">\<p>'+message+'.</p>\</div>');
-	    NewDialog.dialog({
+		$('<div id="playAgainDialog">\<p>'+message+'.</p>\</div>').dialog({
 	    	modal: true,
 		    title: "Play Again ?",
 		    buttons:[
@@ -160,36 +157,18 @@ var PicPuzzle_Utils = {
 		});
 	},
 
-	validateForm: function(){
-		var imageurl = $('#image').val();
-
-		// image selected?
-		if(imageurl == null || imageurl == ""){
-			PicPuzzle_Utils.dialog('No image selected', 'You must select an image<br/>Choose one above or paste a URL');
-
-			return false;
-
-		// image valid?
-		}else if( (imageurl.toLowerCase()).substr(-4,4) != ".png" && (imageurl.toLowerCase()).substr(-4,4) != ".jpg"){
-			PicPuzzle_Utils.dialog('Image not valid', 'Image must be a PNG or JPG file type');
-
-			return false;
-		}
-	},
-
 	initTimer: function(){
 
-		PicPuzzle_Utils.updateText(
+		ImagePuzzle_Utils.updateText(
 	    		'timer', 
-	    		PicPuzzle_Utils.diffBetweenTimes(
-	    				PicPuzzle_Utils.startTime, 
+	    		ImagePuzzle_Utils.diffBetweenTimes(
+	    				ImagePuzzle_Utils.startTime, 
 	    				new Date()));
 	},
 
 	dialog: function(title, body){
 
-		var NewDialog = $('<div><p>' + body + '</p></div>');
-	    NewDialog.dialog({
+		$('<div><p>' + body + '</p></div>').dialog({
 	    	modal: true,
 		    title: title,
 		    buttons:[{