# TikTok Live Games

Jeux 2D interactifs branchés sur un live TikTok. Un menu terminal permet de choisir le jeu, un serveur local diffuse les likes/dons/follows du live en temps réel (WebSocket) vers le jeu ET vers une page overlay séparée, pensée pour OBS.

## Structure

```
TikTokGame/
  games.json               Registre des jeux (id, nom, dossier, description)
  config/
    config.example.json    Modèle de config (pseudo, port, simulation)
  server/
    cli.js                 Menu terminal (choix du jeu + pseudo TikTok + port) + simulateur de dons
    gameServer.js           Serveur HTTP (fichiers statiques) + WebSocket (relai bidirectionnel)
    tiktokConnector.js      Connexion au live TikTok (tiktok-live-connector)
    simulator.js            Génère de faux événements si hors-ligne (mode dev)
    giftLegend.js           Charge gift-legend.json + normalise les noms de dons
    giftSimulator.js        Invite interactive terminal pour simuler un don precis
  public/
    shared/
      tiktok-events.js      Client JS: TikTokEvents.on(type, cb) / TikTokEvents.send(obj)
      sfx.js                Petits sons synthétisés (WebAudio, aucun fichier)
      toybox.js             Rendu partagé des blocs "bonbon" ronds (couleurs HSL liées)
    games/
      stack/                Jeu Stack (tour déjà construite, étages affichés dans l'overlay)
      catch/                Jeu Catch (attraper likes/dons/follows)
    overlay/                Page a fond transparent pour OBS (a poser PAR-DESSUS le jeu)
      profiles.json         Textes/couleurs par jeu (stack, catch, default)
      gift-legend.json       Legende des dons (grille, cotes, don special) + PNG + texte
      gift-prices.json       Prix (diamants) de chaque don - a corriger ici en priorite
      media-config.json     Videos/sons (dons, follow, N likes, mots-cles de commentaire)
      media/                Depose ici tes fichiers video/son
      media/gifts/          Depose ici les PNG des dons (Dons00.png ... Dons12.png)
      media/sounds/         Depose ici tes mp3 (follow, mots-cles, dons)
```

## Installation

```bash
npm install
```

## Lancer

```bash
npm start
```

Le menu terminal demande le jeu, le pseudo TikTok (vide = simulation) et le port. Le navigateur s'ouvre sur le jeu. Le terminal affiche aussi les URLs des pages overlay a ajouter dans OBS.

## Montage OBS (de bas en haut)

Ajoute ces sources dans cet ordre (la plus basse en premier) :

1. **Le jeu** — capture de la fenêtre du jeu (Stack ou Catch). Le jeu peint lui-même son fond animé (dégradé assorti à la tour, bulles, particules).
2. **Overlay** — Source Navigateur → `http://localhost:<port>/overlay?profile=stack` (ou `catch`), fond transparent.

Résolution recommandée pour la source overlay : **1080 x 2340** (format téléphone).

Dans l'overlay, deux boutons dans le cadre caméra permettent de choisir directement une **webcam** ou une **fenêtre/écran** à afficher, sans avoir besoin d'ajouter une source caméra séparée dans OBS.

## Overlay : ce qu'il affiche

L'overlay respecte les **zones interdites de l'interface TikTok Live** : rien dans les ~13% du haut (pseudo, spectateurs) ni les ~27% du bas (chat, barre de cadeaux). Tout le contenu vit dans la bande du milieu, et le centre reste dégagé pour voir la tour.

- **Classements** Top dons / Top likes (10 premiers, médaille 🥇🥈🥉 sur le podium), avec photo de profil quand TikTok la fournit.
- **Alerte follow** : une pastille ⭐ "{pseudo} vient de follow !" apparaît quelques secondes, indépendamment des cases de dons.
- **Légende des dons** : grandes cases claires (même taille des deux côtés) réparties sur les deux colonnes latérales (6 par côté, rouge à gauche / vert à droite) + le don spécial bleu (TikTok Univers) tout en bas de la colonne de droite, nettement séparé — chacune avec son PNG (`media/gifts/Dons00.png` à `Dons12.png`) et un texte d'explication (`gift-legend.json`, à affiner ensemble).
- **Réaction aux dons** : quand un don connu arrive, sa case s'agrandit/rétrécit vite (plus longtemps pour les dons chers) et le pseudo du donateur apparaît au-dessus de l'icône, pour une durée qui dépend du palier du don (voir tableau ci-dessous). À partir de Galaxie, un effet à l'échelle de l'écran (confettis + flash + secousse) se déclenche en plus, avec une puissance proportionnelle au **prix réel** du don (`gift-prices.json`, voir plus bas).
- **Médias programmables** (`media-config.json`) : vidéo/son au centre de l'écran pour un don précis, un follow, tous les N likes, **ou un mot-clé dans un commentaire** (voir exemples ci-dessous).

