<div class="game__wrapper">
  <div id="start" class="game__start">
    <div>PATT<br />ERNS</div>
  </div>
  <div class="game__logo">
    PATT<br />
    ERNS
  </div>
  <div class="game__title-wrapper">
    <div id="title" class="game__title"></div>
  </div>
  <div id="game" class="game"></div>
  <div id="score" class="game__score">0</div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");

$purple: #799df1;
$light-blue: #60c1ec;
$green: #7bd9de;
$pink: #cfb0d2;

$text: white;
$background: linear-gradient(
  60deg,
  $purple,
  $light-blue 30%,
  $green 60%,
  $pink 90%
);
$black: #000038;

html {
  @media (max-width: 767px) {
    font-size: 12px;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  color: $text;
  background: $background;
  background-size: 100% 100%;
  overflow: hidden;
  font-family: "Major Mono Display", monospace;
}

.game {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  color: $black;
  &__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  &__start {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 35vh;
    background: $background;
    transition: transform 1s ease;
    cursor: pointer;
    &:after {
      content: "";
      position: absolute;
      top: calc(50% - 10vh);
      left: calc(50% - 6.5vh);
      border-top: 13vh solid transparent;
      border-bottom: 13vh solid transparent;
      border-left: 20vh solid $black;
      pointer-events: none;
      transition: transform 1s ease;
    }
    &:hover {
      transform: scale(1.1);
      &:after {
        transform: scale(1.2);
      }
    }
    @media (max-width: 767px) {
      font-size: 30vw;
      &:after {
        top: calc(50% - 10vw);
        left: calc(50% - 6.5vw);
        border-top: 13vw solid transparent;
        border-bottom: 13vw solid transparent;
        border-left: 20vw solid $black;
      }
    }
  }
  &__logo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 1.5rem;
    color: $text;
  }
  &__title-wrapper {
    display: flex;
    justify-content: center;
    font-size: 3rem;
  }
  &__title {
    color: $text;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
  }
  &__pattern {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-align: right;
    width: 12rem;
    padding: 1rem;
  }
  &__pattern-text {
    width: 100%;
    margin-top: 1rem;
    line-height: 1.2;
    word-wrap: break-word;
  }
  &__score {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: 2rem;
    color: $text;
  }
}

.tile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0.5rem;
  font-size: 4rem;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  &:hover {
    transform: scale(1.2) rotate(-10deg);
    z-index: 1;
    box-shadow: -0.2rem 0.5rem 0.5rem 0 rgba($black, 0.5);
  }
}

const game = document.getElementById("game");
const start = document.getElementById("start");
const title = document.getElementById("title");
const scoreElement = document.getElementById("score");

let score = 0;

let level = 0;
let stage = 0;

const prepareTile = (id) => {
  const tile = document.createElement("div");
  tile.classList.add("tile");
  tile.id = id;
  return tile;
};

const basicBuildFunction = (id) => {
  const tile = prepareTile(id);
  tile.innerHTML = id;
  return tile;
};

function shuffle(array) {
  let currentIndex = array.length;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {
    // Pick a remaining element...
    let randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex]
    ];
  }
}

