apps/backend/src/server/ExpressApp.ts

@@ -80,10 +80,11 @@ export class ExpressApp {
             }
         }));
 
-        // Live games if any are being played, otherwise the most spectated finished games.
+        // Live games if any are being played, otherwise the most spectated finished games. With kind=finished
+        // always the finished games, for clients that get live games over the WebSocket.
         app.get("/games/popular", handleAsync(async (req, res) => {
             const limit = parseLimit(req.query.limit, 5);
-            const live = liveGames.getTop(limit);
+            const live = req.query.kind === "finished" ? [] : liveGames.getTop(limit);
             if (live.length > 0) {
                 res.send({ kind: "live", games: live });
             } else {

apps/backend/tests/server/ExpressApp.test.ts

@@ -138,6 +138,17 @@ describe("HTTP API", () => {
             expect(body.games.map((g: any) => g.id)).toEqual([watched.id, quiet.id]);
             expect(body.games[0]).not.toHaveProperty("moves");
         });
+
+        it("lists finished games while games are live when asked for finished games", async () => {
+            const finished = await finishGame(CAROL, DAVE);
+            await flushPromises();
+            startGame();
+
+            expect((await get("/games/popular")).body.kind).toBe("live");
+            const { body } = await get("/games/popular?kind=finished");
+            expect(body.kind).toBe("finished");
+            expect(body.games.map((g: any) => g.id)).toEqual([finished.id]);
+        });
     });
 
     describe("GET /games/me/active", () => {

docs/specs/web-redesign/tasks.md

@@ -4,7 +4,7 @@ Work through the tasks in order; each ends with its checks passing and a commit.
 
 - [x] 1. **Core**: `ThemeManager` takes its themes; `PitViewModel.highlight` set by `PitAnimator`; `getSowingPath`
       with unit tests; new texts (en, tr).
-- [ ] 2. **Backend**: `GET /games/popular?kind=finished`; test.
+- [x] 2. **Backend**: `GET /games/popular?kind=finished`; test.
 - [ ] 3. **Web app shell**: the three themes, font, base styles, `AppHeader` (logo, theme swatches, account menu,
       action) on every page; restyle the lobby, privacy page, loading and connection panels.
 - [ ] 4. **Web app board**: `BoardView`, `PitView`, `StoreView`, stones, upright layout, highlights and move preview.