diff --git a/README.md b/README.md index 81b35c4..a0885c7 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,37 @@ -Welcome to your new TanStack Start app! +# By Other Means Control Timer -# Getting Started +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. -To run this application: +- **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 ``` -# Building For Production +The dev server runs on port 8000 (see `vite.config.ts`). -To build this application for production: +## Building For Production ```bash npm run build ``` -## Styling - -This project uses [Tailwind CSS](https://tailwindcss.com/) for styling. - -### Removing Tailwind CSS - -If you prefer not to use Tailwind CSS: - -1. Remove the demo pages in `src/routes/demo/` -2. Replace the Tailwind import in `src/styles.css` with your own styles -3. Remove `tailwindcss()` from the plugins array in `vite.config.ts` -4. Remove `@tailwindcss/vite` and `tailwindcss` from `package.json` +A `Dockerfile` is included for containerized deployment. ## Linting & Formatting -This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available: - +This project uses [Biome](https://biomejs.dev/) for linting and formatting. ```bash npm run lint @@ -41,154 +39,15 @@ 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 -## Routing +## Learn More -This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`. - -### Adding A Route - -To add a new route to your application just add a new file in the `./src/routes` directory. - -TanStack will automatically generate the content of the route file for you. - -Now that you have two routes you can use a `Link` component to navigate between them. - -### Adding Links - -To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`. - -```tsx -import { Link } from "@tanstack/react-router"; -``` - -Then anywhere in your JSX you can use it like so: - -```tsx -About -``` - -This will create a link that will navigate to the `/about` route. - -More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent). - -### Using A Layout - -In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`. - -Here is an example layout that includes a header: - -```tsx -import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router' - -export const Route = createRootRoute({ - head: () => ({ - meta: [ - { charSet: 'utf-8' }, - { name: 'viewport', content: 'width=device-width, initial-scale=1' }, - { title: 'My App' }, - ], - }), - shellComponent: ({ children }) => ( - - - - - -
- -
- {children} - - - - ), -}) -``` - -More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts). - -## Server Functions - -TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components. - -```tsx -import { createServerFn } from '@tanstack/react-start' - -const getServerTime = createServerFn({ - method: 'GET', -}).handler(async () => { - return new Date().toISOString() -}) - -// Use in a component -function MyComponent() { - const [time, setTime] = useState('') - - useEffect(() => { - getServerTime().then(setTime) - }, []) - - return
Server time: {time}
-} -``` - -## API Routes - -You can create API routes by using the `server` property in your route definitions: - -```tsx -import { createFileRoute } from '@tanstack/react-router' -import { json } from '@tanstack/react-start' - -export const Route = createFileRoute('/api/hello')({ - server: { - handlers: { - GET: () => json({ message: 'Hello, World!' }), - }, - }, -}) -``` - -## Data Fetching - -There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered. - -For example: - -```tsx -import { createFileRoute } from '@tanstack/react-router' - -export const Route = createFileRoute('/people')({ - loader: async () => { - const response = await fetch('https://swapi.dev/api/people') - return response.json() - }, - component: PeopleComponent, -}) - -function PeopleComponent() { - const data = Route.useLoaderData() - return ( - - ) -} -``` - -Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters). - - - -# Learn More - -You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com). - -For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start). +- [TanStack Start documentation](https://tanstack.com/start) +- [TanStack Router documentation](https://tanstack.com/router)