zuma_rxjs

A browser-based Zuma-style game built with React, TypeScript and RxJS. A chain of colored balls travels along a path toward a hole; the player rotates a gun and shoots balls to insert them into the chain and clear matching colors before they reach the end.

Tech stack

• React 18 + TypeScript — UI and components
• Vite — dev server and build
• RxJS — event and movement streams (shots, ticks, collisions)
• Sass (CSS Modules) + Tailwind CSS — styling
• ESLint (Airbnb config) + Prettier — linting and formatting

Getting started

Requires Node 22 and npm 10 (see engines in package.json).

npm install      # install dependencies
npm run dev      # start the Vite dev server

Then open the URL printed in the terminal (default http://localhost:5173).

Scripts

Command	Description
npm run dev	Start the development server with hot reload
npm run build	Type-check (tsc) and build for production
npm run preview	Preview the production build locally

Project structure

src/
├── components/      # React components (GameDeck, Gun, Ball, Path, Player, ...)
├── services/        # Game services (GlobalTick, MovementCalc, PathService)
├── contexts/        # React contexts (GameDeckContext)
├── constants/       # Game constants
├── interfaces/      # Shared interfaces (e.g. Collider)
├── types/           # Shared TypeScript types
└── utils/           # Helpers (e.g. random)

Architecture notes

Design discussion on rendering the playfield (canvas vs. React) and moving the per-frame simulation out of React state lives in docs/architecture-notes.md.