diff --git a/library.json b/library.json index 38bfd60..ec6159c 100644 --- a/library.json +++ b/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 + } ] -} \ No newline at end of file +} diff --git a/memory-game.js b/memory-game.js index 845fe3b..9e1fcf8 100644 --- a/memory-game.js +++ b/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, $) { '
0
' + '').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); diff --git a/timer.js b/timer.js deleted file mode 100644 index 39ca1f4..0000000 --- a/timer.js +++ /dev/null @@ -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);