Bingo is a fun game that we play as a family every Thanksgiving. Everyone in my family looks forward to it because when you get a Bingo, you win a prize from the mountain of presents. Usually it is just a silly little dollar store toy, but it is always fun.
The idea for the Bingo caller came from an activity night put on by our housing management. . In the Bingo section, my wife and I were in charge of separate sections of it. Our friend used a Bingo caller from a game set to call a number, my wife's job was to go check to make sure everyone that called Bingo actually got the 5 in a row, and my job was to type the number called on a Microsoft Word page projected on a screen. It was definitely a 3 person team. After a few rounds I got to a point where I wanted to throw my hands up and say, “There has to be a better way!” Okay, maybe not that bad, but it wasn’t as smooth as it could have been. The person calling the numbers had to work the mechanics of the Bingo Caller, which limits how far away they can walk. And if no one is displaying the numbers called on the projector, all you get is questions on what numbers have been called.
I worked behind the scenes instead of working on the visual aspect first. I considered the most effective way to build the numbers and separate them. Using mainly the console, I generated an array from 1-75, and shuffled them around. Now I had an array with a length of 75, with all the numbers mixed up. Next, I just popped the top number off of the array. When I got the number, I programmed it to drop the number in 1 of 5 arrays using if statements. Looking back, I could have used switch statements. This worked. These 5 arrays fell into each of the letter categories. For example, if the number that got popped off was a 7, it would be put into the “B” array. If it was a 68, it would be put in the “O” array. When the original array was empty, the console would read out “Blackout”.
The functionality worked quite well, so now it was time for the design. Recalling the Bingo session we helped out with previously there were a lot of people asking to repeat the last called number, but even more were asking if a number had been called in the past. So I decided to solve this problem by dividing the interface into 2 main sections. The first section would have the previous number called, and the next section would be a list of the numbers called. Both sides were easy to connect the code to. I would put the number popped off in the first third (prepended with the associated letter), as well as add that number to the section on the right. When I added the numbers to the right, I would make sure that they were in numerical order according, and fit it in a table with the associated letter. Everything looked good, and the button worked well. In about 3 hours I created the solution to an activity that could have gone much more smooth with only one person managing the entire show.
Since that afternoon, I have been adding to this project little by little. I learned some jQuery along the way, so I have been adding that to clean up some code. I even learned how to make a modal pop out using Bootstrap. Additionally, I tacked on the function where you can press the spacebar and the numbers would run automatically. Since this is made with Bootstrap, it can work on a smartphone. Ideally, someone could use this with an Apple TV while they control it from their hand while walking around. I would eventually like to make a second version where you can print your own Bingo cards, and generate as many new ones as you would like. Another function would be to use the Apple Remote so you can control your laptop as you walk around the room. I am looking forward to testing this out at the next family reunion with a Bingo game.