mirror of
https://github.com/tiennm99/sokoban.git
synced 2026-10-03 05:12:55 +00:00
tiennm99
18d63d07c7
Round 1 anchored the board to .board-wrap's bottom but exposed a 32px
gap caused by .mobile-dock { align-items: flex-end } combined with
.dock-left (148px tall) being taller than .dpad (116px). With both
columns bottom-aligned, the d-pad's top sat ~32px below the action
stack's top, so the arrows still felt far from the board.
Switch the dock to align-items: stretch so each column picks its own
cross-axis position: action stack stays bottom-anchored (closer to the
thumb), d-pad uses align-self: flex-start to hug the dock top (closer
to the board). Movement is the primary interaction; UNDO/RESET are
secondary. Shrink arrows 56 -> 48px (still well above 44pt HIG) and
bump grid gap 4 -> 6px.
Trim the JS computeTileSize coarse-pointer chrome margin 220 -> 195 to
reflect the slimmer dock so the board can grow into the freed space on
tall puzzles. Add an explicit margin-top: auto on .board inside a
coarse media query in Board.svelte as a belt-and-suspenders cross-axis
push that survives future parent-flex refactors.
Combined with the round-1 changes, the board-bottom to arrow-top
distance drops from ~42px to ~10px on touch viewports. Desktop is
untouched (all changes gated by @media (pointer: coarse)).
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 on desktop; on-screen D-pad on mobile (bottom-right, one-handed).
U/Zto undo,Rto restart,Escfor menu. - Mobile-optimized: Touch-safe controls, haptic feedback (vibrate on push & win), safe-area insets for notches/nav bars, browser gesture blocking.
- Installable PWA: Add to home screen on iOS/Android, play offline, standalone fullscreen mode.
- Undo history, live move counter, animated moves.
- Progress saved locally in
localStorage(per browser, per device). - Responsive tile sizing so small and large levels both look right on any screen.
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.