word-waltz / commit
fix keyboard
src/components/Scoreboard.ts | 114 +++++++++++++++++++-------------------- src/components/SoloScoreboard.ts | 77 ++++++++++++-------------- 2 files changed, 89 insertions(+), 102 deletions(-) diff --git a/src/components/Scoreboard.ts b/src/components/Scoreboard.ts index f260ddf..e58f6f3 100644 --- a/src/components/Scoreboard.ts +++ b/src/components/Scoreboard.ts @@ -18,8 +18,6 @@ interface ScoreboardProps { onNameChange: (newName: string) => void; } -const COLLAPSED_COUNT = 2; - export function mountScoreboard(container: HTMLElement, props: ScoreboardProps): () => void { const { players, rounds, myRole, turn, currentRound, onNameChange } = props; @@ -31,7 +29,7 @@ export function mountScoreboard(container: HTMLElement, props: ScoreboardProps): const completedRounds = rounds .map((r, i) => ({ r, i })) .filter(({ r, i }) => i !== liveRoundIdx && r.guesses.length > 0); - let expanded = false; + let historyVisible = false; function render(): void { root.innerHTML = ''; @@ -100,73 +98,69 @@ export function mountScoreboard(container: HTMLElement, props: ScoreboardProps): const historyEl = document.createElement('div'); historyEl.className = 'scoreboard__history-wrap'; - if (completedRounds.length > COLLAPSED_COUNT) { - const toggle = document.createElement('button'); - toggle.className = 'scoreboard__toggle'; - toggle.textContent = expanded - ? '▲ Hide older rounds' - : `▼ Show all ${completedRounds.length} rounds`; - toggle.addEventListener('click', () => { expanded = !expanded; render(); }); - historyEl.appendChild(toggle); - } - - const ol = document.createElement('ol'); - ol.className = 'scoreboard__history'; - const visible = expanded - ? completedRounds - : completedRounds.slice(-COLLAPSED_COUNT); - visible.forEach(({ r, i }) => { - const roundNum = i + 1; - const solver: PlayerId = r.challenger === 'a' ? 'b' : 'a'; - const solverName = players[solver].name || (solver === 'a' ? 'Player A' : 'Player B'); - 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'); - const numSpan = document.createElement('span'); - numSpan.className = 'scoreboard__round-num'; - numSpan.textContent = `${roundNum}.`; - const nameSpan = document.createElement('span'); - nameSpan.className = `scoreboard__name--${solver}`; - nameSpan.textContent = solverName; - textEl.appendChild(numSpan); - textEl.appendChild(nameSpan); - textEl.appendChild(document.createTextNode(`: ${result}`)); - li.appendChild(textEl); - if (r.guesses.length > 0) { - const emojiEl = document.createElement('div'); - emojiEl.className = 'scoreboard__emoji'; - emojiEl.textContent = guessesToEmoji(r.guesses, r.word); - li.appendChild(emojiEl); - } - ol.appendChild(li); - }); + const toggle = document.createElement('button'); + toggle.className = 'scoreboard__toggle'; + toggle.textContent = historyVisible ? '▲ Hide history' : '▼ Show history'; + toggle.addEventListener('click', () => { historyVisible = !historyVisible; render(); }); + historyEl.appendChild(toggle); + + if (historyVisible) { - // Live round — show pending entry to the challenger only. - if (liveRoundIdx >= 0) { - const liveRound = rounds[liveRoundIdx]; - if (liveRound && myRole === liveRound.challenger) { - const roundNum = liveRoundIdx + 1; - const solver: PlayerId = liveRound.challenger === 'a' ? 'b' : 'a'; + const ol = document.createElement('ol'); + ol.className = 'scoreboard__history'; + completedRounds.forEach(({ r, i }) => { + const roundNum = i + 1; + const solver: PlayerId = r.challenger === 'a' ? 'b' : 'a'; const solverName = players[solver].name || (solver === 'a' ? 'Player A' : 'Player B'); - const liveLi = document.createElement('li'); - liveLi.className = 'scoreboard__round scoreboard__round--live'; + 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'); const numSpan = document.createElement('span'); numSpan.className = 'scoreboard__round-num'; numSpan.textContent = `${roundNum}.`; const nameSpan = document.createElement('span'); nameSpan.className = `scoreboard__name--${solver}`; nameSpan.textContent = solverName; - liveLi.appendChild(numSpan); - liveLi.appendChild(nameSpan); - liveLi.appendChild(document.createTextNode(` is trying to solve ${liveRound.word}…`)); - ol.appendChild(liveLi); + textEl.appendChild(numSpan); + textEl.appendChild(nameSpan); + textEl.appendChild(document.createTextNode(`: ${result}`)); + li.appendChild(textEl); + if (r.guesses.length > 0) { + const emojiEl = document.createElement('div'); + emojiEl.className = 'scoreboard__emoji'; + emojiEl.textContent = guessesToEmoji(r.guesses, r.word); + li.appendChild(emojiEl); + } + ol.appendChild(li); + }); + + // Live round — show pending entry to the challenger only. + if (liveRoundIdx >= 0) { + const liveRound = rounds[liveRoundIdx]; + if (liveRound && myRole === liveRound.challenger) { + const roundNum = liveRoundIdx + 1; + const solver: PlayerId = liveRound.challenger === 'a' ? 'b' : 'a'; + const solverName = players[solver].name || (solver === 'a' ? 'Player A' : 'Player B'); + const liveLi = document.createElement('li'); + liveLi.className = 'scoreboard__round scoreboard__round--live'; + const numSpan = document.createElement('span'); + numSpan.className = 'scoreboard__round-num'; + numSpan.textContent = `${roundNum}.`; + const nameSpan = document.createElement('span'); + nameSpan.className = `scoreboard__name--${solver}`; + nameSpan.textContent = solverName; + liveLi.appendChild(numSpan); + liveLi.appendChild(nameSpan); + liveLi.appendChild(document.createTextNode(` is trying to solve ${liveRound.word}…`)); + ol.appendChild(liveLi); + } } - } - historyEl.appendChild(ol); + historyEl.appendChild(ol); + } // end if historyVisible root.appendChild(historyEl); } diff --git a/src/components/SoloScoreboard.ts b/src/components/SoloScoreboard.ts index 43cbdc1..682888c 100644 --- a/src/components/SoloScoreboard.ts +++ b/src/components/SoloScoreboard.ts @@ -15,8 +15,6 @@ interface SoloScoreboardProps { onNameChange: (newName: string) => void; } -const COLLAPSED_COUNT = 2; - export function mountSoloScoreboard( container: HTMLElement, props: SoloScoreboardProps, @@ -28,7 +26,7 @@ export function mountSoloScoreboard( root.className = 'scoreboard'; const completedRounds = rounds.filter((r) => r.guesses.length > 0); - let expanded = false; + let historyVisible = false; function render(): void { root.innerHTML = ''; @@ -86,45 +84,40 @@ export function mountSoloScoreboard( const historyEl = document.createElement('div'); historyEl.className = 'scoreboard__history-wrap'; - if (completedRounds.length > COLLAPSED_COUNT) { - const toggle = document.createElement('button'); - toggle.className = 'scoreboard__toggle'; - toggle.textContent = expanded - ? '▲ Hide older rounds' - : `▼ Show all ${completedRounds.length} rounds`; - toggle.addEventListener('click', () => { expanded = !expanded; render(); }); - historyEl.appendChild(toggle); - } - - const ol = document.createElement('ol'); - ol.className = 'scoreboard__history'; - 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'); - 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'); - emojiEl.className = 'scoreboard__emoji'; - emojiEl.textContent = guessesToEmoji(r.guesses, r.word); - li.appendChild(emojiEl); - } - ol.appendChild(li); - }); - historyEl.appendChild(ol); + const toggle = document.createElement('button'); + toggle.className = 'scoreboard__toggle'; + toggle.textContent = historyVisible ? '▲ Hide history' : '▼ Show history'; + toggle.addEventListener('click', () => { historyVisible = !historyVisible; render(); }); + historyEl.appendChild(toggle); + + if (historyVisible) { + + const ol = document.createElement('ol'); + ol.className = 'scoreboard__history'; + completedRounds.forEach((r, vi) => { + const roundNum = 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'); + 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'); + emojiEl.className = 'scoreboard__emoji'; + emojiEl.textContent = guessesToEmoji(r.guesses, r.word); + li.appendChild(emojiEl); + } + ol.appendChild(li); + }); + historyEl.appendChild(ol); + } // end if historyVisible root.appendChild(historyEl); }