From bee49159c64d4dff17d3d1eca1750dea688e4e4c Mon Sep 17 00:00:00 2001
From: Cameron <cameron@pfiffer.org>
Date: Tue, 29 Sep 2026 11:53:02 -0700
Subject: [PATCH] Tree button with nothing training: an empty ring with a plus
 instead of a dashed ring

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/style.css | 3 ++-
 src/ui.ts     | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/style.css b/src/style.css
index 3fdbd669..036c74dd 100644
--- a/src/style.css
+++ b/src/style.css
@@ -567,7 +567,8 @@ button:focus-visible { outline-color: var(--amber); }
 .rings .track { stroke-width: 1; opacity: .35; }
 .rings .fill { stroke-width: 2; stroke-linecap: round; transition: stroke-dasharray .4s ease-out; }
 .rings .idle { --c: var(--amber); }
-.rings .wait { stroke-width: 1.5; stroke-dasharray: 3 3; }
+.rings .idle .track { opacity: .6; }
+.rings .plus { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; }
 .rings .done { --c: var(--muted); }
 /* phones: the rings sit 8px in from the top and left, and the bar's corner is rounded around the
    same center (8px + half of 40px = 28px), so the ring and the corner run side by side */
diff --git a/src/ui.ts b/src/ui.ts
index e1a528ac..22457b70 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -672,9 +672,10 @@ function renderRings(S: State) {
     const rad = outer - i * step, pct = Math.round(100 * Math.min(1, r.have / r.need));
     return `<g class="${r.cls}"><circle class="track" r="${rad}"/>${pct ? `<circle class="fill" r="${rad}" pathLength="100" stroke-dasharray="${pct} 100"/>` : ''}</g>`;
   }).join('');
-  // nothing training: one empty dashed ring waiting for a pick, or a closed ring once the tree is done
+  // nothing training: an empty ring with a plus, waiting for a pick; a closed ring once the tree is done
   const done = treeDone(S);
-  const idle = done ? `<g class="done"><circle class="fill" r="${outer}"/></g>` : `<g class="idle"><circle class="wait" r="${outer}"/></g>`;
+  const idle = done ? `<g class="done"><circle class="fill" r="${outer}"/></g>`
+    : `<g class="idle"><circle class="track" r="${outer}"/><path class="plus" d="M-5 0H5M0 -5V5"/></g>`;
   const h = `<svg class="rings" viewBox="-16 -16 32 32" aria-hidden="true">${rings.length ? svg : idle}</svg><kbd>T</kbd>`;
   const btn = $('treebtn');
   if (h !== lastRings) { lastRings = h; btn.innerHTML = h; btn.classList.add('ringed'); }
-- 
2.51.2