script.js

function ascii() {
  const LINES = [
    "        .o8                                              .o8               ",
    '        "888                                             "888              ',
    "    .oooo888  oooo oooo    ooo ooo. .oo.    .oooo.o  .oooo888  oo.ooooo.  ",
    "    d88' `888   `88. `88.  .8'  `888P\"Y88b  d88(  \"8 d88' `888   888' `88b",
    "    888   888    `88..]88..8'    888   888  `\"Y88b.  888   888   888   888 ",
    "    888   888     `888'`888'     888   888  o.  )88b 888   888   888   888 ",
    "    `Y8bod88P\"     `8'  `8'     o888o o888o 8\"\"888P' `Y8bod88P\"  888bod8P' ",
    "                                                                888        ",
    "                                                                o888o      ",
    "                                                                           ",
    "      [ github ]           [ soundcloud ]           [ instagram ]          ",
    "                                                                           ",
  ];

  // row: which line (0-indexed), c0/c1: first and last character column of the button (0-indexed, inclusive)
  // To find positions: count characters in the LINES string for that row.
  const BUTTONS = [
    { row: 10, c0: 6, c1: 15, url: "https://github.com/dwnsdp" },
    {
      row: 10,
      c0: 27,
      c1: 41,
      url: "https://soundcloud.com/jake-mcgowan-music",
    },
    {
      row: 10,
      c0: 52,
      c1: 64,
      url: "https://www.instagram.com/j.w.i.mcgowan/",
    },
  ];

  const SCRAMBLE = [
    " ",
    "!",
    '"',
    "#",
    "$",
    "%",
    "&",
    "'",
    "(",
    ")",
    "*",
    "+",
    ",",
    "-",
    ".",
    "/",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    ":",
    ";",
    "<",
    "=",
    ">",
    "?",
    "@",
    "[",
    "\\",
    "]",
    "^",
    "_",
    "`",
    "{",
    "|",
    "}",
    "~",
  ];
  const FRAME_MS = 58,
    MIN_F = 7,
    MAX_F = 14,
    RADIUS = 50,
    MOVE_WIN = 130;

  let mx = -9999,
    my = -9999,
    lastMove = 0;
  let pmx = -9999,
    pmy = -9999; // previous mouse position
  document.addEventListener("mousemove", (e) => {
    pmx = mx;
    pmy = my;
    mx = e.clientX;
    my = e.clientY;
    lastMove = performance.now();
  });

  const pre = document.getElementById("art");
  const cells = [];
  const maxLineWidth = Math.max(...LINES.map((l) => l.length));

  function recalculateLayout() {
    // Clear previous layout
    pre.innerHTML = "";
    cells.length = 0;

    // Dynamic font sizing: ensure art fits horizontally
    let fontSize = 18; // start with default
    let charWidth, charHeight;

    while (fontSize > 6) {
      // minimum font size
      pre.style.fontSize = fontSize + "px";
      const testSpan = document.createElement("span");
      testSpan.className = "character";
      testSpan.textContent = "X";
      pre.appendChild(testSpan);
      const charRect = testSpan.getBoundingClientRect();
      charWidth = charRect.width;
      charHeight = charRect.height;
      pre.removeChild(testSpan);

      // Check if art fits horizontally
      if (maxLineWidth * charWidth <= window.innerWidth * 0.95) {
        break;
      }
      fontSize--;
    }

    // Calculate how many rows and columns fit on screen
    const maxCols = Math.floor(window.innerWidth / charWidth);
    const maxRows = Math.floor(window.innerHeight / charHeight);

    // Calculate padding to center the art
    const topPadding = Math.floor((maxRows - LINES.length) / 2);
    const leftPadding = Math.floor((maxCols - maxLineWidth) / 2);
    const bottomPadding = maxRows - LINES.length - topPadding;
    const rightPadding = maxCols - maxLineWidth - leftPadding;

    // Build padded lines
    const paddedLines = [];

    // Top padding
    for (let i = 0; i < topPadding; i++) {
      paddedLines.push(" ".repeat(maxCols));
    }

    // Content lines with left/right padding
    LINES.forEach((line) => {
      const padded =
        " ".repeat(leftPadding) +
        line.padEnd(maxLineWidth) +
        " ".repeat(rightPadding);
      paddedLines.push(padded);
    });

    // Bottom padding
    for (let i = 0; i < bottomPadding; i++) {
      paddedLines.push(" ".repeat(maxCols));
    }

    // Now render with buttons
    paddedLines.forEach((line, li) => {
      if (li > 0) pre.appendChild(document.createTextNode("\n"));

      // Adjust button positions for new padding
      const btnMap = {};
      BUTTONS.filter((b) => b.row + topPadding === li).forEach((b) => {
        for (let c = b.c0 + leftPadding; c <= b.c1 + leftPadding; c++)
          btnMap[c] = b;
      });

      let col = 0;
      const chars = [...line];

      while (col < chars.length) {
        const btn = btnMap[col];

        if (btn && btn.c0 + leftPadding === col) {
          // Start of a button: wrap chars in <a>
          const a = document.createElement("a");
          a.href = btn.url;
          a.target = "_blank";
          a.rel = "noopener noreferrer";
          a.className = "btn-link";

          for (
            let ci = btn.c0 + leftPadding;
            ci <= btn.c1 + leftPadding && ci < chars.length;
            ci++
          ) {
            const s = document.createElement("span");
            s.className = "character btn-char";
            s.textContent = chars[ci];
            a.appendChild(s);
            cells.push({
              s,
              orig: chars[ci],
              x: 0,
              y: 0,
              on: false,
              frame: 0,
              total: 0,
              lastT: 0,
              prot: true,
            });
          }

          pre.appendChild(a);
          col = btn.c1 + leftPadding + 1;
        } else {
          const s = document.createElement("span");
          s.className = "character";
          s.textContent = chars[col];
          pre.appendChild(s);
          cells.push({
            s,
            orig: chars[col],
            x: 0,
            y: 0,
            on: false,
            frame: 0,
            total: 0,
            lastT: 0,
            prot: false,
          });
          col++;
        }
      }
    });

    if (document.fonts.ready) {
      document.fonts.ready.then(cachePos);
    } else {
      cachePos();
    }
  }

  recalculateLayout();

  function cachePos() {
    cells.forEach((c) => {
      const r = c.s.getBoundingClientRect();
      c.x = r.left + r.width * 0.5;
      c.y = r.top + r.height * 0.5;
    });
  }

  function startAnim(c, now) {
    c.on = true;
    c.frame = 0;
    c.total = MIN_F + Math.floor(Math.random() * (MAX_F - MIN_F + 1));
    c.lastT = now;
  }

  function raf(now) {
    const moving = now - lastMove < MOVE_WIN;

    // Helper function to check if a point is within radius of any point on the line from pmx,pmy to mx,my
    function isNearMousePath(cx, cy) {
      if (!moving) return false;

      // Vector from previous to current mouse position
      const dx = mx - pmx;
      const dy = my - pmy;
      const distSq = dx * dx + dy * dy;

      if (distSq === 0) {
        // No movement, just check current position
        const cdx = cx - mx;
        const cdy = cy - my;
        return cdx * cdx + cdy * cdy < RADIUS * RADIUS;
      }

      // Find closest point on the line segment
      const t = Math.max(
        0,
        Math.min(1, ((cx - pmx) * dx + (cy - pmy) * dy) / distSq),
      );
      const closestX = pmx + t * dx;
      const closestY = pmy + t * dy;

      const cdx = cx - closestX;
      const cdy = cy - closestY;
      return cdx * cdx + cdy * cdy < RADIUS * RADIUS;
    }

    for (const c of cells) {
      if (c.prot) continue;
      const trig = isNearMousePath(c.x, c.y);
      if (trig && !c.on) startAnim(c, now);
      if (c.on && now - c.lastT >= FRAME_MS) {
        c.lastT = now;
        c.frame++;
        if (c.frame >= c.total) {
          if (trig) {
            c.frame = 0;
            c.total = MIN_F + Math.floor(Math.random() * (MAX_F - MIN_F + 1));
            c.s.textContent =
              SCRAMBLE[Math.floor(Math.random() * SCRAMBLE.length)];
            c.s.classList.add("lit");
          } else {
            c.on = false;
            c.s.textContent = c.orig;
            c.s.classList.remove("lit");
          }
        } else {
          c.s.textContent =
            SCRAMBLE[Math.floor(Math.random() * SCRAMBLE.length)];
          c.s.classList.add("lit");
        }
      }
    }
    requestAnimationFrame(raf);
  }

  requestAnimationFrame(() => {
    window.addEventListener("resize", recalculateLayout);
    requestAnimationFrame(raf);
  });
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", ascii);
} else {
  ascii();
}