### Paliers de dons (`gift-legend.json`)

| Dons | Pseudo affiché | Effet case |
|---|---|---|
| Rose, GG | 1s | court (x1) |
| Rosa, Grande Box | 3s | x3 |
| Donut, You're on a Roll | 5s | x5 |
| Confettis, Cœur dans les mains | 10s | x10 |
| Galaxie, Gerry la girafe | 20s | x20 + effet écran |
| Léon le chaton, Jet privé | 60s | x60 + effet écran |
| TikTok Univers (seul) | 120s | effet écran répété toutes les 4s |

Ajuste `durationMs`/`effectMultiplier` dans `gift-legend.json` si besoin.

### Corriger les prix des dons (`gift-prices.json`)

Les prix affichés au départ étaient des estimations et peuvent être faux. Corrige-les dans ce fichier séparé (pas besoin de toucher au reste de la légende) :

```json
{ "rose": 1, "galaxie": 100, "tiktokunivsers": 1000, ... }
```

Ce fichier surcharge le champ `diamonds` de `gift-legend.json`. Il sert au simulateur terminal et de valeur de repli si TikTok ne fournit pas le prix réel de l'événement.

### Sons sur mots-clés, dons ou follow (`media-config.json`)

```json
"comments": [
  { "keywords": ["gg", "bien joué"], "sound": "media/sounds/gg.mp3" },
  { "keywords": ["lol", "mdr", "haha"], "sound": "media/sounds/rire.mp3" }
]
```

Dès qu'un commentaire contient un des mots-clés (insensible à la casse), le son/vidéo correspondant se joue au centre de l'écran. Dépose tes `.mp3` dans `media/sounds/` — des exemples sont déjà présents dans `media-config.json` pour follow, un don précis et plusieurs mots-clés.

## Simuler des dons depuis le terminal

Une fois `npm start` lancé, une invite `don>` apparaît dans le même terminal. Tape un nom ou un id de don (voir la liste affichée) pour le déclencher instantanément, comme s'il venait du live :

```
don> rose
don> tiktok univers x2
don> list
don> quit
```

`quit` arrête juste l'invite de simulation, le jeu et le serveur continuent de tourner.

Si un vrai don arrive avec un nom qui ne correspond à aucune entrée de `gift-legend.json`, le terminal affiche un avertissement avec le nom exact et le nombre de diamants, pour pouvoir l'ajouter facilement.

## Jeux inclus

- **Stack** : la tour est déjà construite au démarrage, étage affiché directement sur la page du jeu (panneau déplaçable à la souris, position sauvegardée). Blocs ronds, toujours parfaitement alignés (téléportés sur l'axe de la tour). On ne peut jamais perdre : un raté fait tomber le bloc en morceaux (physique, rebondit sur les blocs plus bas, pas de sol - la tour est profonde) et fait redescendre d'un étage, comme un don "Rose" ou un follow (effet de lame).
- **Catch** : cœurs (likes), cadeaux (dons) et étoiles (follows) tombent depuis le haut ; on déplace un panier pour les attraper.

## Connexion au live

`tiktok-live-connector` est en v2 (ESM). Le fichier `server/tiktokConnector.js` utilise la classe de base `TikTokLiveConnection` (pas le wrapper "legacy", qui contient un bug connu faisant planter le process). Si la connexion à un vrai live échoue, le terminal affiche le message d'erreur exact (souvent lié au serveur de signature tiers [Euler Stream](https://www.eulerstream.com) utilisé par la librairie).

## Performance

- Aucun framework front, uniquement Canvas 2D + `requestAnimationFrame`.
- Un seul WebSocket partagé (jeu + overlay), avec relai serveur pour que jeu et overlay communiquent même dans deux navigateurs différents (ex: jeu dans Chrome, overlay dans OBS).
