I tried, again, to participate in Olimex’s weekly programming challenge, I failed, again. I missed the deadline. My weekends are simply to packed. On the other hand, I intentionally allowed me the time to tune the solution into something presentable. For the impatient, look here. The sources are over at GitHub.
At first I thought about taking the very basic route. No libraries or frameworks, just plain and simple HTML, CSS and CoffeeScript. But the first task: “putting the necessary boilerplate into the HTML file” made me hesitate. I quickly backed up to the, by now familiar path Meteor provides.
I always wanted to experiment a little bit with HTML5 canvas, and this challenge gave me the opportunity. While researching, I stumbled over fabric.js. Unfortunately, the integration wasn’t as straight forward as I had hoped and as I looked into the documentation, I couldn’t find a really strong reason to use the library. The task of drawing a hangman looked really simple. Plain canvas was supposed to be easy enough and straight forward. For the curious, the ‘hangHim()‘ function does the drawing.
I don’t mind to bother you with the whole journey. Some aspects I found out, will be covered in separate posts, because I didn’t need them in the final solution. Some overly complicated things are just brainchildren of my own stupidity. I should talk about the main glitch I programmed. Well, the challenge was to make an impossible hangman game, by switching the searched-for word, in case the player would actually find a letter of it. That’s mean, heh?
My crank mind settled early on the idea of making inverse indexes: for each letter of the alphabet create an array of words, that doesn’t include the letter. This way, I convinced myself, I could later intersect those word arrays easily and at low cost. I thought to be really clever. To make it worse, I decided to use Meteor Collections for the static set(s) of words. With the full dictionary – the one linked from the challenge (around 130.000 terms) – that resulted in around 16MB of data to be transferred to the client. A nightmare for any webapp.
I guess, despite the missing comments, the code speaks for itself. If you have any questions feel free to ask.