Function initLoop

docs/src/javascripts/lifecycle.js:219–285

(host)

  ];

  function initLoop(host) {
    if (!host) return;
    host.innerHTML = "";
    host.classList.add("lc-loop");

    const grid = htmlEl("div", { class: "lc-loop__grid" });
    const cards = LOOP_VERBS.map((v, i) => {
      const card = htmlEl("div", { class: "lc-loop__card", "aria-label": v.label });
      card.appendChild(htmlEl("div", { class: "lc-loop__step" }, "step " + (i + 1)));
      card.appendChild(htmlEl("div", { class: "lc-loop__verb" }, [
        htmlEl("span", { class: "lc-loop__prompt" }, "$ "),
        v.label,
      ]));
      card.appendChild(htmlEl("div", { class: "lc-loop__desc" }, v.desc));
      grid.appendChild(card);
      return card;
    });
    host.appendChild(grid);

    host.appendChild(htmlEl("div", { class: "lc-loop__foot" }, [
      htmlEl("span", { class: "lc-loop__arrow" }, "↻"),
      htmlEl("span", { class: "lc-muted" }, "scaffold → eval → deploy → observe → repeat"),
    ]));

    // Cycle the active class through cards.
    let active = 0;
    function setActive(i) {
      cards.forEach((c, idx) => c.classList.toggle("lc-loop__card--active", idx === i));
    }
    setActive(0);

    let timer = null;
    function tick() {
      active = (active + 1) % cards.length;
      setActive(active);
    }
    function start() {
      if (timer) return;
      timer = setInterval(tick, 1600);
    }
    function restart() {
      if (timer) clearInterval(timer);
      timer = setInterval(tick, 1600);
    }

    // Click any card to jump to it (and restart the rotation from there).
    cards.forEach((card, idx) => {
      card.style.cursor = "pointer";
      card.setAttribute("role", "button");
      card.setAttribute("tabindex", "0");
      card.addEventListener("click", () => {
        active = idx;
        setActive(active);
        restart();
      });
      card.addEventListener("keydown", (e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();