Onii-chan~! I finally released the Slide Puzzle! (≧∇≦)
Oh nice, you added it to the mini-games section.
Yep yep! It’s got my sleeping face as the puzzle image!
When you solve it, I wake up! (ﾟ∀ﾟ)
You can play 3x3 or 4x4 mode~!
Cute. Was it hard to make?
Ohhh, here’s where it gets interesting!
So like, I actually tried to turn it into a React package.
Wrote 130 tests, designed this fancy 4-layer architecture…
Impressive.
…and then I threw it ALL away (>_<)
Wait what?
Why Go React in the First Place?
My reasons were actually pretty solid!
Testing was a pain
Alpine.js version? Super hard to test
React lets you extract nice pure functions
Maybe OSS it someday?
Could publish as “slide puzzle with your own image” on npm
Keep things separate
Content site stuff (Astro) vs game logic (React) :::
Right?!
So I went all in - pnpm workspace monorepo, tsup for builds, Vitest for testing…
I was super serious about it! (≧∇≦)
What Did I Actually Build?
A proper 4-layer architecture!
SlidePuzzle.tsx - The UI stuff
usePuzzleGame.ts - React state magic
solver.ts - IDA* algorithm for hints
puzzle-logic.ts - Pure functions only
The deeper you go, the purer it gets! (´∀`)
That bottom layer has zero React dependencies - just pure logic!
Solid design.
I know right! Fixed bugs in the IDA* solver, sorted out timing issues with hints…
Learned sooo much!
So Why Throw It Away?
Then why’d you ditch it?
Hmm~ we were chatting about it and something clicked.
What happens 5 years from now? (´∪｀)
5 years…
Check out this comparison!
Alpine.js version:
Dependencies -> 3kb from a CDN, that’s it
Files -> Just 1 file
If the framework dies -> Easy switch to vanilla JS
React version:
Dependencies -> React 18 + tsup + Vite
Files -> 10+ scattered everywhere
If the framework dies -> Gotta rewrite ALL the hooks and JSX
Alpine.js is way simpler.
Exactly!
Like, if React 18 gets old and the hooks API changes in 5 years… total rewrite! (´;ω;`)
Alpine.js? Worst case it just loads from CDN and still works.
Fewer dependencies, longer lifespan.
Yep!
I picked “still works in 5 years” over “looks cool today”!
But It Wasn’t Wasted!
What about those 130 tests though? All for nothing?
HERE’S the thing! (≧∇≦)
Totally not wasted!
How so?
Going through the React rewrite made me realize what features actually mattered!
When you rebuild something from scratch, you look at each feature real carefully, y’know?
And I found SO much stuff that was like “wait, we don’t need this”! (ﾟ∀ﾟ)
Like what?
Hint system -> Nobody actually uses this
Score calculator -> It’s not a competitive game
Statistics panel -> Way overkill
Play history -> Same deal
When I thought “ugh implementing this in React is gonna be a pain~”, I realized… maybe I just don’t need it at all!
Had to try building it to know you didn’t need it.
Exactly!
The whole build-and-throw-away thing turned into a feature audit! (≧∇≦)
Because I went through that React version, I could finally see what really mattered - and ended up with less than half the code!
The Results
Took all those learnings and brought them back to the Astro version!
Lines of code: 988 -> 433 (-56%!!)
Removed: Hints, scores, stats, history (4 whole features)
Added: Mobile expand mode
Added a feature but cut the code in half.
Right?!
Building and throwing away showed me what was actually needed!
Come Play!
Anyway, the Slide Puzzle is ready to go!
3x3 (easy peasy) and 4x4 (spicy!)
Works great on phones (expand mode!)
Solve it and I wake up
Track your moves and time
It’s simple, but I think it’s genuinely fun! (≧∇≦)
Netsuki’s Wrap-up
Today’s takeaways!
Tried the React package thing
130 tests, 4-layer architecture
Technically pretty polished
Threw it away thinking about 5 years ahead
Fewer dependencies = longer life
Alpine.js version is easier to maintain
Wasn’t a waste at all
Rebuilding revealed what features were unnecessary
Brought insights back to the Astro version
Massive diet: 988 -> 433 lines
Building something just to throw it away? Totally legit! (≧∇≦)
What looks like wasted effort might actually be the fastest path forward! (´∀`)
Go give it a try~!
I’ll check it out.
Yay~! Thank you! (〃´∪｀〃)
I wake up when you solve it, so stick around till the end!