LR Timer

LR Timer is a React + TypeScript web app for tracking Lineage Remastered spawn cycles. It focuses on quick visibility of current time, daily spawn schedules, and time remaining to the next spawn.

Current Features

• Clock view with analog clock face and digital time display
• Timeline view showing daily spawn times across 4h/6h/8h/12h periods
• Countdown view with period tabs (4h, 6h, 8h, 12h)
• Circular progress with three visual modes:
  • Normal mode above 15 minutes
  • Warning mode during the last 15 minutes
  • Critical pulse mode during the last 10 seconds
• Settings view for:
  • Base spawn time (hour, minute, second)
  • Spawn offset (-4h, 0h, +4h)
  • Notification enable flag
  • Default alarm type
  • Theme (light/dark)
• Persistent settings via localStorage
• PWA support via vite-plugin-pwa

Tech Stack

• React 19
• TypeScript
• Vite 7
• Tailwind CSS
• Vitest + Testing Library
• ESLint + Stylelint

Project Structure

src/
├── App.tsx                    # Root component: navigation and theme toggle
├── main.tsx                   # Entry point
├── index.css                  # Tailwind imports and CSS custom properties
├── components/
│   ├── Clock.tsx              # Analog + digital clock view
│   ├── Timeline.tsx           # Daily spawn timeline across all periods
│   ├── Countdown.tsx          # Per-period countdown with period tab selector
│   ├── CircularProgress.tsx   # SVG circular progress with 3-mode display
│   └── Settings.tsx           # Base time, offset, notification, theme settings
├── contexts/
│   └── TimerContext.tsx       # Global settings context with localStorage
├── hooks/
│   └── useScheduledTimer.ts   # Scheduled countdown state hook
└── utils/
    ├── timeUtils.ts           # Spawn calculations and time formatting
    └── alarmSounds.ts         # Web Audio API sound generation and preview

Spawn Calculation Rules

• Spawn calculations are cycle-based and handled through utility functions.
• Periods use: 4h, 6h, 8h, 12h.
• 8h period uses the raw base time.
• Other periods use base time plus offset.

Getting Started

Prerequisites

• Node.js 18+
• npm

Install

npm install

Run Development Server

npm run dev

Default URL: http://localhost:5173

Scripts

npm run dev           # Start Vite dev server
npm run build         # Production build
npm run preview       # Preview production build
npm run lint          # Lint JS/TS
npm run lint:css      # Lint CSS
npm run test          # Run tests once
npm run test:watch    # Run tests in watch mode
npm run test:ui       # Run Vitest UI
npm run test:coverage # Run tests with coverage

Testing

Primary test targets:

• src/utils/timeUtils.test.ts
• src/hooks/useScheduledTimer.test.ts
• src/hooks/useScheduledTimer.notifications.test.ts
• src/components/CircularProgress.test.tsx

Notes

• Time and progress behaviors should be implemented through shared utility logic where possible.
• Audio is generated with Web Audio API utilities (no bundled audio files).
• HMR is enabled in development; changes should appear without manual reload.

Icon Sources

• https://www.svgrepo.com/svg/441919/cog
• https://www.svgrepo.com/svg/487899/timeline
• https://www.svgrepo.com/svg/487203/clock
• https://www.svgrepo.com/svg/409790/timer

License

This project is open source and available under the MIT License.