Overview

In this short article I will add the ability for a user to end the game that they are in.  In the previous Tic-Tac-Toe article I added the ability for a user to join a game.  Between the last post and this one I have also refactored how the state of the game is managed.  I am making using of Observables more.  I investigated using ngrx/store, but have decided to keep the application simple – and not try to bite off more than I can chew at this time.  I also refactored the layout to give the UI a little more appeal.

End Game

Front-End

Adding basic “End Game” functionality was straightforward on the front-end.  After placing a new button on the UI, it was simple call to the GameService, and in turn a simple call to delete the GameID and all its children from the database.

  // in game.service.ts
  deleteGame(): void {
    this.db.object(`games/${this.gameId}`).remove();
  }

Back-End

I also took this as an opportunity to add in a Cloud Function.  I created a simple function that watches for a game deletion.  Upon deletion, the function grabs the User IDs of the game participants and removes them both from the game (deleting the Game ID from their user space in the database).

exports.endGame = functions.database.ref('/games/{gameId}')
    .onDelete((snapshot, context) => {
        let promises = []
        if (snapshot.hasChild('user1')) {
            promises.push(snapshot.ref.root.child('users').child(snapshot.child('user1').val()).child('game').remove());
        }
        if (snapshot.hasChild('user2')) {
            promises.push(snapshot.ref.root.child('users').child(snapshot.child('user2').val()).child('game').remove());
        }
        return Promise.all(promises);
    });

The above function checks to see if a user1 or user2 exists in the game, if they do then it attempts to delete the game reference for their user space.  I have been impressed with how easy it has been to create and deploy Cloud Functions.

UI Changes

Here is a screen capture of the UI up to this point.

Conclusion

All the source code up to this point for the Angular application can be found on GitHub.  Likewise, the source for the Cloud Function up to this point can be found on GitHub.