Merge branch 'master' into release
Paal Joergensen
commit
395648c78f
48
card.js
48
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,13 +78,14 @@
|
|||
*/
|
||||
self.appendTo = function ($container) {
|
||||
// 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-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>' +
|
||||
'</li>')
|
||||
'</div></li>')
|
||||
.appendTo($container)
|
||||
.children('.h5p-memory-card')
|
||||
.children('.h5p-front')
|
||||
.click(function () {
|
||||
self.flip();
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
14
library.json
14
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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
147
memory-game.js
147
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 = $('<ul/>');
|
||||
|
|
@ -142,7 +191,17 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
|
|||
'<dd class="h5p-card-turns">0</dd>' +
|
||||
'</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'));
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
94
timer.js
94
timer.js
|
|
@ -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);
|
||||
33
upgrades.js
33
upgrades.js
|
|
@ -3,9 +3,17 @@ var H5PUpgrades = H5PUpgrades || {};
|
|||
H5PUpgrades['H5P.MemoryGame'] = (function ($) {
|
||||
return {
|
||||
1: {
|
||||
1: {
|
||||
contentUpgrade: function (parameters, finished) {
|
||||
// Move card images into card objects, allows for additonal properties.
|
||||
/**
|
||||
* 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]
|
||||
|
|
@ -13,7 +21,24 @@ H5PUpgrades['H5P.MemoryGame'] = (function ($) {
|
|||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue