By Other Means Control Timer

A round timer for By Other Means, a diplomacy/wargame-style event. Each 40-minute round is broken into four phases (Negotiation, Plenary, Discussion, Orders), and this app tracks elapsed time and displays the current phase to players.

• Start Round begins the timer and highlights the active phase as time passes.
• Once running, the button switches to Prepare Next Round, which asks for confirmation before resetting the timer for the next round.
• Time past the round length is shown in red and pulses to flag overtime.

Phase names, durations, descriptions, and colors are defined in src/utils/constants.ts.

Tech Stack

Built with TanStack Start (file-based routing via TanStack Router), React 19, Redux Toolkit + redux-persist for timer state, Luxon for time handling, and Tailwind CSS for styling.

Getting Started

npm install
npm run dev

The dev server runs on port 8000 (see vite.config.ts).

Building For Production

npm run build

A Dockerfile is included for containerized deployment.

Linting & Formatting

This project uses Biome for linting and formatting.

npm run lint
npm run format
npm run check

Project Structure

• src/routes/ — file-based routes (__root.tsx, index.tsx)
• src/pages/Welcome.tsx — main timer view
• src/components/ — Phase and ConfirmModal UI components
• src/store/ — Redux store, timeSlice (start time) and phaseSlice
• src/utils/ — phase/round constants, helper functions, and types

Learn More

• TanStack Start documentation
• TanStack Router documentation