<div class="pin" id="app">
    <h1 class="pin__title">Enter the pin code</h1>
    <div class="pin__code" id="pin"></div>
    <div class="pin__store" id="store"></div>
</div>
<div id="secret" class="secret">
    <div class="twitch">
        <i class="fab fa-twitch twitch__icon"></i>
        <div>
          <h2 class="twitch__title">Follow me on twitch</h2>
          <a target="_blank" href="https://www.twitch.tv/emilienjc" class="twitch__link">twitch.tv/emilienjc</a>
        </div>
    </div>
    <div id="retry" class="retry">Retry</div>
</div>

* {
  padding: 0;
  margin: 0;
}

.pin {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
}

.pin__title {
  font-family: system-ui;
  text-transform: uppercase;
  color: white;
  font-size: 40px;
  text-shadow: 0 3px 6px #0000004f;
  line-height: 1;
}

.pin__code {
  font-family: -webkit-pictograph;
  text-transform: uppercase;
  color: white;
  font-size: 60px;
  font-weight: 400;
  text-shadow: 0 3px 6px #0000004f;
  border-bottom: solid 2px;
}

.pin__store {
  display: flex;
  height: 50px;
  width: 540px;
  margin: 25px;
}

.letter {
  border-radius: 5px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-size: 40px;
  font-weight: 700;
  margin: 0 5px;
  background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
  box-shadow: 0 3px 6px #0000004f;
  color: white;
}


.secret {
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #9147ff ;
  z-index: 1;
  top: 0;
  clip-path: inset(0 0 100% 0);
  align-items: center;
  justify-content: center;
  transition: all 1s ease;
}

.badsecret {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: red ;
  z-index: 1;
  top: 0;
  clip-path: inset(100% 0 0 0);
  transition: all 1s ease;
}

.secret--active {
  clip-path: inset(0 0 0 0);
}

.twitch {
  display: flex;
  align-items: center;
}

.twitch__icon {
  font-size: 65px;
  color: white;
  margin: 0 10px;
}

.twitch__title {
  font-size: 50px;
  font-family: system-ui;
  text-transform: uppercase;
  color: white;
  line-height: 1;
}

.twitch__link {
  font-size: 30px;
  color: white;
  font-family: sans-serif;
  transition: all 0.5s ease;
  opacity: 0.5;
}

.twitch__link:hover {
  opacity: 1;
}

.retry {
  margin: 40px;
  font-size: 20px;
  font-family: sans-serif;
  text-transform: uppercase;
  color: white;
  border: solid 3px;
  padding: 10px;
  opacity: 0.5;
  transition: all 1s ease;
  cursor: pointer;
}

.retry:hover {
  opacity: 1;
}

/**
 * Made with all my love on Twitch.tv ! <3
 *
 * Follow me :p
 * https://twitch.tv/emilienjc
 * https://github.com/EmilienLeroy
 * https://codepen.io/emilienleroy/
 * https://twitter.com/LeroyEmilien
 */
const store = [];
const code = random(9);
const app = document.querySelector('#store');
const pin = document.querySelector('#pin');
const retry = document.querySelector('#retry');
const secret = document.querySelector('#secret');

pin.innerHTML = code;

window.addEventListener('keydown', (event) => {
  const key = Number(event.key);

  if (event.key === 'Backspace' && store.length !== 0) {
    store.pop();
    removeLetter(app.childNodes[store.length]);
  }

  if (!Number.isNaN(key) && store.length < String(code).length) {
    store.push(key);
    app.appendChild(createLetter(key));
  
    if (compare(store, code)) {
      return unlock();
    }
  }

  if (store.length === String(code).length) {
    wrong();
  }
})

retry.addEventListener('click',() => {
  wrong();
  lock();
});

function compare(store, code) {
  return Number(store.join('')) === code;
}

function unlock() {
  secret.classList.add('secret--active');
}

function lock() {
  secret.classList.remove('secret--active');
}

function wrong() {
  store.length = 0;
  app.childNodes.forEach((letter) => removeLetter(letter));
}

function createLetter(key) {
  const div =  document.createElement('div');

  div.classList.add('letter');
  div.innerHTML = key;
  div.animate([
    { transform: 'rotate(180deg) scale(0)' },
    { transform: 'rotate(0deg) scale(1)' }
  ],{
    duration: 500,
    iterations: 1,
    fill: 'both',
    easing: 'ease',
  })

  return div;
}

function removeLetter(letter) {
  const animation = letter.animate([
    { transform: 'rotate(0deg) scale(1)' },
    { transform: 'rotate(180deg) scale(0)' }
  ],{
    duration: 500,
    iterations: 1,
    fill: 'both',
    easing: 'ease',
  });

  animation.onfinish = () => {
    letter.remove();
  }
}

function random(digit) {
  let number = Math.round(Math.random() * Math.pow(10, digit));

  if (String(number).length !== digit) {
    number = Number(`${String(number)}${Math.round(Math.random() * 10)}`); 
  }

  return number;
}