feat!: rewrite on Svelte 5, drop Phaser

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.
This commit is contained in:
tiennm99 committed 2026-04-12 00:50:46 +07:00
1 parent 94fee81e6b
commit 8a3d4b4a9d
33 files changed
+1280 -818

No files matched your search

+2 -9
View File
@@ -1,16 +1,9 @@
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
base: './',
build: {
rollupOptions: {
output: {
manualChunks: {
phaser: ['phaser']
}
}
},
},
plugins: [svelte()],
server: {
port: 8080
}
+2 -42
View File
@@ -1,47 +1,7 @@
import { defineConfig } from 'vite';
const phasermsg = () => {
return {
name: 'phasermsg',
buildStart() {
process.stdout.write(`Building for production...\n`);
},
buildEnd() {
const line = "---------------------------------------------------------";
const msg = `❤️❤️❤️ Tell us about your game! - games@phaser.io ❤️❤️❤️`;
process.stdout.write(`${line}\n${msg}\n${line}\n`);
process.stdout.write(`✨ Done ✨\n`);
}
}
}
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
base: '/sokoban/',
logLevel: 'warn',
build: {
rollupOptions: {
output: {
manualChunks: {
phaser: ['phaser']
}
}
},
minify: 'terser',
terserOptions: {
compress: {
passes: 2
},
mangle: true,
format: {
comments: false
}
}
},
server: {
port: 8080
},
plugins: [
phasermsg()
]
plugins: [svelte()]
});