diff --git a/card.js b/card.js
new file mode 100644
index 0000000..0c0a608
--- /dev/null
+++ b/card.js
@@ -0,0 +1,102 @@
+(function (MemoryGame, EventDispatcher, $) {
+
+ /**
+ * Controls all the operations for each card.
+ *
+ * @class H5P.MemoryGame.Card
+ * @param {Object} parameters
+ * @param {Number} id
+ */
+ MemoryGame.Card = function (parameters, id) {
+ var self = this;
+
+ // Initialize event inheritance
+ EventDispatcher.call(self);
+
+ var path = H5P.getPath(parameters.image.path, id);
+ var width, height, margin, $card;
+
+ var a = 96;
+ if (parameters.image.width !== undefined && parameters.image.height !== undefined) {
+ if (parameters.image.width > parameters.image.height) {
+ width = a;
+ height = parameters.image.height * (width / parameters.image.width);
+ margin = '' + ((a - height) / 2) + 'px 0 0 0';
+ }
+ else {
+ height = a;
+ width = parameters.image.width * (height / parameters.image.height);
+ margin = '0 0 0 ' + ((a - width) / 2) + 'px';
+ }
+ }
+ else {
+ width = height = a;
+ }
+
+ /**
+ * Flip card.
+ */
+ self.flip = function () {
+ $card.addClass('h5p-flipped');
+ self.trigger('flip');
+ };
+
+ /**
+ * Flip card back.
+ */
+ self.flipBack = function () {
+ $card.removeClass('h5p-flipped');
+ };
+
+ /**
+ * Remove.
+ */
+ self.remove = function () {
+ $card.addClass('h5p-matched');
+ };
+
+ /**
+ * Get card description.
+ *
+ * @returns {string}
+ */
+ self.getDescription = function () {
+ return parameters.description;
+ };
+
+ /**
+ * Get image clone.
+ *
+ * @returns {H5P.jQuery}
+ */
+ self.getImage = function () {
+ return $card.find('img').clone();
+ };
+
+ /**
+ * Append card to the given container.
+ *
+ * @param {H5P.jQuery} $container
+ */
+ self.appendTo = function ($container) {
+ // TODO: Translate alt attr
+ $card = $('' +
+ '' +
+ '' +
+ '
' +
+ '
\
-
\
-
' + parameters.l10n.feedback + '
').appendTo($container);
-
+
// Add status bar
- var $status = $('\
- - ' + parameters.l10n.timeSpent + '
\
- - 0:00
\
- - ' + parameters.l10n.cardTurns + '
\
- - 0
\
-
').appendTo($container);
-
- timer = new MemoryTimer($status.find('.h5p-time-spent'));
- counter = new MemoryCounter($status.find('.h5p-card-turns'));
- popup = new MemoryPop($container);
-
+ var $status = $('' +
+ '- ' + parameters.l10n.timeSpent + '
' +
+ '- 0:00
' +
+ '- ' + parameters.l10n.cardTurns + '
' +
+ '- 0
' +
+ '
').appendTo($container);
+
+ timer = new MemoryGame.Timer($status.find('.h5p-time-spent'));
+ counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
+ popup = new MemoryGame.Popup($container);
+
$container.click(function () {
popup.close();
});
}
};
- };
-
+ }
+
+ // Extends the event dispatcher
+ MemoryGame.prototype = Object.create(EventDispatcher.prototype);
+ MemoryGame.prototype.constructor = MemoryGame;
+
return MemoryGame;
-})(H5P.jQuery);
+})(H5P.EventDispatcher, H5P.jQuery);
diff --git a/popup.js b/popup.js
new file mode 100644
index 0000000..2973974
--- /dev/null
+++ b/popup.js
@@ -0,0 +1,44 @@
+(function (MemoryGame, $) {
+
+ /**
+ * A dialog for reading the description of a card.
+ *
+ * @class H5P.MemoryGame.Popup
+ * @param {H5P.jQuery} $container
+ */
+ MemoryGame.Popup = function ($container) {
+ var self = this;
+
+ var closed;
+
+ var $popup = $('').appendTo($container);
+ var $desc = $popup.find('.h5p-memory-desc');
+ var $image = $popup.find('.h5p-memory-image');
+
+ /**
+ * Show the popup.
+ *
+ * @param {string} desc
+ * @param {H5P.jQuery} $img
+ * @param {function} done
+ */
+ self.show = function (desc, $img, done) {
+ $desc.text(desc);
+ $img.appendTo($image.html(''));
+ $popup.show();
+ closed = done;
+ };
+
+ /**
+ * Close the popup.
+ */
+ self.close = function () {
+ if (closed !== undefined) {
+ $popup.hide();
+ closed();
+ closed = undefined;
+ }
+ };
+ };
+
+})(H5P.MemoryGame, H5P.jQuery);
diff --git a/timer.js b/timer.js
new file mode 100644
index 0000000..39ca1f4
--- /dev/null
+++ b/timer.js
@@ -0,0 +1,94 @@
+(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);