{{ define "main" }}

<div id="whittler-game">
  <div class="whittler-birds">
    <img src="/images/games/whittler/birds1.png" />
  </div>
  <div class="whitter-game-container">
    {{ if .Params.logo }}
    <div class="banner-image">
      <picture>
        <img
          src="{{ .Params.logo }}"
          srcset="{{ .Params.logo }} 1x"
          width="430"
          alt="{{ .Title }}"
          class="header-image"
        />
      </picture>
    </div>
    {{ end }}

    <h1>
      a game where you try to earn ¥1,000,000 as quickly as possible so you can
      retire
    </h1>

    <div class="iframe-container">
      <div>
        <iframe src="https://ritual.sh/games/clicker/index.html"></iframe>
      </div>
    </div>
    <div class="game-info">
      <div class="game-highscores">
        <div>
          <h2>High Scores</h2>
          <div id="whittler-highscores"></div>
        </div>
      </div>
      <div class="game-details">
        <div>
          <h2>How to Play</h2>
          <p>
            <strong
              >Click the log pile, automatically whittle stuff, buy
              unlocks.</strong
            >
          </p>
          <p>
            A game should take approximately 20 minutes. Many of the unlocks
            synergise with each other, see which combinations work best early
            and late game!
          </p>
          <ul>
            <li>
              <strong>Market Charm</strong> - Flat increase to sale price.
            </li>
            <li><strong>Sharper Blades</strong> - More wood per click.</li>
            <li><strong>Trade Winds</strong> - More sales per tick.</li>
            <li><strong>Whittler's Focus</strong> - More whittles per tick.</li>
            <li>
              <strong>Guild Contract</strong> - Sell excess whittles in lots of
              100 at 20% reduced income.
            </li>
            <li>
              <strong>Forest Friends</strong> - Animals start whittling for you,
              for some reason.
            </li>
            <li>
              <strong>Beaver Brigade</strong> - Automatically generate wood
              every tick.
            </li>
            <li>
              <strong>Artisan's Touch</strong> - A percentage increase in sale
              price.
            </li>
            <li>
              <strong>Legendary Crafter</strong> - Simps just give you cash
              every tick.
            </li>
          </ul>
          <p>
            <strong>Note:</strong> This is a very early version of Whittler, it
            will be buggy and the balance will suck. There will be more
            releases. If you have feedback, bug reports, or suggestions of new
            modifiers or features just drop me an
            <a href="mailto:dan@ritual.sh">email!</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    const gameContainer = document.getElementById("whittler-game");
    const birds = document.querySelector(".whittler-birds");

    // Parallax effect
    document.addEventListener("mousemove", function (e) {
      const windowWidth = window.innerWidth;
      const mouseX = e.clientX;

      // Calculate percentage from center (-1 to 1)
      const percentX = (mouseX / windowWidth - 0.5) * 2;

      // Maximum shift amount in pixels
      const maxShift = 50;

      // Different parallax speeds for each layer (layer 1 is closest, moves most)
      const layer1Shift = percentX * maxShift * 0.6;
      const layer2Shift = percentX * maxShift * 0.5;
      const layer3Shift = percentX * maxShift * 0.35;
      const layer4Shift = percentX * maxShift * 0.2;
      const layer5Shift = percentX * maxShift * 0.1;

      gameContainer.style.backgroundPosition =
        `${layer1Shift}px 0, ` +
        `${layer2Shift}px 0, ` +
        `${layer3Shift}px 0, ` +
        `${layer4Shift}px 0, ` +
        `${layer5Shift}px 0`;
    });

    // Occasional bird flying
    function flyBirds() {
      const randomTop = Math.random() * 2 + 5;
      birds.style.top = randomTop + "%";

      birds.classList.add("flying");

      // Remove class after animation completes
      setTimeout(() => {
        birds.classList.remove("flying");

        const nextFlight = Math.random() * 20000 + 10000;
        setTimeout(flyBirds, nextFlight);
      }, 15000);
    }

    // Wait  2 seconds to start first flyby
    const initialDelay = 2000;
    setTimeout(flyBirds, initialDelay);
  })();
</script>

{{ end }}