Building an Online Multiplayer Lotería Game

A few months ago I was looking for an online Lotería game to play with friends and couldn't find any great options so I decided to build my own version. To give the game a modern look, I decided to use artificial intelligence to generate “realistic” versions of the original card images.

Check it out here: loteria.luciovilla.com

I grew up playing Lotería with family and friends. Probably the first game where I learned how to gamble.

Lotería is a game many refer to as the Mexican Bingo. The original game that many Latinos grew up playing with was the one created in the late 1800’s by Clemente Jacques and José María Evia Griñé. Learn more about its history here and how to play here.

A fun fact I learned while researching the history is that the “La Botella” card has the “Clemente” label on the ketchup bottle that was most likely a marketing promotion of their business.

How I built this game

I was surprised how easy it was to make an initial version using Live Blocks, a real-time collaborative architecture framework. Which took me about a week over the holidays in December 2023.

I wanted to make it unique and ended up coming up with an idea to use AI (Stable Difusion) to generate new images based on the original cards. I wanted the generated images to keep the essence of the original cards but more realistic.

Some outtakes

I had fun generating these AI versions of the Lotería cards. This was the hard part of creating this game. I wanted to make sure the new generated cards still reference the original picture.

I ended up going with Stable Diffusion AI and the Euler sampling method and the Stable Diffusion XL model. I realized I needed a faster computer because it took about 30-45 minutes to generate a few options for each card. Some of which I had to fine-tune in Photoshop and used Photoshop’s AI to improve certain parts of the image. Turns out AI is bad at generating human fingers and hands.

What I learned

Two big things:

  • The original Lotería cards mostly portrayed stereotypical characters and most with fair skin. This is why I decided not to include two original cards: El Negrito and El Apache. Even creators like Mike Alfaro challenged these stereotypes in his own version called Millennial Lotería (see New York Times article).
  • The AI only generated characters with fair skin unless I specifically specified otherwise. Read this great article by The Washington Post that talks about how AI amplifies bias in gender race and beyond.

    • Tech stack

    Technologies I used were Next.js, LiveBlocks, Tailwind CSS, shadcn UI components and hosted on Vercel.