12. Monster Shuffle

Click to load and Shuffle!

======= .show_button { cursor: pointer; border: 0; background-color: transparent; padding: .5rem .5rem; } .show_button:active { color: #8e45ff; } .show_button:focus { outline: 0; box-shadow: 0 0 3px 1px #8e45ff; } .show_button:hover { outline: 0; box-shadow: 0 0 3px 1px #8e45ff; } .score { font-weight: bold; }

Click to load and play!

Score: 0

>>>>>>> refs/remotes/origin/main

Icons by Jamie Dickinson, Nicky Knicky, Alvaro Cabrera, Eliricon, April Yang, tk66, Alex WaZa, Husein Aziz, iconcheese,
and Yazmin Alanis.

<<<<<<< HEAD <<<<<<< HEAD

HTML

<button class="button" value="monsters">Click to load and Shuffle!</button>

<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>

=======

HTML

<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>

>>>>>>> refs/remotes/origin/main =======

HTML

<div id="app" aria-live="polite"></div>

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08

<<<<<<< HEAD <<<<<<< HEAD

JavaScript

/* Each monster (or sock) has a matching SVG in the source code.
For example, there’s a monster3 in the array, and a monster3.svg in the source code.
Shuffle the array of monsters, and render the matching SVG files into the #app element. */

const shuffleBtn = document.querySelector('.button');
const app = document.querySelector('#app');

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

const render = function () {
  app.innerHTML = '<div class="row">' + monsters.map(monster => {
    return (`
      <div class="grid" aria-live="polite"><img alt= "A picture of ${monster}" src="../img/${monster}.svg"/></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;
  }
  render();
  return arr;
}

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

=======

JavaScript

/* 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);
});

>>>>>>> refs/remotes/origin/main =======

JavaScript

/* Use state-based UI to create the timer, and countdown from 60 seconds to 0 once a second. 
When the timer is done, stop the countdown and provide a way for users to start it again. */

const timeValue = 6;
const Rue = function (selector, options) {
  this.elem = document.querySelector(selector);
  this.data = options.data;
  this.template = options.template;
};
Rue.prototype.render = function () {
  this.elem.innerHTML = this.template(this.data);
};
  Rue.prototype.restartTimer = function () {
    this.data.time = timeValue;
    app.timer()
}
Rue.prototype.stopTimer = function () {
  this.elem.innerHTML = `<h2>It's over, start again:</h2><button onclick="app.restartTimer()" class="button">Start Again</button>`
}
Rue.prototype.timer = function () {
  const intervalCount = window.setInterval(function () {
    if(!app) return;
    app.data.time--
    app.render();
    if (app.data.time < 1) {
      window.clearInterval(intervalCount)
      app.stopTimer()
    }
  }, 1000);
    app.render();
};
const app = new Rue('#app', {
  data: {
    time: timeValue,
  },
  template: function (props) {
    if (!props) return;
    let html = `<h2>You've got only <span class="counter">${props.time}</span> seconds!</h2>`;
    return html;
  }
})
app.timer();

>>>>>>> 40f52ddbff7b95e12ac8bbe777f7115c1faafd08