lsr-idle Svelte Themes

Lsr Idle

Loot Sleep Repeat -- The Idle ARPG. Standalone Svelte component library for the idle game section.

lsr-idle

Loot Sleep Repeat -- The Idle ARPG. A Path of Exile-flavoured incremental game: click monsters, raise minions, allocate the passive tree, run maps, defeat bosses. Plays in the browser, saves to localStorage, no signup.

This repository is the standalone source of truth for the idle game. It builds a Svelte component library (@gnewbie/lsr-idle) consumed by the main lsr-frontend.

Quick start

pnpm install
pnpm dev          # http://localhost:5174

The playground app lets you develop and test the game in isolation. The homepage shows the HomepageGameCard preview; /idle loads the full game shell.

Scripts

Command Description
pnpm dev Start the development server (port 5174)
pnpm test Run the test suite (Vitest)
pnpm test:watch Run tests in watch mode
pnpm check Type-check with svelte-check
pnpm lint Prettier + ESLint
pnpm format Auto-format with Prettier
pnpm package Build the distributable library to dist/
pnpm build Build the playground site + library

Project structure

src/
  lib/                    <-- Library source (published as @gnewbie/lsr-idle)
    components/           Svelte components (game panels, homepage card, shell)
    engine/               Game engine (state, actions, calc, loop, save, etc.)
    data/                 Static game data (generators, upgrades, skills, etc.)
    utils/                Utilities (number formatting, RNG, localStorage)
    styles/tokens.css     Design tokens (CSS custom properties)
    index.ts              Public API barrel export
  routes/                 <-- Playground app (NOT published)
    +page.svelte          Homepage with game card preview
    idle/+page.svelte     Full game for testing

Integration with lsr-frontend

The main frontend consumes this as a package:

pnpm add @gnewbie/lsr-idle
<script>
  import { IdleGameShell, HomepageGameCard } from '@gnewbie/lsr-idle';
  import '@gnewbie/lsr-idle/styles/tokens.css';
</script>

<!-- Homepage card -->
<HomepageGameCard />

<!-- Full game page -->
<IdleGameShell rivals={[]} seasonName="" />

Design tokens

Components use var(--lsr-*) CSS custom properties. The host app can either import @gnewbie/lsr-idle/styles/tokens.css or define its own values (the main LSR frontend already defines these in its own tokens.css).

RivalExileTicker

The RivalExileTicker component accepts rivals and seasonName as props. The host app is responsible for fetching ladder data and passing it in. When no rivals are provided, the ticker renders nothing.

Guardrails

  • Pre-commit hooks: prettier, eslint, svelte-check, vitest, trailing-whitespace, secret detection, gitleaks
  • CI: GitHub Actions runs all checks on every PR
  • Auto-publish: merges to main that touch src/lib/ auto-publish to GitHub Packages

Design system

The game uses the LSR design system: dark charcoal backgrounds, warm gold accents, sharp 2px corners, system fonts. See src/lib/styles/tokens.css for the full token set.

License

Proprietary. Not for redistribution.

Top categories

Loading Svelte Themes