dino_timer Svelte Themes

Dino_timer

A dinosaur-themed desktop timer app built with Tauri 2 + SvelteKit 5

dino_timer

A mob programming timer — manages participant rotation, turn countdowns, and scheduled breaks for a dev session.


Requirements

Before anything, make sure you have:

  • Rust — install via rustup
  • Bun — install via curl -fsSL https://bun.sh/install | bash
  • Xcode Command Line Tools (macOS) — xcode-select --install
  • VS Code extensions — Svelte, Tauri, rust-analyzer

Verify your setup:

rustc --version    # 1.77+
bun --version      # 1.0+

Setup

# 1. Install frontend dependencies
bun install

# 2. The Rust dependencies are fetched automatically on first build/run
#    but you can pre-fetch them with:
cd src-tauri && cargo fetch

Running

# Full app (Rust backend + Svelte frontend, with hot reload)
bun run tauri dev

# Frontend only (no Rust, useful for UI work)
bun run dev

First run will be slow (~2–3 min) while Rust compiles all dependencies. Subsequent runs are fast.


Building

bun run tauri build

Output is in src-tauri/target/release/bundle/ — platform-specific installer (.dmg on macOS, .msi on Windows).


App Lifecycle

Here's how the app works end to end once running:

1. Boot

  • Tauri starts the Rust binary and opens a WebView window
  • The Svelte app calls init() from state.svelte.ts
  • init() fetches the current SessionState from Rust and subscribes to two events: session_tick and session_complete

2. Setup (before a session)

  • User adds participants — each has a name and an emoji avatar
  • User configures settings — turn duration, session length, break interval, break duration
  • All of this is stored in Rust's managed SessionState

3. Session running

  • User hits Start → Rust sets running: true
  • A background Rust ticker fires every second, decrements remaining_phase_secs, and emits a session_tick event with the full updated state
  • The Svelte state layer receives session_tick and updates $state — the UI re-renders automatically
  • The timer counts down from X to 0

4. Turn rotation

  • When remaining_phase_secs hits 0, Rust advances current_index to the next participant (wraps around)
  • User can also hit Next at any time to skip to the next person manually

5. Breaks

  • When elapsed_session_secs reaches next_break_at_secs, Rust switches phase from turn to break
  • Break countdown runs the same way — when it ends, rotation resumes and next_break_at_secs is pushed forward

6. Session end

  • When elapsed_session_secs >= session_duration_secs, Rust emits session_complete and stops the ticker
  • Stop at any time resets the session but keeps participants and settings intact

Project Structure

src/
  lib/
    types.ts           # TypeScript mirrors of all Rust structs
    ipc.ts             # All invoke() calls — the only file that talks to Rust
    state.svelte.ts    # App-wide $state, event listeners, action functions
  routes/
    +page.svelte       # Main view
    +layout.ts         # SPA config (ssr: false)

src-tauri/
  src/
    types.rs           # Rust structs (Participant, Settings, SessionState)
    session.rs         # Timer logic — tick, rotation, break injection
    commands.rs        # Tauri IPC commands + background ticker
    lib.rs             # App entry — wires state, registers commands

Code checks

bun run check                        # TypeScript + Svelte type check
cd src-tauri && cargo clippy         # Rust linter
cd src-tauri && cargo test           # Rust unit tests

All three must be clean before committing.

Top categories

Loading Svelte Themes