feat(game): play confetti for finished games

src/components/Confetti.test.jsx

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render} from '@testing-library/react';
+import Confetti from './Confetti.jsx';
+
+// jsdom has no canvas drawing.
+beforeEach(() => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+});
+
+afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+});
+
+const reducedMotion = (reduce) => vi.stubGlobal('matchMedia', (query) => ({
+    matches: reduce && query.includes('prefers-reduced-motion'),
+}));
+
+describe('Confetti', () => {
+    it('draws on a canvas hidden from screen readers', () => {
+        reducedMotion(false);
+        const {container} = render(<Confetti size="big"/>);
+
+        const canvas = container.querySelector('canvas');
+        expect(canvas.getAttribute('aria-hidden')).toBe('true');
+        expect(canvas.dataset.size).toBe('big');
+    });
+
+    it('draws nothing when the user asked for reduced motion', () => {
+        reducedMotion(true);
+        const {container} = render(<Confetti size="small"/>);
+
+        expect(container.querySelector('canvas')).toBeNull();
+    });
+});