diff --git a/card.js b/card.js
index dca1639..58bfcfb 100644
--- a/card.js
+++ b/card.js
@@ -4,33 +4,31 @@
* Controls all the operations for each card.
*
* @class H5P.MemoryGame.Card
- * @param {Object} parameters
- * @param {Number} id
+ * @param {Object} image
+ * @param {number} id
+ * @param {string} [description]
*/
- MemoryGame.Card = function (parameters, id) {
+ MemoryGame.Card = function (image, id, description) {
var self = this;
// Initialize event inheritance
EventDispatcher.call(self);
- var path = H5P.getPath(parameters.image.path, id);
+ var path = H5P.getPath(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';
+ if (image.width !== undefined && image.height !== undefined) {
+ if (image.width > image.height) {
+ width = '100%';
+ height = 'auto';
}
else {
- height = a;
- width = parameters.image.width * (height / parameters.image.height);
- margin = '0 0 0 ' + ((a - width) / 2) + 'px';
+ height = '100%';
+ width = 'auto';
}
}
else {
- width = height = a;
+ width = height = '100%';
}
/**
@@ -61,7 +59,7 @@
* @returns {string}
*/
self.getDescription = function () {
- return parameters.description;
+ return description;
};
/**
@@ -80,18 +78,19 @@
*/
self.appendTo = function ($container) {
// TODO: Translate alt attr
- $card = $('
' +
+ $card = $('' +
'
' +
'
' +
- '
' +
+ '
' +
'
' +
- '')
+ '
')
.appendTo($container)
- .children('.h5p-front')
- .click(function () {
- self.flip();
- })
- .end();
+ .children('.h5p-memory-card')
+ .children('.h5p-front')
+ .click(function () {
+ self.flip();
+ })
+ .end();
};
};
@@ -112,4 +111,17 @@
params.image.path !== undefined);
};
+ /**
+ * Checks to see if the card parameters should create cards with different
+ * images.
+ *
+ * @param {object} params
+ * @returns {boolean}
+ */
+ MemoryGame.Card.hasTwoImages = function (params) {
+ return (params !== undefined &&
+ params.match !== undefined &&
+ params.match.path !== undefined);
+ };
+
})(H5P.MemoryGame, H5P.EventDispatcher, H5P.jQuery);
diff --git a/language/ar.json b/language/ar.json
index 6ae0267..6b999ef 100644
--- a/language/ar.json
+++ b/language/ar.json
@@ -9,6 +9,12 @@
{
"label": "الصورة"
},
+ {
+ "englishLabel": "Matching Image",
+ "label": "Matching Image",
+ "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+ "description": "An optional image to match against instead of using two cards with the same image."
+ },
{
"label": "الوصف",
"description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية"
@@ -16,6 +22,28 @@
]
}
},
+ {
+ "englishLabel": "Behavioural settings",
+ "label": "Behavioural settings",
+ "englishDescription": "These options will let you control how the game behaves.",
+ "description": "These options will let you control how the game behaves.",
+ "fields": [
+ {
+ "englishLabel": "Put the cards in a grid layout",
+ "label": "Put the cards in a grid layout"
+ },
+ {
+ "englishLabel": "Number of cards to use",
+ "label": "Number of cards to use",
+ "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+ "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+ },
+ {
+ "englishLabel": "Add button for retrying when the game is over",
+ "label": "Add button for retrying when the game is over"
+ }
+ ]
+ },
{
"label": "الأقلمة",
"fields": [
diff --git a/language/de.json b/language/de.json
index 95c034e..e84760f 100644
--- a/language/de.json
+++ b/language/de.json
@@ -9,6 +9,12 @@
{
"label": "Bild"
},
+ {
+ "englishLabel": "Matching Image",
+ "label": "Matching Image",
+ "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+ "description": "An optional image to match against instead of using two cards with the same image."
+ },
{
"label": "Beschreibung",
"description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden."
@@ -16,6 +22,28 @@
]
}
},
+ {
+ "englishLabel": "Behavioural settings",
+ "label": "Behavioural settings",
+ "englishDescription": "These options will let you control how the game behaves.",
+ "description": "These options will let you control how the game behaves.",
+ "fields": [
+ {
+ "englishLabel": "Put the cards in a grid layout",
+ "label": "Put the cards in a grid layout"
+ },
+ {
+ "englishLabel": "Number of cards to use",
+ "label": "Number of cards to use",
+ "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+ "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+ },
+ {
+ "englishLabel": "Add button for retrying when the game is over",
+ "label": "Add button for retrying when the game is over"
+ }
+ ]
+ },
{
"label": "Übersetzung",
"fields": [
@@ -34,4 +62,4 @@
]
}
]
-}
\ No newline at end of file
+}
diff --git a/language/fr.json b/language/fr.json
index e00969e..aa3b53b 100644
--- a/language/fr.json
+++ b/language/fr.json
@@ -9,6 +9,12 @@
{
"label": "Image"
},
+ {
+ "englishLabel": "Matching Image",
+ "label": "Matching Image",
+ "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+ "description": "An optional image to match against instead of using two cards with the same image."
+ },
{
"label": "Description",
"description": "Petit texte affiché quand deux cartes identiques sont trouvées."
@@ -16,6 +22,28 @@
]
}
},
+ {
+ "englishLabel": "Behavioural settings",
+ "label": "Behavioural settings",
+ "englishDescription": "These options will let you control how the game behaves.",
+ "description": "These options will let you control how the game behaves.",
+ "fields": [
+ {
+ "englishLabel": "Put the cards in a grid layout",
+ "label": "Put the cards in a grid layout"
+ },
+ {
+ "englishLabel": "Number of cards to use",
+ "label": "Number of cards to use",
+ "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+ "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+ },
+ {
+ "englishLabel": "Add button for retrying when the game is over",
+ "label": "Add button for retrying when the game is over"
+ }
+ ]
+ },
{
"label": "Interface",
"fields": [
diff --git a/language/it.json b/language/it.json
index 4adb03f..5b58c96 100644
--- a/language/it.json
+++ b/language/it.json
@@ -9,6 +9,12 @@
{
"label": "Immagine"
},
+ {
+ "englishLabel": "Matching Image",
+ "label": "Matching Image",
+ "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+ "description": "An optional image to match against instead of using two cards with the same image."
+ },
{
"label": "Descrizione",
"description": "Breve testo visualizzato quando due carte uguali vengono trovate."
@@ -16,6 +22,28 @@
]
}
},
+ {
+ "englishLabel": "Behavioural settings",
+ "label": "Behavioural settings",
+ "englishDescription": "These options will let you control how the game behaves.",
+ "description": "These options will let you control how the game behaves.",
+ "fields": [
+ {
+ "englishLabel": "Put the cards in a grid layout",
+ "label": "Put the cards in a grid layout"
+ },
+ {
+ "englishLabel": "Number of cards to use",
+ "label": "Number of cards to use",
+ "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+ "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards."
+ },
+ {
+ "englishLabel": "Add button for retrying when the game is over",
+ "label": "Add button for retrying when the game is over"
+ }
+ ]
+ },
{
"label": "Localizzazione",
"fields": [
@@ -31,4 +59,4 @@
]
}
]
-}
\ No newline at end of file
+}
diff --git a/language/nb.json b/language/nb.json
index b56939a..b90dd68 100644
--- a/language/nb.json
+++ b/language/nb.json
@@ -13,15 +13,43 @@
"englishLabel": "Image",
"label": "Bilde"
},
+ {
+ "englishLabel": "Matching Image",
+ "label": "Tilhørende bilde",
+ "englishDescription": "An optional image to match against instead of using two cards with the same image.",
+ "description": "Et valgfritt bilde som brukes av kort nummer to istedenfor å bruke to kort med samme bilde."
+ },
{
"englishLabel": "Description",
"label": "Beskrivelse",
- "englishDescription": "A short text that is displayed once the two equal cards are found.",
- "description": "En kort tekst som vises hver gang et kort-par er funnet."
+ "englishDescription": "An optional short text that will pop up once the two matching cards are found.",
+ "description": "En valgfri kort tekst som spretter opp når kort-paret er funnet."
}
]
}
},
+ {
+ "englishLabel": "Behavioural settings",
+ "label": "Innstillinger for oppførsel",
+ "englishDescription": "These options will let you control how the game behaves.",
+ "description": "Disse instillingene lar deg bestemme hvordan spillet skal oppføre seg.",
+ "fields": [
+ {
+ "englishLabel": "Put the cards in a grid layout",
+ "label": "Putt kortene i et rutenett"
+ },
+ {
+ "englishLabel": "Number of cards to use",
+ "label": "Antall kort som skal brukes",
+ "englishDescription": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+ "description": "Ved å sette antallet høyere enn 2 vil spillet plukke tilfeldige kort fra listen over kort."
+ },
+ {
+ "englishLabel": "Add button for retrying when the game is over",
+ "label": "Legg til knapp for å prøve på nytt når spillet er over"
+ }
+ ]
+ },
{
"englishLabel": "Localization",
"label": "Oversettelser",
diff --git a/library.json b/library.json
index 894d655..c0e81c0 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": 1,
- "patchVersion": 11,
+ "minorVersion": 2,
+ "patchVersion": 0,
"runnable": 1,
"author": "Amendor AS",
"license": "MIT",
@@ -20,14 +20,18 @@
{
"path": "card.js"
},
- {
- "path": "timer.js"
- },
{
"path": "counter.js"
},
{
"path": "popup.js"
}
+ ],
+ "preloadedDependencies": [
+ {
+ "machineName": "H5P.Timer",
+ "majorVersion": 0,
+ "minorVersion": 4
+ }
]
-}
\ No newline at end of file
+}
diff --git a/memory-game.css b/memory-game.css
index 157ab81..f491184 100644
--- a/memory-game.css
+++ b/memory-game.css
@@ -1,17 +1,20 @@
.h5p-memory-game {
overflow: hidden;
}
-html .h5p-memory-game > ul {
- list-style: none;
- padding: 0;
- margin: 0;
- overflow: hidden;
+.h5p-memory-game > ul {
+ list-style: none !important;
+ padding: 0.25em 0.5em !important;
+ margin: 0 !important;
+ overflow: hidden !important;
+ font-size: 16px;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
}
.h5p-memory-game .h5p-memory-card,
.h5p-memory-game .h5p-memory-card .h5p-back,
.h5p-memory-game .h5p-memory-card .h5p-front {
- width: 100px;
- height: 100px;
+ width: 6.25em;
+ height: 6.25em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -19,23 +22,30 @@ html .h5p-memory-game > ul {
}
.h5p-memory-game img {
-webkit-user-drag: none;
+ display: inline-block !important;
+ margin: auto !important;
+ vertical-align: middle;
+}
+.h5p-memory-game .h5p-memory-wrap {
+ float: left;
+ text-align: center;
+ background-image: none !important;
+ margin: 0 !important;
+ padding: 0 !important;
}
.h5p-memory-game .h5p-memory-card {
- float: left;
+ display: inline-block;
outline: none;
position: relative;
- margin: 1em;
+ margin: 0.75em 0.5em;
padding: 0;
background: transparent;
- -webkit-perspective: 400px;
- -moz-perspective: 400px;
- perspective: 400px;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transition: opacity 0.4s;
- -moz-transition: opacity 0.4s;
- transition: opacity 0.4s;
+ -webkit-perspective: 25em;
+ -moz-perspective: 25em;
+ perspective: 25em;
+ -webkit-transition: opacity 0.4s, filter 0.4s;
+ -moz-transition: opacity 0.4s, filter 0.4s;
+ transition: opacity 0.4s, filter 0.4s;
}
.h5p-memory-game .h5p-memory-card .h5p-back,
.h5p-memory-game .h5p-memory-card .h5p-front {
@@ -64,17 +74,16 @@ html .h5p-memory-game > ul {
}
.h5p-memory-game .h5p-memory-card .h5p-front {
cursor: pointer;
+ text-align: center;
}
.h5p-memory-game .h5p-memory-card .h5p-front:hover {
background: #dfdfdf;
}
.h5p-memory-game .h5p-memory-card .h5p-front:before {
- position: absolute;
content: "?";
- font-size: 60px;
+ font-size: 3.75em;
color: #909090;
- line-height: 100px;
- left: 35px;
+ line-height: 1.67em;
}
.h5p-memory-game .h5p-memory-card .h5p-front:after {
content: "";
@@ -91,6 +100,8 @@ html .h5p-memory-game > ul {
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
}
.h5p-memory-game .h5p-memory-card .h5p-back {
+ line-height: 5.9em;
+ text-align: center;
background: #f0f0f0;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
@@ -112,7 +123,8 @@ html .h5p-memory-game > ul {
-ms-transform: scale(0,1.1);
}
.h5p-memory-game .h5p-memory-card.h5p-matched {
- opacity: 0.25;
+ opacity: 0.3;
+ filter: grayscale(100%);
}
.h5p-memory-game .h5p-feedback {
@@ -161,13 +173,12 @@ html .h5p-memory-game > ul {
padding: 1em;
width: 20em;
position: absolute;
- top: 2em;
+ top: 50%;
left: 50%;
- margin-left: -10em;
box-shadow: 0 0 1em #666;
- -webkit-transform: translateZ(24px);
- -moz-transform: translateZ(24px);
- transform: translateZ(24px);
+ -webkit-transform: translate(-50%,-50%);
+ -moz-transform: translate(-50%,-50%);
+ transform: translate(-50%,-50%);
}
.h5p-memory-game .h5p-memory-image {
float: left;
@@ -177,6 +188,9 @@ html .h5p-memory-game > ul {
-moz-box-sizing: border-box;
border-radius: 4px;
background: #f0f0f0;
- width: 100px;
- height: 100px;
+ width: 6.25em;
+ height: 6.25em;
+}
+.h5p-memory-game .h5p-row-break {
+ clear: left;
}
diff --git a/memory-game.js b/memory-game.js
index 845fe3b..5165c1c 100644
--- a/memory-game.js
+++ b/memory-game.js
@@ -1,5 +1,11 @@
H5P.MemoryGame = (function (EventDispatcher, $) {
+ // We don't want to go smaller than 100px per card(including the required margin)
+ var CARD_MIN_SIZE = 100; // PX
+ var CARD_STD_SIZE = 116; // PX
+ var STD_FONT_SIZE = 16; // PX
+ var LIST_PADDING = 1; // EMs
+
/**
* Memory Game Constructor
*
@@ -13,7 +19,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Initialize event inheritance
EventDispatcher.call(self);
- var flipped, timer, counter, popup, $feedback;
+ var flipped, timer, counter, popup, $feedback, $wrapper, maxWidth, numCols;
var cards = [];
var removed = 0;
@@ -42,15 +48,16 @@ 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
$feedback.addClass('h5p-show');
+ if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
}
else {
// Popup is closed, continue.
- timer.start();
+ timer.play();
}
});
}
@@ -58,6 +65,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Game has finished
timer.stop();
$feedback.addClass('h5p-show');
+ if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
}
}
else {
@@ -78,7 +86,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;
@@ -101,12 +109,53 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
cards.push(card);
};
+ /**
+ * @private
+ */
+ var getCardsToUse = function () {
+ var numCardsToUse = (parameters.behaviour && parameters.behaviour.numCardsToUse ? parseInt(parameters.behaviour.numCardsToUse) : 0);
+ if (numCardsToUse <= 2 || numCardsToUse >= parameters.cards.length) {
+ // Use all cards
+ return parameters.cards;
+ }
+
+ // Pick random cards from pool
+ var cardsToUse = [];
+ var pickedCardsMap = {};
+
+ var numPicket = 0;
+ while (numPicket < numCardsToUse) {
+ var pickIndex = Math.floor(Math.random() * parameters.cards.length);
+ if (pickedCardsMap[pickIndex]) {
+ continue; // Already picked, try again!
+ }
+
+ cardsToUse.push(parameters.cards[pickIndex]);
+ pickedCardsMap[pickIndex] = true;
+ numPicket++;
+ }
+
+ return cardsToUse;
+ };
+
// Initialize cards.
- for (var i = 0; i < parameters.cards.length; i++) {
- if (MemoryGame.Card.isValid(parameters.cards[i])) {
- // Add two of each card
- var cardOne = new MemoryGame.Card(parameters.cards[i], id);
- var cardTwo = new MemoryGame.Card(parameters.cards[i], id);
+ var cardsToUse = getCardsToUse();
+ for (var i = 0; i < cardsToUse.length; i++) {
+ var cardParams = cardsToUse[i];
+ if (MemoryGame.Card.isValid(cardParams)) {
+ // Create first card
+ var cardTwo, cardOne = new MemoryGame.Card(cardParams.image, id, cardParams.description);
+
+ if (MemoryGame.Card.hasTwoImages(cardParams)) {
+ // Use matching image for card two
+ cardTwo = new MemoryGame.Card(cardParams.match, id, cardParams.description);
+ }
+ else {
+ // Add two cards with the same image
+ cardTwo = new MemoryGame.Card(cardParams.image, id, cardParams.description);
+ }
+
+ // Add cards to card list for shuffeling
addCard(cardOne, cardTwo);
addCard(cardTwo, cardOne);
}
@@ -120,8 +169,8 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
*/
self.attach = function ($container) {
this.triggerXAPI('attempted');
- // TODO: Only create on first!
- $container.addClass('h5p-memory-game').html('');
+ // TODO: Only create on first attach!
+ $wrapper = $container.addClass('h5p-memory-game').html('');
// Add cards to list
var $list = $('');
@@ -142,7 +191,17 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
'0' +
'').appendTo($container);
- timer = new MemoryGame.Timer($status.find('.h5p-time-spent'));
+ timer = new H5P.Timer(100);
+ timer.notify('every_tenth_second', function () {
+ var time = timer.getTime();
+ var minutes = H5P.Timer.extractTimeElement(time, 'minutes');
+ var seconds = H5P.Timer.extractTimeElement(time, 'seconds') % 60;
+ 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);
@@ -151,6 +210,70 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
});
}
};
+
+ /**
+ * Will try to scale the game so that it fits within its container.
+ * Puts the cards into a grid layout to make it as square as possible –
+ * which improves the playability on multiple devices.
+ *
+ * @private
+ */
+ var scaleGameSize = function () {
+
+ // Check how much space we have available
+ var $list = $wrapper.children('ul');
+
+ var newMaxWidth = parseFloat(window.getComputedStyle($list[0]).width);
+ if (maxWidth === newMaxWidth) {
+ return; // Same size, no need to recalculate
+ }
+ else {
+ maxWidth = newMaxWidth;
+ }
+
+ // Get the card holders
+ var $elements = $list.children();
+ if ($elements.length < 4) {
+ return; // No need to proceed
+ }
+
+ // Determine the optimal number of columns
+ var newNumCols = Math.ceil(Math.sqrt($elements.length));
+
+ // Do not exceed the max number of columns
+ var maxCols = Math.floor(maxWidth / CARD_MIN_SIZE);
+ if (newNumCols > maxCols) {
+ newNumCols = maxCols;
+ }
+
+ if (numCols !== newNumCols) {
+ // We need to change layout
+ numCols = newNumCols;
+
+ // Calculate new column size in percentage and round it down (we don't
+ // want things sticking out…)
+ var colSize = Math.floor((100 / numCols) * 10000) / 10000;
+ $elements.css('width', colSize + '%').each(function (i, e) {
+ if (i === numCols) {
+ $(e).addClass('h5p-row-break');
+ }
+ });
+ }
+
+ // Calculate how much one percentage of the standard/default size is
+ var onePercentage = ((CARD_STD_SIZE * numCols) + STD_FONT_SIZE) / 100;
+ var paddingSize = (STD_FONT_SIZE * LIST_PADDING) / onePercentage;
+ var cardSize = (100 - paddingSize) / numCols;
+ var fontSize = (((maxWidth * (cardSize / 100)) * STD_FONT_SIZE) / CARD_STD_SIZE);
+
+ // We use font size to evenly scale all parts of the cards.
+ $list.css('font-size', fontSize + 'px');
+ // due to rounding errors in browsers the margins may vary a bit…
+ };
+
+ if (parameters.behaviour && parameters.behaviour.useGrid && cardsToUse.length) {
+ self.on('resize', scaleGameSize);
+ }
}
// Extends the event dispatcher
diff --git a/semantics.json b/semantics.json
index 71eabad..4faf9bf 100644
--- a/semantics.json
+++ b/semantics.json
@@ -5,7 +5,7 @@
"label": "Cards",
"importance": "high",
"entity": "card",
- "min": 1,
+ "min": 2,
"max": 100,
"field": {
"type": "group",
@@ -17,7 +17,17 @@
"name": "image",
"type": "image",
"label": "Image",
- "importance": "high"
+ "importance": "high",
+ "ratio": 1
+ },
+ {
+ "name": "match",
+ "type": "image",
+ "label": "Matching Image",
+ "importance": "low",
+ "optional": true,
+ "description": "An optional image to match against instead of using two cards with the same image.",
+ "ratio": 1
},
{
"name": "description",
@@ -26,11 +36,44 @@
"importance": "low",
"maxLength": 150,
"optional": true,
- "description": "A short text that is displayed once the two equal cards are found."
+ "description": "An optional short text that will pop up once the two matching cards are found."
}
]
}
},
+ {
+ "name": "behaviour",
+ "type": "group",
+ "label": "Behavioural settings",
+ "importance": "low",
+ "description": "These options will let you control how the game behaves.",
+ "optional": true,
+ "fields": [
+ {
+ "name": "useGrid",
+ "type": "boolean",
+ "label": "Put the cards in a grid layout",
+ "importance": "low",
+ "default": true
+ },
+ {
+ "name": "numCardsToUse",
+ "type": "number",
+ "label": "Number of cards to use",
+ "description": "Setting this to a number greater than 2 will make the game pick random cards from the list of cards.",
+ "importance": "low",
+ "optional": true,
+ "min": 2
+ },
+ {
+ "name": "allowRetry",
+ "type": "boolean",
+ "label": "Add button for retrying when the game is over",
+ "importance": "low",
+ "default": true
+ }
+ ]
+ },
{
"label": "Localization",
"importance": "low",
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);
diff --git a/upgrades.js b/upgrades.js
index f359e53..42c39bd 100644
--- a/upgrades.js
+++ b/upgrades.js
@@ -3,18 +3,43 @@ 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);
+ /**
+ * Asynchronous content upgrade hook.
+ * Upgrades content parameters to support Memory Game 1.1.
+ *
+ * Move card images into card object as this allows for additonal
+ * properties for each card.
+ *
+ * @params {object} parameters
+ * @params {function} finished
+ */
+ 1: function (parameters, finished) {
+ for (var i = 0; i < parameters.cards.length; i++) {
+ parameters.cards[i] = {
+ image: parameters.cards[i]
+ };
}
+
+ finished(null, parameters);
+ },
+
+ /**
+ * Asynchronous content upgrade hook.
+ * Upgrades content parameters to support Memory Game 1.2.
+ *
+ * Add default behavioural settings for the new options.
+ *
+ * @params {object} parameters
+ * @params {function} finished
+ */
+ 2: function (parameters, finished) {
+
+ parameters.behaviour = {};
+ parameters.behaviour.useGrid = false;
+ parameters.behaviour.allowRetry = false;
+
+ finished(null, parameters);
}
}
};
-})(H5P.jQuery);
\ No newline at end of file
+})(H5P.jQuery);