Zoom Bingo App

1. The idea of bringing bingo to the home is now possible using Zoom, where we will all meet in our Virtual Bingo Hall and our bingo caller will be visible and monitoring players checks.” The association will use the popular ClubForce App used by many local GAA clubs for lotto.
2. Name in the Bag/Guess Who? You know that popular Christmas Day game where you put the celeb.

The advent of the latest health pandemic has also seen the idea of conferencing calls extend far beyond the scope of weekly agenda lists. Instead, they have now also become a central hub for connection where colleagues, friends, family, and classmates are able to schedule in some much-needed connection, interaction—and let’s be honest, laughs.

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.

First up, the BingoBoardComponent. This component takes an input array of [phrases] and then selects 25 random values which it displays using CSS Grid. If it does not receive 25 phrases from which to select, it will pad the values with the filler phrase, (Free Space):

The selectedIndices index is just a look-up that stores which spaces have been toggled by the user. And, thanks to the magic of CSS Grid, the View template for this component is super simple:

The next low-level component is the FormComponent. Like the BingoBoardComponent, the FormComponent also takes an array input of [phrases] which it uses to initialize a collection of form fields. This allows the user to add or alter as many phrases as they want. And, when when the submit the form, this component emits a (phrasesChange) event:

You'll notice that there is no special 'form data' object in this component - just an array of PhraseOption instances. That's because template-driven forms in Angular have all the power of reactive forms; but, without all of the ceremony of having to configure data ahead of time. This way, we just loop over our values and let ngModel do the heavy-lifting for us:

So far, pretty straightforward - we have a BingoBoardComponent and a FormComponent, both of which use OnPush change-detection and work exclusively using input and output bindings. On their own, each is fairly easy to reason about. Now, let's look at the AppComponent - the glue that holds this all together.

The AppComponent has a few responsibilities:

• It handles the game mode (playing or editing).
• It reads-in game state from the URL.
• It persists game state to the URL (for sharing).
• It performs the Base64Url encoding and decoding.
• It takes a screenshot of the bingo board using html2canvas.

The AppComponent comes with a default set of phrases, which it will use (and persist to the URL) if no other phrases are provided in the URL.

Half of the complexity in this component ends-up being the screenshot invocation. So, if you are not concerned with that, feel free to skip-over the takeScreenshot() method:

The view for the AppComponent is fairly small as well as it is primarily relies on rendering the two other Angular components that we've already looked at:

And that's all there is to it. It's obviously not the most robust game - and it doesn't do anything like warn people if they are about to refresh their game accidentally. But, it was a fun little demo to put together. For me, there were a few critical take-aways:

• Template-driven forms are very simple and very powerful and remove much of the complexity and ceremony of reactive forms.

• Mutating data structures is perfectly safe - even optimal - when performed as an 'implementation detail'; and, did not in any way affect our ability to adhere to a uni-directional, one-way data flow.

• NgModel is one of the best things since sliced-bread - despite all the haters.

• Storing state in the URL is an easy way to share state without having a server-side persistence mechanism (though it does, of course, generate rather large URLs).

Anyway, hopefully some part of this Angular 10.1.2 demo was interesting for you.

Enjoyed This? You Might Also Enjoy Reading:

Reader Comments

Warning: Some bingo features on this site may not function properly in Internet Explorer. For the best experience, we recommend you use another browser. Thank you!

Create Card

7 Easy Steps To Create Your Own Bingo Game

This online bingo card generator is easy to use. Just follow the instructions below.

1. Enter a creative card title that describes your bingo game
2. Choose the number of grid spaces – 5×5, 4×4, or 3×3
3. Choose whether you want the center square as a free space
4. Enter any words, phrases, or images into the bingo creator
5. Change the colors of the bingo card template to add some fun
6. Click “Generate”
7. Print your bingo cards or play online bingo with friends or family

How Does An Online Bingo Generator Work?

There’s no need to pop down to a craft store to buy bingo cards to use at home. With this free bingo generator, you can receive a PDF printout of your customized cards. You can also copy the URL for your cards to share with your friends online. The skies the limit with the types of cards you can create. Make several types of bingo sheets around any topic of interest: sports, travel, animals, food, movies, or TV shows. Anything goes! Each card you print will be randomized. This means that all cards are unique.

What Are Some Fun Ways To Use This Online Bingo Card Creator

You can create bingo cards for a variety of activities. Use them for teaching kids while having fun, during homeschooling, or for birthday parties. Use this bingo card maker to create a fun activity for Zoom calls with friends and family.

How To Play Bingo With Friends Online

There are two ways to use this bingo card generator. You can print the cards. Or you can copy the URL of the cards generated and send them to friends to play bingo online. After creating your bingo card, click Generate. On the next page, you will see your sample bingo card along with the option to play online bingo or print out your cards.

To Play Online Bingo, click Create Your Online Game after creating your custom bingo card. You can then set the winning patterns and copy the URL and share it with friends and family. When players join using your link they will be given a different bingo card. When everyone has joined you can then start the game and our site will start calling your custom bingo words, phrases, or images, and each player can mark them on their board until one wins Bingo! We suggest setting up a call on Zoom, Facebook Messenger, or Google Hangouts to make it even more fun.

Sample Bingo Card From This Generator:

This sample bingo card on MLB teams doesn’t include the free spot but adds an extra row to fit all the teams.

FAQs – How To Make Your Own Bingo Card Template

Using this free bingo maker, you can be ready to play bingo in 5 minutes. Just enter the words or phrases you want and click Generate and Print.

You can use this bingo card creator to print up to 9 pages of cards, with multiple cards on each page. Once the bingo boards are ready, select the number of pages and the number of cards per page. Then, click Print to save the bingo boards as a PDF to your computer.

A call sheet is a list of the words or phrases you choose to add to your bingo cards. At the end of the PDF is a call sheet that includes these words to call to your bingo players.

Zoom Bingo Board

Yes. Click on any square within the card. Instead of typing a word or phrase, upload an image from your computer. This is a great option for teaching kids. You can use all images or a combination of pictures and words.

Zoom Bingo App Games

You can use this tool to generate bingo cards with a call list and print up to 9 pages of cards. For groups of players, who need 20 or 30 cards, you can print 4 free printable bingo cards on each page. Each card will be different. This generator creates up to 36 cards, which can be cut for sharing.