# Data management

**Quick summary:** Discover the visual scripting system to create interactive logic without code.

---

## Introduction to Visual Scripting

This tutorial introduces Luna Park's Visual Scripting system - a powerful way to create interactive logic for your applications without writing traditional code.

## 1. Basic interface

### Access the Visual Scripting editor
1. Create a **Script** file in your project
2. The Visual Scripting editor opens automatically
3. **Note**: Visual Scripting is also available within components for element-specific logic

### Navigation
- **Right-click + drag**: move the view
- **Mouse wheel**: zoom in/out
- **Right-click**: open search menu

## 2. Node creation

### Creating your first node
1. **Right-click** in the editor → type "plus" → press **Enter**
2. A mathematical addition node appears
3. Click on the input fields and enter values: 10 and 15
4. Press **Ctrl + Space** to see calculated values (result: 25)

### Working with nodes
- **Select a node**: Single click
- **Select multiple nodes**: Click and drag to create a selection box
- **Move nodes**: Click and drag them around
- **Delete nodes**: Select them and press the Delete key

### Debug shortcuts
- **Ctrl + Space**: show calculated values
- **Ctrl + Alt**: show data types

## 3. Execution node

### Manual Play node
A special testing node that lets you manually trigger and debug your logic execution.

### Understanding execution flow
The **white wire** shows the order in which your nodes will execute - like a flowchart for your logic.

### Practical example with Log node
1. Create a **Log** node (used for debugging output)
2. Connect it to Manual Play using the white execution wire
3. Set the Log text to display "hello" then "world"
4. Click the Play button - your text appears in the Console panel

## 4. Node types and colors

### Operation nodes (light blue)
These nodes perform actions and require a white execution wire to run.

### Data nodes
These nodes calculate values automatically when another node needs their result - no execution wire needed.

### Understanding node colors (data types)
- **Red**: Booleans (true/false values)
- **Green**: Numbers (integers, decimals)
- **Yellow**: Strings (text)
- **Blue**: Objects (complex data with multiple properties)
- **White**: Unknown or mixed types
- **Square-shaped connectors**: Arrays (lists) of the corresponding type

### Connection anchors
The **small circles** are the connection points between nodes.

## 5. Visual organization

### Organizing your node diagram
1. **Double-click** on any connection wire
2. This creates moveable **pins** (anchor points)
3. Drag these pins to organize wires and make your logic easier to read

### Object example
Object with "ID" property of number type - nested structure possible.

## 6. Control structures

### Conditional branches
Allow executing different nodes according to a boolean condition (red).

### Loops
Repeat node execution according to defined criteria.

## 7. Interactive challenge

### Try the interactive tutorial
1. From Luna Park home page → **Guide** → **Visual Scripting**
2. Complete levels progressively to unlock new features
3. Each level introduces new Visual Scripting concepts hands-on

### Tutorial example: creating arrays
**Goal**: Build a burger ingredient list

1. **Click and drag** from a node's output anchor
2. Select **Create Array** from the menu
3. Increase the array size to 6 elements
4. Fill in: bun, cheese, patty, tomato, lettuce, bun
5. **Advanced**: Replace some ingredients with variables for dynamic recipes

### Progress
- **Sequential unlocking** of levels
- **Validation** by solution submission
- **Solid foundations** at the end of the course

## 8. Advanced concepts

### Why Visual Scripting matters
- Each node represents a JavaScript function under the hood
- Skills you learn transfer to traditional programming
- Visual approach makes complex logic easier to understand and debug

### Practical applications
- **Dynamic properties** retrieved from components
- **Actions** on elements
- **Interactivity** without traditional programming

## Visual Scripting advantages

### Accessibility
- **No textual code** required
- **Intuitive graphic interface**
- **Immediate visual feedback**

### Learning
- **Gamified progression** with challenge
- **Fundamental algorithmic concepts**
- **Integrated documentation** available

### Integration
- **Available everywhere** in Luna Park
- **Connection** with component properties
- **Easy debugging** with keyboard shortcuts