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);