# Améliorations de la Fiche Créature

## Vue d'ensemble
La fiche créature a été complètement alignée avec les dernières améliorations de la fiche personnage pour assurer une expérience utilisateur cohérente à travers tout le système.

## Changements Apportés

## PARTIE 1 : ONGLET ATTRIBUTS (STATS)

### 1. Attributs avec Liste Déroulante (Dropdown)
**Avant:**
```handlebars
<input type="number" name="system.attributs.{{key}}.value" value="{{attr.value}}" />
```

**Après:**
```handlebars
<select name="system.attributs.{{key}}.value" value="{{attr.value}}" data-dtype="Number">
  {{selectOptions @root.config.listeNiveauCreature selected=attr.value}}
</select>
```

**Raison:**
- Les créatures peuvent avoir des attributs de 0 à 35 (vs 0-10 pour personnages)
- Utilise `listeNiveauCreature` créé dynamiquement dans `wasteland-main.js`
- Interface plus propre et empêche les valeurs invalides

### 2. Attributs Cliquables (Rollable)
**Avant:**
```handlebars
<span class="item-name">{{attr.label}}</span>
```

**Après:**
```handlebars
<span class="item-name">
  <a class="rollable" data-action="rollAttribut" data-attr-key="{{key}}">{{attr.label}}</a>
</span>
```

**Raison:**
- Permet de cliquer sur le nom de l'attribut pour faire un jet

### 3-5. Boutons +/- pour Santé et Psyché
Ajouté des boutons d'ajustement pour:
- Dégâts non létaux
- Dégâts létaux
- Psyché actuelle

**Raison:**
- Facilite l'ajustement rapide en combat

### 6. Terminologie
Changé "Courante" → "Actuelle" pour la psyché

## PARTIE 2 : ONGLET COMBAT

### 7. Valeurs de Combat - Grille 2x2 avec Champs Bonus
**Layout:**
```
┌──────────────────────────────┬──────────────────────────────┐
│ Initiative  12  [+2]  = 14   │ Défense     15  [+2]  = 17   │
├──────────────────────────────┼──────────────────────────────┤
│ Vitesse      8  [+0]  =  8   │ Bonus Dég.  +3  [+1]  = +4   │
└──────────────────────────────┴──────────────────────────────┘
```

**Code:**
```handlebars
<div class="grid grid-2col">
  <div class="combat-stat-row">
    <label class="stat-label">Initiative</label>
    <div class="stat-values">
      <span class="stat-base">{{combat.initBase}}</span>
      <input type="number" class="input-numeric-short" name="system.combat.initbonus" 
             value="{{system.combat.initbonus}}" data-tooltip="Bonus" />
      <span class="stat-total">= {{combat.initTotal}}</span>
    </div>
  </div>
  <!-- 3 autres similaires -->
</div>
```

**Raison:**
- **DIFFÉRENCE IMPORTANTE AVEC PERSONNAGE**: Créatures ont besoin des champs bonus éditables
- **Grille 2x2**: Compacte mais lisible, 2 valeurs par ligne
- Format: Nom | Base | [Bonus] | = Total

### 8. Compétences avec Boutons de Roll et Dropdown Niveau
**Avant:**
```handlebars
<span class="item-niveau">Niveau: {{skill.system.niveau}}</span>
```

**Après:**
```handlebars
<select class="status-small-label color-class-common edit-item-data competence-niveau"
        data-item-field="niveau" data-dtype="Number">
  {{selectOptions @root.config.listeNiveauSkill selected=skill.system.niveau}}
</select>
```

**Raison:**
- **Liste déroulante pour le niveau** (0-10) au lieu de texte statique
- Modification directe depuis la liste sans ouvrir la fiche
- Utilise le handler `edit-item-data` existant
- Appelle `editItemField()` pour mise à jour automatique
- **Comportement identique** à la fiche personnage

**Ajouts:**
- Boutons de roll par attribut (ADR:15, PUI:12, etc.)
- Nom cliquable pour éditer
- Bouton "Ajouter une compétence" en bas

### 9. Armes avec Format Moderne
**Avant:**
```handlebars
<li class="item flexrow list-item items-title-bg">
  <span class="item-name-label-header">Armes</span>
  <span>Attaque</span> <span>Défense</span> <span>Dégâts</span>
</li>
```

**Après:**
```handlebars
<span class="weapon-stats">
  <span class="stat-offensif" data-tooltip="Attaque">
    <i class="fas fa-crosshairs"></i> {{arme.system.totalOffensif}}
  </span>
  {{#if arme.system.isdefense}}
  <span class="stat-defensif" data-tooltip="Défense">
    <i class="fas fa-shield"></i> {{arme.system.totalDefensif}}
  </span>
  {{/if}}
</span>
<button class="button-sheet-roll" data-action="rollArmeOffensif">
  <i class="fas fa-dice-d20"></i>
</button>
<button class="button-sheet-roll" data-action="rollArmeDegats">
  <i class="fas fa-burst"></i>
</button>
```

**Raison:**
- Stats avec icônes visuelles (🎯 crosshairs, 🛡️ shield)
- Boutons avec icônes au lieu de texte
- Suppression du header colonnes
- Nom cliquable pour éditer
- Bouton "Ajouter une arme" en bas

### 10. Capacités
**Ajouts:**
- Nom cliquable pour éditer
- Bouton "Ajouter une capacité" en bas

## Fichiers Modifiés

