The other day, I was on a call that felt more like a reverse Turning Test in which the human on the other end was trying to their hardest to imitate the cold, detached logic of a machine. It conjured up all the frustration that one feels while navigating an IVR (Interactive Voice Response) decision tree; but, with the added insult that I was, in reality, talking to a sentient being, albeit one that refused to acknowledge its own sentience. It made me think of the “Zoom Bingo” games that have taken root in this Pandemic landscape. And, as a way to process some of my dissatisfaction that I’m feeling, I thought it might be fun to try and build one of those Zoom Bingo games in Angular 10.1.2.

Run this demo in my JavaScript Demos project on GitHub.

View this code in my JavaScript Demos project on GitHub.

CONTENT CREDIT: The goal of this experiment was simply to build the game, not to come up with the game phrases. As such, I have “borrowed” the phrases for this demo from the Vault.com article: Zoom Call Bingo (With Cards!) for Your Next Meeting. Their article has nice printable cards that you should check out!

Because this demo is a client-side-only application built with Angular 10, I wanted the foundational state of the game to be stored in the URL. This way, one could configure the phrases within the game and then copy-paste the URL to a co-worker who would then be able to see the same game, albeit with a randomized selection of phrases.

To that end, I’m storing the configured phrases as a Base64Url-encoded value on the window.location.hash. At first, I tried to use the Location service provided by Angular. But, this service appears to be more of foundational part of the Routing than it does a usable abstraction over the window.location object. In the end, reading from and writing to the window.location API was an easy implementation detail.

The Zoom Bingo game is composed of three components:

• The AppComponent, which glues it all together.
• The BingoBoardComponent, which renders the configured phrases as an interactive 5x5 Bingo board.
• The FormComponent, which allows the phrases for the game to be configured.

And, as an experimental feature, I’m using the html2canvas library to take a screenshot of the board and render it as an <img> tag on the page. This way, you can share your Bingo victories with the rest of your team.

The demo isn’t very complicated; but, there are a few moving parts. So, before we look at the code, let’s look at the outcome that we’re trying to achieve. The following image showcases the general flow of the game, including the screenshot functionality:

Now that we see what kind of interactive outcome we’re trying to achieve, let’s take a look at some code. And, I think it might be easiest to look at the code from the bottom-up. The AppComponent is the glue that binds it all together; so, before we look at the root component, let’s look at the smaller components that we’re gluing together.

#javascript / dhtml #javascript