floodit-sveltekit Svelte Themes

Floodit Sveltekit

A modern, responsive web implementation of the classic Flood It puzzle game, built with SvelteKit, Svelte 5, TypeScript, and Tailwind CSS v4.

Flood It (SvelteKit)

A web version of Flood It built with SvelteKit, Svelte 5, TypeScript, and Tailwind CSS.

Quick Start

bun install
bun run dev

Open the local URL shown by Vite.

Commands

bun run dev        # start dev server
bun run build      # production build
bun run preview    # preview build
bun run test       # bun:test suites
bun run test:watch # watch mode
bun run check      # svelte-check + type checks

Gameplay

  • Modes: Classic and Maze
  • Classic presets: Easy (6x6), Normal (10x10), Hard (14x14)
  • Maze presets: Maze Easy (10x10), Maze Normal (12x12), Maze Hard (14x14)
  • Custom mode: board size 5-25 with optional move limit, supports Classic/Maze
  • Welcome difficulty buttons use a stable 2x2 layout with fixed button heights
  • Maze objective: reach G (goal) from top-left S before moves run out
  • Help & Rules screen available from welcome and in-game controls
  • Header controls use icon-first actions (New, Reset, Help, Theme)
  • New Game menu includes recent maze shortcuts
  • Shortcuts: Alt+Shift+R reset, Alt+Shift+N new round, Alt+Shift+Q quit

Notes

  • Core board logic: src/lib/utils/gameUtils.ts
  • Pure game transitions: src/lib/stores/gameTransitions.ts
  • Pure UI orchestration: src/lib/stores/gameOrchestration.ts
  • Versioned persistence: src/lib/state/persistence.ts
  • Icon system: Lucide via @lucide/svelte
  • Modals (ConfirmDialog, GameOver) include keyboard/focus accessibility behavior
  • In-game header includes source code icon action
  • Refresh behavior: app always opens Welcome UI; last config/custom settings are restored for quick restart
  • See docs/CODEBASE.md for architecture and docs/PLAN.md for roadmap.

License

MIT (LICENSE).

Top categories

Loading Svelte Themes