Stop It!

Multiplayer, browser-based implementation of the card-matching game Spot It (Dobble), built as a course project for Lenguajes de Programación at Tecnológico de Costa Rica.

Live: https://stop-it.netlify.app/

Stack

• Frontend (web/): static HTML/CSS/JavaScript, no build step or bundler. Uses jQuery, Bootstrap 5, and the Firebase 8.10.1 client SDK, all loaded via CDN <script> tags.
• Real-time state: Firebase Realtime Database. Rooms, players, ready status, and turn order live entirely in Firebase; the "who touched the match first" race is arbitrated with a Firebase RTDB transaction. Players authenticate anonymously (firebase.auth().signInAnonymously()).
• Card/deck data API (db_connect/): a small Flask app that queries a PostgreSQL database (deck, card, and per-symbol placement geometry — position, scale, rotation) and serves it as JSON. Deployed separately on Render at stop-it.onrender.com; the frontend fetches from it once on load.
• Deck generation (Spot-it Logic/, offline tooling, not part of the running app):
  • generator.c builds decks of n² + n + 1 cards using a finite-projective -plane / cyclic-difference-set construction (prime and non-prime orders), then places each card's symbols with rejection sampling and a Separating Axis Theorem–based collision check to avoid overlap.
  • configColision.cpp independently validates that every pair of generated cards shares exactly one symbol.
  • imageManager.java measures source image dimensions used by the C generator's layout math.
  • Generated card/placement data is loaded into PostgreSQL via data_base/spot_it.sql.

Netlify serves only the static web/ frontend; the Flask API and PostgreSQL database run separately on Render.

Game modes

Selectable from the mode carousel: Tripleta, Papa Caliente, Torre, Regalo Envenenado, and Pozo, each with its own theme and matching-symbol count.

Running locally

Frontend — no build step; serve web/ with any static server (or open web/index.html directly):

npx serve web

The Firebase project and Flask API URL are hardcoded in web/js/connect.js / web/js/app.js, so a local frontend talks to the live production backend and database by default.

Card/deck API:

cd db_connect
pip install -r requirements.txt
python API.py

Deck generator (standalone, run once to produce new decks, not needed to play the game):

gcc "Spot-it Logic/generator.c" -o generator

Credits

Built for the Lenguajes de Programación course at Tecnológico de Costa Rica by Caleb Alfaro, Kener Castillo, Alejandro Cerdas, and Pablo Pérez (Luco1421).