Merge branch 'release' into stable

pull/18/head
Paal Joergensen 2017-02-10 08:59:15 +01:00
commit 39323b6710
12 changed files with 449 additions and 182 deletions

58
card.js
View File

@ -4,33 +4,31 @@
* Controls all the operations for each card. * Controls all the operations for each card.
* *
* @class H5P.MemoryGame.Card * @class H5P.MemoryGame.Card
* @param {Object} parameters * @param {Object} image
* @param {Number} id * @param {number} id
* @param {string} [description]
*/ */
MemoryGame.Card = function (parameters, id) { MemoryGame.Card = function (image, id, description) {
var self = this; var self = this;
// Initialize event inheritance // Initialize event inheritance
EventDispatcher.call(self); EventDispatcher.call(self);
var path = H5P.getPath(parameters.image.path, id); var path = H5P.getPath(image.path, id);
var width, height, margin, $card; var width, height, margin, $card;
var a = 96; if (image.width !== undefined && image.height !== undefined) {
if (parameters.image.width !== undefined && parameters.image.height !== undefined) { if (image.width > image.height) {
if (parameters.image.width > parameters.image.height) { width = '100%';
width = a; height = 'auto';
height = parameters.image.height * (width / parameters.image.width);
margin = '' + ((a - height) / 2) + 'px 0 0 0';
} }
else { else {
height = a; height = '100%';
width = parameters.image.width * (height / parameters.image.height); width = 'auto';
margin = '0 0 0 ' + ((a - width) / 2) + 'px';
} }
} }
else { else {
width = height = a; width = height = '100%';
} }
/** /**
@ -61,7 +59,7 @@
* @returns {string} * @returns {string}
*/ */
self.getDescription = function () { self.getDescription = function () {
return parameters.description; return description;
}; };
/** /**
@ -80,18 +78,19 @@
*/ */
self.appendTo = function ($container) { self.appendTo = function ($container) {
// TODO: Translate alt attr // TODO: Translate alt attr
$card = $('<li class="h5p-memory-card" role="button" tabindex="1">' + $card = $('<li class="h5p-memory-wrap"><div class="h5p-memory-card" role="button" tabindex="1">' +
'<div class="h5p-front"></div>' + '<div class="h5p-front"></div>' +
'<div class="h5p-back">' + '<div class="h5p-back">' +
'<img src="' + path + '" alt="Memory Card" width="' + width + '" height="' + height + '"' + (margin === undefined ? '' : ' style="margin:' + margin + '"') + '/>' + '<img src="' + path + '" alt="Memory Card" style="width:' + width + ';height:' + height + '"/>' +
'</div>' + '</div>' +
'</li>') '</div></li>')
.appendTo($container) .appendTo($container)
.children('.h5p-front') .children('.h5p-memory-card')
.click(function () { .children('.h5p-front')
self.flip(); .click(function () {
}) self.flip();
.end(); })
.end();
}; };
}; };
@ -112,4 +111,17 @@
params.image.path !== undefined); 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); })(H5P.MemoryGame, H5P.EventDispatcher, H5P.jQuery);

View File

