3 files changed, 105 insertions, 25 deletions

diff --git a/game.js b/game.js
index 9c7ec3e..4e7ff9c 100644
--- a/game.js
+++ b/game.js
@@ -18,28 +18,42 @@
     };
 
     $.fn.fullclick = function(callback) {
-        var mousedown = false;
-        this.mousedown(function() {
-            mousedown = true;
-        });
-        this.mouseup(function() {
-            if (mousedown) {
-                callback.apply(this, arguments);
-            }
-            mousedown = false;
-        });
+        var callbacks = this.data("fullclick-callbacks");
+        if (callbacks == null) {
+            callbacks = $.Callbacks();
+            this.data("fullclick-callbacks", callbacks);
+
+            var mousedown = false;
+            this.mousedown(function() {
+                mousedown = true;
+            });
+            this.mouseup(function() {
+                if (mousedown) {
+                    callbacks.fireWith(this, arguments);
+                }
+                mousedown = false;
+            });
+        }
+        callbacks.add(callback);
+        return function() {
+            callbacks.remove(callback);
+        };
     };
 })(jQuery);
 
 
 var startGame = (function () {
 
-    return function(source, target, message) {
+    var timer;
+    var clickHandlers = [];
+    var sortableActive = false;
+    return function startGame(source, target, message) {
         var $message = $(message);
 
         var $source = $(source);
         var $target = $(target);
         var $both = $source.add($target);
+        $source.append($both.find("li"));
         $source.randomize("li");
 
         var areAllOver = function() {
@@ -53,37 +67,91 @@ var startGame = (function () {
             });
             return success;
         };
+        var gameWon = function() {
+            return areAllOver() && areInOrder();
+        };
+
+
+        var startTime = new Date().getTime();
+        var elapsedTimeString = function() {
+            var currentTime = new Date().getTime();
+            var elapsedMillis = currentTime - startTime;
+            var elapsedSeconds = elapsedMillis / 1000;
+            var elapsedMinutes = elapsedSeconds / 60;
+            var elapsedHours = elapsedMinutes / 60;
+            var portion = function(value, base, sep) {
+                if (value < 1) return "";
+                value = Math.floor(value);
+                var modVal = "" + value;
+                var baseLen = 0;
+                if (base) {
+                    baseLen = ("" + (base - 1)).length;
+                    modVal = "" + (value % base);
+                }
+                while (modVal.length < baseLen)
+                    modVal = "0" + modVal;
+                return modVal + sep;
+            };
+            return "" +
+                portion(elapsedHours, null, ":") +
+                portion(elapsedMinutes + 60, 60, ":") + 
+                portion(elapsedSeconds + 60, 60, ".") +
+                portion(elapsedMillis, 1000, "");
+        };
+
+        var cleanUp = function() {
+            $message.text("");
+            $target.removeClass("success");
+            if (timer)
+                window.clearInterval(timer);
+            if (sortableActive)
+                $both.sortable("destroy");
+            sortableActive = false;
+            $both.removeClass("playing");
+            $.each(clickHandlers, function(index, item) {
+                if (item)
+                    item();
+            });
+            clickHandlers = [];
+        };
 
         var checkGameResult = function() {
-            if (areAllOver() && areInOrder()) {
-                $message.text("Well done!");
+            if (gameWon()) {
+                cleanUp();
+                $message.html(elapsedTimeString() + "<br>" + "Well done!<br>");
                 $target.addClass("success");
-            } else {
-                $message.text(null);
-                $target.removeClass("success");
             }
         };
 
 
 
-        $source.fullclick(function(event) {
-            if (event.target != $(source)[0]) {
+        cleanUp();
+
+        timer = window.setInterval(function() {
+            $message.text(elapsedTimeString());
+        }, 10);
+
+
+        clickHandlers.push($source.fullclick(function(event) {
+            if (event.target != $(source)[0] && !gameWon()) {
                 $target.append(event.target);
                 checkGameResult();
             }
-        });
-        $target.fullclick(function(event) {
-            if (event.target != $(target)[0]) {
+        }));
+        clickHandlers.push($target.fullclick(function(event) {
+            if (event.target != $(target)[0] && !gameWon()) {
                 $source.append(event.target);
                 checkGameResult();
             }
-        });
+        }));
+        $both.addClass("playing");
         $both.sortable({
             connectWith: ".bible-game",
             update: function (event) {
                 checkGameResult();
             }
         });
+        sortableActive = true;
     };
 
 })();
diff --git a/index.html b/index.html
index d19303c..39812e9 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,9 @@
   </head>
   <body>
     <h1>History Bible Game</h1>
+    <div id="go-button">
+      <button>Start</button>
+    </div>
     <div class="container">
       <ul class="bible-game sortable" id="source">
         <li data-index="0">Genesis</li>
@@ -34,9 +37,12 @@
     <script src="jquery.min.js"></script>
     <script src="jquery-ui.min.js"></script>
     <script src="game.js"></script>
-    <script>
+    <script> 
       $(function() {
+        $("#go-button button").click(function() {
+          $(this).text("Restart");
           startGame("#source", "#target", "#message");
+        });
       });
     </script>
   </body>
diff --git a/style.css b/style.css
index ed8b3d1..ed13834 100644
--- a/style.css
+++ b/style.css
@@ -20,10 +20,12 @@ ul li {
     padding: 4px;
     border: 1px solid #000;
     margin-top: -1px;
-    cursor: pointer;
     background: white;
 }
-ul li:hover {
+ul.playing li {
+    cursor: pointer;
+}
+ul.playing li:hover {
     background: gray;
 }
 ul li:first-child, ul li.ui-sortable-helper {
@@ -44,4 +46,8 @@ ul li:first-child, ul li.ui-sortable-helper {
 }
 #target.success li {
     background: green;
+}
+
+#go-button {
+    text-align: center;
 }
\ No newline at end of file