{% extends "root.html" %}
{% block title %}ライアー！{% endblock %}
{% block content %}
<style>
  html {
    overflow: hidden;
    background-color: black;
  }
  .liar {
    user-select: none;
    background-color: red;
    color: black;
    opacity: 0.7;
    padding: 5px;
    position: absolute;
    font-size: 26px;
    font-weight: bold;
    z-index: -1;
  }
  #eyes {
    user-select: none;
    display: block;
    margin: auto;
    width: 75vw;
    z-index: 2;
  }
</style>

<iframe hidden autoplay allow="autoplay" frameborder="0" 
  src="https://www.youtube.com/embed/1FxOtHG5rYg?autoplay=1&loop=1&playlist=1FxOtHG5rYg"></iframe>
<img id="eyes" src="../items/images/eyes.png">

<script>
  let liar = "<p hidden class='liar'>LIAR</p>";
  let liars, last, first;

  setInterval(() => {
    $("body").append(liar);
    liars = $(".liar");
    last = $(".liar:last");
    first = $(".liar:first");

    last.css({"top": `${randInt(-50, viewHeight)}px`,"left": `${randInt(-50, viewWidth)}px`})
    last.fadeIn(1000);
    if (liars.length > 500) first.fadeOut(1000, () => {first.remove()});

    // budge her  e y e s
    if (chance(0.05)) {
      let budge = randInt(-10,10);
      $("#eyes").css("margin-left", `+=${budge}px`);
      setTimeout(() => {$("#eyes").css("margin-left", `-=${budge}px`);}, 20);
    }
    // budge her  l i e s
    if (chance(0.1)) {
      let budge = randInt(-100,100);
      let him = $(pick(liars));
      him.css("margin-left", `+=${budge}px`);
      setTimeout(() => {him.css("margin-left", `-=${budge}px`);}, 40);
    }
  }, 50);
</script>
{% endblock %}