<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../_assets/fonts/Iosevka/index.css">
<style>
body {
  background-color: #222;
  color: #fff;
  font-family: "Iosevka sbruder";
  font-size: 10vh;
}

span {
  margin: 5vh 5vw;
  position: absolute;
}

span#tl { top: 0; left: 0; }
span#tr { top: 0; right: 0; }
span#bl { bottom: 0; left: 0; }
span#br { bottom: 0; right: 0; }
</style>
  </head>
  <body>
    <span id="tl"></span>
    <span id="tr"></span>
    <span id="bl"></span>
    <span id="br"></span>
<script>
const desiredPasswords = ['hallo', 'passwort', '12345678', 'sicher']
const initialPasswords = ['QZtn.', 'oaifraFG', 'D@A?CN;F', 'IHKYaR']
const sleep = 15
let intervals = []

function next(c, d) {
  if (c.length !== d.length) {
    return '​'
  }
  for (i=0; i<c.length; i++) {
    if (c[i] < d[i]) {
      return c.substr(0, i) + String.fromCharCode(c.charCodeAt(i) + 1) + c.substr(i + 1)
    }
    else if (c[i] > d[i]) {
      return c.substr(0, i) + String.fromCharCode(c.charCodeAt(i) - 1) + c.substr(i + 1)
    }
  }
}

window.addEventListener("message", (e) => {
  console.log(e)
  if (e.data === 'slide:start') {
    document.querySelectorAll('span').forEach((el, idx) => intervals.push(setInterval(() => {
      if (el.textContent === '') {
        el.textContent = initialPasswords[idx]
      }
      if (el.textContent !== desiredPasswords[idx]) {
        el.textContent = next(el.textContent, desiredPasswords[idx])
      }
      else {
        setTimeout(() => el.textContent = '​', 1000)
      }
    }, sleep)))
  }
  else if (e.data === 'slide:stop') {
    document.querySelectorAll('span').forEach(el => el.textContent = '')
    intervals = intervals.filter(item => clearInterval(item))
  }
});
</script>
  </body>
</html>