# Two-Stands Transfers — Broadcast Graphics Template

Soccer player transfer broadcast graphics — **transparent overlay** for **1920×1080** frames.

## Specifications

| Property          | State 1 (Reveal) | State 2 (Compact)      |
|-------------------|------------------|------------------------|
| Frame             | 1920×1080 px (transparent) | 1920×1080 px (transparent) |
| Graphics area     | 1920×758 px      | 641×758 px (centered)  |
| Duration          | 5 seconds        | holds until next        |
| Player photo      | 641×758 PNG (1:1) | 230px crop from 641-wide source |

## Layout — State 1 (0–5 s)

Full-width 1920×758 bar:

```
┌─────────────────── 1920×758 ──────────────────────────────┐
│                                                          │
│ ┌──────────┐  ПЕРЕХОД                                     │
│ │          │                                              │
│ │  PLAYER  │  PLAYER NAME                                 │
│ │  PHOTO   │                                              │
│ │          │                                              │
│ │  641px   │  [MLS]  ЧЕЛСИ           ┌──────────┐        │
│ │ (1:1)    │                         │  138 млн │        │
│ │          │                         └──────────┘        │
│ └──────────┘                                             │
└──────────────────────────────────────────────────────────┘
```

## Layout — State 2 (after 5 s)

Shrinks to centered 641×758:

```
┌──────── 641×758 ────────┐
│                         │
│ ┌────────┐  ПЕРЕХОД     │
│ │ PHOTO  │  PLAYER NAME │
│ │ 230px  │              │
│ │        │  ЧЕЛСИ       │
│ │        │  ┌────────┐  │
│ └────────┘  │ 138 млн│  │
│            └────────┘  │
└─────────────────────────┘
```

## Data — `data/transfers.json`

Generated from `assets/transfers-list.csv`. Each transfer object:

```json
{
  "id": 1,
  "playerName": "Морган Роджерс",
  "photo": "assets/players/player_01.png",
  "team": {
    "name": "Челси",
    "logo": "assets/teams/chelsea.svg",
    "color": "#034694",
    "accent": "#FFFFFF"
  },
  "price": "138 млн",
  "isFreeAgent": false
}
```

For free agents (`isFreeAgent: true`), the price badge turns green and the
label shows "Статус" instead of "Сумма".

### Data source — `assets/transfers-list.csv`

```
Player, Club, Sum
Морган Роджерс, Челси, 138 млн
Энтони Гордон, Барселона, 80 млн
Ибрагим Конате, Реал, Свободный агент
```

Edit the CSV, then re-run the generator to rebuild `transfers.json`
and regenerate placeholder PNGs + team crests.

## Usage

### 1. Run a local server (needed for fetch)

```bash
python3 -m http.server 8000
```

### 2. Open in browser

```
http://localhost:8000
```

### 3. Controls

| Key            | Action                    |
|----------------|---------------------------|
| → / Enter      | Next transfer             |
| ← / Backspace  | Previous transfer         |
| R              | Replay current            |
| H              | Hide / Show               |
| A              | Toggle autoplay (8s loop) |

### External API (CasparCG / OBS)

```javascript
window.transferGraphics.showAt(0);  // show transfer #1 (starts State 1)
window.transferGraphics.next();     // next transfer
window.transferGraphics.prev();     // previous transfer
window.transferGraphics.replay();   // replay current
window.transferGraphics.hide();      // hide graphics
window.transferGraphics.show();      // show graphics
window.transferGraphics.autoplay();  // toggle autoplay
```

## Generating Placeholder Assets

```bash
python3 generate_placeholders.py
```

This reads `assets/transfers-list.csv` and generates:
- `assets/teams/*.svg` — team crest placeholders (colored shields)
- `assets/players/player_*.png` — player PNG placeholders at **641×758**
- `data/transfers.json` — the transfer data file

**Replace** the placeholder PNGs with real 641×758 player cutouts — just
drop your files into `assets/players/` with the same names (`player_01.png`,
`player_02.png`, …). No scaling needed — the source image is displayed 1:1
in State 1, and CSS `object-fit: cover` crops it for the compact State 2.

## Timing

```
0.0 s   Card enters (slide + fade)
0.15s   Photo scales in
0.35s   "ПЕРЕХОД" label slides down
0.55s   Player name slides in
1.0 s   Team block appears
1.35s   Price badge pops in (bounce)
5.0 s   Container shrinks 1920 → 641 (0.85 s smooth transition)
5.85s+  Compact state holds
```