use H5P-Timer

pull/15/head
otacke 2016-10-02 16:09:34 +02:00
parent 634a85f980
commit 996b5e31f3
3 changed files with 30 additions and 102 deletions

View File

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

View File

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

View File

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