Add behavioural settings for the game

Option to use grid (implemented earlier).
Option for picking a given number of images.
Option to retry (currently, not working).
Add upgrade script to preserve old behavior for old games.
pull/18/head
Frode Petterson 2017-01-23 15:46:06 +01:00
parent e308d4a69e
commit 6d1ceccecd
4 changed files with 112 additions and 19 deletions

View File

@ -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",

View File

@ -53,6 +53,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
if (finished) {
// Game has finished
$feedback.addClass('h5p-show');
if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
}
else {
// Popup is closed, continue.
@ -64,6 +65,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Game has finished
timer.stop();
$feedback.addClass('h5p-show');
if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
}
}
else {
@ -107,9 +109,39 @@ 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++) {
var cardParams = parameters.cards[i];
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);
@ -186,10 +218,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
*
* @private
*/
function scaleGameSize() {
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
@ -236,9 +269,11 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// 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…
}
};
self.on('resize', scaleGameSize);
if (parameters.behaviour && parameters.behaviour.useGrid && cardsToUse.length) {
self.on('resize', scaleGameSize);
}
}
// Extends the event dispatcher

View File

@ -5,7 +5,7 @@
"label": "Cards",
"importance": "high",
"entity": "card",
"min": 1,
"min": 2,
"max": 100,
"field": {
"type": "group",
@ -41,6 +41,39 @@
]
}
},
{
"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",

View File

@ -3,17 +3,42 @@ 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);
}
}
};