script.js

(function () {
  const triggerPlace = (e) => {
    if (e.target.id === "haptic-trigger" || e.target.id === "haptic") {
      return;
    }
    e.preventDefault();
    onPlace();
  };

  document.addEventListener("mousedown", triggerPlace);
  document.addEventListener("touchstart", triggerPlace, { passive: false });

  document.addEventListener("keydown", (event) => {
    if (event.code !== "Space") {
      return
    }

    event.preventDefault();
    onPlace();
  });
})();

const triggerHaptic = (isIOS, times = 1, durationMs = 0, delayMs = 0) => {
  // for IOS devices, because they work funny
  const trigger = document.getElementById("haptic-trigger");
  if (isIOS) {
    for (let pulse = 0; pulse < times; pulse += 1) {
      setTimeout(() => {
        trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
      }, pulse * delayMs);
    }
    return;
  }

  // for other devices supporting the Vibration API
  if ('vibrate' in navigator) {
    const pattern = [];
    for (let pulse = 0; pulse < times; pulse += 1) {
      pattern.push(durationMs, delayMs);
    }
    pattern.pop();
    navigator.vibrate(pattern);
  }
};

const templateCssProperty = (style, propertyName, dict) => {
  const raw = style.getPropertyValue(propertyName).trim();
  if (!dict || Object.keys(dict).length === 0) {
    return raw;
  }

  const result = raw.replace(/\{(.*?)\}/g, (_, key) => {
    const value = dict[key.trim()];
    return value !== undefined ? value : "";
  });
  return result;
};

const readCssPropertyAsNumber = (style, propertyName) => {
  const value = parseFloat(style.getPropertyValue(propertyName));
  if (Number.isFinite(value)) {
    return value;
  }

  return 0;
};

const getBlockSize = (block, style = getComputedStyle(block)) => ({
  width: readCssPropertyAsNumber(style, "--bw"),
  height: readCssPropertyAsNumber(style, "--bh"),
});


const getTopTwoBlocks = () => {
  const blocks = document.querySelectorAll(".tower .block");

  return {
    topBlock: blocks[0],
    belowBlock: blocks[1],
  };
};

const setScore = (score) => {
  const scoreDiv = document.querySelector('.score');
  const numbersContainer = document.querySelector('.numbers');

  scoreDiv.innerHTML = '';

  const digits = String(score).split('');

  digits.forEach(d => {
    const digit = numbersContainer.querySelector(`.N${d}`);
    if (!digit) return;

    const digitClone = digit.cloneNode(true);
    scoreDiv.appendChild(digitClone);
  });
};

const setFavicon = (score) => {
  const faviconLink = document.querySelector('link[rel="icon"]');
  const faviconUrl = new URL("favicon.php", window.location.href);

  faviconUrl.searchParams.set("score", String(score));
  faviconLink.href = faviconUrl.toString();
};

const setLostValue = (value) => {
  document.body.style.setProperty("--lost", value);
};

const resetGame = (delayMs = 0) => {
  setLostValue(1);

  setTimeout(() => {
    const tower = document.querySelector(".tower");

    tower.innerHTML = templateCssProperty(getComputedStyle(document.documentElement), "--string-initial-blocks");
    document.body.style.setProperty("--i", readCssPropertyAsNumber(getComputedStyle(document.documentElement), "--initial-blocks"));
    const initialScore = readCssPropertyAsNumber(getComputedStyle(document.documentElement), "--initial-score");
    setScore(initialScore);
    setFavicon(initialScore);

    setTimeout(() => {
      setLostValue(0);
    }, 100);
  }, delayMs);
};

