Finished challenge and fixed bugs

justetz · Oct 25, 2015 · c24196b · c24196b
1 parent 085de7b
commit c24196b
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 21 deletions.
diff --git a/app.js b/app.js
@@ -153,7 +153,7 @@ $.fn.hexxed = function(settings) {
         newColor();
 
         // reset the score counter
-        final_score = 0;
+        total_score = 0;
 
         // restore turns as defined in settings
         turns_remaining = settings.turns;
@@ -190,38 +190,39 @@ $.fn.hexxed = function(settings) {
 
         // Add the score for the turn to the running total
         total_score += turn_score;
+		total_score = (Math.round(total_score*100)/100)
 
         turns_remaining--;
         if(turns_remaining > 0) {
             newColor();
-            
+
             // Display the current statistics
             $('#result').html("Last Score: "    + turn_score  +
-                              "; Total Score: " + total_score + 
+                              "; Total Score: " + total_score +
                               "; Turns Left: "  + turns_remaining);
 
         } else {
             // create a new div element to display game over info for the user
             // wrapped in a div for easy removing on game reset
             var gameOver = $('<div>').attr('id', 'gameOver');
-            
+
             // Add a header to denote game over
             gameOver.append($("<h2>").text("Game Over!"));
-            
-            // 
+
+            //
             gameOver.append($("<p>").text("Final Score: " + total_score));
-            
+
             gameOver.append($('<hr>'));
-            
+
             var playerNameInput = $('<input>').attr('placeholder', 'Your name');
             gameOver.append(playerNameInput.attr('id', 'hsName'));
-            
+
             var submit = $('<button>').text("Submit High Score!");
             submit = submit.attr("type", "button").attr("id","hsSubmit");
             gameOver.append(submit.click(submitHighscore));
-            
+
             gameOver.append($('<hr>'));
-            
+
             gameOver.append($("<button>").attr("type", "button").text("Try Again!").click(reset));
 
             gameElement.children().hide();
@@ -246,6 +247,9 @@ $.fn.hexxed = function(settings) {
             return;
         }
 
+		$('#hsName').prop('disabled', true);
+		$('#hsSubmit').prop('disabled', true);
+
         // compile the information to be inputted
         var dataForSubmission = {
             name: playerName,
@@ -259,24 +263,32 @@ $.fn.hexxed = function(settings) {
         if(window.localStorage !== undefined) {
             // query local storage for any data currently present
             var data = localStorage.getItem(HEXXED_STORAGE_NAME);
-
+			console.log(data);
             // Determine if to add or create a high scores JSON array
-            if(!data) {
+            if(data === null || data === undefined || data === "") {
+				console.log('test');
                 // no exisiting data, create a new array with the one score
                 data = [dataForSubmission];
             } else {
                 // exisiting data, parse the exisiting and add the new
                 data = JSON.parse(data);
+				console.log(data);
                 data.push(dataForSubmission);
             }
             // convert the JSON back to a string
             data = JSON.stringify(data);
 
             // push the newly modified / created data to local storage.
             localStorage.setItem(HEXXED_STORAGE_NAME, data);
+
+			$('#hsName').remove();
+			$('#hsSubmit').remove();
+			$('#gameOver').append($('<h3>').text("Submitted!"));
         } else {
             // otherwise, notify the user
-            alert("Sorry, your browser does not support local storage.");
+			$('#hsName').remove();
+			$('#hsSubmit').remove();
+			$('#gameOver').append($('<h3>').text("Sorry, your browser does not support local storage."));
         }
     }
 
@@ -342,9 +354,9 @@ $.fn.hexxed = function(settings) {
 
     // Returns the jQuery object for chained jQuery calls
     return this;
-}
+};
 
 $(document).ready(function() {
     // Create a game instance in the div entitled hexxed.
     $('#hexxed').hexxed();
-});
+});
diff --git a/highscores.js b/highscores.js
@@ -0,0 +1,77 @@
+$.fn.hexxedHighScores = function(settings) {
+	// keep track of where in local storage the scores will be held
+	// using a variable to ensure consistency among all calls
+	var HEXXED_STORAGE_NAME = '_hexxedHighScores';
+
+	function loadHighScores() {
+		if(window.localStorage !== undefined) {
+			var data = JSON.parse(localStorage.getItem(HEXXED_STORAGE_NAME));
+			console.log(data);
+			console.log(data);
+			if(!data) {
+				var td = $('<td>').text('No scores found!');
+				$('#tableBody').append($('<tr>').append(td.attr('colspan', '5')));
+				$('#hsErase').remove();
+			} else {
+				data = data.sort(function(a, b) {
+					if(parseFloat(a.score) < parseFloat(b.score)) {
+						return 1;
+					} else if(parseFloat(a.score) > parseFloat(b.score)) {
+						return -1;
+					} else {
+						if(a.name < b.name) {
+							return 1;
+						} else if(a.name > b.name) {
+							return -1;
+						} else {
+							return 0;
+						}
+					}
+				});
+
+				for(var x = 0; x < data.length; x++) {
+					var row = $('<tr>');
+					row.append($('<td>').text(data[x].name));
+					row.append($('<td>').text(data[x].difficulty));
+					row.append($('<td>').text(data[x].turns));
+					row.append($('<td>').text(data[x].score));
+					row.append($('<td>').text(data[x].timestamp));
+					$('#tableBody').append(row);
+				}
+			}
+		} else {
+			alert("Sorry, your browser does not support local storage.");
+		}
+	}
+
+	function eraseHighScores() {
+		localStorage.removeItem(HEXXED_STORAGE_NAME);
+		loadHighScores();
+	}
+
+	this.append($('<h1>').text('Hexxed: High Scores'));
+
+	var scoresTable = $('<table>').attr('id', 'scoreTable');
+	var tableHeader = $('<thead>').html('<tr>' +
+										'<th>Player Name</th>' +
+										'<th>Difficulty</th>' +
+										'<th># Turns</th>' +
+										'<th>Final Score</th>' +
+										'<th>Timestamp</th>' +
+										'</tr>');
+
+	scoresTable.append(tableHeader);
+	scoresTable.append($('<tbody>').attr('id', 'tableBody'));
+
+	this.append(scoresTable);
+
+	this.append($('<button>').click(eraseHighScores).text('Erase Scores').attr('id', 'hsErase'));
+
+	loadHighScores();
+
+	return this;
+};
+
+$(document).ready(function() {
+	$('#hexxedScores').hexxedHighScores();
+});
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 	<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet" type="text/css">
     <link href="style.css" rel="stylesheet" type="text/css">
-	
+
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     <script type="text/javascript" src="app.js"></script>

diff --git a/style.css b/style.css
@@ -29,6 +29,12 @@ button {
   box-shadow: inset 0 -2px #2a8bcc;
 }
 
+button:disabled {
+	background: #555555;
+    border-bottom: 2px solid #555555;
+    box-shadow: inset 0 -2px #555555;
+}
+
 input {
   display: block;
   text-align: center;
@@ -41,14 +47,23 @@ input {
   padding: 0;
 }
 
-#hexxed {
-	width: 60%;
-	margin: 0 auto;
+#hexxed, #hexxedScores {
+  width: 60%;
+  margin: 0 auto;
   margin-top: 40px;
   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
   padding: 30px;
 }
 
+#scoreTable {
+	width: 100%;
+}
+
+#scoreTable td {
+	padding-top: 15px;
+	padding-bottom: 15px;
+}
+
 #description {
   max-width: 60%;
   margin: 0 auto;
@@ -110,4 +125,4 @@ input {
     height: 100px;
     border-radius: 0;
   }
-}
+}
diff --git a/team2scores.html b/team2scores.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Hexxed High Scores</title>
+    <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet" type="text/css">
+    <link href="style.css" rel="stylesheet" type="text/css">
+
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script type="text/javascript" src="highscores.js"></script>
+</head>
+<body>
+	<div id="hexxedScores"></div>
+</body>
+</html>