<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FP650 - Cheese</title>
    <link href="/style.css" rel="stylesheet" type="text/css" />
    <link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
  <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
  <!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/cheese"></script> -->
    <div id="preloads">
      <link rel="preload" href="/images/cheese.png" as="image">
    </div>
  </head>
  <body>
    <h5 hidden id='Maintenance' class="center"></h5>
    <p class="center rainbow" id="bc"></p>
    <img alt="Bouncing cheese" id="cheese" src="/images/cheese.png" style="position: fixed; z-index: -1;" class="no-special">
    <script>
    var vX = 2;
    var ovX = 2;
    var ovY = 2;
    var vY = 2; 
    var rot = 0;

    function move() {
      var width = window.innerWidth;
      var height = window.innerHeight;

      var elem = document.getElementById("cheese");
      if(!elem.style.left) elem.style.left = width / 2 + "px";
      if(!elem.style.top) elem.style.top = height / 2 + "px";

      var oldX = parseInt(elem.style.left.slice(0, -2));
      var oldY = parseInt(elem.style.top.slice(0, -2));

      if(oldX < 0) vX = Math.abs(vX);
      if(oldY < 0) vY = Math.abs(vY);
      if(oldX + 150 > width) vX = -Math.abs(vX);
      if(oldY + 150 > height) vY = -Math.abs(vY);
      if(!(ovX == vX || ovY == ovY)) {ovX=vX; ovY=vY; }

      elem.style.left = (oldX + vX) + "px";
      elem.style.top = (oldY + vY) + "px";

      rot += 1;
      elem.style.transform = "rotate(" + rot + "deg)";
 
      setTimeout(move, 1000 / 60);
    }

    move();
    </script>
    <script src="/script.js"></script>
  </body>
</html>