word-waltz / commit

update solo style

b1af85fe0f8803901aa7a9b893c43069f38be6c4 · Pavel Safronov · 2026-03-26 16:28:42 -0700 · parents 4e18328c14b4

update solo style

 src/components/SoloScoreboard.ts | 40 +++++++++++++++++-----------------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/SoloScoreboard.ts b/src/components/SoloScoreboard.ts
index 8e185e3..43cbdc1 100644
--- a/src/components/SoloScoreboard.ts
+++ b/src/components/SoloScoreboard.ts
@@ -40,27 +40,18 @@ export function mountSoloScoreboard(
         const card = document.createElement('div');
         card.className = 'scoreboard__player';
 
-        // Editable name
-        const nameRow = document.createElement('div');
-        nameRow.className = 'scoreboard__name-row';
-
+        // Editable name — click to rename, same as multiplayer scoreboard
         const nameEl = document.createElement('span');
-        nameEl.className = 'scoreboard__name scoreboard__name--a';
+        nameEl.className = 'scoreboard__name scoreboard__name--a scoreboard__name--editable';
         nameEl.textContent = playerName || 'Player';
-        nameRow.appendChild(nameEl);
-
-        const editBtn = document.createElement('button');
-        editBtn.className = 'scoreboard__edit-btn';
-        editBtn.title = 'Change name';
-        editBtn.textContent = '✎';
-        editBtn.addEventListener('click', () => {
+        nameEl.title = 'Click to rename';
+        nameEl.addEventListener('click', () => {
             const input = document.createElement('input');
             input.type = 'text';
             input.className = 'scoreboard__name-input';
             input.value = playerName;
             input.maxLength = 20;
-            nameRow.innerHTML = '';
-            nameRow.appendChild(input);
+            nameEl.replaceWith(input);
             input.focus();
             input.select();
 
@@ -79,8 +70,7 @@ export function mountSoloScoreboard(
                 if (e.key === 'Escape') { input.removeEventListener('blur', commit); render(); }
             });
         });
-        nameRow.appendChild(editBtn);
-        card.appendChild(nameRow);
+        card.appendChild(nameEl);
 
         const scoreEl = document.createElement('span');
         scoreEl.className = 'scoreboard__score scoreboard__score--a';
@@ -93,10 +83,6 @@ export function mountSoloScoreboard(
         // --- History ---
         if (completedRounds.length === 0) return;
 
-        const visible = expanded
-            ? completedRounds
-            : completedRounds.slice(-COLLAPSED_COUNT);
-
         const historyEl = document.createElement('div');
         historyEl.className = 'scoreboard__history-wrap';
 
@@ -112,15 +98,23 @@ export function mountSoloScoreboard(
 
         const ol = document.createElement('ol');
         ol.className = 'scoreboard__history';
-        ol.start = expanded ? 1 : completedRounds.length - visible.length + 1;
-        visible.forEach((r) => {
+        const visible = expanded
+            ? completedRounds
+            : completedRounds.slice(-COLLAPSED_COUNT);
+        const startIdx = expanded ? 0 : completedRounds.length - visible.length;
+        visible.forEach((r, vi) => {
+            const roundNum = startIdx + vi + 1;
             const result = r.solved
                 ? `solved "${r.word}" in ${r.guesses.length} ${r.guesses.length === 1 ? 'guess' : 'guesses'} (+${r.score})`
                 : `failed to solve "${r.word}"`;
             const li = document.createElement('li');
             li.className = 'scoreboard__round';
             const textEl = document.createElement('span');
-            textEl.textContent = result;
+            const numSpan = document.createElement('span');
+            numSpan.className = 'scoreboard__round-num';
+            numSpan.textContent = `${roundNum}.`;
+            textEl.appendChild(numSpan);
+            textEl.appendChild(document.createTextNode(result));
             li.appendChild(textEl);
             if (r.guesses.length > 0) {
                 const emojiEl = document.createElement('div');