# 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](https://tanstack.com/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

```bash
npm install
npm run dev
```

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

## Building For Production

```bash
npm run build
```

A `Dockerfile` is included for containerized deployment.

## Linting & Formatting

This project uses [Biome](https://biomejs.dev/) for linting and formatting.

```bash
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](https://tanstack.com/start)
- [TanStack Router documentation](https://tanstack.com/router)