@ -9,6 +9,12 @@
{ {
"label": "الصورة" "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": "الوصف", "label": "الوصف",
"description": "نص قصير يتم عرضه مرة واحدة علي اثنين من البطاقات متساوية" "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": "الأقلمة", "label": "الأقلمة",
"fields": [ "fields": [

View File

@ -9,6 +9,12 @@
{ {
"label": "Bild" "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", "label": "Beschreibung",
"description": "Ein kurzer Text, der angezeigt wird, sobald zwei identische Karten gefunden werden." "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", "label": "Übersetzung",
"fields": [ "fields": [

View File

@ -9,6 +9,12 @@
{ {
"label": "Image" "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", "label": "Description",
"description": "Petit texte affiché quand deux cartes identiques sont trouvées." "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", "label": "Interface",
"fields": [ "fields": [

View File

@ -9,6 +9,12 @@
{ {
"label": "Immagine" "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", "label": "Descrizione",
"description": "Breve testo visualizzato quando due carte uguali vengono trovate." "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", "label": "Localizzazione",
"fields": [ "fields": [

View File

@ -13,15 +13,43 @@
"englishLabel": "Image", "englishLabel": "Image",
"label": "Bilde" "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", "englishLabel": "Description",
"label": "Beskrivelse", "label": "Beskrivelse",
"englishDescription": "A short text that is displayed once the two equal cards are found.", "englishDescription": "An optional short text that will pop up once the two matching cards are found.",
"description": "En kort tekst som vises hver gang et kort-par er funnet." "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", "englishLabel": "Localization",
"label": "Oversettelser", "label": "Oversettelser",

View File

@ -2,8 +2,8 @@
"title": "Memory Game", "title": "Memory Game",
"description": "See how many cards you can remember!", "description": "See how many cards you can remember!",
"majorVersion": 1, "majorVersion": 1,
"minorVersion": 1, "minorVersion": 2,
"patchVersion": 11, "patchVersion": 1,
"runnable": 1, "runnable": 1,
"author": "Amendor AS", "author": "Amendor AS",
"license": "MIT", "license": "MIT",
@ -20,14 +20,18 @@
{ {
"path": "card.js" "path": "card.js"
}, },
{
"path": "timer.js"
},
{ {
"path": "counter.js" "path": "counter.js"
}, },
{ {
"path": "popup.js" "path": "popup.js"
} }
],
"preloadedDependencies": [
{
"machineName": "H5P.Timer",
"majorVersion": 0,
"minorVersion": 4
}
] ]
} }

View File

@ -1,17 +1,20 @@
.h5p-memory-game { .h5p-memory-game {
overflow: hidden; overflow: hidden;
} }
html .h5p-memory-game > ul { .h5p-memory-game > ul {
list-style: none; list-style: none !important;
padding: 0; padding: 0.25em 0.5em !important;
margin: 0; margin: 0 !important;
overflow: hidden; 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-memory-game .h5p-memory-card .h5p-back, .h5p-memory-game .h5p-memory-card .h5p-back,
.h5p-memory-game .h5p-memory-card .h5p-front { .h5p-memory-game .h5p-memory-card .h5p-front {
width: 100px; width: 6.25em;
height: 100px; height: 6.25em;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -19,23 +22,30 @@ html .h5p-memory-game > ul {
} }
.h5p-memory-game img { .h5p-memory-game img {
-webkit-user-drag: none; -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 { .h5p-memory-game .h5p-memory-card {
float: left; display: inline-block;
outline: none; outline: none;
position: relative; position: relative;
margin: 1em; margin: 0.75em 0.5em;
padding: 0; padding: 0;
background: transparent; background: transparent;
-webkit-perspective: 400px; -webkit-perspective: 25em;
-moz-perspective: 400px; -moz-perspective: 25em;
perspective: 400px; perspective: 25em;
-webkit-transform-style: preserve-3d; -webkit-transition: opacity 0.4s, filter 0.4s;
-moz-transform-style: preserve-3d; -moz-transition: opacity 0.4s, filter 0.4s;
transform-style: preserve-3d; transition: opacity 0.4s, filter 0.4s;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
} }
.h5p-memory-game .h5p-memory-card .h5p-back, .h5p-memory-game .h5p-memory-card .h5p-back,
.h5p-memory-game .h5p-memory-card .h5p-front { .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 { .h5p-memory-game .h5p-memory-card .h5p-front {
cursor: pointer; cursor: pointer;
text-align: center;
} }
.h5p-memory-game .h5p-memory-card .h5p-front:hover { .h5p-memory-game .h5p-memory-card .h5p-front:hover {
background: #dfdfdf; background: #dfdfdf;
} }
.h5p-memory-game .h5p-memory-card .h5p-front:before { .h5p-memory-game .h5p-memory-card .h5p-front:before {
position: absolute;
content: "?"; content: "?";
font-size: 60px; font-size: 3.75em;
color: #909090; color: #909090;
line-height: 100px; line-height: 1.67em;
left: 35px;
} }
.h5p-memory-game .h5p-memory-card .h5p-front:after { .h5p-memory-game .h5p-memory-card .h5p-front:after {
content: ""; 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%); 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 { .h5p-memory-game .h5p-memory-card .h5p-back {
line-height: 5.9em;
text-align: center;
background: #f0f0f0; background: #f0f0f0;
-webkit-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg);
@ -112,7 +123,8 @@ html .h5p-memory-game > ul {
-ms-transform: scale(0,1.1); -ms-transform: scale(0,1.1);
} }
.h5p-memory-game .h5p-memory-card.h5p-matched { .h5p-memory-game .h5p-memory-card.h5p-matched {
opacity: 0.25; opacity: 0.3;
filter: grayscale(100%);
} }
.h5p-memory-game .h5p-feedback { .h5p-memory-game .h5p-feedback {
@ -161,13 +173,12 @@ html .h5p-memory-game > ul {
padding: 1em; padding: 1em;
width: 20em; width: 20em;
position: absolute; position: absolute;
top: 2em; top: 50%;
left: 50%; left: 50%;
margin-left: -10em;
box-shadow: 0 0 1em #666; box-shadow: 0 0 1em #666;
-webkit-transform: translateZ(24px); -webkit-transform: translate(-50%,-50%);
-moz-transform: translateZ(24px); -moz-transform: translate(-50%,-50%);
transform: translateZ(24px); transform: translate(-50%,-50%);
} }
.h5p-memory-game .h5p-memory-image { .h5p-memory-game .h5p-memory-image {
float: left; float: left;
@ -177,6 +188,9 @@ html .h5p-memory-game > ul {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
background: #f0f0f0; background: #f0f0f0;
width: 100px; width: 6.25em;
height: 100px; height: 6.25em;
}
.h5p-memory-game .h5p-row-break {
clear: left;
} }

View File

@ -1,5 +1,11 @@
H5P.MemoryGame = (function (EventDispatcher, $) { 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 * Memory Game Constructor
* *
@ -13,7 +19,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Initialize event inheritance // Initialize event inheritance
EventDispatcher.call(self); EventDispatcher.call(self);
var flipped, timer, counter, popup, $feedback; var flipped, timer, counter, popup, $feedback, $wrapper, maxWidth, numCols;
var cards = []; var cards = [];
var removed = 0; var removed = 0;
@ -42,15 +48,16 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
if (desc !== undefined) { if (desc !== undefined) {
// Pause timer and show desciption. // Pause timer and show desciption.
timer.stop(); timer.pause();
popup.show(desc, card.getImage(), function () { popup.show(desc, card.getImage(), function () {
if (finished) { if (finished) {
// Game has finished // Game has finished
$feedback.addClass('h5p-show'); $feedback.addClass('h5p-show');
if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
} }
else { else {
// Popup is closed, continue. // Popup is closed, continue.
timer.start(); timer.play();
} }
}); });
} }
@ -58,6 +65,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Game has finished // Game has finished
timer.stop(); timer.stop();
$feedback.addClass('h5p-show'); $feedback.addClass('h5p-show');
if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
} }
} }
else { else {
@ -78,7 +86,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
card.on('flip', function () { card.on('flip', function () {
self.triggerXAPI('interacted'); self.triggerXAPI('interacted');
// Keep track of time spent // Keep track of time spent
timer.start(); timer.play();
if (flipped !== undefined) { if (flipped !== undefined) {
var matie = flipped; var matie = flipped;
@ -101,12 +109,53 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
cards.push(card); 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. // Initialize cards.
for (var i = 0; i < parameters.cards.length; i++) { var cardsToUse = getCardsToUse();
if (MemoryGame.Card.isValid(parameters.cards[i])) { for (var i = 0; i < cardsToUse.length; i++) {
// Add two of each card var cardParams = cardsToUse[i];
var cardOne = new MemoryGame.Card(parameters.cards[i], id); if (MemoryGame.Card.isValid(cardParams)) {
var cardTwo = new MemoryGame.Card(parameters.cards[i], id); // 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(cardOne, cardTwo);
addCard(cardTwo, cardOne); addCard(cardTwo, cardOne);
} }
@ -120,8 +169,8 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
*/ */
self.attach = function ($container) { self.attach = function ($container) {
this.triggerXAPI('attempted'); this.triggerXAPI('attempted');
// TODO: Only create on first! // TODO: Only create on first attach!
$container.addClass('h5p-memory-game').html(''); $wrapper = $container.addClass('h5p-memory-game').html('');
// Add cards to list // Add cards to list
var $list = $('<ul/>'); var $list = $('<ul/>');
@ -142,7 +191,17 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
'<dd class="h5p-card-turns">0</dd>' + '<dd class="h5p-card-turns">0</dd>' +
'</dl>').appendTo($container); '</dl>').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')); counter = new MemoryGame.Counter($status.find('.h5p-card-turns'));
popup = new MemoryGame.Popup($container); 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 // Extends the event dispatcher

View File

@ -5,7 +5,7 @@
"label": "Cards", "label": "Cards",
"importance": "high", "importance": "high",
"entity": "card", "entity": "card",
"min": 1, "min": 2,
"max": 100, "max": 100,
"field": { "field": {
"type": "group", "type": "group",
@ -17,7 +17,17 @@
"name": "image", "name": "image",
"type": "image", "type": "image",
"label": "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", "name": "description",
@ -26,11 +36,44 @@
"importance": "low", "importance": "low",
"maxLength": 150, "maxLength": 150,
"optional": true, "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", "label": "Localization",
"importance": "low", "importance": "low",

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

View File

@ -3,17 +3,42 @@ var H5PUpgrades = H5PUpgrades || {};
H5PUpgrades['H5P.MemoryGame'] = (function ($) { H5PUpgrades['H5P.MemoryGame'] = (function ($) {
return { return {
1: { 1: {
1: { /**
contentUpgrade: function (parameters, finished) { * Asynchronous content upgrade hook.
// Move card images into card objects, allows for additonal properties. * Upgrades content parameters to support Memory Game 1.1.
for (var i = 0; i < parameters.cards.length; i++) { *
parameters.cards[i] = { * Move card images into card object as this allows for additonal
image: parameters.cards[i] * properties for each card.
}; *
} * @params {object} parameters
* @params {function} finished
finished(null, parameters); */
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);
} }
} }
}; };