# Visual Scripting

**Express Summary:** Implement interactive logic with visual scripting: click events, store management, and dynamic creation of cards and tasks.

---

## Introduction to Visual Scripting

We now have a nice interface, but it's not interactive. It's time to add logic to be able to create cards and tasks using **visual scripting**.

## 1. Create a click event

### Add event to "Add a task" button
1. Go to the **Card** component
2. Select the add task button div
3. In the right panel, click **Events** then "+"
4. Choose the **Click** event
5. Rename the div to "add card" for clarity

### Access the logic
1. Click on the event or go to the **Logic** tab
2. The event appears as "onclick (add card)"

## 2. Understand the visual scripting system

### Block types and connections
- **Execution blocks**: white wire that defines execution order
- **Data blocks**: colored wires by type
    - **Yellow**: string
    - **Green**: number
    - **Red**: boolean
    - **Blue**: object
    - **Square**: array of corresponding type

### Test example
1. Create a **Log** block
2. Connect it to the onclick event with the white wire
3. Add text: "hello"
4. Test with right-click � **Execute** to see animation
5. Preview: clicking "add card" displays "hello" in console

## 3. Retrieve and manipulate properties

### Access component properties
1. Right-click � type **"get"**
2. Select **"get tasks"** or **"get title"**
3. These blocks retrieve properties defined in the component

### Add a task with Push
1. Use the **Push** block to add an element to an array
2. Connect **get tasks** to the array input of Push block
3. In "value", write "new task"
4. Connect onclick to the Push block
5. Test: each click adds a new task

## 4. Create the card addition system

### Modify CreateButton component
The button should have two states:
- **Normal state**: "Add a card" button
- **Edit state**: text input + validation/cancel buttons

### Create state variable
1. Add an **isEditing** variable (boolean) in CreateButton
2. Wrap the button in a **Template**
3. Condition: display if `isEditing = false`

### Create edit interface
1. Add a second **Template** with condition `isEditing = true`
2. Insert a **Text Input** from UI Library
3. Add two **icons**: validation (check) and cancel (cross)
4. Style with **display flex** and **align-items center**

## 5. State switching logic

### Switch to edit mode
1. Add a **click** event on the "Add a card" button
2. In Logic, use **Set isEditing** to `true`

### Handle text input
1. Create a **title** variable (string) in CreateButton
2. On Text Input, set **v-model** = `title`
3. Display icons only if `title ` empty` (Template with condition)

## 6. Validation and cancellation

### Validation event (check)
1. Add a **click** on the validation icon
2. Retrieve value with **get title**
3. Test with a **Log** to verify retrieval

### Cancel event (cross)
1. Add a **click** on the cancel icon
2. Use **Set title** with empty string
3. Field empties automatically thanks to v-model

## 7. Create a card in the store

### Understand data structure
A card contains:
- **title**: string
- **tasks**: array of strings

### Retrieve store data
1. Use **get store** to access global data
2. Use **spread** to decompose the object and retrieve the card list
3. Spread allows extracting object properties

### Add the new card
1. Use **Push** on the store's card list
2. Create a **Create Object** of type **CardType**
3. Connect **get title** to the object's title field
4. Leave tasks as empty array
5. Connect everything to the validation event

### Reset interface
After card creation:
1. **Set title** to empty
2. **Set isEditing** to `false`

## Advanced concepts

### The spread operator
- Allows decomposing an object to access its properties
- Example: `store.cards` becomes accessible via store spread
- Can be chained to access nested properties

### Useful shortcuts
- **Ctrl + Space**: see the value of each element
- **Ctrl + Alt**: see the expected type for each connection
- **Right-click + Execute**: test execution with animation

## Final result

The application now allows:
- Adding tasks to existing cards
- Creating new cards with custom titles
- All data is saved in the store

---

*Coming next: Computed variables for a smooth and pleasant user experience.*