Tetris Runs in Web Browser with Glimmer DSL for Opal!

It finally happened! The Glimmer Tetris that was built in Glimmer DSL for SWT for the desktop earlier this year has been webified via Glimmer DSL for Opal (an early minimal version) and released as part of version 0.26.0!

Seeing is believing!

Still skeptical that a Tetris built fully in Ruby is running inside the web browser? 

Try it over here by selecting the Tetris sample, making sure to maximize your browser to fit the entire Tetris playfield!

You can go to Help -> About to find instructions. In summary, Use A/D for Left/Right, S for Down, W for Up (special action customizable in Options menu), and Q/E for Rotate Left/Right.

Having Tetris work in Opal is special because unlike all apps built on top of many JS frameworks out there, this Tetris truly follows the Smalltalk-MVC pattern as per desktop application development (since it actually was originally a desktop application). In other words, it is not really hindered by the web paradigm limitations of JavaScript, thanks to Opal Ruby.

Below is the Ruby code for this Glimmer DSL for Opal minimal version of Tetris.

tetris.rb (this is the app entry point; note the very minimal and abstract body)

tetris/view/playfield.rb (this lays out the 20x10 blocks of the Tetris playfield)

tetris/view/block.rb (this is where the main work of showing colored Tetris blocks occurs via data-binding to the game playfield model blocks)

tetris/view/score_lane.rb (this is the side-panel that shows stats and next Tetromino)

tetris/view/tetris_menu_bar.rb (this is the top menu bar)

tetris/view/high_score_dialog.rb (this is the high score dialog that shows up on game over)

Opal did the impossible task of running the view/model code of the Glimmer DSL for SWT version of Tetris inside a web browser. Props to the Opal folks for making that happen! Opal Ruby has opened the door to a host of new possibilities. I really look forward to what others will do with Opal on Rails by finally being able to develop web apps fully in Ruby on both the server-side and client-side.

Happy Glimmering!

Update 2023-09-02: Tetris has been enhanced with a 3D bevel look at the expense of slower startup time to match the desktop counterpart (screenshots and code have been updated).