Playing Peg Solitaire in the Browser and having Rust solving it for you.

This is a bonus story for everyone who has read my account about algorithmically solving peg solitaire with Rust. In case you missed it, you may find it here.

I noticed, when writing about such a nice game and providing the implementation of a solver for it, it appears a little dry when not providing a way for everyone to enjoy the game. For this reason I have created a Vue-based web-application that lets you play the game in the browser. Both Desktop and Tablet/Mobile should work for you.

But this is not all!

In addition to that, you may find a button next to the game that triggers to finish the game for you automatically! This can be used at any state of the game, let it be at the beginning, or after some of your moves. The algorithm that runs behind the scene is exactly the one described in the aforementioned account. Also it will figure out if no solution can be achieved from a specific state.

Of course, even though Rust is such a well suited programming languages for combinatorial and numerical tasks, the browser is not able to run it. We rather must compile Rust to a common platform that the Browser is able to understand, and this is WebAssembly.

So, our algorithm is compiled to WebAssembly and this is loaded, initialized and then run by the browser. As we know, Rust is one of the fastest when it comes to CPU-heavy tasks. Luckily, since WebAssembly is very optimized code that runs near native speed, we do not loose too much by our methodology.

Though, even if the algorithm is ensured to run relatively fast, if you trigger it at a very early stage of the game, you may have to wait a couple of seconds depending on your device. As most of you will know, a browser is essentially running JavaScript and WebAssembly code in a single thread. This means, by triggering a long-running task, this would freeze the page for this duration and block any handling of user events. For instance, we might want to give the user the opportunity to interrupt this long-running task because it maybe just takes too long.

The solution to this are WebWorkers. This is a construct that enables us to run code (JavaScript/WebAssembly) in the browser in a different thread. This thread runs totally independent of the browser’s main execution context, but it can communicate via a very modern messaging system. Similar ways to establish communication between threads have been adopted by languages like Go and Rust through their channels.

Some more details about how to compile Rust to WebAssembly and then integrating it into a Vue application to run the code inside a WebWorker, can be found here.

Ok, enough words have been said, let’s go to the game!

You’ll find it here. Have fun!

(should support Desktops, Mobiles and Tablets)

Please note, although this story is open to the public, the referred stories are not. In order to get them all you must be a member of medium. If you are interested and still no member, be invited to do this via the following link. Even though I am a big advocator of open source, open learning and open research, I have to close some of my stories (education + research material) to keep me going to produce these things.

Thank you for your understanding!