Live table surfaces
Practice against bots on a random table, or join private rooms with Homies. Scores, open ends, and hands update in place — with fullscreen table mode for focused play on mobile and desktop.
About the Homienoes Game App
Project Overview
Homienoes is a place for Homies (friends) to play double-six Block Dominoes together — or a local practice table against bots. Private rooms rematch in place, and each game keeps its own scoreboard so you can see who won Game 1 vs Game 7. Let's play Homienoes!
Everyone starts with seven bones. Match an open end, draw when you stall, and score when open ends total a multiple of five. Empty your hand and you've Homienoed. Big 6 (6:6) opens a brand-new match when someone holds it; the Homienoer leads the next round and may place any bone.
It uses a Design System built by Tulio Solorzano.
The project also works as a practical front-end case study: realtime play surfaces, protected rooms, drag-and-drop bones, room-level match history, and reusable UI patterns built on a typed game engine.
Design and Architecture
A closer look at the front-end decisions, reusable patterns, and typed architecture behind Homienoes.
Front End and UI
Homienoes turns a familiar parlor game into a clear, maintainable interface: readable scores, a flexible chain on the felt, and chrome that helps Homies jump back to the table that needs them.
Drag-and-drop bones
Pointer-driven hand play keeps mouse and touch on one path. Long-press rearranges your bones without playing them; legal ends light up while you aim, and the chain folds when a long run needs elbows.
Room game stats
Every rematch is its own Game 1, Game 2, … with scores and rounds in that match. The fullscreen toolbar opens a stats overlay; View all drops you back on the room page scrolled to the full history.
Homie-aware chrome
Header invite and messages CTAs light up only when something needs you. The invite bell lists open rooms — Your turn Homie jumps into fullscreen — plus friend requests and room invites. Browser alerts can nudge you when it is your move.
Profile & table style
Players pick table colors (felt, brand blue, Docker Orange, red-and-gold, silver-and-black, orange-and-black) and bone face schemes (classic or inverse), and can review friends and how scores are tracking over time.
Design Patterns
- App Router page boundariesRoute files stay focused while feature components own play hubs, rooms, and domain UI. Online rooms live at one URL (`/game/[id]`) — waiting lobby and live table share the same room surface.
- Server and client component separationServer routes and Supabase-backed helpers own authoritative game state; client hooks handle realtime sync, drag play, toasts, and table chrome.
- Typed domino engineA shared domain engine deals the bone set, validates matches, scores All Fives open ends, and settles Homienoes (emptied hands) or locked-table counts — including who opens the next round. The spinner can spin in when it first hits the felt.
- Realtime rooms, rematches & invitesSeated players, turns, rematches, and host-led reset consensus stay in sync over authenticated APIs and broadcasts — with email, phone, and in-app invites for Homies. Match history keeps a continuous Game N timeline even when an early result was deleted.
- Protected play surfacesSigned-in rooms, profile preferences, and admin tools stay behind auth and role checks while sharing the same design language as public pages.
- Design-system layeringShared UI primitives come from the synced kit; Gueysos-specific components and styles live under app-owned folders so product polish does not fight scaffold syncs.
Technology Stack
Product Scope
Players can practice locally against bots (with a confirm step before wiping a random table for a new deal), host or join private rooms from one room URL, invite Homies by friend, email, or phone, chat at the table or by direct message, and customize table color and bone faces from their profile.
Online matches support rematches, per-match stats (including rounds played), host-led resets with seated-player agreement, turn toasts when someone Homienoes, optional browser alerts for your turn, and a fullscreen table overlay — with game stats one tap away in the toolbar. Open-game lists only mark “your turn” while a round is actively in play.
Those pieces work together as a complete interface system — connecting UI decisions, realtime state, access control, and component boundaries in a real multiplayer app.