use H5P-Timer

library.json

@@ -20,14 +20,18 @@
     {
       "path": "card.js"
     },
-    {
-      "path": "timer.js"
-    },
     {
       "path": "counter.js"
     },
     {
       "path": "popup.js"
     }
+  ],
+  "preloadedDependencies": [
+    {
+      "machineName": "H5P.Timer",
+      "majorVersion": 0,
+      "minorVersion": 2
+    }
   ]
 }

memory-game.js

@@ -17,6 +17,23 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     var cards = [];
     var removed = 0;
 
+    /**
+     * Update the time on the screen
+     *
+     * @private
+     * @param {H5P.jQuery} $container - element to be updated
+     * @param {H5P.Timer} timer - the timer containing the time
+     */
+    var updateDisplayTime = function($container, timer) {
+      var time = timer.getTime();
+      var minutes = H5P.Timer.extractTimeElement(time, 'minutes');
+      var seconds = H5P.Timer.extractTimeElement(time, 'seconds');
+      if (seconds < 10) {
+        seconds = '0' + seconds;
+      }
+      $container.text(minutes + ':' + seconds);
+    }
+
     /**
      * Check if these two cards belongs together.
      *
@@ -42,7 +59,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
 
         if (desc !== undefined) {
           // Pause timer and show desciption.
-          timer.stop();
+          timer.pause();
           popup.show(desc, card.getImage(), function () {
             if (finished) {
               // Game has finished
@@ -50,7 +67,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
             }
             else {
               // Popup is closed, continue.
-              timer.start();
+              timer.play();
             }
           });
         }
@@ -78,7 +95,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
       card.on('flip', function () {
         self.triggerXAPI('interacted');
         // Keep track of time spent
-        timer.start();
+        timer.play();
 
         if (flipped !== undefined) {
           var matie = flipped;
@@ -142,7 +159,8 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
                         '<dd class="h5p-card-turns">0</dd>' +
                         '</dl>').appendTo($container);
 
-        timer = new MemoryGame.Timer($status.find('.h5p-time-spent'));
+        timer = new H5P.Timer(100);
+        timer.notifyEvery(H5P.Timer.TYPE_CLOCK, 0, 1000, updateDisplayTime, [$status.find('.h5p-time-spent'), timer]);
         counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
         popup = new MemoryGame.Popup($container);
 

timer.js

@@ -1,94 +0,0 @@
-(function (MemoryGame) {
-
-  /**
-   * Keeps track of the time spent.
-   *
-   * @class H5P.MemoryGame.Timer
-   * @param {H5P.jQuery} $container
-   */
-  MemoryGame.Timer = function ($container) {
-    var self = this;
-    var interval, started, totalTime = 0;
-
-    /**
-     * Make timer more readable for humans.
-     * @private
-     * @param {Number} seconds
-     * @returns {String}
-     */
-    var humanizeTime = function (seconds) {
-      var minutes = Math.floor(seconds / 60);
-      var hours = Math.floor(minutes / 60);
-
-      minutes = minutes % 60;
-      seconds = Math.floor(seconds % 60);
-
-      var time = '';
-
-      if (hours !== 0) {
-        time += hours + ':';
-
-        if (minutes < 10) {
-          time += '0';
-        }
-      }
-
-      time += minutes + ':';
-
-      if (seconds < 10) {
-        time += '0';
-      }
-
-      time += seconds;
-
-      return time;
-    };
-
-    /**
-     * Update the timer element.
-     *
-     * @private
-     * @param {boolean} last
-     * @returns {number}
-     */
-    var update = function (last) {
-      var currentTime = (new Date().getTime() - started);
-      $container.text(humanizeTime(Math.floor((totalTime + currentTime) / 1000)));
-
-      if (last === true) {
-        // This is the last update, stop timing interval.
-        clearTimeout(interval);
-      }
-      else {
-        // Use setTimeout since setInterval isn't safe.
-        interval = setTimeout(function () {
-          update();
-        }, 1000);
-      }
-
-      return currentTime;
-    };
-
-    /**
-     * Starts the counter.
-     */
-    self.start = function () {
-      if (started === undefined) {
-        started = new Date();
-        update();
-      }
-    };
-
-    /**
-     * Stops the counter.
-     */
-    self.stop = function () {
-      if (started !== undefined) {
-        totalTime += update(true);
-        started = undefined;
-      }
-    };
-
-  };
-  
-})(H5P.MemoryGame);