Tambola Host

A lightweight offline-first Tambola (Housie) Host Web App for game conductors. This is a host console to manage the game flow, numbers, winners, and budget.

Features

• 🎲 Number Generation: Randomized 1-90 numbers with no duplicates
• 🔊 Voice Announcements: Browser-native TTS with traditional Tambola phrases
• 💰 Budget Management: Track prizes, payouts, and remaining budget
• 🏆 Winner Declaration: Easy prize assignment to players
• 📴 Fully Offline: Works without internet - data stored in IndexedDB
• 📱 Mobile-Friendly: Responsive design with large touch targets
• 💾 Persistent State: Game state survives refresh, tab close, browser restart

Tech Stack

• React 18 + Vite - Fast, modern frontend
• TypeScript - Type safety
• Zustand - Lightweight state management
• Dexie.js - IndexedDB wrapper for persistence
• CSS Modules - Scoped styling

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173

Build for Production

npm run build

Output will be in the dist folder.

App Structure

src/
├── components/          # Reusable UI components
│   ├── Button.tsx
│   ├── NumberBoard.tsx
│   ├── CurrentNumber.tsx
│   ├── CalledHistory.tsx
│   ├── Modal.tsx
│   ├── WinnerModal.tsx
│   ├── Header.tsx
│   └── Toggle.tsx
├── pages/               # Route pages
│   ├── Home.tsx
│   ├── GameSetup.tsx
│   ├── GameScreen.tsx
│   ├── Summary.tsx
│   └── PastGames.tsx
├── store/               # Zustand store
│   └── gameStore.ts
├── db/                  # Dexie database config
│   └── index.ts
├── lib/                 # Utilities
│   ├── gameEngine.ts
│   └── tts.ts
├── data/                # Static data
│   └── numberPhrases.ts
├── types/               # TypeScript types
│   └── index.ts
└── styles/              # Global styles
    └── index.css

Usage

Starting a New Game

1. Click "New Game" on the home screen
2. Set your total budget
3. Configure prize categories (name + amount)
4. Add player names
5. Toggle voice on/off
6. Click "Start Game"

During the Game

• Press the large PLAY button to call the next number
• Numbers are announced via voice (if enabled)
• The 1-90 board highlights called numbers
• Called history shows recent numbers

Declaring Winners

1. Click "Declare Winner"
2. Select the prize category
3. Select the winning player
4. Confirm

Ending the Game

• Click "End Game" to finish
• View the summary with:
  • Per-player winnings
  • Prize-wise payouts
  • Total payout
  • Remaining budget

Data Models

Game {
  id: string
  date: number
  budget: number
  prizeStructure: Prize[]
  players: Player[]
  shuffledNumbers: number[]
  currentIndex: number
  calledNumbers: number[]
  wins: Win[]
  voiceEnabled: boolean
  status: 'setup' | 'active' | 'completed'
}

Prize {
  id: string
  name: string
  amount: number
}

Player {
  id: string
  name: string
}

Win {
  id: string
  gameId: string
  playerId: string
  prizeId: string
  amount: number
  timestamp: number
}

License

MIT