feat(site): sun, planets, eclipses and star labels in the real sky

.oxfmtrc.json

@@ -9,6 +9,7 @@
     "**/*.css",
     "**/*.md",
     "**/*.yaml",
-    "pnpm-lock.yaml"
+    "pnpm-lock.yaml",
+    "apps/site/public/star-names.json"
   ]
 }

apps/site/public/star-names.json

@@ -0,0 +1 @@
+[[1,"Alpheratz","Andromeda"],[2,"Caph","Cassiopeia"],[11,"Algenib","Pegasus"],[25,"Ankaa","Phoenix"],[43,"Fulu","Cassiopeia"],[50,"Schedar","Cassiopeia"],[56,"Diphda","Cetus"],[67,"Achird","Cassiopeia"],[82,"Castula","Cassiopeia"],[104,"Mirach","Andromeda"],[105,"Wurren","Phoenix"],[111,"Revati","Pisces"],[120,"Adhil","Andromeda"],[123,"Ruchbah","Cassiopeia"],[129,"Polaris","Ursa Minor"],[134,"Alpherg","Pisces"],[138,"Titawin","Andromeda"],[140,"Nembus","Andromeda"],[142,"Achernar","Eridanus"],[152,"Torcular","Pisces"],[158,"Baten Kaitos","Cetus"],[159,"Segin","Cassiopeia"],[161,"Mothallah","Triangulum"],[163,"Mesarthim","Aries"],[166,"Sheratan","Aries"],[186,"Alrescha","Pisces"],[189,"Almach","Andromeda"],[194,"Hamal","Aries"],[210,"Mira","Cetus"],[250,"Kaffaljidhma","Cetus"],[257,"Lilii Borea","Aries"],[258,"Miram","Perseus"],[261,"Bharani","Aries"],[267,"Angetenar","Eridanus"],[275,"Azha","Eridanus"],[287,"Acamar","Eridanus"],[290,"Menkar","Cetus"],[300,"Algol","Perseus"],[302,"Misam","Perseus"],[304,"Botein","Aries"],[307,"Dalim","Fornax"],[311,"Zibal","Eridanus"],[328,"Mirfak","Perseus"],[344,"Ran","Eridanus"],[354,"Atik","Perseus"],[357,"Rana","Eridanus"],[359,"Celaeno","Taurus"],[360,"Electra","Taurus"],[362,"Taygeta","Taurus"],[365,"Maia","Taurus"],[368,"Merope","Taurus"],[370,"Alcyone","Taurus"],[376,"Atlas","Taurus"],[377,"Pleione","Taurus"],[395,"Menkib","Perseus"],[397,"Zaurak","Eridanus"],[420,"Beid","Eridanus"],[433,"Keid","Eridanus"],[445,"Prima Hyadum","Taurus"],[454,"Secunda Hyadum","Taurus"],[463,"Beemim","Eridanus"],[468,"Ain","Taurus"],[470,"Chamukuy","Taurus"],[482,"Aldebaran","Taurus"],[485,"Theemin","Eridanus"],[495,"Sceptrum","Eridanus"],[515,"Tabit","Orion"],[529,"Hassaleh","Auriga"],[535,"Almaaz","Auriga"],[538,"Saclateni","Auriga"],[547,"Haedus","Auriga"],[558,"Cursa","Eridanus"],[574,"Capella","Auriga"],[576,"Rigel","Orion"],[605,"Bellatrix","Orion"],[606,"Elnath","Taurus"],[614,"Nihal","Lepus"],[622,"Mintaka","Orion"],[627,"Arneb","Lepus"],[633,"Meissa","Orion"],[638,"Hatysa","Orion"],[640,"Alnilam","Orion"],[642,"Tianguan","Taurus"],[652,"Alnitak","Orion"],[656,"Phact","Columba"],[669,"Saiph","Orion"],[683,"Wazn","Columba"],[688,"Betelgeuse","Orion"],[695,"Menkalinan","Auriga"],[699,"Mahasim","Auriga"],[723,"Elkurud","Columba"],[734,"Propus","Gemini"],[753,"Furud","Canis Major"],[754,"Tejat","Gemini"],[757,"Mirzam","Canis Major"],[761,"Canopus","Carina"],[784,"Alhena","Gemini"],[798,"Mebsuta","Gemini"],[803,"Alzirr","Gemini"],[806,"Sirius","Canis Major"],[843,"Adhara","Canis Major"],[847,"Nganurganity","Canis Major"],[850,"Mekbuda","Gemini"],[853,"Muliphein","Canis Major"],[862,"Wezen","Canis Major"],[892,"Wasat","Gemini"],[915,"Aludra","Canis Major"],[918,"Gomeisa","Canis Minor"],[936,"Castor","Gemini"],[943,"Jishui","Gemini"],[947,"Procyon","Canis Minor"],[960,"Pollux","Gemini"],[980,"Azmidi","Puppis"],[1015,"Naos","Puppis"],[1021,"Tureis","Puppis"],[1040,"Tarf","Cancer"],[1044,"Alsciaukat","Lynx"],[1051,"Avior","Carina"],[1056,"Muscida","Ursa Major"],[1074,"Minchir","Hydra"],[1089,"Asellus Borealis","Cancer"],[1096,"Asellus Australis","Cancer"],[1102,"Ashlesha","Hydra"],[1104,"Alsephina","Vela"],[1127,"Talitha","Ursa Major"],[1129,"Acubens","Cancer"],[1137,"Alkaphrah","Ursa Major"],[1151,"Nahn","Cancer"],[1153,"Suhail","Vela"],[1173,"Miaplacidus","Carina"],[1179,"Aspidiske","Carina"],[1190,"Markeb","Vela"],[1191,"Intercrus","Ursa Major"],[1192,"Alphard","Hydra"],[1204,"Alterf","Leo"],[1231,"Ukdah","Hydra"],[1233,"Subra","Leo"],[1251,"Zhang","Hydra"],[1252,"Rasalas","Leo"],[1257,"Felis","Hydra"],[1271,"Regulus","Leo"],[1280,"Adhafera","Leo"],[1281,"Tania Borealis","Ursa Major"],[1288,"Algieba","Leo"],[1292,"Tania Australis","Ursa Major"],[1358,"Praecipua","Leo Minor"],[1367,"Chalawan","Ursa Major"],[1369,"Alkes","Crater"],[1374,"Merak","Ursa Major"],[1377,"Dubhe","Ursa Major"],[1393,"Zosma","Leo"],[1394,"Chertan","Leo"],[1400,"Alula Australis","Ursa Major"],[1401,"Alula Borealis","Ursa Major"],[1421,"Giausar","Draco"],[1451,"Taiyangshou","Ursa Major"],[1462,"Denebola","Leo"],[1465,"Zavijava","Virgo"],[1469,"Phecda","Ursa Major"],[1489,"Alchiba","Corvus"],[1496,"Imai","Crux"],[1497,"Megrez","Ursa Major"],[1498,"Gienah","Corvus"],[1507,"Zaniah","Virgo"],[1513,"Ginan","Crux"],[1522,"Acrux","Crux"],[1533,"Algorab","Corvus"],[1535,"Gacrux","Crux"],[1543,"Chara","Canes Venatici"],[1544,"Kraz","Corvus"],[1559,"Porrima","Virgo"],[1567,"La Superba","Canes Venatici"],[1571,"Mimosa","Crux"],[1572,"Tianyi","Draco"],[1584,"Alioth","Ursa Major"],[1587,"Minelauva","Virgo"],[1589,"Cor Caroli","Canes Venatici"],[1590,"Taiyi","Draco"],[1596,"Vindemiatrix","Virgo"],[1605,"Diadem","Coma Berenices"],[1633,"Mizar","Ursa Major"],[1635,"Spica","Virgo"],[1637,"Alcor","Ursa Major"],[1648,"Heze","Virgo"],[1668,"Alkaid","Ursa Major"],[1681,"Muphrid","Boötes"],[1691,"Hadar","Centaurus"],[1694,"Menkent","Centaurus"],[1696,"Thuban","Draco"],[1705,"Kang","Virgo"],[1713,"Syrma","Virgo"],[1715,"Arcturus","Boötes"],[1718,"Xuange","Boötes"],[1721,"Khambalia","Virgo"],[1739,"Elgafar","Virgo"],[1746,"Seginus","Boötes"],[1751,"Rigil Kentaurus","Centaurus"],[1752,"Toliman","Centaurus"],[1771,"Izar","Boötes"],[1778,"Zubenelgenubi","Libra"],[1790,"Kochab","Ursa Minor"],[1801,"Nekkar","Boötes"],[1802,"Brachium","Libra"],[1828,"Zubeneschamali","Libra"],[1846,"Alkalurops","Boötes"],[1847,"Pherkad","Ursa Minor"],[1852,"Edasich","Draco"],[1854,"Nusakan","Corona Borealis"],[1866,"Zubenelhakrabi","Libra"],[1869,"Alphecca","Corona Borealis"],[1890,"Unukalhai","Serpens"],[1894,"Gudja","Serpens"],[1917,"Iklil","Scorpius"],[1924,"Fang","Scorpius"],[1927,"Dschubba","Scorpius"],[1943,"Acrab","Scorpius"],[1950,"Marsic","Hercules"],[1959,"Jabbah","Scorpius"],[1968,"Yed Prior","Ophiuchus"],[1974,"Yed Posterior","Ophiuchus"],[1979,"Alniyat","Scorpius"],[1997,"Cujam","Hercules"],[2004,"Athebyne","Draco"],[2005,"Antares","Scorpius"],[2013,"Kornephoros","Hercules"],[2014,"Marfik","Ophiuchus"],[2022,"Paikauhale","Scorpius"],[2032,"Atria","Triangulum Australe"],[2040,"Larawag","Scorpius"],[2043,"Xamidimura","Scorpius"],[2045,"Pipirima","Scorpius"],[2072,"Sabik","Ophiuchus"],[2076,"Aldhibah","Draco"],[2078,"Guniibuu","Ophiuchus"],[2079,"Rasalgethi","Hercules"],[2081,"Sarin","Hercules"],[2113,"Lesath","Scorpius"],[2117,"Maasym","Hercules"],[2118,"Shaula","Scorpius"],[2119,"Rastaban","Draco"],[2123,"Sargas","Scorpius"],[2126,"Rasalhague","Ophiuchus"],[2136,"Cervantes","Ara"],[2140,"Cebalrai","Ophiuchus"],[2146,"Fuyue","Scorpius"],[2148,"Dziban","Draco"],[2157,"Grumium","Draco"],[2164,"Eltanin","Draco"],[2181,"Alnasl","Sagittarius"],[2192,"Yildun","Ursa Minor"],[2198,"Polis","Sagittarius"],[2211,"Kaus Media","Sagittarius"],[2221,"Kaus Australis","Sagittarius"],[2232,"Kaus Borealis","Sagittarius"],[2245,"Fafnir","Draco"],[2260,"Vega","Lyra"],[2286,"Sheliak","Lyra"],[2289,"Ainalrami","Sagittarius"],[2293,"Nunki","Sagittarius"],[2303,"Alya","Serpens"],[2315,"Sulafat","Lyra"],[2321,"Ascella","Sagittarius"],[2333,"Polaris Australis","Octans"],[2335,"Okab","Aquila"],[2340,"Meridiana","Corona Australis"],[2344,"Albaldah","Sagittarius"],[2351,"Aladfar","Lyra"],[2355,"Altais","Draco"],[2365,"Arkab Prior","Sagittarius"],[2368,"Arkab Posterior","Sagittarius"],[2369,"Rukbat","Sagittarius"],[2381,"Anser","Vulpecula"],[2383,"Albireo","Cygnus"],[2398,"Alsafi","Draco"],[2403,"Sham","Sagitta"],[2415,"Tarazed","Aquila"],[2416,"Fawaris","Cygnus"],[2423,"Altair","Aquila"],[2435,"Libertas","Aquila"],[2436,"Terebellum","Sagittarius"],[2437,"Alshain","Aquila"],[2489,"Algedi","Capricornus"],[2494,"Alshat","Capricornus"],[2495,"Dabih","Capricornus"],[2496,"Peacock","Pavo"],[2498,"Sadr","Cygnus"],[2509,"Aldulfin","Delphinus"],[2519,"Rotanev","Delphinus"],[2530,"Sualocin","Delphinus"],[2533,"Deneb","Cygnus"],[2544,"Aljanah","Cygnus"],[2545,"Albali","Aquarius"],[2569,"Musica","Delphinus"],[2595,"Kitalpha","Equuleus"],[2603,"Alderamin","Cepheus"],[2622,"Sadalsuud","Aquarius"],[2623,"Alfirk","Cepheus"],[2628,"Bunda","Aquarius"],[2632,"Nashira","Capricornus"],[2640,"Azelfafage","Cygnus"],[2643,"Enif","Pegasus"],[2651,"Deneb Algedi","Capricornus"],[2659,"Aldhanab","Grus"],[2672,"Sadalmelik","Aquarius"],[2674,"Kurhah","Cepheus"],[2677,"Alnair","Grus"],[2685,"Biham","Pegasus"],[2705,"Ancha","Aquarius"],[2712,"Sadachbia","Aquarius"],[2741,"Situla","Aquarius"],[2750,"Homam","Pegasus"],[2751,"Tiaki","Grus"],[2756,"Matar","Pegasus"],[2765,"Sadalbari","Pegasus"],[2774,"Skat","Aquarius"],[2778,"Fomalhaut","Piscis Austrinus"],[2779,"Helvetios","Pegasus"],[2788,"Fumalsamakah","Pisces"],[2790,"Scheat","Pegasus"],[2793,"Markab","Pegasus"],[2824,"Salm","Pegasus"],[2830,"Alkarab","Pegasus"],[2836,"Veritate","Andromeda"],[2848,"Errai","Cepheus"]]

