Building a CSS Quest Game - HTML5 Game Development - page 30

if (lastChild) {
// find the pattern in the deck and make it visible
var deckNode = document.getElementById('deck');
var resumePattern = deckNode.querySelector
('[data-pattern="' + lastChild.getAttribute
('data-pattern') + '"]');
resumePattern.style.display = 'block';
// remove the current pattern
this.node.removeChild(lastChild);
}
},
selectPattern: function(pattern) {
this.pushPattern(pattern);
game.compositionSeq.push(pattern);
},
undo: function() {
this.pullPattern();
game.compositionSeq.pop();
},
};
5. Then, we need the mouse event to invoke our selecion logic. In the scenes.js file,
we add the following clicking event to the gameScene :
gameScene.handleInput = function() {
document.querySelectorAll("#deck .pattern").
forEach(function(elm){
elm.onclick= function(){
var pattern = elm.getAttribute('data-pattern');
elm.style.display = 'none';
game.compositionView.selectPattern(pattern);
};
});
var undoBtn = document.getElementById('undo-button');
undoBtn.onclick = function(e){
game.compositionView.undo();
e.preventDefault();
};
};
6. Let's move to styling. We have a new undo buton, so we need the following CSS
rules to place it in the right posiion with the image:
#undo-button {
position: absolute;
right: 70px;