<!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 -->

    <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 border-[3px] border-header-outline h-[100px]"
      >
        <h1
          class="pl-4 text-xl font-bold leading-none text-white uppercase grow"
        >
          <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 w-[80px] h-[70px] text-score-text rouned-md"
        >
          <span class="text-xs uppercase">Score</span
          ><span class="text-4xl font-extrabold">12</span>
        </h2>
      </section>

      <div id="showdown-table" th:fragment="showdown-table (showdownState)" class="md:scale-150">
        <section class="grid grid-cols-2 w-[375px] h-[300px]">
          <div
            id="players-choice"
            class="flex relative flex-col items-center pt-14"
          >
            <!-- This will be imported fragment -->
            <!-- <p th:text="${showdownState}">Hello</p> -->
            <div
              th:replace="index::choiceBadge (${showdownState.playersChoice})"
            ></div>
            <!-- This is end of the game animated halo -->
            <div
              class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[150px] h-[150px]"
          th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
            ></div>
            <div
              class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[200px] h-[200px]"
          th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
            ></div>
            <div
                class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[260px] h-[260px]"
          th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
              ></div>
            <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: 0rem;
                --left-offset: 0rem;
                --translation: 0%;
                position: relative;
              "
            >
              <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>
            <p
              class="absolute top-2/3 tracking-widest text-center text-white uppercase text-md"
            >
              You picked
            </p>
          </div>

          <div
            id="house-choice"
            class="flex relative flex-col items-center pt-14"
          >
            <!-- Here will be imported fragment -->
            <!-- conditionally either house choice or request for house choice -->
            <!-- <div th:text="${showdownState.houseChoice.nonEmpty} ? 'nonEmpty' : 'empty'">...</div> -->
            <div
              th:replace="${showdownState.houseChoice.nonEmpty} ? ~{index::choiceBadge (${showdownState.houseChoice.get})} : ~{::house-choice-placeholder}"
              class="w-0 h-0"
              th:class=""
            >
              ...
            </div>
            <!-- This is end of the game animated halo for house choice -->
            <div
              class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[150px] h-[150px]"
          th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
            ></div>
            <div
              class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[200px] h-[200px]"
          th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
            ></div>
            <div
                class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[260px] h-[260px]"
          th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
              ></div>
            <!-- This will be shown before the house made the choice, this will trigger timed request for house choice -->
            <div class="w-full h-full" th:remove="all">
              <div
                class="flex relative flex-col items-center h-full"
                th:fragment="house-choice-placeholder"
                th:hx-get="'/house-choice/' + ${showdownState.playersChoice.c.name}"
                hx-get="/house-choice/paper"
                hx-target="#showdown-table"
                hx-trigger="load delay:3s"
                hx-swap="outerHTML"
              >
                <div
                  class="rounded-full mt-[1rem] bg-radial-gradient-top h-[100px] w-[100px]"
                ></div>
                <div
                  class="absolute bg-white rounded-full opacity-20 w-[100px] h-[100px] mt-[1rem] pulsing-animation"
                ></div>
              </div>
            </div>
            <p
              class="absolute top-2/3 tracking-widest text-center text-white uppercase text-md"
            >
              The house picked
            </p>
          </div>
        </section>

        <!-- FRAGMENT : showdown result -->
        <section
          id="message"
          class="flex flex-col items-center text-white slowly-appear"
          th:classappend="${showdownState.gameResult.nonEmpty} ? '' : 'invisible'"
        >
          <p
            class="text-6xl font-bold text-center uppercase"
            th:text="${showdownState.gameResult.nonEmpty} ? 'You ' + ${showdownState.gameResult.get} : 'awesome'"
          >
            You lose
          </p>
          <a
            class="grid place-content-center mt-6 w-9/12 h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
            href="/"
          >
            Play again
          </a>
        </section>
      </div>

      <div class="py-12">
        <button
          class="w-32 h-10 text-base text-2xl tracking-widest text-white uppercase rounded-lg border border-white"
        >
          Rules
        </button>
      </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
      >. Coded by <a href="#">Your Name Here</a>.
    </footer>
  </body>
</html>
