Fragments

Fragments is a daily browser investigation game built with React, PixiJS, Zustand, TypeScript, and Vite.

Each daily seed activates 3 modes chosen deterministically from a catalog of 6 minigames. The rotation preserves historical selections by date and tries to limit repetition across consecutive days.

Current game catalog:

• Memory: find the correct pairs.
• Reconstruction: reorder the file in a 4x4 sliding board.
• Decode: discover the correct glyph sequence through partial feedback.
• Trace: click the signals in the correct trail order.
• Sequence: replay the observed glyph pulse.
• Sweep: cross the marked field by following a safe route.

When the 3 daily games are completed, the seed is marked as complete in the menu and calendar. Progress is stored locally in the browser, and finishing a seed unlocks a reward summary for that day.

Stack

• React 18
• PixiJS 8
• Zustand
• TypeScript
• Vite
• Vitest
• Playwright

Scripts

The repository includes yarn.lock, so Yarn is the recommended workflow:

yarn
yarn dev
yarn test
yarn build
yarn preview

The same scripts also exist in package.json:

• dev: starts the app in development mode
• build: generates the production bundle in dist/
• preview: serves the local production build
• test: runs unit tests

Structure

src/
  app/       app shell and global styles
  core/      deterministic generation, score, types, and utilities
  game/      Pixi renderers for active modes
  state/     Zustand stores per game
  storage/   local persistence by date + game
  ui/        menu, header, overlays, and copy
public/
  assets/    previews, motifs, and brand assets
scripts/     local Playwright validation helpers

Project Features

• deterministic daily seeds by date
• 3 active games per seed, chosen from a catalog of 6 modes
• deterministic daily rotation with frozen history per date
• limited overlap between consecutive daily selections whenever possible
• local completion history in the calendar
• playable date range starting at 2026-03-25
• per-mode scoring
• seed reward with classification and per-mode score breakdown
• interface available in pt-BR and en
• brand assets for favicon, touch icon, and social banner

Development

The game uses Pixi inside a React shell. The app UI lives in React, while each game board is rendered on the canvas.

The project also exposes automation helpers for inspecting game state during local validation, used together with the Playwright client in scripts/run-web-game-client.mjs.

Deploy

The expected deploy target is a static host, compatible with Vercel.

Current flow:

yarn build

The final output is written to dist/.

Versioning

Before the first push, confirm that these local artifacts remain outside the commit:

• node_modules/
• dist/
• output/
• coverage/
• scripts/.runtime-web-game-client.mjs

The project .gitignore already covers these cases.