Taxicab
- 15 Devlogs
- 7 Total hours
15-puzzle.
15-puzzle.
Fixed a particularly nasty bug where dragging the blank over the drag handle would send it to the first (top left) square. Even though the drag handle isn’t a tile, it was considered part of the board as it overlayed the tiles. The function responsible for identifying the tile to swap correctly returned undefined when dragging over the handle, but JavaScript’s type coercion converted this to 0, resulting in the blank moving to the 0th (top left) position. The fix is rejecting the swap when the identification function returns undefined.
Replaced the pinch and scroll controls for resizing with a drag handle. It’s more conventional and precise.
Wrote resizing between an 8-puzzle and a 35-puzzle. Resizing is wired to scrolling and pinch-to-zoom. The tiles attempt to remain consistent in size but shrink to avoid overflowing off the page. The positioning of the word mark and indicators updates correspondingly. More colors were added for increased groups at larger sizes. The solvability check now works for even and odd sizes. Records are stored per-size.
Wrote walk support, which automatically slides tiles to support swapping from any tile rather than just those adjacent to the blank.
Rewrote the rendering system for performance. Previously, tiles were arranged in a grid and moved synchronously. Now, tiles are positioned absolutely and updated within an animation frame loop.
Wrote records for the shortest time and lowest amount of moves taken to solve. Records are positioned below the tiles and persist across sessions. When a new record is achieved, the corresponding indicator flashes.
Wrote a manifest for web application installation.
Lots of polishing for the README. Also adjusted the deployment configuration for lighter payloads.
Wired the shuffle function to the screen when solved, so it’s easy to continue. Also wrote the watch and move counter.
Wired the shuffle function to the wordmark. Input now freezes on solve.
Wrote the swap function and wired it to the pointer. Hovering over a tile adjacent to the blank swaps it with the blank.
Wrote the wordmark for personality. The 15-puzzle’s called “Taxicab” since:
Wrote the shuffle(). It’s random and checked for solvability using inversions. The number of inversions must be even since this is a 15-puzzle as opposed to a 8-puzzle or 24-puzzle.
Wrote the favicon.svg and colored and numbered tiles. The favicon is a taxicab symbol made up of squares and matches the tiles’ colors.
Wrote the README, LICENSE, and an initial index.html.