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 `${pct ? `` : ''}`; }).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 ? `` : ``; + const idle = done ? `` + : ``; const h = `T`; const btn = $('treebtn'); if (h !== lastRings) { lastRings = h; btn.innerHTML = h; btn.classList.add('ringed'); }