Selecting the pattern

In this task, we allow players to select the pattern from their decks and display the sequence of the selection in the composition view.

Engage thrusters

Perform the following steps to add user interaction to our game:

1. We allow players to undo their selection, so we need to add an undo button to the index.html file:

   <a href="#" id="undo-button" class="button">Undo</a>

2. When starting a level in the game.js file, we store the player's selection sequence and register the clicking event by adding the following highlighted code:

   startLevel: function() {
     game.quest = new game.Quest(this.currentLevel);
     game.compositionSeq = [];
     game.composition = new game.Composition();
     game.gameScene.visualize(game.quest);      
     game.gameScene.handleInput();
   },

3. In the patch.js file, we need to add forEach to the NodeList and HTMLCollection objects using the following code:

   NodeList.prototype.forEach = Array.prototype.forEach;
   HTMLCollection.prototype.forEach = Array.prototype.forEach;

4. In the composition-view.js file, we need the following methods to display the pattern selection in the composition's DOM element:

   game.compositionView = {
     node: document.getElementById('your-composition'),
     pushPattern: function(patternId) {
       var newChild = document.createElement('div');
       newChild.classList.add('pattern');
       newChild.setAttribute('data-pattern', patternId);
       this.node.appendChild(newChild);
     },
     pullPattern: function() {
       var lastChild = this.node.querySelector('.pattern:last-child');
       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 selection 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 button, so we need the following CSS rules to place it in the right position with the image:

   #undo-button {
     position: absolute;
     right: 70px;
     top: 240px;
     z-index: 999;
     background: url(images/undo_btn.png) no-repeat;
     width: 90px;
     height: 26px;
   }
   #undo-button:hover {background-position: 0 -26px;}

7. Also, we add mouse-related styling to the pattern's slot:

   .pattern-slot:hover{outline-color: #D68700;}
   .pattern-slot:active {outline-color: #BC7702;}

Objective complete – mini debriefing

The selection is done by the click event on the pattern. Basically, we get the pattern ID from the data- attribute. Once the pattern ID is known, it triggers the following method:

game.compositionView.selectPattern(pattern);

Then, the composition pushes the selection into an array.

Undo the player composition

We trigger the undo logic by listening to the undo button's click event. Then, the undo logic removes the last pattern from the array. At the same time, we find the last pattern element in the composition view and move this element to the pattern deck.