Add support for try again

pull/18/head
Frode Petterson 2017-02-13 14:42:34 +01:00
parent 6b6f5e92f1
commit 0bc76c6ce8
7 changed files with 200 additions and 28 deletions

17
card.js
View File

@ -4,11 +4,13 @@
* Controls all the operations for each card. * Controls all the operations for each card.
* *
* @class H5P.MemoryGame.Card * @class H5P.MemoryGame.Card
* @extends H5P.EventDispatcher
* @param {Object} image * @param {Object} image
* @param {number} id * @param {number} id
* @param {string} [description] * @param {string} [description]
*/ */
MemoryGame.Card = function (image, id, description) { MemoryGame.Card = function (image, id, description) {
/** @alias H5P.MemoryGame.Card# */
var self = this; var self = this;
// Initialize event inheritance // Initialize event inheritance
@ -53,6 +55,13 @@
$card.addClass('h5p-matched'); $card.addClass('h5p-matched');
}; };
/**
* Reset card to natural state
*/
self.reset = function () {
$card[0].classList.remove('h5p-flipped', 'h5p-matched');
};
/** /**
* Get card description. * Get card description.
* *
@ -92,6 +101,14 @@
}) })
.end(); .end();
}; };
/**
* Re-append to parent container
*/
self.reAppend = function () {
var parent = $card[0].parentElement.parentElement;
parent.appendChild($card[0].parentElement);
};
}; };
// Extends the event dispatcher // Extends the event dispatcher

View File

@ -7,16 +7,32 @@
* @param {H5P.jQuery} $container * @param {H5P.jQuery} $container
*/ */
MemoryGame.Counter = function ($container) { MemoryGame.Counter = function ($container) {
/** @alias H5P.MemoryGame.Counter# */
var self = this; var self = this;
var current = 0; var current = 0;
/**
* @private
*/
var update = function () {
$container[0].innerText = current;
};
/** /**
* Increment the counter. * Increment the counter.
*/ */
self.increment = function () { self.increment = function () {
current++; current++;
$container.text(current); update();
};
/**
* Revert counter back to its natural state
*/
self.reset = function () {
current = 0;
update();
}; };
}; };

View File

