Front map: systems orbit a central star as live mini solar-systems

Replace the scattered chart layout with a circular orbit: the 7 systems are
evenly spaced on a slowly revolving ring around a central pulsing star, with
labels counter-rotated to stay upright and the orbit pausing on hover. Each
system is now a hand-built animated SVG (rotating gears/rays/rune-ticks,
planet-dots orbiting at varied speeds, pulsing suns). Borderless and
theme-tinted; collapses to a tappable 2-up grid on mobile. Navigation runs
through the JS click-bridge; on_nav no-ops the empty load-time value so the map
is not auto-navigated.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app.py

@@ -11,6 +11,7 @@ adapted from the Coppermind wiki (CC BY-NC-SA). Unofficial fan project, not
 affiliated with or endorsed by Brandon Sanderson or Dragonsteel.
 """
 
+import math
 import re
 from threading import Thread
 
@@ -141,17 +142,174 @@ def build_orrery(shard, mode="full"):
     )
 
 
-def _emblem_css():
-    """Per-system float timing + theme color, applied by column elem_id."""
-    rules = []
+# ---------------------------------------------------------------------------- #
+# Front-page system symbols — hand-built vector glyphs, one per system.
+# Each <svg> is borderless and uses currentColor (the system's theme color, set
+# via .sys-symbol{color:var(--c)}) so it tints + glows to match the voice.
+# ---------------------------------------------------------------------------- #
+def _ring(r, sw=1.0, op=0.7, color="currentColor"):
+    return (f'<circle cx="50" cy="50" r="{r}" fill="none" '
+            f'stroke="{color}" stroke-width="{sw}" opacity="{op}"/>')
+
+
+def _around(r, n, fn, phase=0.0):
+    """Place n items evenly around a circle of radius r; fn(x, y, i) -> svg."""
+    out = []
+    for i in range(n):
+        a = phase + i * (2 * math.pi / n)
+        out.append(fn(50 + r * math.cos(a), 50 + r * math.sin(a), i))
+    return "".join(out)
+
+
+def _rays(r0, r1, n, sw=1.4, color="currentColor", op=0.9):
+    def line(_x, _y, i):
+        a = i * (2 * math.pi / n)
+        x0, y0 = 50 + r0 * math.cos(a), 50 + r0 * math.sin(a)
+        x1, y1 = 50 + r1 * math.cos(a), 50 + r1 * math.sin(a)
+        return (f'<line x1="{x0:.1f}" y1="{y0:.1f}" x2="{x1:.1f}" y2="{y1:.1f}" '
+                f'stroke="{color}" stroke-width="{sw}" opacity="{op}"/>')
+    return _around(r0, n, line)
+
+
+def _dots(r, n, rad, color="currentColor", op=0.95, phase=0.0):
+    return _around(
+        r, n,
+        lambda x, y, i: f'<circle cx="{x:.1f}" cy="{y:.1f}" r="{rad}" fill="{color}" opacity="{op}"/>',
+        phase,
+    )
+
+
+def _svg(body):
+    return (f'<svg class="sym-art" viewBox="0 0 100 100" '
+            f'xmlns="http://www.w3.org/2000/svg">{body}</svg>')
+
+
+def _spin(body, sp, rev=False):
+    """Wrap SVG in a group that rotates about the symbol center (view-box origin)."""
+    cls = "spin-vb spin-rev" if rev else "spin-vb"
+    return f'<g class="{cls}" style="--sp:{sp}s">{body}</g>'
+
+
+def _pulse(body, pp=4.5):
+    return f'<g class="pulse" style="--pp:{pp}s">{body}</g>'
+
+
+def build_symbol(sid):
+    """Return an inline SVG glyph for a system — a little moving solar system:
+    rings hold, planet-dots/rays/gears orbit at varied speeds, suns pulse."""
+    c2 = SHARDS[sid]["accent"]
+    sun = '<circle cx="50" cy="50" r="6.5" fill="#fff7e0"/>'
+
+    if sid == "drominad":  # Hoid — concentric rings, orbiting motes, pulsing sun
+        body = (
+            "".join(_ring(r, 1, 0.55) for r in (45, 38, 31, 24, 17))
+            + _pulse(sun + _ring(7.5, 1.4, 0.9), 5)
+            + _spin(_dots(45, 1, 2.2), 40)
+            + _spin(_dots(31, 1, 2.0, phase=2.1), 28, rev=True)
+            + _spin(_dots(24, 1, 1.8, phase=1.0), 34)
+        )
+        return _svg(body)
+
+    if sid == "harmony":  # Scadrian — turning clockwork gear + radiant pulsing sun
+        gear = ('<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" '
+                'stroke-width="6" stroke-dasharray="4.2 4.2" opacity="0.85"/>')
+        body = (
+            _spin(gear, 46)
+            + _ring(31, 1, 0.5)
+            + _spin(_rays(13, 23, 16, 1.2, "#fde6b0", 0.85), 22, rev=True)
+            + _pulse('<circle cx="50" cy="50" r="11" fill="#f6e2a0"/>' + _ring(11, 1.5, 0.95), 4.5)
+        )
+        return _svg(body)
+
+    if sid == "devotion_dominion":  # Selish — sigil ring of orbiting nodes + dual core
+        dual = (
+            '<circle cx="44" cy="50" r="10" fill="none" stroke="currentColor" stroke-width="1.6" opacity="0.95"/>'
+            f'<circle cx="56" cy="50" r="10" fill="none" stroke="{c2}" stroke-width="1.6" opacity="0.95"/>'
+            '<circle cx="50" cy="50" r="2.4" fill="#eaf3ff"/>'
+        )
+        body = (
+            _ring(43, 1, 0.7) + _ring(35, 1, 0.45)
+            + _spin(_dots(39, 8, 2.0, op=0.85), 52)
+            + _pulse(dual, 5.5)
+        )
+        return _svg(body)
+
+    if sid == "autonomy":  # Taldain — slowly spinning figure-8 binary loops
+        big = (
+            '<circle cx="50" cy="34" r="19" fill="none" stroke="currentColor" stroke-width="2" opacity="0.9"/>'
+            '<circle cx="50" cy="66" r="19" fill="none" stroke="currentColor" stroke-width="2" opacity="0.9"/>'
+        )
+        inner = (
+            '<circle cx="50" cy="34" r="13" fill="none" stroke="currentColor" stroke-width="1" opacity="0.5"/>'
+            '<circle cx="50" cy="66" r="13" fill="none" stroke="currentColor" stroke-width="1" opacity="0.5"/>'
+            '<circle cx="50" cy="34" r="3" fill="#fff"/>'
+            '<circle cx="50" cy="66" r="3" fill="#cfe0ff"/>'
+        )
+        body = _spin(big, 55) + _spin(inner, 34, rev=True)
+        return _svg(body)
+
+    if sid == "endowment":  # Nalthian — iridescent rings, each planet on its own orbit
+        cols = ["#e85aa0", "#f2c14e", "#5ad1c8", "#7aa0ff"]
+        radii = [44, 35, 26, 17]
+        speeds = [40, 30, 22, 15]
+        body = "".join(_ring(r, 1.4, 0.85, col) for r, col in zip(radii, cols))
+        body += "".join(
+            _spin(_dots(r, 1, 2.4, col, phase=i * 1.3), sp, rev=(i % 2 == 1))
+            for i, (r, col, sp) in enumerate(zip(radii, cols, speeds))
+        )
+        body += _pulse('<circle cx="50" cy="50" r="7" fill="#fff6ef"/>', 4)
+        return _svg(body)
+
+    if sid in ("odium", "cultivation"):  # Rosharan — turning rune ring + glowing core
+        body = (
+            _ring(44, 1, 0.7) + _ring(36, 1, 0.55)
+            + _spin(_rays(36, 44, 28, 1.0, "currentColor", 0.6), 64)   # rune ticks
+            + _ring(21, 1, 0.5)
+            + _spin(_dots(28, 3, 1.6, "currentColor", op=0.7), 30, rev=True)
+            + _pulse('<circle cx="50" cy="50" r="8" fill="currentColor" opacity="0.9"/>'
+                     '<circle cx="50" cy="50" r="3.4" fill="#fff" opacity="0.85"/>', 4.2)
+        )
+        return _svg(body)
+
+    return _svg(_ring(40) + sun)  # fallback
+
+
+def build_core():
+    """The central star the systems orbit (a nod to Adonalsium). Non-clickable."""
+    return _svg(
+        _spin(_rays(20, 33, 24, 1.0, "#ffe7a8", 0.55), 90)
+        + '<circle cx="50" cy="50" r="30" fill="#f7d98a" opacity="0.10"/>'
+        + _pulse('<circle cx="50" cy="50" r="13" fill="#fff2c8"/>'
+                 '<circle cx="50" cy="50" r="13" fill="none" stroke="#ffe7a8" stroke-width="1.5"/>', 5)
+    )
+
+
+def build_cosmos_scene():
+    """The front page: systems arranged in a circle, slowly orbiting a central star,
+    each one its own little moving solar system."""
+    n = len(SHARD_ORDER)
+    slots = []
     for i, sid in enumerate(SHARD_ORDER):
-        c = SHARDS[sid]["color"]
-        dur = 7 + (i % 4) * 1.3          # gentle, varied bob
+        s = SHARDS[sid]
+        angle = -90 + i * 360.0 / n          # start at top, even spacing
+        sz = 132
+        dur = 7 + (i % 4) * 1.3              # gentle, varied bob
         delay = (i * 0.7) % 4
-        rules.append(
-            f"#emb-{sid} {{ --c:{c}; animation-duration:{dur}s; animation-delay:-{delay}s; }}"
+        slots.append(
+            f'<div class="slot" style="--a:{angle:.2f}deg">'
+            f'<div class="deslot"><div class="counter">'
+            f'<div class="sys-symbol" data-shard="{sid}" '
+            f'style="--c:{s["color"]};--c2:{s["accent"]};--sz:{sz}px;'
+            f'--dur:{dur}s;--delay:-{delay}s;">'
+            f'<div class="sym-float">{build_symbol(sid)}'
+            f'<div class="sys-label"><div class="sys-name">{s["system"]}</div>'
+            f'<div class="sys-shard">{s["name"]}</div></div></div>'
+            f'</div></div></div></div>'
         )
-    return "\n".join(rules)
+    return (
+        f'<div id="cosmos"><div class="ring">{"".join(slots)}</div>'
+        f'<div class="core-star">{build_core()}</div></div>'
+    )
 
 
 def build_system_panel(shard):
@@ -199,6 +357,20 @@ def enter_shard(shard_id):
     )
 
 
+def on_nav(value):
+    """Handle a click from the floating map, relayed via the hidden JS proxy box.
+
+    The value is "<shard_id>|<nonce>"; the nonce guarantees a fresh change event
+    even when the same system is chosen twice in a row. Gradio also emits an
+    empty value on initial page load — we treat that (and any unknown id) as a
+    no-op so the map is not auto-navigated."""
+    sid = (value or "").split("|", 1)[0]
+    if sid not in SHARDS:
+        return (gr.update(), gr.update(), "", gr.update(),
+                gr.update(), gr.update(), gr.update(), gr.update())
+    return enter_shard(sid)
+
+
 def travel_home():
     """Clear the active voice and return to the star map."""
     return (
@@ -277,34 +449,82 @@ CSS = """
 #codex-header .intro { color:#9c97bd; font-size:.95rem; max-width:660px; margin:8px auto 0; }
 #map-hint { text-align:center; color:#8d88ad; font-size:.9rem; margin:4px 0 6px; letter-spacing:.04em; }
 
