<div class="home">
  <div class="poster">
    <h1 class="heading">Welcome to Room with Floor with Tiles</h1>
    <small>Start scrolling
  <em>( <input type="checkbox" id="avatarsNotLoaded" name="avatarsNotLoaded">
    <label for="avatarsNotLoaded">Check this if images aren't loading</label>)</em></small>
  </div>
  <div class="room">
    <div class="floor-wrapper">
      <div class="floor" id="floor">
        <!--       tiles will be loaded here -->
      </div>
    </div>
  </div>
  <div class="extra-room"></div>
</div>
<footer>
  <a href="https://avatars.dicebear.com/" target="_blank">DiceBear Avatars</a>
  <a href="http://qrohlf.com/trianglify/" target="_blank">Trianglify</a>
</footer>

$no-of-tiles-in-row: 7;

$body-bg: #7fdbff;
$body-margin: 16px;
$body-padding: 16px;

$base-border-radius: 4px;

$floor-wrapper-transform: translateX(-50%) translateY(2%) rotateX(45deg) rotateZ(45deg);
$floor-wrapper-transform-origin: left top 0px;

$floor-bg: transparent;
$floor-padding: 8px;
$floor-border-radius: $base-border-radius;
// $floor-

$tile-wrapper-base-border-radius: $base-border-radius;
$tile-wrapper-base-inset: 7px;
$tile-wrapper-base-background: rgba(0, 0, 0, 0.4) none repeat scroll 0% 0%;
$tile-wrapper-base-box-shadow: rgba(0, 0, 0, 0.4) none repeat scroll 0% 0%,
  rgba(0, 0, 0, 0.4) 0px 0px 14px 1px;
$tile-wrapper-base-transform: translateZ(-1px) scale(1.1);
$tile-wrapper-base-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s,
  box-shadow 0.3s ease 0s;
$tile-wrapper-base-box-shadow-animated: rgba(0, 0, 0, 0.4) 0px 0px 20px 10px;

$tile-wrapper-size: 150px;
$tile-wrapper-margin: 8px;
$tile-wrapper-padding: 0;
$tile-wrapper-border-radius: $base-border-radius;

$tile-bg: #ffffff;
$tile-size: 100%;
$tile-reveal-text-color: #fffff;

body {
  background-color: $body-bg;
}

.home {
  display: flex;
  justify-content: center;
  margin: $body-margin;
  padding: $body-padding;
}

.poster{
  position: fixed;
  z-index: 3;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
  left:64px;
}

.room {
  .floor-wrapper {
    position: fixed;
    z-index: 2;
    transform: $floor-wrapper-transform;
    transform-origin: $floor-wrapper-transform-origin;
    .floor {
      display: flex;
      flex-wrap: wrap;
      transform: translate3d(0px, 0px, 0px);
      width: (
          $tile-wrapper-size + ($tile-wrapper-padding * 2) +
            (
              $tile-wrapper-margin * 2
            )
        ) * $no-of-tiles-in-row;
      background-color: $floor-bg;
      padding: $floor-padding;
      border-radius: $floor-border-radius;
    }
  }
}

.tile-wrapper {
  position: relative;
  z-index: 2;
  height: $tile-wrapper-size;
  min-width: $tile-wrapper-size;
  margin: $tile-wrapper-margin;
  border-radius: $tile-wrapper-border-radius;
  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    backface-visibility: hidden;
    inset: $tile-wrapper-base-inset;
    background: rgba(0, 0, 0, 0.4) none repeat scroll 0% 0%;
    transform: translateZ(-1px);
    transition: transform 0.3s ease 0s, opacity 0.3s ease 0s,
      box-shadow 0.3s ease 0s;
    border-radius: $tile-wrapper-base-border-radius;
  }
  &:hover,
  &:focus {
    &::before {
      box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 20px 5px;
    }
    .tile {
      transform: translateX(-50px) translateY(-50px) rotateZ(0deg);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .reveal-text {
      opacity: 1;
      transform: translate3d(0px, 10px, 0px);
    }
  }
  .tile {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    height: 100%;
    min-width: 100%;
    border-radius: $base-border-radius/2;
    z-index: 1;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: all 0.25s cubic-bezier(0.2, 1, 0.2, 1);
    // box-shadow inspired from https://tailwindcss.com/docs/box-shadow/
    // box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
    //   0 4px 6px -2px rgba(0, 0, 0, 0.1);
     // background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    box-shadow: 0px 0px 0px rgba(255, 255, 255, 1),1px 1px 0px #efefef,2px 2px 0px #e7e7e7,3px 3px 0px #e2e2e2,4px 4px 0px #dedede,5px 5px 0px #dadada,6px 6px 0px #d6d6d6, 7px 7px 8px rgba(0, 0, 0, 0.2), 8px 8px 4px rgba(0, 0, 0, 0.1);
  }
}

.reveal-text {
  font-size: 1.1em;
  font-weight: 600;
  position: absolute;
  z-index: -1;
  bottom: 0px;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  opacity: 0;
  transform: translate3d(0px, -20px, 0px);
  transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}

.extra-room {
  height: 6000px;
  pointer-events: none;
}

footer{
  font-size: 12px;
  padding: 16px;
  background-color: rgba(0,0,0,0.12);
  a{
    text-decoration: none;
  }
}

(function() {
  let avatarsNotLoaded = false;
  let checkbox = document.getElementById('avatarsNotLoaded');
  let floor = document.getElementById("floor");
  const noOfTiles = 210;
  const imgSize = "118px"; // size of tile minus tile-wrapper margin*4
  
  function loadTiles(){
    for (let i = 0; i < noOfTiles; i++) {
    let tileWrapper = document.createElement("div");
    tileWrapper.classList.add("tile-wrapper");
    let tile = document.createElement("div");
    tile.classList.add("tile");
    let text = Math.floor(1000 + Math.random() * 9000);

    if (!avatarsNotLoaded) {
      // dicebar avatars
      let imgSrc = "https://avatars.dicebear.com/v2/bottts/" + text + ".svg";
      let img = document.createElement("img");
      img.setAttribute("src", imgSrc);
      img.setAttribute("height", imgSize);
      img.setAttribute("width", imgSize);
      tile.appendChild(img);
    } else {
      // trianglify
      let pattern = Trianglify({
        height: parseInt(imgSize),
        width: parseInt(imgSize),
        cell_size: 40
      });
      tile.appendChild(pattern.svg());
    }

    let pTag = document.createElement("p");
    pTag.innerHTML = text;
    pTag.classList.add("reveal-text");
    tileWrapper.appendChild(tile);
    tileWrapper.appendChild(pTag);
    floor.appendChild(tileWrapper);
  }
  };
  
  function clearTiles(){
    floor.innerHTML = '';
  }
  
  function updateImages(){
    avatarsNotLoaded = checkbox.checked;
    clearTiles();
    loadTiles();
  }

  // start handling scroll
  // Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

  let last_known_scroll_position_y = 0;
  let last_known_scroll_position_x = 0;
  let ticking = false;

  function doSomething(x, y) {
    floor.setAttribute("style", `transform: translate3d(${x}px, -${y}px, 0)`);
  }

  window.addEventListener("scroll", function(e) {
    last_known_scroll_position_y = window.scrollY;
    last_known_scroll_position_x = window.scrollX;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        doSomething(last_known_scroll_position_x, last_known_scroll_position_y);
        ticking = false;
      });

      ticking = true;
    }
  });
  // end handling scroll
  
  // start handling checkbox
  checkbox.addEventListener('click', updateImages)
  // end handling checkbox

  loadTiles();
})();