diff --git a/app.js b/app.js
index 7a5e4d9..5808f88 100644
--- a/app.js
+++ b/app.js
@@ -192,7 +192,10 @@ $.fn.hexxed = function(settings) {
total_score += turn_score;
total_score = (Math.round(total_score*100)/100)
+ // decrease the turn count
turns_remaining--;
+
+ // check if no turns remain
if(turns_remaining > 0) {
newColor();
@@ -209,23 +212,32 @@ $.fn.hexxed = function(settings) {
// Add a header to denote game over
gameOver.append($("
").text("Game Over!"));
- //
+ // Show the final score from the game
gameOver.append($(" ").text("Final Score: " + total_score));
- gameOver.append($('
'));
-
+ // Create the input for players to input a name for their high score
var playerNameInput = $(' ').attr('placeholder', 'Your name');
+
+ // Add the input to the page with an ID for easy value access
gameOver.append(playerNameInput.attr('id', 'hsName'));
+ // Create a submit button to send the score to the high scores array
var submit = $('').text("Submit High Score!");
submit = submit.attr("type", "button").attr("id","hsSubmit");
+
+ // Show the button
gameOver.append(submit.click(submitHighscore));
- gameOver.append($(' '));
+ // Create a try again buton to allow users to restart the game over
+ var againButton = $("").text("Try Again!");
- gameOver.append($("").attr("type", "button").text("Try Again!").click(reset));
+ // Show the button
+ gameOver.append(againButton.attr("type", "button").click(reset));
+ // Hide the game so they can't keep playing
gameElement.children().hide();
+
+ // Add the game over elements
gameElement.append(gameOver);
}
}
@@ -247,6 +259,7 @@ $.fn.hexxed = function(settings) {
return;
}
+ // Disable the input and submit to prevent repeat submissions
$('#hsName').prop('disabled', true);
$('#hsSubmit').prop('disabled', true);
@@ -281,11 +294,12 @@ $.fn.hexxed = function(settings) {
// push the newly modified / created data to local storage.
localStorage.setItem(HEXXED_STORAGE_NAME, data);
+ // Notify the user that the score was successfully saved!
$('#hsName').remove();
$('#hsSubmit').remove();
$('#gameOver').append($('').text("Submitted!"));
} else {
- // otherwise, notify the user
+ // otherwise, notify the user that local storage isn't allowed
$('#hsName').remove();
$('#hsSubmit').remove();
$('#gameOver').append($('').text("Sorry, your browser does not support local storage."));
diff --git a/highscores.js b/highscores.js
index eac7652..9cb7172 100644
--- a/highscores.js
+++ b/highscores.js
@@ -3,32 +3,51 @@ $.fn.hexxedHighScores = function(settings) {
// using a variable to ensure consistency among all calls
var HEXXED_STORAGE_NAME = '_hexxedHighScores';
+ /**
+ * Determines sorting order for two high scores based on their score from
+ * high to low, followed by their name lexicographically from low to high
+ * @param {Object} a a color for comparison
+ * @param {Object} b the other color for comparison
+ * @return {int} the sort result (-1 for less, 1 for greater, 0 for equal)
+ */
+ function sortScores(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;
+ }
+ }
+ }
+
+ /**
+ * Loads the high scores and inputs them into the table in sorted order
+ */
function loadHighScores() {
+ // Check for local storage in browser
if(window.localStorage !== undefined) {
+ // Load the data from the local storage
var data = JSON.parse(localStorage.getItem(HEXXED_STORAGE_NAME));
- console.log(data);
- console.log(data);
+
+ // Check if there's data present
if(!data) {
+ // Add a full-width row explaining that there's no data
var td = $('').text('No scores found!');
$('#tableBody').append($(' ').append(td.attr('colspan', '5')));
+
+ // Hide the erase button, as there's nothing to erase
$('#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;
- }
- }
- });
+ // Sort the data using the sort function
+ data = data.sort(sortScores);
+ // Process and add each row
for(var x = 0; x < data.length; x++) {
var row = $(' ');
row.append($('').text(data[x].name));
@@ -40,18 +59,30 @@ $.fn.hexxedHighScores = function(settings) {
}
}
} else {
- alert("Sorry, your browser does not support local storage.");
+ // Add a full-width row explaining the lack of local storage
+ var td = $(' ').text('Sorry, your browser does not support local storage.');
+ $('#tableBody').append($(' ').append(td.attr('colspan', '5')));
+
+ // Hide the erase button, as there's nothing to erase
+ $('#hsErase').remove();
}
}
function eraseHighScores() {
+ // remove the item from local storage
localStorage.removeItem(HEXXED_STORAGE_NAME);
+
+ // reload the table using the load function, which will be blank
loadHighScores();
}
+ // Add a title to explain page's purpose
this.append($('').text('Hexxed: High Scores'));
+ // create a table to be populated with scores
var scoresTable = $(' ').attr('id', 'scoreTable');
+
+ // create a table header
var tableHeader = $('').html('' +
'Player Name ' +
'Difficulty ' +
@@ -60,18 +91,29 @@ $.fn.hexxedHighScores = function(settings) {
'Timestamp ' +
' ');
+ // add the table header to the table
scoresTable.append(tableHeader);
+
+ // create a table body element for future population
scoresTable.append($(' ').attr('id', 'tableBody'));
+ // add the table to the page
this.append(scoresTable);
- this.append($('').click(eraseHighScores).text('Erase Scores').attr('id', 'hsErase'));
+ // Create a button to allow for erasing all high score records
+ var eraseButton = $('').text('Erase Scores').attr('id', 'hsErase');
+
+ // Add the erase button
+ this.append(eraseButton.click(eraseHighScores));
+ // Load the scores
loadHighScores();
+ // Returns the jQuery object for chained jQuery calls
return this;
};
$(document).ready(function() {
+ // Create a high scores instance in the div entitled hexxedScores
$('#hexxedScores').hexxedHighScores();
});