init

2026-08-02 11:32:45 +03:00
commit cf7b8e1a5d
44 changed files with 1347 additions and 0 deletions
@@ -0,0 +1,148 @@
+# 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
+```