Froobtris
A friend of mine challenged me to program Tetris. I’ve wanted to make it for a while and it’s not too complicated, but I never got around to it. This challenge was just what I needed to finally make Tetris.
I have used TypeScript before, but have never fully immersed myself in it.
Admittedly I still haven’t fully immersed myself, but this project has helped me appreciate it more.
One of my gripes with TypeScript was that methods like document.getElementById("a") have a return type that is either an HTMLElement, or possibly null.
The ambiguity can be circumvented by assuming that the return value will always be an HTMLElement with the as keyword, but sometimes it’s not.
When the type is inevitably null, an error will likely happen downstream from the code and the type system will be none the wiser.
The type-safe way to handle possibly null types is to write a bunch of type guards.
The ‘Stack’
I don’t like diving deep into tooling and libraries if I can help it. In fact, this has been my first use of Webpack. Webpack certainly fits into the ’npm ecosystem’ a lot more than my previous strategy of cobbling shell scripts and makefiles so I think its use justified for this project.
Here are all the tools I used:
- TypeScript
- Webpack
- Eslint
- Prettier
What’s with the name?
I just think the nonsensical word ‘froob’ is funny.
froob + Tetris = Froobtris
The source code is available at git.alexanderbass.com