14. Find the Monsters - Track Wins

Score: 0

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button class="button" value="monsters">Click to load and play!</button>

<p class="score" aria-live="polite">Score: 0</p>
<div id="app"></div>

<footer>
  <p class="text-small text-muted">Icons by
    <a href="https://thenounproject.com/term/door/311732/">Jamie Dickinson</a>,
    <a href="https://thenounproject.com/term/monster/184225/">Nicky Knicky</a>,
    <a href="https://thenounproject.com/term/monster/1510400/">Alvaro Cabrera</a>,
    <a href="https://thenounproject.com/term/monster/28460/">Eliricon</a>,
    <a href="https://thenounproject.com/term/monster/82823/">April Yang</a>,
    <a href="https://thenounproject.com/term/monster/1062009/">tk66</a>,
    <a href="https://thenounproject.com/term/monster/24990/">Alex WaZa</a>,
    <a href="https://thenounproject.com/term/monster/37212/">Husein Aziz</a>,
    <a href="https://thenounproject.com/term/monster/2236082">iconcheese</a>,<br/>
    and <a href="https://thenounproject.com/term/socks/38451/">Yazmin Alanis</a>.</p>
</footer>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/* If the user finds the sock before they’ve found all of the monsters,
display a message letting them know they lost. If they find all of the monsters,
display a message letting them know they’ve won.
Either way, show a button that they can click to play again. */

const shuffleBtn = document.querySelector('.button');
const app = document.querySelector('#app');
const scoreInfo = document.querySelector('.score');
let score = 0;

const monsters = [
  'monster1',
  'monster2',
  'monster3',
  'monster4',
  'monster5',
  'monster6',
  'monster7',
  'monster8',
  'monster9',
  'monster10',
  'monster11',
  'sock'
];

const render = function () {
  app.innerHTML = '<p>Click a door to reveal a monster. Try not to find the sock.</p><div class="row">' + monsters.map(monster => {
    return (`
          <div class="grid" aria-live="polite"><button class="show_button" data-id="${monster}"><img alt= "Click this picture of door to see monster" src="../img/door.svg"/></button></div>
        `)
  }).join('') + '</div>';
};

const shuffleArr = function (arr) {
  var currentIndex = arr.length;
  var temporaryValue, randomIndex;

  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = arr[currentIndex];
    arr[currentIndex] = arr[randomIndex];
    arr[randomIndex] = temporaryValue;
  }
  score = 0;
  scoreInfo.textContent = `Score: ${score}`;
  render();
  return arr;
}

const replaceTargetElement = function (e) {
  const monster = e.target.closest('[data-id]');
  if (!monster) return;
  const monsterID = monster.getAttribute('data-id');
  monster.parentNode.innerHTML = `<img alt="A picture of ${monsterID}" src="../img/${monsterID}.svg"/>`
  if (monsterID !== "sock") {
    goodPick();
  } else {
    wrongPick();
  }
}

const goodPick = function () {
  score++
  if (score >= 11) {
    scoreInfo.innerHTML = `<p class="score">Score: ${score}, Congrats, you have won!</p>`;
    endGame();
    return;
  }
  scoreInfo.textContent = `Score: ${score}`;
}

const wrongPick = function () {
  score = 0;
  scoreInfo.innerHTML = `<p class="score">Score: ${score}, Ups, you have lose. Try again.</p>`;
  endGame();
  return;
}

const endGame = function () {
  const pickLeft = Array.from(document.querySelectorAll('[data-id]'));
  pickLeft.forEach(pick => pick.remove());
}

document.addEventListener('click', replaceTargetElement);

shuffleBtn.addEventListener('click', function () {
  shuffleArr(monsters);
});