const onPlace = () => {
  const { topBlock, belowBlock } = getTopTwoBlocks();

  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  const rootStyle = getComputedStyle(document.documentElement);
  const snapTresholdPercent = readCssPropertyAsNumber(rootStyle, "--snap-threshold");
  const nbHapticFeedbackPlace = readCssPropertyAsNumber(rootStyle, "--nb-haptic-feedback-place");
  const nbHapticFeedbackSnap = readCssPropertyAsNumber(rootStyle, "--nb-haptic-feedback-snap");
  const nbHapticFeedbackLose = readCssPropertyAsNumber(rootStyle, "--nb-haptic-feedback-lose");
  const hapticFeedbackDurationMs = readCssPropertyAsNumber(rootStyle, "--haptic-feedback-duration-ms");
  const hapticFeedbackDelayMs = readCssPropertyAsNumber(rootStyle, "--haptic-feedback-delay-ms");
  const loseAnimationMs = readCssPropertyAsNumber(rootStyle, "--lose-animation-ms");

  const topBlockStyle = getComputedStyle(topBlock);
  const topBlockI = parseInt(topBlockStyle.getPropertyValue("--i")) || 0;
  const nextTopBlockI = topBlockI + 1;
  const belowBlockStyle = getComputedStyle(belowBlock);
  const topSize = getBlockSize(topBlock, topBlockStyle);
  const belowSize = getBlockSize(belowBlock, belowBlockStyle);
  const movingAlongX = topBlockStyle.animationName.includes("first-block-x");
  const movingAxis = movingAlongX ? "x" : "y";

  const topOx = readCssPropertyAsNumber(topBlockStyle, "--ox");
  const topOy = readCssPropertyAsNumber(topBlockStyle, "--oy");
  const topSlideX = readCssPropertyAsNumber(topBlockStyle, "--slide-x");
  const topSlideY = readCssPropertyAsNumber(topBlockStyle, "--slide-y");
  const belowOx = readCssPropertyAsNumber(belowBlockStyle, "--ox");
  const belowOy = readCssPropertyAsNumber(belowBlockStyle, "--oy");

  const topPosition = movingAxis === "x" ? topOx + topSlideX : topOy + topSlideY;
  const belowPosition = movingAxis === "x" ? belowOx : belowOy;
  const belowPerpPosition = movingAxis === "x" ? belowOy : belowOx;

  const overlapSize = computeOverlapSize(movingAxis, topSize, belowSize, topPosition, belowPosition);
  if (!overlapSize) {
    triggerHaptic(isIOS, nbHapticFeedbackLose, hapticFeedbackDurationMs, hapticFeedbackDelayMs);
    resetGame(loseAnimationMs);
    return;
  }

  const center = computeOverlapCenter(
    movingAxis,
    topSize,
    belowSize,
    topPosition,
    belowPosition,
    belowPerpPosition
  );

  const snapResult = snapOverlapIfClose({
    axis: movingAxis,
    topRectanglePosition: topPosition,
    belowRectanglePosition: belowPosition,
    belowRectangleSize: belowSize,
    belowRectangleOrigin: { ox: belowOx, oy: belowOy },
    overlapSize,
    overlapOrigin: { ox: center.ox, oy: center.oy },
    snapPercentage: snapTresholdPercent,
  });

  const nextWidth = snapResult.size.width;
  const nextHeight = snapResult.size.height;
  const newOx = snapResult.origin.ox;
  const newOy = snapResult.origin.oy;
  const snapped = snapResult.snapped;
  const nbHapticFeedback = snapped ? nbHapticFeedbackSnap : nbHapticFeedbackPlace;

  topBlock.style.setProperty("--bw", `${nextWidth}px`);
  topBlock.style.setProperty("--bh", `${nextHeight}px`);
  topBlock.style.setProperty("--ox", `${newOx}px`);
  topBlock.style.setProperty("--oy", `${newOy}px`);
  if (snapped) {
    topBlock.classList.add("snapped");
  }

  //FIXME: This is ugly, going over the whole list of blocks just to update the idx is not very cool
  const blocks = document.querySelectorAll(".tower .block");
  blocks.forEach((block, index) => {
    block.style.setProperty("--i", index + 1);
  });

  document.querySelector(".tower").insertAdjacentHTML(
    "afterbegin",
    templateCssProperty(rootStyle, "--string-block", {
      nextTopBlockI,
      nextWidth,
      nextHeight,
      newOx,
      newOy,
    })
  );

  document.querySelector("body").style.setProperty("--i", nextTopBlockI);

  setScore(topBlockI);
  setFavicon(topBlockI);
  triggerHaptic(isIOS, nbHapticFeedback, hapticFeedbackDurationMs, hapticFeedbackDelayMs);
};