diff --git a/README.md b/README.md index 2e82359..1e0cce2 100644 --- a/README.md +++ b/README.md @@ -72,12 +72,18 @@ the seat of any guest who is not ready, naming it rather than pointing at "the other one". An owner who leaves hands the room to whoever is left, and the last player out closes it, as does ten minutes with no game started. +The room also keeps the score of the series: how many games each seat has won +since the room opened, shown in the lobby and beside each player's score on the +board. It is a room fact rather than a game one, credited the moment a game +ends, and a seat that is vacated takes its tally with it — the name on it no +longer means the same person. + Joining is a lobby thing: a room with a game running turns a latecomer away even when it has seats going spare, because there is no way to hand somebody a game already in progress. The whole room travels as one `RoomState` per recipient — the seating, roles, -readiness and presence — so a client that missed a frame is correct again from +readiness, presence and the series score — so a client that missed a frame is correct again from the next one rather than from a stream of deltas it has to replay. The recipient's own row is in that list like everybody else's, marked `is_me`, which is the only encoding of their role there is: a second one alongside would @@ -88,9 +94,17 @@ the chain, the clock, the chat — with only the word input gone, and the final screen shows everybody's standings, ranked by who outlasted whom with each score reported beside the place rather than deciding it. -Everybody in the room can talk, in the lobby and during a game. The conversation -belongs to the room rather than to a game, so it survives one starting and -finishing, and it dies with the room. A player is replayed what was said while +A wide screen puts the game and the conversation side by side, so neither has +to be scrolled past to reach the other; a phone gets one column, the game first +with the chat below it, folded behind an unread count while a game is on. + +Everybody in the room can talk, in the lobby and during a game. The +conversation reads as a log — one line per message, `name: text`, each seat +writing in its own colour — rather than as a stack of bubbles, which stops +being legible once four people are talking. The colour comes from the seat the +server says spoke, never from matching names. The conversation belongs to the +room rather than to a game, so it survives one starting and finishing, and it +dies with the room. A player is replayed what was said while they held their seat: a refresh brings their conversation back, and somebody who walks in with the code starts at silence rather than reading what the last people in the room said. Text passes the same filter as a nickname before anyone sees @@ -98,7 +112,7 @@ it — control and format characters dropped, whitespace collapsed, combining marks capped — and a bot game has no chat, there being nobody to talk to. When somebody leaves their seat their words stay in the conversation but their -name does not: the panel shows them as having left. A name left behind would be +name does not: the panel shows them as having left, in nobody's colour. A name left behind would be one the next person to walk in could ask for, and the words above it would become theirs. diff --git a/proto/noitu/v1/game.proto b/proto/noitu/v1/game.proto index 54865db..f2350e9 100644 --- a/proto/noitu/v1/game.proto +++ b/proto/noitu/v1/game.proto @@ -192,6 +192,11 @@ message PlayerSlot { bool ready = 5; // False while this player is inside their reconnect window. bool connected = 6; + // How many games this seat has won since the room opened. A room outlives + // its games, so the tally belongs to the seat rather than to any one of + // them; it starts again when the seat is vacated, because by then the name + // on it no longer means the same person. + uint32 wins = 7; } // PlayerScore is one player in a running or finished game. @@ -353,6 +358,10 @@ message ChatMessage { string text = 3; // Server clock. The client renders it; it never orders by its own clock. int64 sent_unix_ms = 4; + // Which seat spoke, so the client can colour a line by its author instead + // of by matching display names. Cleared with the author for a line whose + // seat has been vacated. + string player_id = 5; } // ChatHistory is the whole panel, oldest first, sent when a player is seated in diff --git a/proto/testdata/server_chat_history.bin b/proto/testdata/server_chat_history.bin index 02b435e..a029deb 100644 --- a/proto/testdata/server_chat_history.bin +++ b/proto/testdata/server_chat_history.bin @@ -1,4 +1,4 @@ -rl -,Người chơiBắt đầu nhé 3 -" Khách mời Sẵn sàng Ⱦ3 +rt +0Người chơiBắt đầu nhé 3*p1 +& Khách mời Sẵn sàng Ⱦ3*p2 Tôi phải đi 3 \ No newline at end of file diff --git a/proto/testdata/server_chat_message.bin b/proto/testdata/server_chat_message.bin index 2456a88..08b0679 100644 --- a/proto/testdata/server_chat_message.bin +++ b/proto/testdata/server_chat_message.bin @@ -1 +1 @@ -j; Khách mời$Tiếng “sinh” khó nối lắm. 3 \ No newline at end of file +j? Khách mời$Tiếng “sinh” khó nối lắm. 3*p2 \ No newline at end of file diff --git a/proto/testdata/server_room_state.bin b/proto/testdata/server_room_state.bin index 706ae4e..fbcac6d 100644 --- a/proto/testdata/server_room_state.bin +++ b/proto/testdata/server_room_state.bin @@ -1,5 +1,5 @@ -bV -K7QXJ -p1Người chơi 0J -p2 Khách mời(0J +bZ +K7QXJ +p1Người chơi 08J +p2 Khách mời(08J p3Khách 2(PX` \ No newline at end of file diff --git a/server/gen/noitu/v1/game.pb.go b/server/gen/noitu/v1/game.pb.go index c30c0a7..e1b9a38 100644 --- a/server/gen/noitu/v1/game.pb.go +++ b/server/gen/noitu/v1/game.pb.go @@ -1180,7 +1180,12 @@ type PlayerSlot struct { // Always false for the owner, whose readiness is StartGame itself. Ready bool `protobuf:"varint,5,opt,name=ready,proto3" json:"ready,omitempty"` // False while this player is inside their reconnect window. - Connected bool `protobuf:"varint,6,opt,name=connected,proto3" json:"connected,omitempty"` + Connected bool `protobuf:"varint,6,opt,name=connected,proto3" json:"connected,omitempty"` + // How many games this seat has won since the room opened. A room outlives + // its games, so the tally belongs to the seat rather than to any one of + // them; it starts again when the seat is vacated, because by then the name + // on it no longer means the same person. + Wins uint32 `protobuf:"varint,7,opt,name=wins,proto3" json:"wins,omitempty"` unknownFields protoimpl.UnknownFields sizeCache protoimpl.SizeCache } @@ -1257,6 +1262,13 @@ func (x *PlayerSlot) GetConnected() bool { return false } +func (x *PlayerSlot) GetWins() uint32 { + if x != nil { + return x.Wins + } + return 0 +} + // PlayerScore is one player in a running or finished game. // // Separate from PlayerSlot because they answer different questions: a slot is @@ -2012,7 +2024,11 @@ type ChatMessage struct { Author string `protobuf:"bytes,2,opt,name=author,proto3" json:"author,omitempty"` Text string `protobuf:"bytes,3,opt,name=text,proto3" json:"text,omitempty"` // Server clock. The client renders it; it never orders by its own clock. - SentUnixMs int64 `protobuf:"varint,4,opt,name=sent_unix_ms,json=sentUnixMs,proto3" json:"sent_unix_ms,omitempty"` + SentUnixMs int64 `protobuf:"varint,4,opt,name=sent_unix_ms,json=sentUnixMs,proto3" json:"sent_unix_ms,omitempty"` + // Which seat spoke, so the client can colour a line by its author instead + // of by matching display names. Cleared with the author for a line whose + // seat has been vacated. + PlayerId string `protobuf:"bytes,5,opt,name=player_id,json=playerId,proto3" json:"player_id,omitempty"` unknownFields protoimpl.UnknownFields sizeCache protoimpl.SizeCache } @@ -2075,6 +2091,13 @@ func (x *ChatMessage) GetSentUnixMs() int64 { return 0 } +func (x *ChatMessage) GetPlayerId() string { + if x != nil { + return x.PlayerId + } + return "" +} + // ChatHistory is the whole panel, oldest first, sent when a player is seated in // a room or resumes into one. A snapshot rather than a replayed stream, for the // same reason RoomState is one: a client that missed frames is correct again @@ -2418,7 +2441,7 @@ const file_noitu_v1_game_proto_rawDesc = "" + "\x06points\x18\x03 \x01(\rR\x06points\x12\x1c\n" + "\tsyllables\x18\x04 \x01(\rR\tsyllables\x12\x14\n" + "\x05typed\x18\x05 \x01(\tR\x05typed\x12\x1b\n" + - "\tplayer_id\x18\x06 \x01(\tR\bplayerId\"\xa1\x01\n" + + "\tplayer_id\x18\x06 \x01(\tR\bplayerId\"\xb5\x01\n" + "\n" + "PlayerSlot\x12\x1b\n" + "\tplayer_id\x18\x01 \x01(\tR\bplayerId\x12\x12\n" + @@ -2426,7 +2449,8 @@ const file_noitu_v1_game_proto_rawDesc = "" + "\x05is_me\x18\x03 \x01(\bR\x04isMe\x12\x19\n" + "\bis_owner\x18\x04 \x01(\bR\aisOwner\x12\x14\n" + "\x05ready\x18\x05 \x01(\bR\x05ready\x12\x1c\n" + - "\tconnected\x18\x06 \x01(\bR\tconnected\"\xbb\x01\n" + + "\tconnected\x18\x06 \x01(\bR\tconnected\x12\x12\n" + + "\x04wins\x18\a \x01(\rR\x04wins\"\xbb\x01\n" + "\vPlayerScore\x12\x1b\n" + "\tplayer_id\x18\x01 \x01(\tR\bplayerId\x12\x12\n" + "\x04name\x18\x02 \x01(\tR\x04name\x12\x13\n" + @@ -2487,13 +2511,14 @@ const file_noitu_v1_game_proto_rawDesc = "" + "maxPlayers\x12\x1f\n" + "\vmin_players\x18\v \x01(\rR\n" + "minPlayers\x12\x19\n" + - "\bgrace_ms\x18\f \x01(\rR\agraceMsJ\x04\b\x02\x10\x03J\x04\b\x04\x10\x05J\x04\b\x05\x10\x06J\x04\b\x06\x10\aJ\x04\b\a\x10\bJ\x04\b\b\x10\t\"t\n" + + "\bgrace_ms\x18\f \x01(\rR\agraceMsJ\x04\b\x02\x10\x03J\x04\b\x04\x10\x05J\x04\b\x05\x10\x06J\x04\b\x06\x10\aJ\x04\b\a\x10\bJ\x04\b\b\x10\t\"\x91\x01\n" + "\vChatMessage\x12\x17\n" + "\afrom_me\x18\x01 \x01(\bR\x06fromMe\x12\x16\n" + "\x06author\x18\x02 \x01(\tR\x06author\x12\x12\n" + "\x04text\x18\x03 \x01(\tR\x04text\x12 \n" + "\fsent_unix_ms\x18\x04 \x01(\x03R\n" + - "sentUnixMs\"@\n" + + "sentUnixMs\x12\x1b\n" + + "\tplayer_id\x18\x05 \x01(\tR\bplayerId\"@\n" + "\vChatHistory\x121\n" + "\bmessages\x18\x01 \x03(\v2\x15.noitu.v1.ChatMessageR\bmessages\"\x96\x05\n" + "\rServerMessage\x12-\n" + diff --git a/server/internal/wsapi/room.go b/server/internal/wsapi/room.go index 8378f6b..150da57 100644 --- a/server/internal/wsapi/room.go +++ b/server/internal/wsapi/room.go @@ -176,6 +176,11 @@ type seat struct { // filled. A replay starts there, which is what keeps a stranger who walks // in with the code from being handed what the last two people said. chatFrom uint64 + // wins counts the games this seat has taken since it was filled. A room + // outlives its games, so a running tally has to live on something that + // does too; the seat is the shortest-lived thing that still spans them, + // and vacating it is exactly when the tally stops meaning one player. + wins uint32 // graceUntil is when this seat stops being held for the player who dropped // out of it, and zero while they are connected. Per seat rather than per // room because any number of them can be waiting at once. @@ -983,6 +988,12 @@ func (r *room) broadcastGameOver(state game.State) { reason = r.wireEndReason(state.Eliminated[n-1]) } + // Credited before anything is sent, so the RoomState the run loop + // broadcasts after a finished game already carries the game just won. + if s := r.seatOf(state.Winner); s != nil { + s.wins++ + } + ranks := make(map[game.PlayerID]int, len(state.Standings)) order := make([]game.PlayerID, 0, len(state.Standings)) for _, standing := range state.Standings { @@ -1258,6 +1269,9 @@ func chatMessageFor(entry chatEntry, id game.PlayerID) *noituv1.ServerMessage { return &noituv1.ServerMessage{Payload: &noituv1.ServerMessage_ChatMessage{ ChatMessage: &noituv1.ChatMessage{ FromMe: entry.author != "" && entry.author == id, + // Empty together with the name for a vacated seat: a line nobody + // owns must not be coloured as somebody's either. + PlayerId: string(entry.author), Author: entry.name, Text: entry.text, SentUnixMs: entry.at.UnixMilli(), @@ -1453,6 +1467,7 @@ func (r *room) playerSlots(me game.PlayerID) []*noituv1.PlayerSlot { IsOwner: s.id == r.owner, Ready: s.ready, Connected: s.sess != nil, + Wins: s.wins, }) } return slots diff --git a/server/internal/wsapi/wire_test.go b/server/internal/wsapi/wire_test.go index 2e0320b..e3015d9 100644 --- a/server/internal/wsapi/wire_test.go +++ b/server/internal/wsapi/wire_test.go @@ -138,6 +138,7 @@ func serverVariants() map[string]*noituv1.ServerMessage { // their opponent's answer as their own. "server_chat_message": {Payload: &noituv1.ServerMessage_ChatMessage{ChatMessage: &noituv1.ChatMessage{ FromMe: false, + PlayerId: "p2", Author: "Khách mời", Text: "Tiếng “sinh” khó nối lắm.", SentUnixMs: 1756998000123, @@ -147,8 +148,9 @@ func serverVariants() map[string]*noituv1.ServerMessage { // from_me values, and the empty-author convention at once. "server_chat_history": {Payload: &noituv1.ServerMessage_ChatHistory{ChatHistory: &noituv1.ChatHistory{ Messages: []*noituv1.ChatMessage{ - {FromMe: true, Author: "Người chơi", Text: "Bắt đầu nhé", SentUnixMs: 1756998000000}, - {FromMe: false, Author: "Khách mời", Text: "Sẵn sàng", SentUnixMs: 1756998000456}, + {FromMe: true, PlayerId: "p1", Author: "Người chơi", Text: "Bắt đầu nhé", SentUnixMs: 1756998000000}, + {FromMe: false, PlayerId: "p2", Author: "Khách mời", Text: "Sẵn sàng", SentUnixMs: 1756998000456}, + // A seat that has been vacated carries neither a name nor an id. {FromMe: false, Author: "", Text: "Tôi phải đi", SentUnixMs: 1756998000789}, }, }}}, @@ -162,8 +164,8 @@ func serverVariants() map[string]*noituv1.ServerMessage { MinPlayers: 2, GraceMs: 30000, Players: []*noituv1.PlayerSlot{ - {PlayerId: "p1", Name: "Người chơi", IsMe: true, IsOwner: true, Connected: true}, - {PlayerId: "p2", Name: "Khách mời", Ready: true, Connected: true}, + {PlayerId: "p1", Name: "Người chơi", IsMe: true, IsOwner: true, Connected: true, Wins: 2}, + {PlayerId: "p2", Name: "Khách mời", Ready: true, Connected: true, Wins: 1}, {PlayerId: "p3", Name: "Khách 2", Ready: true}, }, }}}, diff --git a/server/internal/wsapi/wsapi_test.go b/server/internal/wsapi/wsapi_test.go index 4fd0139..b94849b 100644 --- a/server/internal/wsapi/wsapi_test.go +++ b/server/internal/wsapi/wsapi_test.go @@ -1254,6 +1254,46 @@ func TestNextGameNeedsAFreshReady(t *testing.T) { } } +// TestRoomKeepsARunningWinTally: a room outlives its games, so the score of +// the series is a room fact. It is credited before the lobby is broadcast, so +// the players see it the moment a game ends rather than one input later. +func TestRoomKeepsARunningWinTally(t *testing.T) { + _, url := newTestServer(t, chainDict(), Config{}) + host, guest, _ := pvpRoom(t, url) + + // The owner resigns, so the guest takes the first game. + hostState, guestState := resignAndSettle(t, host, guest) + if got := mySlot(guestState).GetWins(); got != 1 { + t.Errorf("the winner's tally is %d after one game, want 1", got) + } + if got := mySlot(hostState).GetWins(); got != 0 { + t.Errorf("the loser's tally is %d, want 0", got) + } + // And each player is told the whole table, not just their own row. + if got := otherSlot(hostState).GetWins(); got != 1 { + t.Errorf("the owner sees the guest's tally as %d, want 1", got) + } + + // A second game the other way round leaves the series level. + guest.setReady(true) + host.await("room_state") + host.startGame() + host.await("game_started") + guest.await("game_started") + + guest.send(&noituv1.ClientMessage{Payload: &noituv1.ClientMessage_Resign{Resign: &noituv1.Resign{}}}) + host.await("game_over") + guest.await("game_over") + hostState = host.await("room_state").GetRoomState() + + if got := mySlot(hostState).GetWins(); got != 1 { + t.Errorf("the owner's tally is %d after winning one of two, want 1", got) + } + if got := otherSlot(hostState).GetWins(); got != 1 { + t.Errorf("the guest's tally is %d after winning one of two, want 1", got) + } +} + // TestLobbyActionsAreRefusedDuringAGame keeps the lobby from being a way out // of a game in progress. func TestLobbyActionsAreRefusedDuringAGame(t *testing.T) { @@ -1484,6 +1524,13 @@ func TestChatReachesBothSeatsRenderedPerRecipient(t *testing.T) { if theirs.GetSentUnixMs() == 0 { t.Error("a message carries no time") } + // The seat behind a line is the same fact for everybody: from_me is the + // only field that is relative to the reader, and a client colours a line + // by its author rather than by matching names. + if mine.GetPlayerId() != theirs.GetPlayerId() || theirs.GetPlayerId() == "" { + t.Errorf("the author's seat differs between recipients: %q and %q", + mine.GetPlayerId(), theirs.GetPlayerId()) + } } // TestChatWorksInTheLobbyAndInAGame: the conversation belongs to the room, not @@ -1886,6 +1933,11 @@ func TestVacatedSeatKeepsItsWordsButLosesItsAuthor(t *testing.T) { if got := history[0]; got.GetText() != "tôi là khách" || got.GetAuthor() != "" || got.GetFromMe() { t.Errorf("a vacated seat's message is still attributed: %+v", got) } + // The seat goes with the name. A line still carrying it would be coloured + // as whoever fills that seat next. + if got := history[0].GetPlayerId(); got != "" { + t.Errorf("a vacated seat's message still names its seat: %q", got) + } } // TestTheRemainingPlayerIsResyncedWhenASeatIsVacated is the live half of the diff --git a/web/e2e/helpers.js b/web/e2e/helpers.js index f0c8646..78eda33 100644 --- a/web/e2e/helpers.js +++ b/web/e2e/helpers.js @@ -16,7 +16,7 @@ export function board(page) { syllable: page.getByTestId('current-syllable'), turn: page.getByTestId('turn-indicator'), input: page.getByRole('textbox', { name: 'Nhập từ của bạn' }), - submit: page.getByRole('button', { name: 'Gửi', exact: true }), + submit: page.getByTestId('word-submit'), chain: page.getByRole('list').first(), rejection: page.getByRole('alert') }; diff --git a/web/e2e/pvp-game.spec.js b/web/e2e/pvp-game.spec.js index 13978b9..0b6feb4 100644 --- a/web/e2e/pvp-game.spec.js +++ b/web/e2e/pvp-game.spec.js @@ -16,9 +16,11 @@ import { * socket. One context with two tabs would share a session and prove nothing * about two people playing. */ -async function twoPlayers(browser) { - const hostContext = await browser.newContext(); - const guestContext = await browser.newContext(); +async function twoPlayers(browser, options = {}) { + // newContext does not inherit the project's `use` options, so a test about + // a phone-sized screen has to pass the viewport in here. + const hostContext = await browser.newContext(options); + const guestContext = await browser.newContext(options); return { host: await hostContext.newPage(), guest: await guestContext.newPage(), @@ -73,9 +75,11 @@ test.describe('playing a stranger', () => { // naming anybody. await expect(board(guest).turn).toHaveText('Đến lượt Minh…'); - // Each side is shown the other's server-sanitized name. - await expect(host.locator('.who', { hasText: 'Lan' })).toBeVisible(); - await expect(guest.locator('.who', { hasText: 'Minh' })).toBeVisible(); + // Each side is shown the other's server-sanitized name. Scoped to the + // scoreboard: the turn indicator names a player too, so an unscoped + // match is ambiguous for whoever is not on turn. + await expect(host.getByTestId('scoreboard').getByText('Lan')).toBeVisible(); + await expect(guest.getByTestId('scoreboard').getByText('Minh')).toBeVisible(); const used = new Set(await chainWords(host)); const hostWord = await playLegalMove(host, used); @@ -131,6 +135,12 @@ test.describe('playing a stranger', () => { // The readiness that started the first game is spent, so the owner // cannot simply start another. await expect(host.getByTestId('start-game')).toBeDisabled(); + + // The series score of the room, which the finished game has just moved: + // the guest took it, so the owner's lobby shows 1 against their seat. + await expect(host.getByTestId('wins-p2')).toContainText('Tỉ số 1'); + await expect(host.getByTestId('wins-p1')).toContainText('Tỉ số 0'); + await readyAndStart(host, guest); // A new game in the same room: the code is unchanged and the board is @@ -139,6 +149,10 @@ test.describe('playing a stranger', () => { await expect(host.getByText(code)).toBeVisible(); expect(await chainWords(host)).toHaveLength(1); + // And the tally is carried into it, where the board shows it beside + // each player's score for this game. + await expect(host.getByTestId('series-p2')).toContainText('Tỉ số 1'); + await close(); }); @@ -242,17 +256,33 @@ test.describe('playing a stranger', () => { await say(guest, 'chào!'); await expect(chat(host).log).toContainText('chào!'); - // And the conversation follows them into the game. + // The log is a list of lines, each naming its author and written in + // that seat's own colour, so four people talking stay tellable apart. + const lines = chat(host).log.getByRole('listitem'); + await expect(lines.first()).toContainText('Minh:'); + await expect(lines.nth(1)).toContainText('Lan:'); + const [first, second] = await Promise.all([ + lines.first().evaluate((el) => getComputedStyle(el).color), + lines.nth(1).evaluate((el) => getComputedStyle(el).color) + ]); + expect(first).not.toBe(second); + + // And the conversation follows them into the game, where a screen this + // wide keeps it beside the board rather than folding it away. await readyAndStart(host, guest); await waitForMyTurn(host); - await host.getByRole('button', { name: 'Trò chuyện' }).click(); await expect(chat(host).log).toContainText('chào bạn'); await close(); }); test('the board panel opens with nothing unread from the lobby', async ({ browser }) => { - const { host, guest, close } = await twoPlayers(browser); + // A phone: one column, so the board's chat folds behind an unread count + // instead of sitting beside the game. Nothing folds on a wide screen, + // and a badge for a panel that is always open would be a lie. + const { host, guest, close } = await twoPlayers(browser, { + viewport: { width: 420, height: 900 } + }); const code = await createRoom(host, 'Minh'); await joinRoom(guest, 'Lan', code); @@ -266,8 +296,8 @@ test.describe('playing a stranger', () => { await readyAndStart(host, guest); await waitForMyTurn(host); - // The board's panel is a fresh instance of the same component. What it - // mounted with is not new mail. + // The panel that folds on the way into the game is the one that was + // open in the lobby. What it had already shown is not new mail. await expect(chat(host).unread).toHaveCount(0); // And it does start counting what actually arrives while folded. The diff --git a/web/src/app.css b/web/src/app.css index 1bc4042..84e7fcf 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -18,6 +18,14 @@ --warn: #b06d0a; --shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 8px 24px rgb(0 0 0 / 6%); + /* One colour per seat, in seat order. The chat log is written in them, so + a line's author is legible before its name is read. Four, because a room + holds four. */ + --player-1: #1f6f4a; + --player-2: #1d5c8f; + --player-3: #9a5312; + --player-4: #7a3f8f; + --radius: 12px; --radius-sm: 8px; --gap: 12px; @@ -41,6 +49,11 @@ --warn: #e0a94a; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%); + --player-1: #6fc79a; + --player-2: #79b9ec; + --player-3: #e6a563; + --player-4: #c193e0; + color-scheme: dark; } diff --git a/web/src/lib/components/ChatPanel.svelte b/web/src/lib/components/ChatPanel.svelte index 322ff87..cb91ef7 100644 --- a/web/src/lib/components/ChatPanel.svelte +++ b/web/src/lib/components/ChatPanel.svelte @@ -7,12 +7,26 @@ * client never appends its own copy of a message, so there is one ordering * rather than a guessed one. * - * `collapsible` is for the board, where the panel folds behind an unread - * count so it does not crowd a phone screen. + * Three facts about where it is, because each is a different question and + * the caller is the only one that can answer them: * - * @type {{ collapsible?: boolean, onsend: (text: string) => void }} + * - `collapsible` folds the panel behind an unread count. That is for the + * board on a narrow screen, where the game and the chat share one column + * and an open log would crowd the board off it. + * - `column` says the panel has a column of its own, so the log grows into + * the height it is given instead of stopping at a phone's worth. + * - `errors` shows the room's refusals here. The lobby renders none of its + * own, so this is where they land; the board has its own alert, and two + * boxes for one error is worse than none. + * + * @type {{ + * collapsible?: boolean, + * column?: boolean, + * errors?: boolean, + * onsend: (text: string) => void + * }} */ - let { collapsible = false, onsend } = $props(); + let { collapsible = false, column = false, errors = false, onsend } = $props(); /** @type {HTMLElement | undefined} */ let list = $state(); @@ -66,6 +80,19 @@ if (room < 80) list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' }); }); + /** + * The colour a seat writes in, from the palette in app.css. A line whose + * seat the server cleared has no colour of its own: it belongs to nobody, + * and painting it as somebody would be a lie about who said it. + * + * @param {string} playerId + * @returns {string} + */ + function colourOf(playerId) { + const seat = game.seatIndexOf(playerId); + return seat ? `var(--player-${seat})` : 'var(--text-muted)'; + } + /** @param {number} atMs */ function clock(atMs) { const at = new Date(atMs); @@ -112,14 +139,15 @@ {#if messages.length === 0}

{t.chatEmpty}

{:else} -
    + +
      {#each messages as entry} -
    1. - {#if !entry.fromMe} - - {entry.author || t.chatAuthorLeft} - {/if} +
    2. + + {entry.author || t.chatAuthorLeft}: {entry.text} {clock(entry.atMs)} @@ -128,12 +156,9 @@
    {/if} - {#if !collapsible && game.state.error} - + {#if errors && game.state.error} +