Disclaimer: This is obviously not real money!
Kevin Piedra - Demo Slot Machine
August 10, 2021
I wanted to create some kind of interactive app with Javascript, since I had only used JS in small projects and experiments. I also wanted to have something to show. Therefore, I decided a slots machine would be the perfect fit.
I started reading about the state of the JavaScript development world, and about things I had heard about before: Node.js & NPM, AJAX & fetch(), API's, and a bunch of stuff in the MDN Web Docs. It was a lot of information, but I went through it. It took some good hours.
I set up a little npm folder to try out tools that people recommend: Webpack, Parcel, Typescript, Babel. There is lots to learn there, but I decided to chose Parcel, which works pretty well without requiring much setup. Now I only had to install PIXI.js, import it (learn about the import system in Node.js vs ES6), and then just put some graphics on the screen and the game is done! Right?
Well, No. I found that I had to deal with the new* (to me) way JS does asynchronous execution because PixiJS uses it. So I read on MDN about async, await, thenable objects, Promises(), and the event queue. It wasn't hard to understand the concepts, the problem was that initially I was doing everything in an imperative programming mindset (you know, like C, C++, etc), so I had to redo some parts of the code and implement them with an async mindset.
I marched forward to create something that looks usable, and I did it! Parcel provides a development server with hot swapping and continuous "compilation", which was cool, but it broke. Apparently Parcel has some bugs (properly reported on their GitHub repo), which make it really hard to debug with it (bad obfuscated code source maps -> you don't know where the error happened). So I retired Parcel, and stuck to using the python -m http.server 8888
local server Python module to debug.
Now with a Minimum Viable Product, it was time to think about how to deploy it so that other people may see this thing. I wanted it to be private (require a password), and made with C# and ASP.NET Core (which I had never touched). So I went through another learning journey. I found that I didn't want to serve the libraries my game depended on, so I trashed NPM, and went with a simple <script>
tag from some free CDN.
I now had a basic "web site" (with a small SQL database to keep track of user sessions) that serves my app. I published it to an Azure free tier server (had to learn how to use Azure; I had only ever used GCP, and AWS), and it was online.
There are other troubles that I found myself in, but I either hid them, or overcame them. If I had to publish the game, I could improve it a lot, knowing what I know now, but I think it's enough for a demo.
Eventually, I had to serve it from my GitHub Pro Pages site, because my 30 days free host from Azure expired.