feat(game): play confetti for finished games

src/pages/GameDetail.test.jsx

@@ -282,3 +282,35 @@ describe('GameDetail of a game added by hand', () => {
         });
     });
 });
+
+describe('GameDetail confetti', () => {
+    // jsdom has no canvas drawing.
+    beforeEach(() => {
+        vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    const opened = async (entry) => {
+        globalThis.fetch = vi.fn(async () => ({ok: true, status: 200, json: async () => ({...game, ...entry})}));
+        const {container} = renderDetail();
+        await screen.findByText('Half-Life 2');
+        return container.querySelector('canvas[data-size]');
+    };
+
+    it('plays a small one for a finished game', async () => {
+        expect((await opened({status: 'FINISHED'})).dataset.size).toBe('small');
+    });
+
+    it('plays a big one when every achievement is unlocked too', async () => {
+        const canvas = await opened({status: 'COMPLETED', hasAchievements: true, statsVisible: true,
+            achievementsTotal: 3, achievementsUnlocked: 3});
+        expect(canvas.dataset.size).toBe('big');
+    });
+
+    it('plays nothing for a game not finished', async () => {
+        expect(await opened({status: 'PLAYING'})).toBeNull();
+    });
+});