<div class="gif gif__wrapper gif--hidden" id="gif">
  <img class="gif gif__img" src="https://i.giphy.com/media/11XNtjXJeOL6Gk/source.gif" alt="Gangnam Style Gif">
</div>

<h1>Have you heard of Konami Code? 🎮</h1>
<div class="keyboard">
  <!-- Row 1 -->
  <button class="keyboard__key keyboard__key--special col-span-2" id="Escape">Esc</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Backquote">`</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit1">1</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit2">2</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit3">3</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit4">4</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit5">5</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit6">6</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit7">7</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit8">8</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit9">9</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Digit0">0</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Minus">-</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Equal">=</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Backslash">\</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="Delete">Del</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="Home">Home</button>

  <!-- Row 2 -->
  <button class="keyboard__key keyboard__key--special col-span-3" id="Tab">↹</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyQ">Q</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyW">W</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyE">E</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyR">R</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyT">T</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyY">Y</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyU">U</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyI">I</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyO">O</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyP">P</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="BracketLeft">[</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="BracketRight">]</button>
  <button class="keyboard__key keyboard__key--special col-span-5" id="Backspace">Backspace</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="PageUp">Up</button>

  <!-- Row 3 -->
  <button class="keyboard__key keyboard__key--special col-span-4" id="CapsLock">Caps</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyA">A</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyS">S</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyD">D</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyF">F</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyG">G</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyH">H</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyJ">J</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyK">K</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyL">L</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Semicolon">;</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Quote">'</button>
  <button class="keyboard__key keyboard__key--special col-span-6" id="Enter">Enter</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="PageDown">Down</button>

  <!-- Row 4 -->
  <button class="keyboard__key keyboard__key--special col-span-5" id="ShiftLeft">Shift</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyZ">Z</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyX">X</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyC">C</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyV">V</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyB">B</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyN">N</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="KeyM">M</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Comma">,</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Period">.</button>
  <button class="keyboard__key keyboard__key--general col-span-2" id="Slash">/</button>
  <button class="keyboard__key keyboard__key--special col-span-5" id="ShiftRight">Shift</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="ArrowUp">↑</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="End">End</button>

  <!-- Row 5 -->
  <button class="keyboard__key keyboard__key--special col-span-2" id="ControlLeft">Ctrl</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="MetaLeft">Sup</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="AltLeft">Alt</button>
  <button class="keyboard__key keyboard__key--general col-span-18" id="Space"></button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="AltRight">Alt</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="ContextMenu">...</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="ArrowLeft">←</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="ArrowDown">↓</button>
  <button class="keyboard__key keyboard__key--special col-span-2" id="ArrowRight">→</button>
</div>

/**
* Table Of Contents
* 1. Variables
* 2. General
* 3. Keyboard
* 4. Grid columns
* 5. GIF
*   5.1. Animations
*/

/* 1. Variables */
$columns: 34;
$rows: 5;

$radius: 5px;
$size: 1.5rem;
$spacing: 12px;

$beige: #fcf0e4;
$bright-orange: #eb7131;
$soft-cyan: #54d9d1;
$soft-pink: #f27a9b;

/* 2. General */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  align-items: center;
  background-color: $soft-cyan;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  padding: 5vw;
  overflow: hidden;
  width: 100vw;
}

h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 4rem;
  text-align: center;
}

/* 3. Keyboard */
.keyboard {
  background-color: $beige;
  border-radius: $radius;
  box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5);
  display: grid;
  gap: $spacing;
  grid-template-columns: repeat($columns, $size);
  grid-template-rows: repeat($rows, $size * 2);
  padding: $spacing;
  width: fit-content;

  &#{__key} {
    border: none;
    border-radius: $radius;
    cursor: pointer;
    display: flex;
    font-family: "Source Code Pro", monospace;
    outline: none;
    padding: $spacing;

    &:hover,
    &:focus {
      font-weight: 700;
    }

    &:active,
    &.active {
      box-shadow: none;
      font-weight: 400;
      transform: translate(2px, 2px);
    }

    &#{--general} {
      background-color: $soft-pink;
      box-shadow: 2px 2px 0 0 darken($soft-pink, 35);
    }

    &#{--special} {
      background-color: $bright-orange;
      box-shadow: 2px 2px 0 0 darken($bright-orange, 35);
    }
  }
}

