# Visual Scripting

**Résumé express :** Implémenter la logique interactive avec visual scripting : événements click, gestion du store et création dynamique de cartes et tâches.

---

## Introduction au Visual Scripting

Nous avons maintenant une belle interface, mais elle n'est pas interactive. Il est temps d'ajouter la logique pour pouvoir créer des cartes et des tâches grâce au **visual scripting**.

## 1. Créer un événement click

### Ajouter l'événement sur le bouton "Ajouter une tâche"
1. Aller dans le composant **Card**
2. Sélectionner le div du bouton d'ajout de tâche
3. Dans le panel de droite, cliquer sur **Events** puis le "+"
4. Choisir l'événement **Click**
5. Renommer le div en "add card" pour plus de clarté

### Accéder à la logique
1. Cliquer sur l'événement ou aller dans l'onglet **Logic**
2. L'événement apparaît comme "onclick (add card)"

## 2. Comprendre le système de visual scripting

### Types de blocs et connexions
- **Blocs d'exécution** : fil blanc qui définit l'ordre d'exécution
- **Blocs de données** : fils colorés selon le type
    - **Jaune** : chaîne de caractères (string)
    - **Vert** : nombre (number)
    - **Rouge** : booléen (boolean)
    - **Bleu** : objet (object)
    - **Carré** : tableau du type correspondant

### Exemple de test
1. Créer un bloc **Log**
2. Le connecter à l'événement onclick avec le fil blanc
3. Ajouter du texte : "hello"
4. Tester avec clic droit → **Execute** pour voir l'animation
5. Prévisualiser : cliquer sur "add card" affiche "hello" dans la console

## 3. Récupérer et manipuler les propriétés

### Accéder aux propriétés du composant
1. Clic droit → taper **"get"**
2. Sélectionner **"get tasks"** ou **"get title"**
3. Ces blocs récupèrent les propriétés définies dans le composant

### Ajouter une tâche avec Push
1. Utiliser le bloc **Push** pour ajouter un élément à un tableau
2. Connecter **get tasks** à l'entrée tableau du bloc Push
3. Dans "value", écrire "nouvelle tâche"
4. Connecter l'onclick au bloc Push
5. Tester : chaque clic ajoute une nouvelle tâche

## 4. Créer le système d'ajout de cartes

### Modifier le composant CreateButton
Le bouton doit avoir deux états :
- **État normal** : bouton "Ajouter une carte"
- **État édition** : input text + boutons validation/annulation

### Créer la variable d'état
1. Ajouter une variable **isEditing** (boolean) dans CreateButton
2. Wraper le bouton dans un **Template**
3. Condition : afficher si `isEditing = false`

### Créer l'interface d'édition
1. Ajouter un second **Template** avec condition `isEditing = true`
2. Insérer un **Text Input** depuis UI Library
3. Ajouter deux **icons** : validation (check) et annulation (cross)
4. Styliser avec **display flex** et **align-items center**

## 5. Logique de basculement d'état

### Passer en mode édition
1. Ajouter un événement **click** sur le bouton "Ajouter une carte"
2. Dans Logic, utiliser **Set isEditing** à `true`

### Gérer la saisie de texte
1. Créer une variable **title** (string) dans CreateButton
2. Sur le Text Input, définir **v-model** = `title`
3. Afficher les icônes seulement si `title ≠ empty` (Template avec condition)

## 6. Validation et annulation

### Événement de validation (check)
1. Ajouter un **click** sur l'icône de validation
2. Récupérer la valeur avec **get title**
3. Tester avec un **Log** pour vérifier la récupération

### Événement d'annulation (cross)
1. Ajouter un **click** sur l'icône d'annulation
2. Utiliser **Set title** avec une chaîne vide
3. Le champ se vide automatiquement grâce au v-model

## 7. Créer une carte dans le store

### Comprendre la structure de données
Une carte contient :
- **title** : string
- **tasks** : tableau de strings

### Récupérer les données du store
1. Utiliser **get store** pour accéder aux données globales
2. Utiliser **spread** pour décomposer l'objet et récupérer la liste des cartes
3. Le spread permet d'extraire les propriétés d'un objet

### Ajouter la nouvelle carte
1. Utiliser **Push** sur la liste des cartes du store
2. Créer un **Create Object** de type **CardType**
3. Connecter **get title** au champ title de l'objet
4. Laisser tasks comme tableau vide
5. Connecter le tout à l'événement de validation

### Réinitialiser l'interface
Après création de la carte :
1. **Set title** à vide
2. **Set isEditing** à `false`

## Concepts avancés

### Le spread operator
- Permet de décomposer un objet pour accéder à ses propriétés
- Exemple : `store.cards` devient accessible via spread du store
- Peut s'enchaîner pour accéder aux propriétés imbriquées

### Raccourcis utiles
- **Ctrl + Space** : voir la valeur de chaque élément
- **Ctrl + Alt** : voir le type attendu par chaque connexion
- **Clic droit + Execute** : tester l'exécution avec animation

## Résultat final

L'application permet maintenant de :
- Ajouter des tâches dans les cartes existantes
- Créer de nouvelles cartes avec un titre personnalisé
- Toutes les données sont sauvegardées dans le store

---

*Prochainement : Les variables computed pour une expérience utilisateur fluide et agréable.*