Adding Interactivity

We will continue to explore the JavaScript and WebAssembly interface by addingsome interactive features to our Game of Life implementation. We will enableusers to toggle whether a cell is alive or dead by clicking on it, andallow pausing the game, which makes drawing cell patterns a lot easier.

Pausing and Resuming the Game

Let's add a button to toggle whether the game is playing or paused. Towasm-game-of-life/www/index.html, add the button right above the <canvas>:

  1. <button id="play-pause"></button>

In the wasm-game-of-life/www/index.js JavaScript, we will make the followingchanges:

  • Keep track of the identifier returned by the latest call torequestAnimationFrame, so that we can cancel the animation by callingcancelAnimationFrame with that identifier.

  • When the play/pause button is clicked, check for whether we have theidentifier for a queued animation frame. If we do, then the game is currentlyplaying, and we want to cancel the animation frame so that renderLoop isn'tcalled again, effectively pausing the game. If we do not have an identifierfor a queued animation frame, then we are currently paused, and we would liketo call requestAnimationFrame to resume the game.

Because the JavaScript is driving the Rust and WebAssembly, this is all we needto do, and we don't need to change the Rust sources.

We introduce the animationId variable to keep track of the identifier returnedby requestAnimationFrame. When there is no queued animation frame, we set thisvariable to null.

  1. let animationId = null;
  3. // This function is the same as before, except the
  4. // result of `requestAnimationFrame` is assigned to
  5. // `animationId`.
  6. const renderLoop = () => {
  7.   drawGrid();
  8.   drawCells();
  10.   universe.tick();
  12.   animationId = requestAnimationFrame(renderLoop);
  13. };

At any instant in time, we can tell whether the game is paused or not byinspecting the value of animationId:

  1. const isPaused = () => {
  2.   return animationId === null;
  3. };

Now, when the play/pause button is clicked, we check whether the game iscurrently paused or playing, and resume the renderLoop animation or cancel thenext animation frame respectively. Additionally, we update the button's texticon to reflect the action that the button will take when clicked next.

  1. const playPauseButton = document.getElementById("play-pause");
  3. const play = () => {
  4.   playPauseButton.textContent = "⏸";
  5.   renderLoop();
  6. };
  8. const pause = () => {
  9.   playPauseButton.textContent = "▶";
  10.   cancelAnimationFrame(animationId);
  11.   animationId = null;
  12. };
  14. playPauseButton.addEventListener("click", event => {
  15.   if (isPaused()) {
  16.     play();
  17.   } else {
  18.     pause();
  19.   }
  20. });

Finally, we were previously kick-starting the game and its animation by callingrequestAnimationFrame(renderLoop) directly, but we want to replace that with acall to play so that the button gets the correct initial text icon.

  1. // This used to be `requestAnimationFrame(renderLoop)`.
  2. play();

Refresh http://localhost:8080/ and we should now beable to pause and resume the game by clicking on the button!

Toggling a Cell's State on "click" Events

Now that we can pause the game, it's time to add the ability to mutate the cellsby clicking on them.

To toggle a cell is to flip its state from alive to dead or from dead toalive. Add a toggle method to Cell in wasm-game-of-life/src/lib.rs:

  2. # #![allow(unused_variables)]
  3. #fn main() {
  4. impl Cell {
  5.     fn toggle(&mut self) {
  6.         *self = match *self {
  7.             Cell::Dead => Cell::Alive,
  8.             Cell::Alive => Cell::Dead,
  9.         };
  10.     }
  11. }
  12. #}

To toggle the state of a cell at given row and column, we translate the row andcolumn pair into an index into the cells vector and call the toggle method onthe cell at that index:

  2. # #![allow(unused_variables)]
  3. #fn main() {
  4. /// Public methods, exported to JavaScript.
  5. #[wasm_bindgen]
  6. impl Universe {
  7.     // ...
  9.     pub fn toggle_cell(&mut self, row: u32, column: u32) {
  10.         let idx = self.get_index(row, column);
  11.         self.cells[idx].toggle();
  12.     }
  13. }
  14. #}

This method is defined within the impl block that is annotated with#[wasm_bindgen] so that it can be called by JavaScript.

In wasm-game-of-life/www/index.js, we listen to click events on the <canvas>element, translate the click event's page-relative coordinates intocanvas-relative coordinates, and then into a row and column, invoke thetoggle_cell method, and finally redraw the scene.

  1. canvas.addEventListener("click", event => {
  2.   const boundingRect = canvas.getBoundingClientRect();
  4.   const scaleX = canvas.width / boundingRect.width;
  5.   const scaleY = canvas.height / boundingRect.height;
  7.   const canvasLeft = (event.clientX - boundingRect.left) * scaleX;
  8.   const canvasTop = (event.clientY - boundingRect.top) * scaleY;
  10.   const row = Math.min(Math.floor(canvasTop / (CELL_SIZE + 1)), height - 1);
  11.   const col = Math.min(Math.floor(canvasLeft / (CELL_SIZE + 1)), width - 1);
  13.   universe.toggle_cell(row, col);
  15.   drawGrid();
  16.   drawCells();
  17. });

Rebuild with wasm-pack build in wasm-game-of-life, then refreshhttp://localhost:8080/ again and we can now draw ourown patterns by clicking on the cells and toggling their state.

Exercises

  • Introduce an <input type="range"> widget to control how manyticks occur per animation frame.

  • Add a button that resets the universe to a random initial state whenclicked. Another button that resets the universe to all dead cells.

  • On Ctrl + Click, insert aglider) centered onthe target cell. On Shift + Click, insert a pulsar.