/* 4. Grid columns */
@for $i from 1 through $columns {
  .col-span-#{$i} {
    align-items: center;
    grid-column: span $i;
    justify-content: center;
  }
}

/* 5. GIF */
.gif {
  z-index: 1;

  &#{--hidden} {
    opacity: 0;
    visibility: hidden;
  }

  &#{__wrapper} {
    animation: gif__animation--x 5s linear infinite alternate;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.5s;
  }

  &#{__img} {
    animation: gif__animation--y 3s linear infinite alternate;
    border-radius: 100%;
    height: 500px;
    width: 500px;
  }
}

/* 5.1. Animations */

@keyframes gif__animation--x {
  100% {
    transform: translateX(calc(100vw - 500px));
  }
}

@keyframes gif__animation--y {
  100% {
    transform: translateY(calc(100vh - 500px));
  }
}

// Constants
const body = document.getElementsByTagName("body")[0],
  domElements = document.querySelectorAll("body > *"),
  gif = document.getElementById("gif"),
  keyboard = document.getElementsByClassName("keyboard")[0],
  keys = [
    "Escape",
    "Backquote",
    "Digit1",
    "Digit2",
    "Digit3",
    "Digit4",
    "Digit5",
    "Digit6",
    "Digit7",
    "Digit8",
    "Digit9",
    "Digit0",
    "Minus",
    "Equal",
    "Backslash",
    "Delete",
    "Home",
    "Tab",
    "KeyQ",
    "KeyW",
    "KeyE",
    "KeyR",
    "KeyT",
    "KeyY",
    "KeyU",
    "KeyI",
    "KeyO",
    "KeyP",
    "BracketLeft",
    "BracketRight",
    "Backspace",
    "PageUp",
    "CapsLock",
    "KeyA",
    "KeyS",
    "KeyD",
    "KeyF",
    "KeyG",
    "KeyH",
    "KeyJ",
    "KeyK",
    "KeyL",
    "Semicolon",
    "Quote",
    "Enter",
    "PageDown",
    "ShiftLeft",
    "KeyZ",
    "KeyX",
    "KeyC",
    "KeyV",
    "KeyB",
    "KeyN",
    "KeyM",
    "Comma",
    "Period",
    "Slash",
    "ShiftRight",
    "ArrowUp",
    "End",
    "ControlLeft",
    "MetaLeft",
    "AltLeft",
    "Space",
    "AltRight",
    "ContextMenu",
    "ArrowLeft",
    "ArrowDown",
    "ArrowRight"
  ],
  konamiCode = [
    "ArrowUp",
    "ArrowUp",
    "ArrowDown",
    "ArrowDown",
    "ArrowLeft",
    "ArrowRight",
    "ArrowLeft",
    "ArrowRight",
    "KeyB",
    "KeyA",
    "Enter"
  ];

// Variables
let buffer = [];

// Functions
function checkForKonamiCode(pushToBuffer) {
  buffer.push(pushToBuffer);

  const stringifiedBuffer = buffer.slice(-11).toString(),
    stringifiedKonamiCode = konamiCode.toString();

  if (stringifiedBuffer === stringifiedKonamiCode) {
    gif.classList.toggle("gif--hidden");
  }
}

function scaleElements(container, elements) {
  elements.forEach((element) => {
    const scale = Math.min(
      container.offsetWidth / element.offsetWidth,
      container.offsetHeight / element.offsetHeight
    );
    if (scale <= 1 && scale > 0)
      element.style.transform = `scale(${scale - 0.1})`;
  });
}

// Digital keyboard sync
keys.forEach((key, index) => {
  document
    .getElementById(keys[index])
    .addEventListener("click", function (event) {
      checkForKonamiCode(event.toElement.id);
    });
});

window.addEventListener("keydown", ({ code }) => {
  if (keys.includes(code)) {
    document.getElementById(code).classList.add("active");
    checkForKonamiCode(code);
  }
});

window.addEventListener("keyup", ({ code }) => {
  if (keys.includes(code)) {
    document.getElementById(code).classList.remove("active");
  }
});

// Responsive scaling
scaleElements(body, domElements);
window.addEventListener("resize", () => {
  scaleElements(body, domElements);
});