Take a break, play a game! Tetris

It was a fun project, never wrote games before. Ok not quite true, I wrote one game in Delphi in 2000 🤦‍♀️ That was loooooong time ago. Maybe I need to reimplement that game in javascript.

Game is written in JavaScript and Jest is used for tests. It was funny how I struggle at the beginning to setup the environment. Missing those times when you had plain javascript and index.html. Double click on index.html and see the result. This time I wanted to use Jest and write tests. And write modules. And it didn’t work smoothly from the first try.

I used

  module.exports.Tetris = Tetris;

and

  const { Tetris } = require('./Tetris');

The reason why I used require but not exports and imports - jest worked with require statements right out of the box. And I didn’t want to spend much time figuring out how to setup webpack and babel or whatever is needed to setup the project. Fast and simple please. And TDD ✅.

And of course, require statements don’t work in browser. browserify came to the rescue. In simple words it adds require and module functionality to bundled file.

The next issue was: if you simply double click index.html with bundled js files - you will receive the following error:

Access to script at 'file:///Users/username/projects/tetris/bundle.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

To fight that one you will need some server running. I used ruby oneliner

ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 9090, :DocumentRoot => Dir.pwd).start'

After that, you have a nice localhost:9090 up and running.

That’s pretty much it for environment setup. Source code is available on github.

Fun with Flags 😄 Tetris