# CricCast Pro — Cricket Broadcast Software
## Complete Setup & User Guide

---

## 📁 Files Overview

| File | Purpose |
|------|---------|
| `admin.html` | **Main control panel** — all data entry, live scoring, team/player management |
| `overlay.html` | **Broadcast overlay** — add as Browser Source in vMix/OBS (1920×1080) |
| `scorecard.html` | Full innings scorecard viewer (Cricinfo-style) |
| `players.html` | Player profiles and career statistics |

---

## 🚀 Quick Start (5 Minutes)

### Step 1 — Open Admin Panel
Open `admin.html` in **Google Chrome** or **Microsoft Edge**.
> All data is stored locally in your browser's localStorage. No server needed.

### Step 2 — Add Teams
1. Go to **Teams** in the sidebar
2. Add each team: Name, Short code (3-4 letters), Color, Group
3. Example: "Virgo XI", "VXI", #e8a830, "Group A"

### Step 3 — Add Players
1. Go to **Players** → Add players for each team
2. Set Jersey number, Role (Batsman/Bowler/All-Rounder/WK)
3. Set batting and bowling style

### Step 4 — Setup Tournament (Optional)
1. Go to **Tournament** → Create groups, assign teams
2. Groups auto-feed into Points Table

### Step 5 — Create a Match
1. Go to **Matches** → Select Team 1 vs Team 2
2. Choose format (T20/ODI/T10/Test/Custom)
3. Set venue, date, toss winner
4. Click **Start Match**

### Step 6 — Setup vMix/OBS Browser Source
1. In vMix or OBS, add a **Browser Source**
2. Set URL to the full path of `overlay.html`:
   - Windows: `file:///C:/CricCast/overlay.html`
   - Or host on a local web server
3. Set resolution to **1920 × 1080**
4. Enable **Transparent background** (OBS: check "Allow transparency")
5. The overlay auto-updates every 500ms from localStorage

---

## 🏏 Live Scoring Guide

### Setting Up Each Innings
1. Go to **Live Scoring**
2. Under **Set Batsman** — select the Opening Batsman on Strike and Non-Strike
3. Under **Set Bowler** — select the Opening Bowler
4. Click **Set Batsmen** and **Set Bowler**

### Scoring Balls
| Button | What it does |
|--------|-------------|
| `0` | Dot ball |
| `1` `2` `3` | Runs scored |
| `4` | Boundary four |
| `6` | Six |
| `Wd` | Wide (+1 run, no ball count) |
| `NB` | No Ball (+1 run, no ball count) |
| `Wd+1` to `Wd+4` | Wide with additional runs |
| `NB+1` to `NB+6` | No ball with runs off bat |
| `Leg B` | Leg bye |
| `Bye` | Bye |
| `W` | Wicket (opens dismissal modal) |
| `W+1` `W+4` | Wicket + runs (e.g. run out with runs) |
| `↩ Undo` | Undo last ball |

### Recording a Wicket
1. Click the **W** button
2. Select: Batsman dismissed, Dismissal type, Fielder/Catcher name
3. Set runs scored on the delivery (usually 0)
4. Click **Confirm Wicket**

### End of Over
- Strike rotates automatically
- After 6 legal balls, over is completed automatically
- Set the next bowler before the next over

### End of Innings
- Click **End Innings** when all overs are bowled or all out
- A dialog opens to set opening batsmen and bowler for 2nd innings

---

## 📺 Overlay States (vMix/OBS)

Switch overlays from the **Overlays** panel in Admin:

| Overlay | Description | Best For |
|---------|-------------|----------|
| **Score Bug** | Compact corner scoreboard | Always-on during play |
| **Full Scoreboard** | Complete batting/bowling card | Between overs, drinks break |
| **Batting Card** | Current batsmen with full stats | After boundaries/milestones |
| **Bowling Card** | Current bowler with this-over balls | Start of each over |
| **Partnership** | Current stand runs & balls | Mid-innings analysis |
| **Fall of Wickets** | All wickets list | After wicket falls |
| **Last Wicket** | Just dismissed batsman | Immediately after wicket |
| **Points Table** | Tournament standings | Pre/post match, analysis |
| **Lower Third** | Name strap with custom stats | Player introductions |

