diff --git a/docs/UI_DESIGN.md b/docs/UI_DESIGN.md index 7714494..8fc913d 100644 --- a/docs/UI_DESIGN.md +++ b/docs/UI_DESIGN.md @@ -240,8 +240,10 @@ on the right: Victory 🏆 / Defeat 🥈 / Draw 🏅, and for 3–4-player games IV 🏅; active games show Your move 🟢 / Opponent's move ⏳; invitations use 💌. The score line lists seats in **seat-number order** (matching the over-the-board scoreboard) in a **bold**, slightly smaller line; on an **in-progress** game the viewer's **own** number is tinted `--ok` -when leading or tied and `--danger` when trailing (other numbers stay muted), a quick "am I -ahead" read that finished games leave to the place emoji. When a listed +when leading or tied and `--danger` when trailing, and an opponent's number is tinted `--ok` only +when it **ties the viewer for the lead** (so an equal non-zero score paints both numbers green); +otherwise numbers stay muted, as does a fresh **0:0** board where nobody has scored yet — a quick +"am I ahead" read that finished games leave to the place emoji. When a listed game **becomes your turn or finishes** while the lobby is open, that status emoji **blinks twice** (a two-cycle opacity fade, ~2 s; suppressed under reduce-motion) to draw the eye — the opponent's-turn change is silent. Each card's blink is keyed by game id, so overlapping diff --git a/ui/src/lib/lobbysort.test.ts b/ui/src/lib/lobbysort.test.ts index 3e65ee8..e4f852d 100644 --- a/ui/src/lib/lobbysort.test.ts +++ b/ui/src/lib/lobbysort.test.ts @@ -126,22 +126,42 @@ describe('scoreStanding', () => { { ...seat(1, 'opp'), score: oppScore }, ], }); + const at = (g: GameView, accountId: string): Seat => g.seats.find((s) => s.accountId === accountId)!; - it('greens a leading or tied active game, reds a losing one', () => { - expect(scoreStanding(withScores('active', 30, 10), ME)).toBe('win'); - expect(scoreStanding(withScores('active', 10, 10), ME)).toBe('win'); // a tie counts as green - expect(scoreStanding(withScores('active', 5, 10), ME)).toBe('lose'); + it('greens the leading viewer and reds a trailing one; the opponent stays muted', () => { + const lead = withScores('active', 30, 10); + expect(scoreStanding(lead, ME, at(lead, ME))).toBe('win'); + expect(scoreStanding(lead, ME, at(lead, 'opp'))).toBeNull(); // a trailing opponent is not coloured + + const behind = withScores('active', 5, 10); + expect(scoreStanding(behind, ME, at(behind, ME))).toBe('lose'); + expect(scoreStanding(behind, ME, at(behind, 'opp'))).toBeNull(); // a leading opponent is not coloured + }); + + it('greens both seats on an equal non-zero score', () => { + const tie = withScores('active', 10, 10); + expect(scoreStanding(tie, ME, at(tie, ME))).toBe('win'); + expect(scoreStanding(tie, ME, at(tie, 'opp'))).toBe('win'); + }); + + it('leaves a fresh 0:0 board muted (nobody has scored yet)', () => { + const fresh = withScores('active', 0, 0); + expect(scoreStanding(fresh, ME, at(fresh, ME))).toBeNull(); + expect(scoreStanding(fresh, ME, at(fresh, 'opp'))).toBeNull(); }); it('is null for any non-active game (open or finished)', () => { - expect(scoreStanding(withScores('finished', 30, 10), ME)).toBeNull(); - expect(scoreStanding(withScores('open', 0, 0), ME)).toBeNull(); + const fin = withScores('finished', 30, 10); + expect(scoreStanding(fin, ME, at(fin, ME))).toBeNull(); + const op = withScores('open', 0, 0); + expect(scoreStanding(op, ME, at(op, ME))).toBeNull(); }); it('is null when the viewer is not seated or has no opponent', () => { - expect(scoreStanding(withScores('active', 30, 10), 'stranger')).toBeNull(); + const g = withScores('active', 30, 10); + expect(scoreStanding(g, 'stranger', at(g, ME))).toBeNull(); const solo: GameView = { ...game('g', 'active', 0, 0), seats: [{ ...seat(0, ME), score: 9 }] }; - expect(scoreStanding(solo, ME)).toBeNull(); + expect(scoreStanding(solo, ME, solo.seats[0])).toBeNull(); }); it('compares against the strongest opponent in a multiplayer game', () => { @@ -151,10 +171,26 @@ describe('scoreStanding', () => { seats: [ { ...seat(0, ME), score: 40 }, { ...seat(1, 'a'), score: 35 }, - { ...seat(2, 'b'), score: 50 }, // b is ahead -> losing + { ...seat(2, 'b'), score: 50 }, // b is ahead -> the viewer is losing ], }; - expect(scoreStanding(g3, ME)).toBe('lose'); + expect(scoreStanding(g3, ME, at(g3, ME))).toBe('lose'); + expect(scoreStanding(g3, ME, at(g3, 'b'))).toBeNull(); // a leading opponent is not coloured + }); + + it('greens every seat tied with the viewer for the lead in a multiplayer game', () => { + const g3: GameView = { + ...game('g', 'active', 0, 0), + players: 3, + seats: [ + { ...seat(0, ME), score: 40 }, + { ...seat(1, 'a'), score: 40 }, // tied with the viewer for the lead -> green + { ...seat(2, 'b'), score: 20 }, // trailing -> muted + ], + }; + expect(scoreStanding(g3, ME, at(g3, ME))).toBe('win'); + expect(scoreStanding(g3, ME, at(g3, 'a'))).toBe('win'); + expect(scoreStanding(g3, ME, at(g3, 'b'))).toBeNull(); }); }); diff --git a/ui/src/lib/lobbysort.ts b/ui/src/lib/lobbysort.ts index 7292da0..09696d5 100644 --- a/ui/src/lib/lobbysort.ts +++ b/ui/src/lib/lobbysort.ts @@ -3,7 +3,7 @@ // games — each ordered by last activity: your-turn oldest-first (the longest-neglected on // top), the other two newest-first. -import type { GameView } from './model'; +import type { GameView, Seat } from './model'; /** isMyTurn reports whether an active game's seat-to-move belongs to the caller. */ export function isMyTurn(game: GameView, myId: string): boolean { @@ -13,18 +13,26 @@ export function isMyTurn(game: GameView, myId: string): boolean { } /** - * scoreStanding colours the viewer's own score on an in-progress game: 'win' when leading or - * tied (green), 'lose' when trailing (red). It is null for any game that is not active (open or - * finished — finished games show the result emoji instead) or where myId is not seated against - * an opponent, so the lobby leaves those numbers in the muted default. + * scoreStanding colours a single seat's score on an in-progress game, viewed by myId. The + * viewer's own seat is 'win' (green) when it leads or ties for the lead and 'lose' (red) when it + * trails; any other seat is 'win' only when it ties the viewer for the lead, so an equal score + * paints both numbers green — otherwise an opponent's number keeps the muted default. It returns + * null (every number muted) for a game that is not active (open or finished — finished games show + * the result emoji instead), for a fresh 0:0 board where nobody has scored yet, and when myId is + * not seated against an opponent. */ -export function scoreStanding(game: GameView, myId: string): 'win' | 'lose' | null { +export function scoreStanding(game: GameView, myId: string, seat: Seat): 'win' | 'lose' | null { if (game.status !== 'active') return null; const me = game.seats.find((s) => s.accountId === myId); if (!me) return null; const others = game.seats.filter((s) => s.accountId && s.accountId !== myId).map((s) => s.score); if (!others.length) return null; - return me.score >= Math.max(...others) ? 'win' : 'lose'; + const top = Math.max(me.score, ...others); + if (top === 0) return null; // nobody has scored yet: leave the 0:0 board muted, like a finished game + const meLeads = me.score === top; + if (seat.accountId === myId) return meLeads ? 'win' : 'lose'; + // Another seat greens only when it ties the leading viewer at the top — the equal-score case. + return meLeads && seat.score === top ? 'win' : null; } /** diff --git a/ui/src/screens/Lobby.svelte b/ui/src/screens/Lobby.svelte index 28fb22f..dd5f9f7 100644 --- a/ui/src/screens/Lobby.svelte +++ b/ui/src/screens/Lobby.svelte @@ -267,11 +267,11 @@ {#if badge}{/if} {#each orderedSeats(g) as s, i (s.seat)}{#if i > 0}{' : '}{#each orderedSeats(g) as s, i (s.seat)}{@const standing = scoreStanding(g, myId, s)}{#if i > 0}{' : '}{/if}{s.score}{s.score}{/each} @@ -483,8 +483,9 @@ font-weight: 700; font-size: 0.8rem; } - /* The viewer's own number on an in-progress game: green when leading or tied, red when - losing; other numbers and the separators keep the muted .sub colour. */ + /* In-progress score colours (see scoreStanding): the viewer's number greens when leading or + tied, reds when losing; an opponent's number greens only when it ties the viewer (an equal + score paints both green). A fresh 0:0 board and the separators keep the muted .sub colour. */ .num.win { color: var(--ok); }