### templates/actor-creature-sheet.hbs
- **Lignes 26-37**: Attributs avec dropdown et rollable links
- **Lignes 39-110**: Santé et Psyché avec boutons +/-
- **Lignes 107-146**: Valeurs combat en grille 2x2 avec inputs bonus
- **Lignes 148-189**: Compétences avec dropdown niveau et boutons de roll
- **Lignes 191-243**: Armes au format moderne avec icônes
- **Lignes 245-261**: Capacités avec nom cliquable
- **Total**: ~140 lignes modifiées/ajoutées

### less/actor-styles.less
- **Lignes 279-331**: Nouveaux styles pour `.combat-stats` (grille 2x2 créatures)
- **Total**: 52 lignes ajoutées

## Styles CSS Ajoutés

```less
.combat-stats {
  margin-bottom: 1rem;
  
  .grid-2col {
    gap: 0.5rem;
  }
  
  .combat-stat-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #6a0606;
    border-radius: 3px;
    padding: 0.4rem 0.6rem;
    gap: 0.5rem;
    
    .stat-label {
      font-weight: bold;
      font-size: 0.85rem;
      min-width: 90px;
      flex: 0 0 auto;
    }
    
    .stat-values {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      flex: 1;
      
      .stat-base { font-weight: bold; min-width: 30px; text-align: center; }
      .input-numeric-short { width: 50px; text-align: center; padding: 0.2rem; }
      .stat-total { font-weight: bold; color: #6a0606; min-width: 40px; }
    }
  }
}
```

## Actions Utilisées

Toutes réutilisées depuis `base-actor-sheet.mjs`:
- `rollAttribut` - Jets d'attributs
- `incDecSante` - Boutons +/- santé/psyché
- `rollCompetence` - Jets de compétence
- `rollArmeOffensif` / `rollArmeDegats` - Jets d'arme
- `createItem` / `editItem` / `deleteItem` - Gestion items

Handler spécial:
- `edit-item-data` - Modification dropdown niveau compétence
- Appelle `editItemField(itemId, itemType, itemField, dataType, value)` dans wasteland-actor.js

## Bénéfices

### Onglet Attributs
1. **Cohérence**: Même interface que fiche personnage
2. **Facilité**: Boutons +/- pour ajustements rapides
3. **Prévention d'erreurs**: Dropdowns empêchent valeurs invalides
4. **Ergonomie**: Attributs cliquables pour jets rapides

### Onglet Combat
1. **Layout 2x2**: Valeurs de combat compactes
2. **Champs Bonus**: Créatures peuvent ajuster leurs stats
3. **Dropdown Niveau**: Modification compétences sans ouvrir fiche
4. **Jets Rapides**: Boutons directement sur compétences/armes
5. **Interface Moderne**: Icônes et layout épuré

## Comparaison Avant/Après

| Élément | Avant | Après | Bénéfice |
|---------|-------|-------|----------|
| **Attributs** | Input number | Select dropdown (0-35) + rollable | Prévention erreurs + jets rapides |
| **Santé/Psyché** | Input seul | Input + boutons -/+ | Ajustement rapide en combat |
| **Valeurs Combat** | Liste 4 lignes verticale | Grille 2x2 Base [Bonus] = Total | Layout compact + édition |
| **Niveau Compétence** | Texte statique | Dropdown (0-10) éditable | Modification directe |
| **Compétences** | Nom + niveau | Dropdown + boutons roll attributs | Jets + édition rapide |
| **Armes** | Header + colonnes texte | Stats icônes + boutons icônes | Interface moderne |
| **Capacités** | Nom statique | Nom cliquable + bouton ajout | Édition rapide |

## Tests Recommandés

### Onglet Attributs
1. Vérifier dropdown attributs (0-35)
2. Cliquer sur nom d'attribut pour jet
3. Tester boutons +/- santé/psyché
4. Vérifier sauvegarde modifications

### Onglet Combat
1. Vérifier grille 2x2 valeurs combat
2. Modifier les champs bonus
3. **Tester dropdown niveau compétence** (nouveau)
4. Tester boutons roll compétences
5. Cliquer boutons attaque/dégâts armes
6. Vérifier tooltips
7. Tester ajout compétence/arme/capacité
8. Cliquer noms pour éditer

## Notes Importantes

- **Aucune modification JavaScript nécessaire** (actions/handlers déjà existants)
- **Modification CSS mineure** (52 lignes pour grille combat)
- **Changements principalement template Handlebars**
- **Compatible AppV2**
- **Différence clé avec personnage**: Créatures ont champs bonus combat éditables
- **Nouveau**: Dropdown niveau compétence avec modification directe (handler `edit-item-data`)

## Impact Visuel

```
CRÉATURE (Valeurs Combat) - Grille 2x2:
┌──────────────────────────────┬──────────────────────────────┐
│ Initiative  12  [+2]  = 14   │ Défense     15  [+2]  = 17   │
├──────────────────────────────┼──────────────────────────────┤
│ Vitesse      8  [+0]  =  8   │ Bonus Dég.  +3  [+1]  = +4   │
└──────────────────────────────┴──────────────────────────────┘

CRÉATURE (Compétences):
[🖼️] Mouvements    [Dropdown 0-10: 3]
     [ADR : 15] [PUI : 12]           [✏️] [🗑️]

PERSONNAGE (Compétences):
[🖼️] Mouvements    [Dropdown 0-10: 3]
     [ADR : 15] [PUI : 12]           [✏️] [🗑️]
     Prédilections: Escalade, Course
```

Total: ~140 lignes template + 52 lignes CSS = 192 lignes modifiées