# Modifying Elements

This guide covers how to modify element properties after creation.

## Table of Contents

- [Changing Property Values](#changing-property-values)
- [Using Unity Style Types](#using-unity-style-types)
- [Dynamic Updates](#dynamic-updates)
- [Update Patterns](#update-patterns)

---

## Changing Property Values

Simply assign new values to properties - changes automatically sync to clients:

```csharp
// Change text content
myText.Content = "Updated text";

// Change color
myElement.Background.Color = Color.red;

// Change size
myElement.Size.Width = 300f;
myElement.Size.Height = 200f;

// Change position
myElement.Position.Position = Position.Absolute;
myElement.Position.Left = 50f;
myElement.Position.Top = 100f;
```

### Important Notes

> [!IMPORTANT]
> - Changes only synchronise to players who have the canvas spawned.
> - Changes synchronise automatically - no manual update call needed.
> - Only modified properties are sent over the network (dirty tracking).


> [!WARNING]
> If you wish to change an element only for a specific player, please do NOT make fake sync messages, as much as you think it is a good idea, it is not. 
> You can create a canvas for specific player(s), use this feature instead!

---

## Using Unity Style Types

DisplayKit uses Unity's style types for full flexibility:

### StyleLength

```csharp
// Pixel value
element.Size.Width = 300f;

// Percentage
element.Size.Width = Length.Percent(50f); // 50% of parent, values from 0f - 100f

// Explicit Length
element.Size.Height = new Length(100, LengthUnit.Pixel);
```

### StyleFloat

```csharp
// Opacity
element.Display.Opacity = 0.5f; // With 1f being fully opaque

// Border width
element.Border.Width = 2f;
```

### StyleEnum

```csharp
// Alignment
element.Align.AlignItems = Align.Center;

// Display mode
element.Display.Display = DisplayStyle.Flex;
```

### StyleColor

```csharp
// Solid color
element.Background.Color = Color.blue;

// With alpha
element.Background.Color = new Color(1f, 0f, 0f, 0.5f); // Semi-transparent red
```

---

## Dynamic Updates

You can update elements at any time after spawning:

### Update Method Pattern

```csharp
public class TimerUI
{
    private DisplayText timerText;

    public void UpdateTimerText(float timeLeft)
    {
        timerText.Content = $"Time: {timeLeft:F1}s";

        // Change color when low
        if (timeLeft < 10f)
            timerText.Text.Color = Color.red;
        else
            timerText.Text.Color = Color.white;
    }
}
```

### Text Content Updates

```csharp
public void SetPlayerName(string name)
{
    nameText.Content = name;
}

public void SetScore(int score)
{
    scoreText.Content = $"Score: {score}";
}

public void SetMessage(string title, string message)
{
    titleText.Content = title;
    messageText.Content = message;
}
```

---

## Update Patterns

### Toggle Visibility

```csharp
panelElement.Show();

panelElement.Hide();
```

### Color Animation

```csharp
// MEC Coroutine
public IEnumerable<float> FlashError()
{
    Element.Background.Color = Element.Background.Color.value + new Color(0.1f, 0, 0);
    yield return Timing.WaitForOneFrame;
}
```

### Size

```csharp
public void ExpandElement()
{
    element.Size.Width = 300f;
    element.Size.Height = 200f;
}

public void CollapseElement()
{
    element.Size.Width = 100f;
    element.Size.Height = 50f;
}
```

### Position Updates

```csharp
public void MoveToTop()
{
    element.Position.Position = Position.Absolute;
    element.Position.Top = 10f;
    element.Position.Left = Length.Percent(50f);
}

public void CenterOnScreen()
{
    element.Position.Position = Position.Absolute;
    element.Position.Top = Length.Percent(50f);
    element.Position.Left = Length.Percent(50f);
    element.Transform.Translate = new Translate(new Length(-150), new Length(-100));
}
```

---

## Performance Tips

> [!TIP]
> **Only update when values change** - Don't set the same value repeatedly. We do not check for such cases, resulting in data being sent over the network.<br>
> **Batch-related updates** - Multiple property changes are automatically batched per frame.<br>
> **Avoid Update() loops** - Only call update methods when values actually change.<br>
> **Use visibility instead of despawning** - For temporary hiding, use `Display.Display` or canvas visibility methods.<br>

### Good Pattern

```csharp
private int lastDisplayedScore = -1;

public void UpdateScore(int newScore)
{
    // Only update if value changed, there are no such checks internally
    if (newScore != lastDisplayedScore)
    {
        scoreText.Content = newScore.ToString();
        lastDisplayedScore = newScore;
    }
}
```

### Avoid This

```csharp
// Don't do this - updates every frame even when value hasn't changed
public void OnUpdate(float deltaTime)
{
    scoreText.Content = currentScore.ToString();
}
```

---

## Next Steps

- [Deleting Elements](DisplayKit-DeletingElements) - Learn how to remove elements
- [Sending to Players](DisplayKit-SendingToPlayers) - Understand canvas scope
- [Examples](DisplayKit-Examples) - See practical update examples