Cine Taka Toe

Inspiration

We love the Tiki Taka Toe football game format because it’s simple, competitive, and instantly addictive. We thought: what if we bring that same idea to cinema? That’s how Cine Taka Toe was born: a fast 1v1 game where knowledge of movies replaces football trivia, and every move is validated automatically using real data.

What it does

Cine Taka Toe is a 1v1 (Blue vs Red) cinema trivia game played on a 3×3 grid. Each row and column has a rule (e.g., starring an actor, directed by someone, genre, decade). A cell is the intersection of its row rule + column rule. On your turn you pick a cell and propose a movie that satisfies both rules. The game validates the movie using the TMDB API (including credits). Turn switches whether you succeed or fail (like real Tiki Taka Toe). First player to make 3 in a row wins. At the end you can: Start a new game Keep playing to fill remaining empty cells Auto-complete the board to see valid examples you didn’t think of Extra: timer modes (no time / 15s / 30s / 60s), skip turn button, scoreboard saved in local storage, and a dynamic theme that changes color by player turn.

How we built it

We built the project as a lightweight, static web app: Frontend: Vanilla HTML/CSS/JavaScript (no framework, fast iteration). TMDB integration: Movie search endpoint for suggestions. Movie details endpoint with append_to_response=credits to validate cast/director rules. Discover endpoint to generate playable boards (ensuring each cell has enough possible valid answers). Game logic: 3×3 board state, turn management, win detection (rows/cols/diagonals). Rule engine (actor-in-cast, directed-by, genre match, decade range). UX features: Board with row/column headers (like the football version). Modal end screen with the 3 post-game options. Auto-complete feature that finds valid movies for empty cells using discover + verification. Turn-based theme color and a per-turn timer.

Challenges we ran into

Generating “playable” boards: Random rules can create impossible intersections. We had to ensure each of the 9 cells had a minimum number of valid results, and add caching to avoid hammering the API. Reliable validation: Some filters (like “crew”) can be tricky, so we verified results by fetching full credits and re-checking rules. Balancing speed vs correctness: We needed the game to feel instant, but validation requires API calls—so we optimized by limiting candidates and caching. UI clarity: Early versions had too much text inside cells; moving rules to headers made the experience much closer to the original Tiki Taka Toe and easier to read. First hackathon reality: As two first-year students, we had to prioritize features carefully and keep the stack simple to ship something complete.

Accomplishments that we're proud of

We shipped a fully playable 1v1 game with real-time validation against TMDB data. We implemented fair turn rules (turn changes on success or failure) and 3-in-a-row victory. We built a board generator that tries to guarantee playable intersections (not just random). We added “quality-of-life” features that make it feel like a real product: timer modes, skip turn, auto-complete, scoreboard persistence, dynamic theme per player. We made the UI look and feel very close to the Tiki Taka Toe style, with external row/column headers and a clean board.

What we learned

How to integrate and validate gameplay logic using a real external API (search, details, credits, discover). How important UX layout is: the same mechanics can feel 10x better with the right visual structure. How to handle trade-offs between fast iteration and clean architecture during a hackathon. How caching, limits, and filtering matter when your gameplay depends on API responses. Most importantly: we learned that we can build something end-to-end as first-year students—and that’s a huge confidence boost.

What's next for Cine Taka Toe

More rule types: country/language, rating thresholds, franchises, award-related categories (if data source supports it). Daily board mode: same board for everyone each day (shareable challenge). Online multiplayer: rooms, invite links, and matchmaking. Better auto-complete: show multiple valid options per cell and allow browsing examples. Polish & accessibility: smoother animations, mobile layout improvements, and clearer onboarding for new players. Security improvements for deployment: moving API key usage behind a small backend proxy for public hosting.

Built With

• completar-tablero
• css3
• html5
• inputs).-css3-?-estilos
• javascript
• marcador-con-localstorage)
• modales
• render-del-tablero-y-llamadas-a-la-api.-the-movie-database-(tmdb)-api-?-busqueda-de-peliculas
• tablero
• tablero-con-cabeceras-tipo-tiki?taka?toe-y-fondo-dinamico-por-turno.-javascript-(vanilla)-?-logica-del-juego-(turnos
• tema-oscuro
• timer-por-turno
• victoria-3-en-raya