attempt to make updateClasses follow javascript OO idioms

1 files changed, 66 insertions, 89 deletions

diff --git a/js/main.js b/js/main.js
index 29ff4d0..78e6001 100644
--- a/js/main.js
+++ b/js/main.js
@@ -10,6 +10,8 @@
 var Class = function (grade, clas, total) {
     this.grade = grade;
     this.clas = clas;
+    // human-readable ID
+    this.id = this.grade + '-' + this.clas;
     this.total = total;
     this.points = $.jStorage.get(this.grade + "_" + this.clas + "_" + "points", 0);
     this.time = $.jStorage.get(this.grade + "_" + this.clas + "_" + "time", 0);
@@ -43,118 +45,93 @@ var classes = [
     new Class(6, 3, 19)
 ];
 
-function classesComparison(a, b)
-{
-    if (a.points < b.points)
-        return 1;
-    if (b.points < a.points)
-        return -1;
-    return 0;
-}
-function sortClasses()
-{
-    classes.sort(classesComparison);
+// method to sort them
+classes.sortClasses = function () {
+    function classesComparison(a, b)
+    {
+        if (a.points < b.points)
+            return 1;
+        if (b.points < a.points)
+            return -1;
+        return 0;
+    }
+    this.sort(classesComparison);
 }
 
 // function to update the HTML display of classes
 function updateClasses ()
 {
     // first update the HTML displayed
-    sortClasses();
-    var i = 0;
-    $('#classes').html("");
-    for (i = 0; i < classes.length; i++)
+
+    classes.sortClasses();
+    $classes = $('#classes');
+    $classes.html("");
+
+    function appendClassHTML (clas, index, array)
     {
-        var classstring = classes[i].grade + '-' + classes[i].clas;
-        var minutes = Math.floor(classes[i].time / 60);
-        var seconds = classes[i].time - minutes * 60;
-        seconds = seconds.toString();
+        // strings for display
+
+        // background colour should be green for two classes with the highest points (and our array is sorted by points)
+        var colour = index < 2 ? ' style="background-color: lightgreen;"' : '';
+
+        // time
+        var minutes = '' + Math.floor(clas.time / 60);
+        var seconds = '' + (clas.time - minutes * 60);
         if (seconds.length == 1)
             seconds = "0" + seconds;
-        if (i < 2)
-            var colour = " style=\"background-color: lightgreen;\"";
-        else
-            var colour = "";
-        $('#classes').append('<div class="col-md-2"' + colour + '> \
-<h1>' + classstring + '</h1> \
-<p class="text-center"> \
-<a id="' + classstring + 'points" class="btn btn-info btn-lg">' + classes[i].points + ' points</a> \
-</p> \
-<p class="text-center"> \
-<a id="' + classstring + 'time" class="btn btn-warning">' + minutes + ':' + seconds + ' this week</a> \
-</p> \
-<p class="text-center"> \
-<a id="' + classstring + 'random" class="btn btn-success">Lucky number</a> \
-</p> \
-</div>');
+
+        // build and append HTML
+
+        var html = '<div class="col-md-2"' + colour + '>'
+            + '<h1>' + clas.id + '</h1>'
+            + '<p class="text-center">'
+            + '<a id="' + clas.id + 'points" class="btn btn-info btn-lg">' + clas.points + ' points</a>'
+            + '</p>'
+            + '<p class="text-center">'
+            + '<a id="' + clas.id + 'time" class="btn btn-warning">' + minutes + ':' + seconds + ' this week</a>'
+            + '</p>'
+            + '<p class="text-center">'
+            + '<a id="' + clas.id + 'random" class="btn btn-success">Lucky number</a>'
+            + '</p>'
+            + '</div>';
+
+        $classes.append(html);
     }
+    classes.forEach(appendClassHTML);
 
-    // now put functions on the buttons
-    var i = 0;
-    for (i = 0; i < classes.length; i++)
-    {
-        var classstring = classes[i].grade + '-' + classes[i].clas;
+    // now put functions on the buttons we just added to our HTML
 
-        // put a function on the each class's points button
-        $('#' + classstring + 'points').button();
-        $('#' + classstring + 'points').click(function (){
-            var classToUpdateGrade = parseInt(this.id.substring(0, 1));
-            var classToUpdateClas = parseInt(this.id.substring(2, 3));
+    function powerClassButtons (clas, index, array)
+    {
+        var $pointsbutton = $('#' + clas.id + 'points');
+        $pointsbutton.button();
+        $pointsbutton.click(function () {
+            // get the change from user
             var change = parseInt(prompt("Change points by how much?", 0));
 
-            // look up the class to modify
-            var j = 0;
-            for (j = 0; j < classes.length; j++)
-            {
-                if (classes[j].grade == classToUpdateGrade && classes[j].clas == classToUpdateClas)
-                    break
-            }
-
             // give grade 5 their bonus
-            if (classToUpdateGrade == 5)
+            if (clas.grade == 5)
                 change = change * 1.5;
 
-            // modify it
-            classes[j].changePoints(change);
+            // modify class points
+            classes[index].changePoints(change);
         });
 
-        // put a function on the each class's time button
-        $('#' + classstring + 'time').button();
-        $('#' + classstring + 'time').click(function (){
-            var classToUpdateGrade = parseInt(this.id.substring(0, 1));
-            var classToUpdateClas = parseInt(this.id.substring(2, 3));
-            var change = parseInt(prompt("Change time by how many seconds?", timeWastingClock.getTime().time - 1));
-
-            // look up the class to modify
-            var j = 0;
-            for (j = 0; j < classes.length; j++)
-            {
-                if (classes[j].grade == classToUpdateGrade && classes[j].clas == classToUpdateClas)
-                    break
-            }
-
-            classes[j].changeTime(change);
+        var $timebutton = $('#' + clas.id + 'time');
+        $timebutton.button();
+        $timebutton.click(function () {
+            var change = parseInt(prompt("Change time by how many seconds?",
+                                         timeWastingClock.getTime().time - 1));
+            classes[index].changeTime(change);
         });
 
-        // put a function on the each class's lucky number button
-        $('#' + classstring + 'random').button();
-        $('#' + classstring + 'random').click(function (){
-            var classToUseGrade = parseInt(this.id.substring(0, 1));
-            var classToUseClas = parseInt(this.id.substring(2, 3));
-
-            // look up the class to use
-            var j = 0;
-            for (j = 0; j < classes.length; j++)
-            {
-                if (classes[j].grade == classToUseGrade && classes[j].clas == classToUseClas)
-                    break
-            }
-
-            // modify it
-            var max = classes[j].total;
-            alert(getRandomInt(1, max));
+        var $randombutton = $('#' + clas.id + 'random');
+        $randombutton.button();
+        $randombutton.click(function () {
+            alert(getRandomInt(1, clas.total));
         });
     }
+    classes.forEach(powerClassButtons);
 }
 
 $.ionSound({