Reunion Bingo

My wife comes from a big family, a really big family, her dad was one of 23 kids in a combined household, so when they do a reunion, it’s a big deal.

A few months back we were asked to make something for the reunion, my wife made a beautiful watercolor painting of a dragonfly, I made this. A reunion bingo web app.

The first thing I did, was make a mockup of what I wanted it to look like in Photoshop. We were holding the event at a lake and I wanted to go for a fun summer vibe as well as something that would show well on a mobile device. My initial design was to have the text as part of the Bingo square, but soon I realized that just didn’t work on mobile, the text was either too small to read, or the square got to big to be useful. My next idea was to have a list under the bingo square and have them connected in a bi-directional way, if item 1 was selected, both square one and item 1 would be highlighted.

Once the design was good, I started coding. I used React as my UI library because I thought it would make things easier with the bi-directional selections, and it did. The next part was to create the logic for bingo. First I made a piece of state the would hold all the logic, an array of arrays filled with objects with IDs and a true or false status. Then I could just run through each nested array looking if any objects were false, if a row “nested array” had a false in it, then there wasn’t a bingo. After looping through all the arrays I could test for any bingos in the horizontal rows.

However, you can also get bingo by matching any columns. I did this in a similar way, by making a temporary array, then pushing the first item of each array onto the temporary one and checking for any false returns, when it was complete, then repeating the process on the second item. For the diagonals I again did a similar process, but use array 1, spot 1, then array 2, spot two and so on.

Now I added event listeners to both the squares and the list items to make them clickable. When a square or list was selected, its id was passed to a function, that changed the state I had made before, as well as highlighted the square and list items with that id.

When enough squares were filled, the check would see that there were no falsies and would declare bingo. When that happened a new box would open where the user could put their name in and they would be added to a MySQL database. We used this to keep track of who had gotten Bingos to give them a prize.

If a user wanted to see who had won so far, the “Show Winners” button at the bottom would slide out a list from the database.

If a user wanted to play again, they could hit the Reset button. This button cleared out the local storage that kept their game progress as well as reset the 25 bingo questions from the large JSON list I had made, that way no two players would have the same tasks to complete.