Rom-com Bingo

I noticed a while back that a lot of new romantic comedies (especially those pumped out by streaming services like Netflix and Amazon Prime) have optimized their formulas to the point that you can predict basically the whole plot from just the title and movie poster. To bring a little more spice into them, I started playing bingo with common tropes. To make it easier, I built a website that allows you to build a bingo board out of your own tropes and some defaults, and then compete to get bingo first (or in many cases, as many bingos as possible)!

You can visit the site and build your own at https://alexbeals.com/projects/bingo or play around with a sample board at https://alexbeals.com/projects/bingo/board/25?r=1.

Part of the fun with something like this is adding visuals and crunch to make it more entertaining. Here you can see the variety of color palettes that you can choose from, all of which bring the marquee to life.

And there's also a fun celebration when you get bingo (thanks to canvas-confetti which dropped in super easily)!

One interesting bug that I ran into which I hadn't seen discussed when searching is that the text-shadow effect appears to be broken for the blur param on Mobile Safari. It blurs much less than it does on Mac, and if you zoom in on whatever element that has the blur, it becomes completely opaque, to the point of washing out the main element. I ended up fixing this by making the text-shadow colors more transparent on iOS Safari. You can see the difference below in the neon 'ROM-COM BINGO' text.

Before	After

You can see that and all of the rest of the code on my Github for this project, or again try it out here for yourself!