Bingo Host & Player System

A modern, web-based 90-ball Bingo solution featuring a comprehensive Host Dashboard for conducting games and a mobile-friendly Player Client for generating and playing digital bingo tickets.

Features

🎮 Host Dashboard (host.html)

• 90-Ball Support: Standard 1-90 number range.
• Game Controls:
  • Manual Draw: Click to draw the next number.
  • Auto Draw: Set a timer (e.g., 3 seconds) to automatically draw numbers.
  • Reset Game: Clears the board and starts a new session (requires confirmation).
• Visuals & Audio:
  • Large "Current Number" display.
  • Grid view of called/uncalled numbers.
  • History of the last 5 calls.
  • Theme Support: Toggle between Light and Dark modes.
• Game Management:
  • Win Tracking: Track "Line" and "Bingo" winners with name entry.
  • Game History: Persists past game results (Game ID, Date, Winners) in the browser.
• Player Onboarding:
  • QR Code Generator: Instantly generate a QR code for players to scan and join the game (links to client.html).

📱 Player Client (client.html)

• Mobile-First Design: Optimized for smartphones and tablets.
• Digital Ticket Generation:
  • Generates valid 90-ball Bingo tickets obeying standard rules (3 rows, 9 columns, 5 numbers/row, column ranges, etc.).
  • "New Ticket" button to generate a fresh card.
• Interactive Gameplay:
  • Tap numbers to mark/daub them.
  • Persistence: Your ticket and marked numbers are saved automatically, so you don't lose progress if you refresh.
• Theme Support: Matches the system or user preference (Light/Dark mode).

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge).
• A local web server (required for proper functionality of ES modules or History API if used).

Installation & Running

1. Clone or Download the repository.
2. Start the Server: You can use any static file server. The project includes a defined script usually depending on the serve utility.

   ./run.sh
   # Or manually: npx serve .

3. Access the Application:
   • Host: Open http://localhost:3000/host (or your server's port).
   • Player: Open http://localhost:3000/client or scan the QR code from the Host screen.

📖 Usage Guide

For the Host

1. Start: Open the Host Dashboard.
2. Setup: Connect your device to a large screen or projector if hosting for a crowd.
3. Join: Click the QR Code icon in the header. Have players scan it.
4. Play: Click "Draw Number" or "Auto Draw".
5. Verify Wins:
   • When a player calls "Line!" or "Bingo!", verify their numbers against the board.
   • Click the "Line!" or "Bingo!" buttons on your dashboard to record the winner's name.
6. Reset: When the game ends, click "New Game". Records will be saved to the History table below the board.

For the Player

1. Join: Scan the Host's QR code or navigate to the client URL.
2. Ticket: A ticket is generated automatically. If you don't like it, click "New Ticket".
3. Play: As numbers are called, tap them on your screen to mark them (they will turn orange/highlighted).
4. Win: Shout "Line!" or "Bingo!" when you have marked the required pattern!

🛠 Technical Details

• Tech Stack: HTML5, Vanilla JavaScript, TailwindCSS (v3.4).
• State Management: Uses localStorage to persist game state, history, and player tickets across reloads.
• Styling: Utility-first CSS using Tailwind, with custom host.css and client.css for specific component overrides and animations.
• File Structure:
  • host.html: Host application entry point.
  • client.html: Player application entry point.
  • assets/: Contains shared libraries (Tailwind, QR Code), CSS, and application logic (host.js, client.js).

📸 Screenshots

Host Dashboard

Dark Mode

Light Mode

Player Client

Dark Mode

Light Mode