From 996b5e31f3357462f862f71ea23a957848e10ecc Mon Sep 17 00:00:00 2001 From: otacke Date: Sun, 2 Oct 2016 16:09:34 +0200 Subject: [PATCH 1/4] use H5P-Timer --- library.json | 12 ++++--- memory-game.js | 26 +++++++++++--- timer.js | 94 -------------------------------------------------- 3 files changed, 30 insertions(+), 102 deletions(-) delete mode 100644 timer.js 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); From 3b04b43972a0c720b880752a642fba2876698936 Mon Sep 17 00:00:00 2001 From: otacke Date: Mon, 3 Oct 2016 17:07:41 +0200 Subject: [PATCH 2/4] adhere to JSDoc style --- memory-game.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/memory-game.js b/memory-game.js index 9e1fcf8..8ab7648 100644 --- a/memory-game.js +++ b/memory-game.js @@ -18,11 +18,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) { var removed = 0; /** - * Update the time on the screen + * Update the time on the screen. * * @private - * @param {H5P.jQuery} $container - element to be updated - * @param {H5P.Timer} timer - the timer containing the time + * @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(); @@ -160,7 +160,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) { '').appendTo($container); timer = new H5P.Timer(100); - timer.notifyEvery(H5P.Timer.TYPE_CLOCK, 0, 1000, updateDisplayTime, [$status.find('.h5p-time-spent'), timer]); + timer.notifyEvery(H5P.Timer.TYPE_CLOCK, 0, 500, updateDisplayTime, [$status.find('.h5p-time-spent'), timer]); counter = new MemoryGame.Counter($status.find('.h5p-card-turns')); popup = new MemoryGame.Popup($container); From 8718f5d584b9add36baa15972d931916407a6ed2 Mon Sep 17 00:00:00 2001 From: otacke Date: Tue, 4 Oct 2016 19:50:44 +0200 Subject: [PATCH 3/4] increase required version of H5P-Timer --- library.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library.json b/library.json index ec6159c..75ed150 100644 --- a/library.json +++ b/library.json @@ -31,7 +31,7 @@ { "machineName": "H5P.Timer", "majorVersion": 0, - "minorVersion": 2 + "minorVersion": 3 } ] } From d18cd343adb95ca54c22fb6ed33c06479a7e8ad4 Mon Sep 17 00:00:00 2001 From: otacke Date: Tue, 11 Oct 2016 18:47:26 +0200 Subject: [PATCH 4/4] change API calls to v0.4 of H5P-Timer --- memory-game.js | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/memory-game.js b/memory-game.js index 8ab7648..d5479e8 100644 --- a/memory-game.js +++ b/memory-game.js @@ -17,23 +17,6 @@ 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. * @@ -160,7 +143,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) { '').appendTo($container); timer = new H5P.Timer(100); - timer.notifyEvery(H5P.Timer.TYPE_CLOCK, 0, 500, updateDisplayTime, [$status.find('.h5p-time-spent'), timer]); + timer.notify('every_tenth_second', function () { + var time = timer.getTime(); + var minutes = H5P.Timer.extractTimeElement(time, 'minutes'); + var seconds = H5P.Timer.extractTimeElement(time, 'seconds'); + if (seconds < 10) { + seconds = '0' + seconds; + } + $status.find('.h5p-time-spent').text(minutes + ':' + seconds); + }); + counter = new MemoryGame.Counter($status.find('.h5p-card-turns')); popup = new MemoryGame.Popup($container);