Q‑Place

A lightweight, r/place‑style collaborative pixel board focused on simplicity, responsiveness, and accessibility.

Getting started

pnpm install
pnpm dev

Run tests (JSDOM + Vitest + Testing Library):

pnpm test

Build:

pnpm build

Controls & Shortcuts

• Zoom: mouse wheel around the pointer, or press + / -.
• Reset: press 0 to reset zoom and recenter.
• Pan: hold Space and drag.
• Place: toggle Place in the header, then click to queue a pixel (see Pending).
• Zoom popover: click the Zoom readout for Fit, 100%, custom percent, and Crisp toggle.
• Copy: copy the visible canvas as PNG. Choose 1× / 2× / 4× to avoid tiny pastes. Hidden artists stay hidden.

Accessibility

• Stable accessible names; all controls keyboard-reachable with visible focus.
• Place toggle uses aria-pressed. Pending uses a polite live region and only announces when > 0.
• Zoom change announcements are throttled to integer percent changes.

Project structure

• src/components — PixelCanvas, HeaderBar, ArtistsPanel.
• src/content — HowTo.tsx, ChangeLog.tsx.
• tests — small, focused tests; JSDOM and a minimal canvas mock (tests/tests-canvas-mock.ts).
• vite.config.ts / vitest.config.ts — aligned aliases and ESM handling.

Release notes

See HowTo → Change log in the app, or src/content/ChangeLog.tsx.