@ -3,9 +3,9 @@
"description": "See how many cards you can remember!", "description": "See how many cards you can remember!",
"majorVersion": 1, "majorVersion": 1,
"minorVersion": 2, "minorVersion": 2,
"patchVersion": 1, "patchVersion": 2,
"runnable": 1, "runnable": 1,
"author": "Amendor AS", "author": "Joubel AS",
"license": "MIT", "license": "MIT",
"machineName": "H5P.MemoryGame", "machineName": "H5P.MemoryGame",
"preloadedCss": [ "preloadedCss": [
@ -25,6 +25,9 @@
}, },
{ {
"path": "popup.js" "path": "popup.js"
},
{
"path": "timer.js"
} }
], ],
"preloadedDependencies": [ "preloadedDependencies": [

View File

@ -198,3 +198,17 @@
.h5p-memory-game .h5p-memory-desc { .h5p-memory-game .h5p-memory-desc {
margin-left: 7em; margin-left: 7em;
} }
.h5p-memory-reset {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer;
font-style: italic;
text-shadow: 0 0 0.5em white;
padding: 0.125em 0.25em;
line-height: 1;
}
.h5p-memory-reset:focus {
outline: dashed pink;
}

View File

@ -9,11 +9,13 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
/** /**
* Memory Game Constructor * Memory Game Constructor
* *
* @class * @class H5P.MemoryGame
* @extends H5P.EventDispatcher
* @param {Object} parameters * @param {Object} parameters
* @param {Number} id * @param {Number} id
*/ */
function MemoryGame(parameters, id) { function MemoryGame(parameters, id) {
/** @alias H5P.MemoryGame# */
var self = this; var self = this;
// Initialize event inheritance // Initialize event inheritance
@ -39,10 +41,10 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
removed += 2; removed += 2;
var finished = (removed === cards.length); var isFinished = (removed === cards.length);
var desc = card.getDescription(); var desc = card.getDescription();
if (finished) { if (isFinished) {
self.triggerXAPIScored(1, 1, 'completed'); self.triggerXAPIScored(1, 1, 'completed');
} }
@ -50,10 +52,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
// Pause timer and show desciption. // Pause timer and show desciption.
timer.pause(); timer.pause();
popup.show(desc, card.getImage(), function () { popup.show(desc, card.getImage(), function () {
if (finished) { if (isFinished) {
// Game has finished // Game done
$feedback.addClass('h5p-show'); finished();
if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
} }
else { else {
// Popup is closed, continue. // Popup is closed, continue.
@ -61,11 +62,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
} }
}); });
} }
else if (finished) { else if (isFinished) {
// Game has finished // Game done
timer.stop(); finished();
$feedback.addClass('h5p-show');
if (parameters.behaviour && parameters.behaviour.allowRetry) { /* TODO */ }
} }
} }
else { else {
@ -75,6 +74,88 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
} }
}; };
/**
* Game has finished!
* @private
*/
var finished = function () {
timer.stop();
$feedback.addClass('h5p-show');
if (parameters.behaviour && parameters.behaviour.allowRetry) {
// Create retry button
var retryButton = createButton('reset', 'Try again?', function () {
// Trigger handler (action)
resetGame();
// Remove button from DOM
$wrapper[0].removeChild(this);
});
// Same size as cards
retryButton.style.fontSize = $wrapper.children('ul')[0].style.fontSize;
$wrapper[0].appendChild(retryButton); // Add to DOM
}
};
/**
* Shuffle the cards and restart the game!
* @private
*/
var resetGame = function () {
// Reset cards
removed = 0;
for (var i = 0; i < cards.length; i++) {
cards[i].reset();
}
// Remove feedback
$feedback[0].classList.remove('h5p-show');
// Reset timer and counter
timer.reset();
counter.reset();
// Randomize cards
H5P.shuffleArray(cards);
setTimeout(function () {
// Re-append to DOM after flipping back
for (var i = 0; i < cards.length; i++) {
cards[i].reAppend();
}
// Scale new layout
$wrapper.children('ul').children('.h5p-row-break').removeClass('h5p-row-break');
maxWidth = -1;
self.trigger('resize');
}, 600);
};
/**
* Game has finished!
* @private
*/
var createButton = function (name, label, action) {
var buttonElement = document.createElement('div');
buttonElement.classList.add('h5p-memory-' + name);
buttonElement.innerHTML = label;
buttonElement.setAttribute('role', 'button');
buttonElement.tabIndex = 0;
buttonElement.addEventListener('click', function (event) {
action.apply(buttonElement);
}, false);
buttonElement.addEventListener('keypress', function (event) {
if (event.which === 13 || event.which === 32) { // Enter or Space key
event.preventDefault();
action.apply(buttonElement);
}
}, false);
return buttonElement;
};
/** /**
* Adds card to card list and set up a flip listener. * Adds card to card list and set up a flip listener.
* *
@ -191,17 +272,7 @@ 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 H5P.Timer(100); timer = new MemoryGame.Timer($status.find('.h5p-time-spent')[0]);
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);

View File

@ -7,6 +7,7 @@
* @param {H5P.jQuery} $container * @param {H5P.jQuery} $container
*/ */
MemoryGame.Popup = function ($container) { MemoryGame.Popup = function ($container) {
/** @alias H5P.MemoryGame.Popup# */
var self = this; var self = this;
var closed; var closed;

50
timer.js Normal file
View File

@ -0,0 +1,50 @@
(function (MemoryGame, Timer) {
/**
* Adapter between memory game and H5P.Timer
*
* @class H5P.MemoryGame.Timer
* @extends H5P.Timer
* @param {Element} element
*/
MemoryGame.Timer = function (element) {
/** @alias H5P.MemoryGame.Timer# */
var self = this;
// Initialize event inheritance
Timer.call(self, 100);
/** @private {string} */
var naturalState = element.innerText;
/**
* Set up callback for time updates.
* Formats time stamp for humans.
*
* @private
*/
var update = function () {
var time = self.getTime();
var minutes = Timer.extractTimeElement(time, 'minutes');
var seconds = Timer.extractTimeElement(time, 'seconds') % 60;
if (seconds < 10) {
seconds = '0' + seconds;
}
element.innerText = minutes + ':' + seconds;
};
// Setup default behavior
self.notify('every_tenth_second', update);
self.on('reset', function () {
element.innerText = naturalState;
self.notify('every_tenth_second', update);
});
};
// Inheritance
MemoryGame.Timer.prototype = Object.create(Timer.prototype);
MemoryGame.Timer.prototype.constructor = MemoryGame.Timer;
})(H5P.MemoryGame, H5P.Timer);