I was able to complete the UI, it can be found here.
Code is here.
I did not make it to any of the bonus items.
All of the 1010s code is in Ruby. My website is static site served by sourcehut. I wanted to build UI for the browser. This left two options of porting code to JS or hosting a server. I don't want to maintain a server. This meant I needed to somehow port code from Ruby->JS.
Work had already been done to port Ruby to WASM/WASI. I utilized ruby.wasm and targeted WASI.
Once I had my WASI application I needed to load it in JS. To run WASI in the browser is a bit tricky. It requires something called a polyfill, or implementing the necessary functions of the WASI interface and importing them into a wasm module.
From the source, a better explanation:
JS, JS runtimes, targets, etc are not something I'm familiar with so figuring out what JS builder to use and how to configure it to play nicely with WASM/WASI took some time. I found a working example, using esbuild, and copied it from trealla.js .
Unfortunately this esbuild configuration did not work with React. And so I created another npm app with esbuild and react to build the UI.
Due to Ruby's dynamic nature I could not export any functions to be called by JS through WASM/WASI. The WASM/WASI interface on browsers is extremely limited, at least it takes a lot more work to accept input from the user; such as utilizing Web Workers. I wanted to keep it as simple as possible. So take in input via "command line arguments" and run once.
This influenced the UI/UX:
Work speed up once I could run the WASM/WASI module in the React App. Due to limitations on time, I hardcoded some parameters of the 1010s encoder, it also made it simpler for the User. I decided to keep the Internal Representation Size since it dramatically changes how 1010s can look, thus empowering the User.