Merge branch '1.1'

pull/6/head
Frode Petterson 2014-10-31 10:48:44 +01:00
commit 5d04c1a164
5 changed files with 182 additions and 32 deletions

View File

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

View File

@ -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;
}

View File

@ -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);
}
};
@ -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 = $('<div class="h5p-memory-pop"><div class="h5p-memory-image"></div><div class="h5p-memory-desc"></div></div>').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.
@ -267,6 +350,11 @@ H5P.MemoryGame = (function ($) {
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();
});
}
};
};

View File

@ -7,9 +7,23 @@
"min": 1,
"max": 100,
"field": {
"name": "card",
"type": "group",
"label": "Card",
"fields": [
{
"name": "image",
"type": "image",
"label": "Card"
"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."
}
]
}
},
{

20
upgrades.js Normal file
View File

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