Reset Share

Conway's Game Of Life on Rails with Stimulus.js

Sounds ridiculous? It is! :)

TL;DR:

This is a variation of the Game of Life, implemented with Ruby on Rails, where each generation is requested via AJAX and gets entirely computed and rendered server-side so that the browser only needs to replace the grid in the DOM. On top I sprinkled some Stimulus.js to add just enough behavior to make it shine. If you look very closely you will also see Turbolinks in action. Oh... and by the way: the Asset Pipeline was exchanged for a complete Webpack setup, so no Sprockets have been harmed in delivering JavaScript and Stylesheets.

But WHY...?

Because it's a funny way to learn the underlying frameworks... and I believe nobody has ever done it before (in that "architecural" style at least) ¯\_(ツ)_/¯.
(Any Arguments how this could have been done differently might be valid.)

How to play:

  • You can click individual cells to toggle their state and see how they transition by clicking: Next Generation.
  • Clicking Reset creates an empty configuration.
  • There is also a Draw Mode available with the shortcut d. Hovering over the cells will toggle their state. (Not available on touch devices...)
  • Load the example

The Rules of the game describe how every cell interacts with its neighbours:

  1. Any live cell with fewer than two live neighbors dies by under popolation.
  2. Any live cell with two or three live neighbors lives on to the next generation.
  3. Any live cell with more than three live neighbors dies by overpopulation.
  4. Any dead cell with exactly three live neighbors becomes a live cell by reproduction.

Found a cool pattern you want to share?

You can initialize the board by adding a custom state to the URL (/10100000000001100000000001).
To get a the current state just click share, and you will see the shareable URL in your browsers address bar.
Have fun!

Show me the Code!

I'm so glad that you are curious to see how I built this. The complete code is available on Github :) Please don't hesistate to get in touch if you have any questions or suggestions since no solution will ever be the single perfect one. (Yes, I see a ton of possible improvements too, but as everything it comes with trade offs, so I decided to keep it as small as possible, while having something that demonstrates the idea nonetheless.)

Challenges:

I invite you to clone the code and fiddle around with it for yourself. There are some interesting ideas I didn't include in this simple example:

  • Auto Play Mode:   with the possibility to adjust the interval how often the form is submitted per second.
  • Resize Board Option:   via select box, or directly with javascript. Stimulus actions can also trigger on the resize@window event.
  • Save/Load Board State:   this might be cool for collecting patterns.
  • Statistics:   count the number of generations and living/dead cells.

KTHXBYE, HAVE A NICE DAY!