-/* ---- floating systems (front page): each system's own star chart, adrift ---- */
-#cosmos {
-    display:flex !important; flex-wrap:wrap; justify-content:center; align-items:flex-start;
-    gap:2px 24px; max-width:1180px; margin:6px auto 12px; padding:6px;
+/* hidden proxy that the JS click-bridge writes into to trigger navigation */
+#nav-proxy { position:absolute !important; left:-9999px !important; top:0 !important;
+    width:1px !important; height:1px !important; overflow:hidden !important;
+    opacity:0 !important; pointer-events:none !important; }
+
+/* ---- systems in a circle, orbiting a central star (a "moving solar system") ---- */
+#cosmos { position:relative; height:clamp(470px, 50vw, 580px); margin:0 auto; }
+
+/* the ring slowly revolves; .counter spins back so each symbol stays upright */
+.ring { position:absolute; inset:0; animation:ring-spin var(--T,150s) linear infinite; }
+.slot {
+    position:absolute; left:50%; top:50%; width:0; height:0;
+    transform:rotate(var(--a)) translate(var(--R,205px));
 }
-.sys-emblem {
-    width:170px !important; flex:0 0 auto !important; min-width:0 !important;
-    padding:0 !important; cursor:pointer; text-align:center;
-    animation-name:floaty; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
+.deslot { position:absolute; left:0; top:0; width:0; height:0;
+    transform:rotate(calc(-1 * var(--a))); }
+.counter { position:absolute; left:0; top:0; width:0; height:0;
+    animation:ring-spin var(--T,150s) linear infinite reverse; }
+/* hovering the map gently pauses the orbit so a symbol is easy to read/click */
+#cosmos:hover .ring, #cosmos:hover .counter { animation-play-state:paused; }
+@keyframes ring-spin { to { transform:rotate(360deg); } }
+
+.sys-symbol {
+    position:absolute; left:0; top:0; width:var(--sz);
+    transform:translate(-50%,-50%); cursor:pointer; color:var(--c); text-align:center;
 }
-.sys-emblem, .sys-emblem > *, .sys-img-comp, .sys-img-comp > * {
-    background:transparent !important; border:none !important; box-shadow:none !important;
+.sym-float {
+    animation:floaty var(--dur,8s) ease-in-out infinite; animation-delay:var(--delay,0s);
 }
-.sys-img-comp { min-height:0 !important; }
-.sys-img-comp .image-frame, .sys-img-comp button { display:flex !important; justify-content:center !important; }
-.sys-img-comp img {
-    width:150px !important; height:150px !important; object-fit:cover; border-radius:50%;
-    margin:0 auto; cursor:pointer;
-    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 82%);
-    mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 82%);
-    filter: drop-shadow(0 0 4px rgba(255,255,255,0.14));
-    transition: transform .35s ease, filter .35s ease;
+.sym-art {
+    display:block; width:100%; height:auto; overflow:visible;
+    filter:drop-shadow(0 0 5px color-mix(in srgb, var(--c) 45%, transparent));
+    transition:transform .35s ease, filter .35s ease;
+}
+.sys-symbol:hover { z-index:5; }
+.sys-symbol:hover .sym-art { transform:scale(1.12); filter:drop-shadow(0 0 22px var(--c)); }
+.sys-label { margin-top:2px; pointer-events:none; transition:opacity .35s ease; }
+.sys-name { font:600 .78rem/1.25 'Georgia',serif; color:#d7d2ea; letter-spacing:.04em; }
+.sys-shard { font:italic 1.02rem/1.25 'Georgia',serif; color:var(--c); text-shadow:0 0 12px var(--c); }
+.sys-symbol:hover .sys-name { color:#f3eeff; }
+@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
+
+/* central star */
+.core-star {
+    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
+    width:128px; height:128px; pointer-events:none; color:#ffe7a8;
+}
+
+/* inner symbol motion: groups that orbit / pulse about the symbol center */
+.spin-vb { transform-box:view-box; transform-origin:50px 50px;
+    animation:svg-spin var(--sp,30s) linear infinite; }
+.spin-vb.spin-rev { animation-direction:reverse; }
+.pulse { transform-box:fill-box; transform-origin:center;
+    animation:sun-pulse var(--pp,4.5s) ease-in-out infinite; }
+@keyframes svg-spin { to { transform:rotate(360deg); } }
+@keyframes sun-pulse { 0%,100% { opacity:.9; transform:scale(1); }
+    50% { opacity:1; transform:scale(1.14); } }
+
+/* mobile: unwind the circle into a clean, tappable 2-up grid */
+@media (max-width:760px) {
+    #cosmos { height:auto; }
+    .ring {
+        position:static; inset:auto; transform:none !important; animation:none !important;
+        display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
+        gap:16px 4%; padding:6px 0 12px;
+    }
+    .slot, .deslot, .counter {
+        position:static; width:auto; height:auto;
+        transform:none !important; animation:none !important; display:contents;
+    }
+    .sys-symbol {
+        position:static !important; transform:none !important;
+        width:43% !important; max-width:200px;
+    }
+    .core-star { display:none; }
 }
-.sys-emblem:hover .sys-img-comp img { transform:scale(1.08); filter:drop-shadow(0 0 18px var(--c)); }
-.sys-label { margin-top:6px; pointer-events:none; }
-.sys-name { font:600 .8rem/1.25 'Georgia',serif; color:#e9e4f6; letter-spacing:.04em; }
-.sys-shard { font:italic 1rem/1.25 'Georgia',serif; color:var(--c); text-shadow:0 0 12px var(--c); }
-@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-11px); } }
 
 /* ---- orrery ---- */
 .orrery { position:relative; margin:0 auto; }
@@ -374,7 +594,32 @@ CSS = """
 /* footer */
 #codex-footer { text-align:center; color:#7d789c; font-size:.78rem; margin:22px auto 8px; max-width:760px; line-height:1.5; }
 #codex-footer a { color:#a89ce0; }
-""" + _emblem_css()
+"""
+
+# Injected into <head> so it runs as a real script: one document-level click
+# delegate that turns any element carrying data-shard into a navigation event by
+# writing "<id>|<nonce>" into the hidden nav-proxy textbox and firing its input.
+HEAD_JS = """
+<script>
+(function () {
+  function go(id) {
+    var t = document.querySelector('#nav-proxy textarea') ||
+            document.querySelector('#nav-proxy input');
+    if (!t) { return; }
+    var proto = (t.tagName === 'TEXTAREA')
+      ? window.HTMLTextAreaElement.prototype
+      : window.HTMLInputElement.prototype;
+    var setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
+    setter.call(t, id + '|' + Date.now());
+    t.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+  document.addEventListener('click', function (e) {
+    var el = e.target.closest ? e.target.closest('[data-shard]') : null;
+    if (el) { go(el.getAttribute('data-shard')); }
+  });
+})();
+</script>
+"""
 
 
 # ---------------------------------------------------------------------------- #
@@ -382,6 +627,7 @@ CSS = """
 # ---------------------------------------------------------------------------- #
 with gr.Blocks(title="Cosmere Codex") as demo:
     active_shard = gr.State("")
+    nav_proxy = gr.Textbox(elem_id="nav-proxy", show_label=False)
 
     gr.HTML(
         """
@@ -398,24 +644,7 @@ with gr.Blocks(title="Cosmere Codex") as demo:
     # ---------------------------- MAP VIEW ---------------------------------- #
     with gr.Column(visible=True) as map_view:
         gr.HTML('<div id="map-hint">✦ Click a floating system to enter ✦</div>')
-        with gr.Row(elem_id="cosmos"):
-            emblems = {}
-            for sid in SHARD_ORDER:
-                s = SHARDS[sid]
-                with gr.Column(elem_id=f"emb-{sid}", elem_classes=["sys-emblem"], min_width=140):
-                    emblems[sid] = gr.Image(
-                        value=s["map_image"],
-                        elem_classes=["sys-img-comp"],
-                        show_label=False,
-                        interactive=False,
-                        container=False,
-                        buttons=[],
-                    )
-                    gr.HTML(
-                        f'<div class="sys-label">'
-                        f'<div class="sys-name">{s["system"]}</div>'
-                        f'<div class="sys-shard">{s["name"]}</div></div>'
-                    )
+        gr.HTML(build_cosmos_scene())
 
     # -------------------------- CONVERSATION VIEW --------------------------- #
     with gr.Column(visible=False) as chat_view:
@@ -457,14 +686,10 @@ with gr.Blocks(title="Cosmere Codex") as demo:
         shard_skin, system_orrery, user_box, send_btn,
     ]
 
-    # A click anywhere on a floating system's chart enters that system.
-    def _make_enter(target_id):
-        def _enter(*_):
-            return enter_shard(target_id)
-        return _enter
-
-    for sid, img in emblems.items():
-        img.select(_make_enter(sid), inputs=None, outputs=nav_outputs)
+    # A click on any floating symbol writes "<id>|<nonce>" into nav_proxy (via the
+    # head script's click delegate); .change handles it. on_nav no-ops the empty
+    # value Gradio emits at load, so the map is not auto-navigated.
+    nav_proxy.change(on_nav, inputs=nav_proxy, outputs=nav_outputs)
 
     travel_btn.click(
         travel_home, inputs=None,
@@ -476,4 +701,4 @@ with gr.Blocks(title="Cosmere Codex") as demo:
 
 
 if __name__ == "__main__":
-    demo.queue().launch(css=CSS, theme=gr.themes.Base())
+    demo.queue().launch(css=CSS, theme=gr.themes.Base(), head=HEAD_JS)