mirror of
https://github.com/tiennm99/sokoban.git
synced 2026-05-23 12:25:39 +00:00
tiennm99
8a3d4b4a9d
Replace Phaser 3 with Svelte 5 as the rendering and UI layer. The framework-agnostic core (level parser, board model, progress store, microban level data) moves from src/game/core → src/lib/core with zero code changes. Scenes and the hand-rolled button factory are gone; in their place: - src/App.svelte root router (menu / levels / game) - src/views/MenuView title + play + progress + hints - src/views/LevelSelectView paginated 5x4 grid with native <button>s - src/views/GameView owns BoardModel, handles input, HUD, win - src/views/Board purely presentational DOM renderer - src/views/AppButton shared themed wrapper for native <button> - src/app.css Nord palette ported to CSS variables GameView uses a non-reactive BoardModel ref and syncs plain snapshot fields (player, boxes, moves, won) into $state after every mutation — Board consumes only plain props, so Svelte reactivity stays predictable and the core class stays framework-agnostic. GameView is keyed on levelIndex in App, so changing level remounts with fresh state. Native <button> everywhere kills the click-hitbox class of bugs. Animations are now CSS transform transitions (110ms) instead of tweens. Bundle shrinks from ~1.5 MB Phaser to ~65 kB JS / 23 kB gzipped — about 60x smaller. Removed: phaser, terser, src/game, log.js (analytics ping), phasermsg vite plugin, manual Phaser chunks, terser config, public/style.css. Scripts simplified to dev/build. Docs updated: codebase summary, architecture, code standards, changelog, roadmap, README.
Sokoban
My from-scratch Sokoban game, built with Svelte 5 and Vite. The engine, UI, level parser, and progression system are all my own implementation. The puzzle layouts themselves come from David W. Skinner's freely distributable Microban set — I'm not reusing any of his code, only his level designs.
Play: https://tiennm99.github.io/sokoban/
Features
- All 155 puzzles from the Microban set, from beginner teasers up to the giant "Take the long way home" maze and "The Dungeon" finale.
- Paginated level select with progress tracking and best-move record per level.
- Controls: arrow keys or WASD.
U/Zto undo,Rto restart,Escfor menu. - Undo history, live move counter, animated moves.
- Progress saved locally in
localStorage. - Responsive tile sizing so small and large levels both look right.
Development
npm install
npm run dev # dev server on http://localhost:8080
npm run build # production build
Project layout
Documentation
docs/project-overview-pdr.md— product scope.docs/system-architecture.md— how the pieces fit together.docs/code-standards.md— conventions.docs/development-roadmap.md— past and planned phases.docs/project-changelog.md— release notes.
Credits
- Puzzle layouts: Microban level set by David W. Skinner (April 2000). Freely distributable with credit. Original site: http://users.bentonrea.com/~sasquatch/sokoban/
- Game code: tiennm99 (with AI pair-programming from Claude).
- Framework: Svelte 5 on top of Vite.
License
- Source code: see
LICENSE. - Puzzle layouts (Microban): see
LICENSE-LEVELS.md— Skinner's free-distribution-with-credit terms, not the main project license.