docs/UNIT_VISUAL_SHAPES.md

# 🎨 UNIT VISUAL SHAPES - Guide des formes d'unités

**Date:** 3 Octobre 2025  
**Fichier:** web/static/game.js (lignes 511-616)  
**Objectif:** Différencier visuellement chaque type d'unité

---

## 📐 FORMES DES UNITÉS

### 🟦 **Infantry (Infanterie)**
```
┌────────┐
│   ▪️   │  Petit carré (0.8x size)
│  👤   │  Représente un soldat
└────────┘
```
- **Forme:** Petit carré (80% de la taille normale)
- **Raison:** Simple et compact, comme un soldat vu de haut
- **Code:** `fillRect` avec 0.8x size

---

### 🔵 **Tank (Char d'assaut)**
```
    ▄▄▄
   ╱   ╲
  │  🎯  │  Cercle + Canon rectangulaire
  │     │  Représente la tourelle vue de haut
   ╲___╱
     ║
     ║    Canon pointant vers le haut
```
- **Forme:** Cercle (tourelle) + Rectangle (canon)
- **Raison:** Tourelle circulaire avec canon est iconique pour un tank
- **Code:** `arc` (cercle 0.8x size) + `fillRect` (canon 0.3x0.12 size vers le haut)

---

### 🔺 **Harvester (Récolteur)**
```
     🔺
    ╱ ╲
   ╱   ╲   Triangle pointant vers le haut
  ╱  💰 ╲  Avec indicateur de cargo doré
 ╱───────╲
```
- **Forme:** Triangle équilatéral pointant vers le haut
- **Raison:** Forme de pelle/foreuse pour véhicule minier
- **Particularité:** 
  - Cercle doré au centre si `cargo > 0` (porte des ressources)
  - Cercle devient plus gros si `cargo >= 180` (presque plein)
- **Code:** Chemin avec 3 points + `arc` conditionnel pour cargo

---

### 💎 **Helicopter (Hélicoptère)**
```
      ◆
    ╱   ╲
───◆─────◆───  Losange avec rotors
    ╲   ╱      Vue de dessus
      ◆
```
- **Forme:** Losange (diamant) + Ligne horizontale (rotors)
- **Raison:** Vue de dessus avec rotors visibles
- **Code:** Chemin avec 4 points (losange) + ligne horizontale épaisse

---

### ⬠ **Artillery (Artillerie)**
```
    ▲
   ╱ ╲
  ╱ ║ ╲   Pentagone + Canon long
 │  ║  │  Plateforme d'artillerie
  ╲   ╱
   ╲_╱
```
- **Forme:** Pentagone (5 côtés) + Rectangle vertical (canon long)
- **Raison:** Plateforme stable avec canon de longue portée
- **Code:** Chemin avec 5 points (rotation -90°) + `fillRect` (canon 0.2x1.5 size)

---

## 🎨 SYSTÈME DE COULEURS

### Joueur 0 (Allié)
- **Couleur principale:** `#4A90E2` (Bleu)
- **Utilisation:** Toutes les unités du joueur

### Joueur 1+ (Ennemi)
- **Couleur principale:** `#E74C3C` (Rouge)
- **Utilisation:** Toutes les unités ennemies

### Indicateurs spéciaux

**Harvester Cargo:**
- `cargo > 0` → Cercle orange `#FFA500`
- `cargo >= 180` (90% plein) → Cercle doré `#FFD700`

**Barre de santé:**
- `health > 50%` → Vert `#2ECC71`
- `health 25-50%` → Orange `#F39C12`
- `health < 25%` → Rouge `#E74C3C`

---

## 📊 TAILLES RELATIVES

```
Base size = TILE_SIZE / 2 = 40 / 2 = 20px

Infantry:     16px x 16px  (0.8x size)
Tank:         16px radius  (0.8x size) + canon 6x24px
Harvester:    32px base    (1.6x size triangle)
Helicopter:   40px diag    (2x size diamond)
Artillery:    20px radius  (1x size pentagon) + canon 4x30px
```

---

## 🔍 VISUALISATION COMPARATIVE

```
┌─────────────────────────────────────────────────────────────────┐
│                    VUE DE DESSUS (TOP-DOWN)                     │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   Infantry      Tank         Harvester     Helicopter  Artillery│
│                                                                 │
│   ┌──┐          ●            ▲             ◆           ⬠       │
│   │  │         ╱│╲          ╱ ╲           ╱ ╲         ╱│╲      │
│   └──┘        │ ● │        ╱💰 ╲         ◆   ◆       │ │ │     │
│               │ │ │       └─────┘         ╲ ╱        │ ⬠ │     │
│                ║                           ◆         │ │ │     │
│                ║                                      ╲│╱      │
│                                                                 │
│   Bleu = Joueur                                                │
│   Rouge = Ennemi                                               │
└─────────────────────────────────────────────────────────────────┘
```

---

## 💻 CODE STRUCTURE

### Fonction principale: `drawUnits()`