### Ticker
- Go to **Ticker** panel
- Type any message and click **Push Ticker**
- Use **Auto-Generate** buttons for score, partnership, required rate etc.
- Ticker appears as a gold bar at the bottom of the overlay

---

## 🏆 Tournament Features

### Groups
- Create Group A, Group B etc.
- Assign teams to each group
- Points Table auto-calculates NRR and qualification

### Points System
- Win = 2 points
- Tie/No Result = 1 point each
- Loss = 0 points
- NRR = (Runs Scored / Overs Faced) − (Runs Conceded / Overs Bowled)

### Bracket
- After group stage, go to **Tournament → Bracket**
- Click **Generate Bracket** to create SF/Final bracket
- Top 4 teams by points automatically fill the bracket

---

## 📊 Statistics

All career stats are **automatically updated** when a match is marked complete (End Innings on 2nd innings).

### Batting Stats Tracked
- Matches, Innings, Runs, High Score, Average, Strike Rate
- Fifties, Hundreds, Fours, Sixes

### Bowling Stats Tracked
- Overs, Maidens, Runs, Wickets, BBI (Best Bowling in Innings)
- Average, Economy Rate, Strike Rate

---

## 💾 Data Management

### Export
Click **Export Data** in the header — saves a JSON backup file.

### Import / Restore
To restore: Open browser console (`F12`) and paste:
```javascript
localStorage.setItem('criccast_db', JSON.stringify( /* paste JSON here */ ));
location.reload();
```

### Multi-Device / Network Setup
For use across multiple computers on the same network:
1. Install any simple web server (e.g. `npx serve .` with Node.js)
2. Run from the folder containing the HTML files
3. Access from any device on the network via IP address
4. All devices share the same localStorage only if on same browser — for true multi-device, a backend server is needed

---

## ⚙️ vMix Integration Tips

1. **Browser Source URL**: Use `file:///` path or local server URL
2. **Refresh Rate**: Set browser refresh to 500ms or less
3. **Stinger Transitions**: Use the overlay states as stinger sources
4. **Multi-View**: Add overlay.html to a dedicated input layer
5. **Chroma Key**: Not needed — background is fully transparent

## ⚙️ OBS Integration Tips

1. Add **Browser Source** → Local File → `overlay.html`
2. Width: 1920, Height: 1080
3. ✅ Check "Allow transparency"
4. ✅ Check "Shutdown source when not visible" (optional)
5. Use **Filters → Chroma Key** if transparency doesn't work
6. Set **Custom CSS**: `body { background: transparent !important; }`

---

## 🎨 Customization

### Colors & Branding
Edit the `:root` CSS variables at the top of each file:
```css
--gold: #e8a830;   /* Primary accent color */
--green: #2ecc7a;  /* Positive / batting */
--blue: #4a9eff;   /* Bowling / info */
--red: #e85454;    /* Wickets / danger */
```

### Overlay Position
In `overlay.html`, find the graphic's `position:absolute` CSS and adjust `bottom`, `top`, `left`, `right` values.

### Logo
Replace "CRICCAST PRO" text in overlay.html with your channel logo by adding an `<img>` tag.

---

## 📋 Keyboard Shortcuts (Coming in v2)
- `0-6` — Score runs
- `W` — Wicket
- `Space` — Dot ball
- `Z` — Undo

---

## 🐛 Troubleshooting

**Overlay not updating?**
- Make sure both admin.html and overlay.html are open in the same browser
- Check browser console for errors (F12)
- Ensure localStorage is not blocked (disable privacy/incognito mode)

**Browser source blank in OBS?**
- Use a local web server instead of file:// path
- Run: `npx serve .` in the folder, then use `http://localhost:3000/overlay.html`

**Data lost after browser update?**
- Always export data after each match session
- Use the JSON backup to restore

---

*CricCast Pro v1.0 — Built for Virgo Media / Channel 9 Broadcast Operations*
*Master Engineering · masterengineering.com.bd*