apps/site/src/components/Aurora.astro

@@ -32,6 +32,9 @@ import {
     <path d="M12 11v5.5M12 7.75v.01"></path>
   </svg>
 </button>
+<!-- Names the sun, moon, planet or star under the pointer (or a tap). The
+     popover covers the same for screen readers. -->
+<div class="sky-tip gmt-glass-subtle" aria-hidden="true" hidden></div>
 <div id="sky-info" class="sky-info gmt-glass" popover>
   <div class="sky-sites" role="group" aria-label="Seen from">
     {
@@ -58,8 +61,9 @@ import {
           {coords(site.lat, site.lon)}, eye height {site.eye}&nbsp;m.
         </p>
         <p>
-          The stars, moon and {site.ground} are real and show this moment.
-          The aurora is simulated.
+          It is always night here, but the stars, planets, moon and sun are
+          where they really are right now, above the real {site.ground}. The
+          aurora is simulated.
         </p>
         <dl>
           {site.credits.map(([what, source]) => (
@@ -85,7 +89,11 @@ import {
 </div>
 
 <script>
-  import type { AuroraMessage, WorkerMessage } from "../scripts/aurora.worker";
+  import type {
+    AuroraMessage,
+    SkyLabel,
+    WorkerMessage,
+  } from "../scripts/aurora.worker";
 
   // Order matches what the worker destructures.
   const TOKENS = [
@@ -147,11 +155,16 @@ import {
       );
       worker.onmessage = ({ data }: MessageEvent<WorkerMessage>) => {
         if (typeof data === "object") {
-          site = data.site;
-          show();
+          if ("pick" in data) {
+            label(data.pick);
+          } else {
+            site = data.site;
+            show();
+          }
           return;
         }
         const on = data === "on";
+        if (!on) label(null);
         canvas.classList.toggle("on", on);
         if (info) info.hidden = !on;
       };
@@ -182,13 +195,68 @@ import {
     }
   }
 
+  // Tooltips: over bare sky the page asks the worker what is drawn under the
+  // pointer (at most once a frame) and names it.
+  const tip = document.querySelector<HTMLElement>(".sky-tip");
+  let over = false;
+  let asked: [number, number, number] | null = null;
+  const bare = (target: EventTarget | null) =>
+    target === document.documentElement ||
+    target === document.body ||
+    (target instanceof HTMLElement && target.tagName === "MAIN");
+  const label = (found: SkyLabel | null) => {
+    if (!tip) return;
+    tip.hidden = !found || !over || !canvas?.classList.contains("on");
+    if (!found || tip.hidden) return;
+    const note = document.createElement("span");
+    note.textContent = found.note;
+    tip.replaceChildren(found.name, ...(found.note ? [note] : []));
+    // Centred on the object, but kept inside the window at the sides.
+    const half = tip.offsetWidth / 2 + 4;
+    const width = document.documentElement.clientWidth;
+    tip.style.left = `${Math.min(Math.max(found.x, half), width - half)}px`;
+    tip.style.top = `${found.y}px`;
+    tip.classList.toggle("below", found.y < 48);
+  };
+  const point = (event: PointerEvent) => {
+    over = bare(event.target);
+    if (!over || !post) return label(null);
+    const reach = event.pointerType === "mouse" ? 12 : 28;
+    if (!asked) {
+      requestAnimationFrame(() => {
+        if (asked && over) {
+          const [x, y, r] = asked;
+          post?.({ type: "pick", x, y, reach: r });
+        }
+        asked = null;
+      });
+    }
+    asked = [event.clientX, event.clientY, reach];
+  };
+  document.addEventListener(
+    "pointermove",
+    (event) => {
+      if (event.pointerType !== "touch") point(event);
+    },
+    { passive: true },
+  );
+  document.addEventListener("pointerdown", point, { passive: true });
+  // A touch pointer "leaves" as the finger lifts, right after the tap that
+  // asked; its label stays until the next tap instead.
+  document.documentElement.addEventListener("pointerleave", (event) => {
+    if (event.pointerType === "touch") return;
+    over = false;
+    label(null);
+  });
+
   // Switching site: fade the sky out, swap, and fade back in when the worker
   // reports the new frame is up.
   choices.forEach((button, i) =>
     button.addEventListener("click", () => {
       if (i === site) return;
       site = i;
       show();
+      label(null);
       if (!post || !canvas) return;
       canvas.classList.add("quick");
       canvas.classList.remove("on");
@@ -257,6 +325,29 @@ import {
     opacity: 1;
   }
 
+  .sky-tip {
+    position: fixed;
+    z-index: 4;
+    padding: 0.15rem 0.5rem;
+    color: var(--gmt-ice);
+    font-size: var(--gmt-text-xs);
+    white-space: nowrap;
+    pointer-events: none;
+    translate: -50% calc(-100% - 12px);
+  }
+  .sky-tip :global(span) {
+    color: var(--gmt-ice-dim);
+  }
+  .sky-tip :global(span)::before {
+    content: " · ";
+  }
+  .sky-tip.below {
+    translate: -50% 12px;
+  }
+  .sky-tip[hidden] {
+    display: none;
+  }
+
   .sky-info {
     position: fixed;
     inset: auto 12px 52px auto;
@@ -291,7 +382,7 @@ import {
   }
   .sky-info dl {
     display: grid;
-    grid-template-columns: 4.5rem 1fr;
+    grid-template-columns: 5.5rem 1fr;
     gap: 0.25rem 0.75rem;
     margin: 0 0 0.5rem;
   }