{# A backdrop (docs/backgrounds.md): the scene the page's

   `#backdrop-data` names (written just before this include) drawn by the

   engine, Rust compiled to WebAssembly. The viewer's choice (Settings › Appearance) is a cookie;

   unset, a touch-only device or Save-Data gets a still sky. Any failure

   leaves no backdrop and nothing else changed. A sky with `live` polls

   `/sky/arrivals` for what happened since and adds it. #}

<canvas id="backdrop" aria-hidden="true"></canvas>

<script type="module">

const canvas = document.getElementById("backdrop");

const chosen = document.cookie.match(/(?:^|; )backdrop=(moving|still|off)/);

const touch = matchMedia("(pointer: coarse)").matches && !matchMedia("(pointer: fine)").matches;

const pick = chosen ? chosen[1] : (touch || (navigator.connection && navigator.connection.saveData) ? "still" : "moving");

if (pick === "off") {

  canvas.remove();

} else {

  try {

    const bd = await import("/static/backdrop/backdrop.js?v={{ shell.assets() }}");

    await bd.default({ module_or_path: "/static/backdrop/backdrop_bg.wasm?v={{ shell.assets() }}" });

    const data = JSON.parse(document.getElementById("backdrop-data").textContent);

    bd.start(canvas, data, pick === "still");

    // Live (§5): a sky that names its repositories (`mine` or `hub`) asks

    // every 30 s, while the page is shown, what happened since.

    if (data.live) {

      let since = data.now;

      const poll = async () => {

        if (document.hidden) return;

        try {

          const r = await fetch(`/sky/arrivals?scene=${data.live}&since=${since}`, { headers: { accept: "application/json" } });

          if (!r.ok) return;

          const got = await r.json();

          since = got.now;

          if (got.events.length) bd.arrive(got);

        } catch (e) {}

      };

      setInterval(poll, 30000);

      document.addEventListener("visibilitychange", poll);

    }

  } catch (e) {

    canvas.remove();

  }

}

</script>