<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->

    <script src="public/deps/htmx.min.js"></script>
    <link
      href="../public/output.css"
      th:href="'public/output.css'"
      rel="stylesheet"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="../public/images/favicon-32x32.png"
      th:href="'public/images/favicon-32x32.png'"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap"
      rel="stylesheet"
    />
    <title>Frontend Mentor | Rock, Paper, Scissors</title>

    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <main
      class="flex flex-col justify-between items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom"
    >
      <section
        id="heading"
        class="flex flex-row items-center w-10/12 rounded-md md:w-1/2 md:h-36 md:rounded-xl border-[3px] border-header-outline h-[100px]"
      >
        <h1
          class="pl-4 text-xl font-bold leading-none text-white uppercase md:text-5xl grow md:leading-[2.2rem]"
        >
          <span class="block">rock</span> <span class="block">paper</span>
          <span class="block">scissors</span>
        </h1>
        <h2
          class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md md:mr-5 md:w-40 md:h-4/5 md:rounded-lg w-[80px] h-[70px] text-score-text rouned-md"
        >
          <span class="text-xs uppercase md:text-xl md:leading-none">Score</span>
          <span id="the-score-number" class="text-4xl font-extrabold md:text-6xl">12</span>
          <script type="text/javascript">
            document.body.addEventListener("updateScore", function (evt) {
              let scoreElement = document.querySelector("#the-score-number");
              let newScore =
                parseInt(scoreElement.textContent) + evt.detail.value;
              console.log(
                `the score will update by ${evt.detail.value} to ${newScore}`
              );
              localStorage.setItem("score", newScore);
              scoreElement.textContent = newScore;
            });
          </script>
          <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", (event) => {
              let scoreElement = document.querySelector("#the-score-number");
              let storedScore = localStorage.getItem("score");
              if (storedScore !== null) {
                scoreElement.textContent = storedScore;
              } else {
                scoreElement.textContent = 0;
                localStorage.setItem("score", 0);
              }
            });
          </script>
        </h2>
      </section>

      <section
        id="controls"
        class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative md:scale-150"
      >
        <!-- This control will be repeated 3 times, with different htmx requests -->
        <div
          th:each="choiceBadgeData : ${choiceBadges}"
          id="paper-control"
          th:id="${choiceBadgeData.c.name} + '-control'"
          hx-get="/select/paper"
          th:hx-get="'/select/' + ${choiceBadgeData.c.name}"
          hx-target="#controls"
          hx-swap="outerHTML"
        >
          <!-- This badge is fragment to be repeated in other pages as well -->
          <div
            th:fragment="choiceBadge (choiceBadgeData)"
            th:id="${choiceBadgeData.c.name}"
            id="paper"
            class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
            style="
              --diameter: 8rem;
              --bg-dark: hsl(230, 89%, 62%);
              --bg-bright: hsl(230, 89%, 65%);
              --top-offset: 6rem;
              --left-offset: 6rem;
              --translation: 50%;
              position: absolute;
            "
            th:style="| --diameter: ${choiceBadgeData.s.diameter};
                         --bg-dark: ${choiceBadgeData.s.bgDark};
                         --bg-bright: ${choiceBadgeData.s.bgBright};
                         ${choiceBadgeData.p.toStyle}; |"
          >
            <div
              class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
            ></div>
            <img
              src="../public/images/icon-paper.svg"
              th:src="${choiceBadgeData.c.iconPath}"
              class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
            />
          </div>
        </div>

        <!-- This controls is only for static preview -->
        <div
          th:remove="all"
          id="scissors"
          class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
          style="
            --diameter: 8rem;
            --bg-dark: hsl(39, 89%, 49%);
            --bg-bright: hsl(40, 84%, 53%);
            --top-offset: 6rem;
            --left-offset: 17rem;
            --translation: 50%;
            position: absolute;
          "
        >
          <div
            class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
          ></div>
          <img
            src="../public/images/icon-scissors.svg"
            class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
          />
        </div>

        <!-- This controls is only for static preview -->
        <div
          th:remove="all"
          id="rock"
          class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
          style="
            --diameter: 8rem;
            --bg-dark: hsl(349, 71%, 52%);
            --bg-bright: hsl(349, 70%, 56%);
            --top-offset: 15rem;
            --left-offset: 11.5rem;
            --translation: 50%;
            position: absolute;
          "
        >
          <div
            class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
          ></div>
          <img
            src="../public/images/icon-rock.svg"
            class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
          />
        </div>
      </section>

      <!-- This is rules overlay modal window -->
      <dialog
        id="rules-dialog"
        class="w-screen h-screen md:rounded-lg md:w-[400px] md:h-[400px]"
      >
        <div class="flex flex-col justify-between w-full h-full">
          <h1
            class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase md:h-12"
          >
            Rules
          </h1>
          <div class="grid place-content-center grow">
            <img
              src="../public/images/image-rules.svg"
              alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock."
            />
          </div>
          <button
            id="close-dialog-button"
            class="grid place-content-center h-32 md:absolute md:top-5 md:w-12 md:h-12 md:end-5"
          >
            <img
              src="../public/images/icon-close.svg"
              alt="Close rules display"
            />
          </button>
        </div>
      </dialog>

      <div class="py-12">
        <button
          id="rules-button"
          class="w-32 h-10 text-base text-2xl tracking-widest text-white uppercase rounded-lg border border-white"
        >
          Rules
        </button>
        <script type="text/javascript">
          const dialog = document.getElementById("rules-dialog");
          const openButton = document.getElementById("rules-button");
          const closeButton = document.getElementById("close-dialog-button");
          openButton.addEventListener("click", function () {
            dialog.showModal();
          });
          closeButton.addEventListener("click", function () {
            dialog.close();
          });
        </script>
      </div>
    </main>
    <footer class="fixed inset-x-0 bottom-0 attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Source code at <a href="https://github.com/efim/Learning-HTMX">Your Name Here</a>.
    </footer>
  </body>
</html>
