diff --git a/library.json b/library.json index aca5624..1f66f28 100644 --- a/library.json +++ b/library.json @@ -2,8 +2,8 @@ "title": "Memory Game", "description": "See how many cards you can remember!", "majorVersion": 1, - "minorVersion": 0, - "patchVersion": 0, + "minorVersion": 1, + "patchVersion": 1, "runnable": 1, "author": "Amendor AS", "license": "MIT", diff --git a/memory-game.css b/memory-game.css index 5aed6ce..9dd0a34 100644 --- a/memory-game.css +++ b/memory-game.css @@ -16,7 +16,7 @@ html .h5p-memory-game > ul { -ms-user-select: none; user-select: none; } -.h5p-memory-game .h5p-memory-card .h5p-back > img { +.h5p-memory-game img { -webkit-user-drag: none; } .h5p-memory-game .h5p-memory-card { @@ -24,6 +24,8 @@ html .h5p-memory-game > ul { outline: none; position: relative; margin: 1em; + padding: 0; + background: transparent; -webkit-perspective: 400px; -moz-perspective: 400px; perspective: 400px; @@ -150,3 +152,29 @@ html .h5p-memory-game > ul { .h5p-memory-game .h5p-status > dd { margin: 0; } + +.h5p-memory-game .h5p-memory-pop { + display: none; + background: #fff; + padding: 1em; + width: 20em; + position: absolute; + top: 4em; + left: 50%; + margin-left: -10em; + box-shadow: 0 0 1em #666; + -webkit-transform: translateZ(24px); + -moz-transform: translateZ(24px); + transform: translateZ(24px); +} +.h5p-memory-game .h5p-memory-image { + float: left; + margin: 0 1em 1em 0; + border: 2px solid #d0d0d0; + box-sizing: border-box; + -moz-box-sizing: border-box; + border-radius: 4px; + background: #f0f0f0; + width: 100px; + height: 100px; +} diff --git a/memory-game.js b/memory-game.js index 6fe1ca5..7f38263 100644 --- a/memory-game.js +++ b/memory-game.js @@ -13,19 +13,19 @@ H5P.MemoryGame = (function ($) { */ function MemoryCard(parameters, id) { var self = this; - var path = H5P.getPath(parameters.path, id); + var path = H5P.getPath(parameters.image.path, id); var width, height, margin, $card; var a = 96; - if (parameters.width !== undefined && parameters.height !== undefined) { - if (parameters.width > parameters.height) { + if (parameters.image.width !== undefined && parameters.image.height !== undefined) { + if (parameters.image.width > parameters.image.height) { width = a; - height = parameters.height * (width / parameters.width); + height = parameters.image.height * (width / parameters.image.width); margin = '' + ((a - height) / 2) + 'px 0 0 0'; } else { height = a; - width = parameters.width * (height / parameters.height); + width = parameters.image.width * (height / parameters.image.height); margin = '0 0 0 ' + ((a - width) / 2) + 'px'; } } @@ -48,14 +48,28 @@ H5P.MemoryGame = (function ($) { */ this.flipBack = function () { $card.removeClass('h5p-flipped'); - } + }; /** * Public. Remove. */ this.remove = function () { $card.addClass('h5p-matched'); - } + }; + + /** + * Public. Get card description. + */ + this.getDescription = function () { + return parameters.description; + }; + + /** + * Public. Get image clone. + */ + this.getImage = function () { + return $card.find('img').clone(); + }; /** * Public. Append card to the given container. @@ -79,7 +93,7 @@ H5P.MemoryGame = (function ($) { }; function MemoryTimer($container) { - var interval, started; + var interval, started, totalTime = 0; /** * Private. Make timer more readable for humans. @@ -118,20 +132,31 @@ H5P.MemoryGame = (function ($) { /** * Private. Update the timer element. */ - var update = function () { - $container.text(humanizeTime(Math.floor(((new Date()).getTime() - started) / 1000))); + 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; }; /** * Public. Starts the counter. */ this.start = function () { - if (interval === undefined) { + if (started === undefined) { started = new Date(); - - interval = setInterval(function () { - update(); - }, 1000); + update(); } }; @@ -139,9 +164,9 @@ H5P.MemoryGame = (function ($) { * Public. Stops the counter. */ this.stop = function () { - if (interval !== undefined) { - clearInterval(interval); - update(); + if (started !== undefined) { + totalTime += update(true); + started = undefined; } }; }; @@ -160,6 +185,46 @@ H5P.MemoryGame = (function ($) { }; } + /** + * Memory Popup Dialog Constructor + * + * @param {jQuery} $container + */ + function MemoryPop($container) { + var closed; + + var $popup = $('
').appendTo($container); + var $desc = $popup.find('.h5p-memory-desc'); + var $image = $popup.find('.h5p-memory-image'); + + /** + * Public. Show the popup. + * + * @param {String} desc + * @param {jQuery} $img + * @param {Function} done + * @returns {undefined} + */ + this.show = function (desc, $img, done) { + $desc.text(desc); + $img.appendTo($image.html('')); + $popup.show(); + closed = done; + }; + + /** + * Public. Close the popup. + * @returns {undefined} + */ + this.close = function () { + if (closed !== undefined) { + $popup.hide(); + closed(); + closed = undefined; + } + }; + } + /** * Memory Game Constructor * @@ -167,7 +232,7 @@ H5P.MemoryGame = (function ($) { * @param {Number} id */ function MemoryGame(parameters, id) { - var flipped, timer, counter, $feedback, cards = [], removed = 0; + var flipped, timer, counter, popup, $feedback, cards = [], removed = 0; /** * Private. Check if these two cards belongs together. @@ -184,7 +249,25 @@ H5P.MemoryGame = (function ($) { removed += 2; - if (removed === cards.length) { + var finished = (removed === cards.length); + var desc = card.getDescription(); + + if (desc !== undefined) { + // Pause timer and show desciption. + timer.stop(); + popup.show(desc, card.getImage(), function () { + if (finished) { + // Game has finished + $feedback.addClass('h5p-show'); + } + else { + // Popup is closed, continue. + timer.start(); + } + }); + } + else if (finished) { + // Game has finished timer.stop(); $feedback.addClass('h5p-show'); } @@ -194,7 +277,7 @@ H5P.MemoryGame = (function ($) { card.flipBack(); mate.flipBack(); } - } + }; /** * Private. Adds card to card list and set up a flip listener. @@ -259,14 +342,19 @@ H5P.MemoryGame = (function ($) { // Add status bar var $status = $('
\ -
' + parameters.l10n.timeSpent + '
\ -
0:00
\ -
' + parameters.l10n.cardTurns + '
\ -
0
\ -
').appendTo($container); +
' + 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); + + $container.click(function () { + popup.close(); + }); } }; }; diff --git a/semantics.json b/semantics.json index 4beac49..b896920 100644 --- a/semantics.json +++ b/semantics.json @@ -7,9 +7,23 @@ "min": 1, "max": 100, "field": { - "name": "card", - "type": "image", - "label": "Card" + "type": "group", + "label": "Card", + "fields": [ + { + "name": "image", + "type": "image", + "label": "Image" + }, + { + "name": "description", + "type": "text", + "label": "Description", + "maxLength": 150, + "optional": true, + "description": "A short text that is displayed once the two equal cards are found." + } + ] } }, { diff --git a/upgrades.js b/upgrades.js new file mode 100644 index 0000000..f359e53 --- /dev/null +++ b/upgrades.js @@ -0,0 +1,20 @@ +var H5PUpgrades = H5PUpgrades || {}; + +H5PUpgrades['H5P.MemoryGame'] = (function ($) { + return { + 1: { + 1: { + contentUpgrade: function (parameters, finished) { + // Move card images into card objects, allows for additonal properties. + for (var i = 0; i < parameters.cards.length; i++) { + parameters.cards[i] = { + image: parameters.cards[i] + }; + } + + finished(null, parameters); + } + } + } + }; +})(H5P.jQuery); \ No newline at end of file