```javascript
drawUnits() {
    for (const [id, unit] of Object.entries(this.gameState.units)) {
        const color = unit.player_id === 0 ? BLUE : RED;
        const size = TILE_SIZE / 2;  // 20px
        
        switch(unit.type) {
            case 'infantry':
                // Petit carré
                fillRect(x, y, size*0.8, size*0.8);
                
            case 'tank':
                // Cercle + canon
                arc(x, y, size*0.8);
                fillRect(canon);
                
            case 'harvester':
                // Triangle + cargo
                moveTo/lineTo (triangle);
                if (cargo > 0) arc(cargo_indicator);
                
            case 'helicopter':
                // Losange + rotors
                moveTo/lineTo (diamond);
                moveTo/lineTo (rotor_line);
                
            case 'artillery':
                // Pentagone + canon
                for (5 sides) moveTo/lineTo;
                fillRect(barrel);
        }
        
        drawHealthBar(unit);
    }
}
```

---

## 🎯 AVANTAGES DU SYSTÈME

### 1. **Identification rapide**
- Chaque unité a une silhouette unique
- Reconnaissance instantanée même à petite échelle
- Pas de confusion entre types

### 2. **Clarté tactique**
- Infantry (carré) = Unité de base
- Tank (cercle) = Unité blindée
- Harvester (triangle) = Unité économique
- Helicopter (losange) = Unité aérienne
- Artillery (pentagone) = Unité de support

### 3. **Information visuelle**
- Harvester montre son cargo (cercle doré)
- Barres de santé colorées selon état
- Couleur joueur/ennemi claire

### 4. **Performance**
- Formes simples (primitives Canvas)
- Pas de sprites/images nécessaires
- Rendu rapide même avec beaucoup d'unités

---

## 🎮 COMPARAISON AVEC RED ALERT ORIGINAL

### Red Alert (1996)
- Sprites bitmap 2D pré-rendus
- 8 directions de rotation
- Animations frame-by-frame

### Notre version (2025)
- Formes géométriques vectorielles
- Rotation continue possible
- Rendu procédural en temps réel
- Style minimaliste moderne

---

## 🔧 PERSONNALISATION

Pour modifier les formes, éditer `web/static/game.js` lignes 511-616 :

### Exemple: Changer la forme du Tank

```javascript
case 'tank':
    // Version actuelle: Cercle + canon
    this.ctx.arc(x, y, size*0.8, 0, Math.PI*2);
    this.ctx.fillRect(x-size*0.15, y-size*1.2, size*0.3, size*1.2);
    
    // Variante: Carré arrondi + canon
    this.ctx.roundRect(x-size, y-size, size*2, size*2, size*0.3);
    this.ctx.fill();
    this.ctx.fillRect(x-size*0.15, y-size*1.2, size*0.3, size*1.2);
```

---

## 📊 STATISTIQUES VISUELLES

| Type | Forme | Taille | Éléments additionnels |
|------|-------|--------|----------------------|
| **Infantry** | Carré | 16x16px | Aucun |
| **Tank** | Cercle | Ø32px | Canon (6x24px) |
| **Harvester** | Triangle | 32px base | Cargo indicator |
| **Helicopter** | Losange | 40px diag | Ligne rotors |
| **Artillery** | Pentagone | Ø40px | Canon long (4x30px) |

---

## 🧪 TEST DE LISIBILITÉ

Pour vérifier la lisibilité des formes :

1. **Test à 100% zoom**
   - Toutes les formes doivent être clairement distinctes
   - Détails (canon, rotors, cargo) visibles

2. **Test à 50% zoom (minimap)**
   - Silhouettes reconnaissables
   - Couleurs joueur/ennemi claires

3. **Test avec 50+ unités**
   - Pas de confusion visuelle
   - Performance stable (60 FPS)

---

## 🎨 PALETTE DE COULEURS COMPLÈTE

```javascript
PLAYER:     #4A90E2  (Bleu vif)
ENEMY:      #E74C3C  (Rouge vif)
SELECTION:  #00FF00  (Vert fluo)
HEALTH_HI:  #2ECC71  (Vert)
HEALTH_MID: #F39C12  (Orange)
HEALTH_LOW: #E74C3C  (Rouge)
CARGO_PART: #FFA500  (Orange)
CARGO_FULL: #FFD700  (Or)
```

---

## ✅ CHECKLIST D'IMPLÉMENTATION

- [x] Infantry → Petit carré
- [x] Tank → Cercle + canon
- [x] Harvester → Triangle + cargo indicator
- [x] Helicopter → Losange + rotors
- [x] Artillery → Pentagone + canon long
- [x] Couleurs joueur/ennemi
- [x] Barres de santé colorées
- [x] Indicateur cargo Harvester
- [x] Formes évolutives (tailles)
- [x] Performance optimisée

---

## 🚀 PROCHAINES AMÉLIORATIONS POSSIBLES

1. **Rotation des unités**
   - Orienter selon direction de déplacement
   - Canvas `rotate()` avant dessin

2. **Animations**
   - Rotors d'hélicoptère qui tournent
   - Canon qui recule au tir
   - Harvester qui "creuse"

3. **Effets visuels**
   - Ombre portée
   - Outline au survol
   - Particules au mouvement

4. **États visuels**
   - Attaque (flash rouge)
   - En production (aura bleue)
   - Endommagé (fumée)

---

**Status:** ✅ IMPLÉMENTÉ ET FONCTIONNEL  
**Fichier:** web/static/game.js  
**Lignes:** 511-616  
**Compatibilité:** Tous navigateurs modernes (Canvas 2D)