const firstLevel = [
  {
    title: "Bigger",
    stages: [
      {
        tiles: ["10", "20", "30", "40"],
        correct: "40"
      },
      {
        tiles: ["35", "33", "36", "40"],
        correct: "40"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      const px = document.createElement("div");
      px.style = `background-color: #000038; width: ${id}px; height: ${id}px; pointer-events: none`;
      tile.appendChild(px);
      return tile;
    }
  }
];

const levelList = [
  {
    title: "Pure",
    stages: [
      {
        tiles: ["#ff12e0", "#a2fafb", "#ffbb00", "#ff0000"],
        correct: "#ff0000"
      },
      {
        tiles: [
          "#2bbee1",
          "#09ffbb",
          "#aaff00",
          "#213611",
          "#bb0099",
          "#0000ff",
          "#21ff00",
          "#f99abb"
        ],
        correct: "#0000ff"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.style.backgroundColor = id;
      return tile;
    }
  },
  {
    title: "Happier",
    stages: [
      {
        tiles: ["😬", "😕", "😕", "🙃"],
        correct: "🙃"
      },
      {
        tiles: ["😚", "🙂", "😀", "🙃", "😵", "😵‍💫", "😑", "😘"],
        correct: "😀"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Symetrical",
    stages: [
      {
        tiles: ["🫢", "😪", "🫥", "😰"],
        correct: "🫥"
      },
      {
        tiles: ["👻", "😶‍🌫️", "🍊", "🐼", "🐡", "😜"],
        correct: "🐼"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Empty",
    stages: [
      {
        tiles: ["1", "2", "0", "3"],
        correct: "0"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      const px = document.createElement("div");
      px.style = `background-color: #000038; width: ${id}px; height: ${id}px; pointer-events: none`;
      tile.appendChild(px);
      return tile;
    }
  },
  {
    title: "Leftie",
    stages: [
      {
        tiles: ["🫲", "🤙", "👌", "👍"],
        correct: "👍"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Prime",
    stages: [
      {
        tiles: ["9", "4", "1", "8"],
        correct: "1"
      },
      {
        tiles: ["12", "7", "9", "4"],
        correct: "7"
      },
      {
        tiles: ["77", "61", "91", "4"],
        correct: "61"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.innerHTML = id;
      tile.style.fontSize = "2rem";
      return tile;
    }
  },
  {
    title: "Fast",
    stages: [
      {
        tiles: ["🥐", "🥓", "🌭", "🥩"],
        correct: "🌭"
      },
      {
        tiles: ["🫘", "🌯", "🧄", "🍞", "🧀", "🍷"],
        correct: "🌯"
      },
      {
        tiles: ["🍝", "🍅", "🥠", "🍕", "🍪", "🍨", "🍬"],
        correct: "🍕"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Turquoise",
    stages: [
      {
        tiles: ["#00ccff", "#00ffff", "#00ffcc", "#00fddf"],
        correct: "#00ffff"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.style.backgroundColor = id;
      return tile;
    }
  },
  {
    title: "Europe",
    stages: [
      {
        tiles: ["🇻🇺", "🇧🇪", "🇦🇺", "🇯🇵"],
        correct: "🇧🇪"
      },
      {
        tiles: ["🇮🇪", "🇵🇭", "🇺🇾", "🇧🇴"],
        correct: "🇮🇪"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "45deg",
    stages: [
      {
        tiles: ["45", "40", "25", "30"],
        correct: "45"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      const px = document.createElement("div");
      px.style = `background-color: #000038; width: 50%; height: 50%; transform: rotate(${id}deg); pointer-events: none`;
      tile.appendChild(px);
      return tile;
    }
  },
  {
    title: "Top",
    stages: [
      {
        tiles: ["0", "-10", "-5", "-18"],
        correct: "-18"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      const px = document.createElement("div");
      px.style = `background-color: #000038; width: 50%; height: 50%; transform: translateY(${id}px); pointer-events: none`;
      tile.appendChild(px);
      return tile;
    }
  },
  {
    title: "???",
    stages: [
      {
        tiles: ["🦁", "🐻", "🦅", "🦓"],
        correct: "🦓"
      },
      {
        tiles: ["🐊", "🦌", "🦊", "🐶"],
        correct: "🦌"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Bigger than",
    stages: [
      {
        tiles: [">", "<", "=", "×", "÷"],
        correct: ">"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Later",
    stages: [
      {
        tiles: ["🕒", "🕗", "🕠", "🕚"],
        correct: "🕚"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "???",
    stages: [
      {
        tiles: ["🍆", "🌽", "🥕", "🍋"],
        correct: "🍋"
      },
      {
        tiles: ["🥔", "🧅", "🫑", "🍓"],
        correct: "🍓"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.innerHTML = id;
      return tile;
    }
  },
  {
    title: "???",
    stages: [
      {
        tiles: ["🏀", "🥎", "🎱", "🏐"],
        correct: "🎱"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "School?",
    stages: [
      {
        tiles: ["🖋️", "📏", "🖍️", "🎒", "🔧"],
        correct: "🔧"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "???",
    stages: [
      {
        tiles: ["🏈", "⚽", "⚾", "🥎"],
        correct: "🏈"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Warmer",
    stages: [
      {
        tiles: ["#ff0000", "#ff3344", "#ff00ee", "#ff2222", "#ff9900"],
        correct: "#ff0000"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.style.backgroundColor = id;
      return tile;
    }
  },
  {
    title: "Lighter",
    stages: [
      {
        tiles: ["#eeeedd", "#ccbbbb", "#bbcccc", "#ddccdd", "#aa99aa"],
        correct: "#eeeedd"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.style.backgroundColor = id;
      return tile;
    }
  },
  {
    title: "Black",
    stages: [
      {
        tiles: ["#000000", "#000022", "#330000", "#111111", "#222200"],
        correct: "#000000"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.style.backgroundColor = id;
      return tile;
    }
  },
  {
    title: "Light?",
    stages: [
      {
        tiles: ["🕯️", "💡", "🔦", "🧨"],
        correct: "🧨"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "???",
    stages: [
      {
        tiles: ["🐶", "🐱", "🐹", "🦊"],
        correct: "🦊"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Love?",
    stages: [
      {
        tiles: ["💜", "💙", "💚", "💛", "🩷", "💔"],
        correct: "💔"
      }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Moon?",
    stages: [
      { tiles: ["🌒", "🌓", "🌔", "🟡", "🌖", "🌗", "🌘", "🌑"], correct: "🟡" }
    ],
    buildFunction: basicBuildFunction
  },
  {
    title: "Ace?",
    stages: [{ tiles: ["♠︎", "♥︎", "♦︎", "♣︎", "♟︎"], correct: "♟︎" }],
    buildFunction: basicBuildFunction
  },
  {
    title: "Death?",
    stages: [{ tiles: ["🪦", "👻", "💀", "⛄"], correct: "⛄" }],
    buildFunction: basicBuildFunction
  },
  {
    title: "America?",
    stages: [{ tiles: ["🇲🇽", "🇨🇺", "🇧🇷", "🇨🇴", "🇮🇹"], correct: "🇮🇹" }],
    buildFunction: basicBuildFunction
  },
  {
    title: "???",
    stages: [{ tiles: ["🥳", "🎊", "🎈", "🎉"], correct: "🎈" }],
    buildFunction: basicBuildFunction
  },
  {
    title: "Transparent",
    stages: [
      {
        tiles: ["#799df1", "transparent", "#60c1ec", "#7bd9de", "#cfb0d2"],
        correct: "transparent"
      }
    ],
    buildFunction: (id) => {
      const tile = prepareTile(id);
      tile.style.backgroundColor = id;
      return tile;
    }
  },
  {
    title: "???",
    stages: [{ tiles: ["🎸", "💻", "📱", "🪇"], correct: "🪇" }],
    buildFunction: basicBuildFunction
  }
];

shuffle(levelList);

const levels = [...firstLevel, ...levelList];

const checkTile = (event) => {
  if (event.target.id === levels[level].stages[stage].correct) {
    score = score + 2;
    winStage();
  } else {
    score = score - 1;
    event.target.style.opacity = "30%";
  }
  scoreElement.innerHTML = score;
};

const generateLevel = () => {
  game.innerHTML = "";
  const currentLevel = levels[level];
  title.innerHTML = `${level}-${currentLevel.title}`;

  const tiles = currentLevel.stages[stage].tiles;
  shuffle(tiles);

  tiles.forEach((tile) => {
    const tileElement = currentLevel.buildFunction(tile);
    tileElement.addEventListener("click", checkTile);
    game.appendChild(tileElement);
  });
};

const winGame = () => {
  score.innerHTML = "";
  game.style.fontSize = "2rem";
  game.innerHTML = `Your score is ${score} ${
    score > 10 ? (score > 40 ? "😄" : "🤨") : "😨"
  }`;
  title.innerHTML = "THE END";
};

const winStage = () => {
  stage++;
  if (stage >= levels[level].stages.length) {
    level++;
    stage = 0;

    if (level >= levels.length) {
      winGame();
      return;
    }
  }
  generateLevel();
};

start.addEventListener("click", () => (start.style.display = "none"));

generateLevel();