A little web app to play/solve sliding puzzles. It is written in TypeScript and uses React for the UI components and Phaser for the graphics. The algorithm to solve the puzzle is based on Iterative deepening A* and runs in a web worker.

TODO

Initially, I implemented the web worker by following this blog post:

Use Web Workers in Create React App without ejecting and TypeScript

It all worked fine in development (npm run start) but failed in a production build deployed to gh-pages (npm run build).

comlink.ts:265 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'apply')
    at e (d76e50226ea8f7d4a973.worker.js:1)

I noticed that there was a missing peer dependency:

$ npm ls --depth 0
...
npm ERR! peer dep missing: webpack@^3.0.0 || ^4.0.0-alpha.0 || ^4.0.0, required by [email protected]

It seems that my project, created using Create React App, was using a more recent version of webpack:

$ npm ls webpack                 
[email protected] /Users/jontaylor/Documents/HomeProjects/sliding-puzzle-react
└─┬ [email protected]
  └── [email protected] 

I then stumbled across https://webpack.js.org/guides/web-workers/ which says:

As of webpack 5, you can use Web Workers without worker-loader.

So I removed comlink-loader and changed my implementation to something more basic (using postMessage and onmessage) and it all works fine now. I then created a custom hook to wrap the mechanics of communicating with the web worker.

• Add an overlay/animation over the board whilst the web worker is trying to find a solution
• Implement cancellation of the web worker
• Add sound effects

• Sliding puzzle
• Swift implementation of the Sliding Puzzle game with Iterative Deepening A* AI Solver
• Iterative deepening A*
• Use Web Workers in Create React App without ejecting and TypeScript
• comlink-loader
• Web Workers | webpack
• Phaser - A fast, fun and free open source HTML5 game framework