megakoop/UI/README.md

# Main Menu UI - Unity UI Toolkit Guide

## 📋 Přehled

Tento projekt obsahuje moderní hlavní menu vytvořené pomocí **Unity UI Toolkit** (dříve UIElements) s využitím **UXML** pro strukturu a **USS** (Unity Style Sheets) pro styling.

## 📁 Struktura souborů

```
Assets/UI/
├── MainMenu.uxml              # Struktura UI (HTML-like)
├── MainMenuStyles.uss         # Styly (CSS-like)
├── Scripts/
│   └── MainMenuController.cs  # Logika a funkčnost
└── README.md                  # Tento soubor
```

## 🚀 Jak začít

### 1. Nastavení scény

1. Vytvořte novou scénu (nebo použijte existující)
2. Přidejte **GameObject** → **UI Toolkit** → **UI Document**
3. V inspektoru UI Document:
   - Přiřaďte `MainMenu.uxml` do pole **Source Asset**
   - Panel Settings můžete vytvořit: **Assets** → **Create** → **UI Toolkit** → **Panel Settings Asset**

### 2. Připojení controlleru

1. Na stejný GameObject přidejte komponentu `MainMenuController`
2. Přiřaďte UIDocument komponentu do pole **UI Document**
3. Nastavte název herní scény v **Game Scene Name**

### 3. (Volitelné) Přidání zvuků

1. Přidejte **Audio Source** komponentu
2. Přiřaďte zvukové efekty pro tlačítka:
   - Button Click Sound
   - Button Hover Sound

## 🎨 Jak upravit styly (USS)

### Základní vlastnosti CSS/USS

USS používá syntax velmi podobnou CSS. Zde jsou nejčastější vlastnosti:

#### Layout & Spacing
```css
.my-element {
    width: 300px;                    /* Šířka */
    height: 50px;                    /* Výška */
    margin: 10px;                    /* Vnější odsazení */
    padding: 20px;                   /* Vnitřní odsazení */
    
    flex-direction: row;             /* row | column */
    justify-content: center;         /* center | flex-start | flex-end | space-between */
    align-items: center;             /* center | flex-start | flex-end | stretch */
}
```

#### Barvy & Pozadí
```css
.my-element {
    background-color: rgb(76, 175, 80);           /* RGB barva */
    background-color: rgba(76, 175, 80, 0.5);     /* RGB s průhledností */
    background-image: url('project://database/Assets/Images/bg.png');
    
    color: white;                                  /* Barva textu */
    opacity: 0.8;                                  /* Průhlednost (0-1) */
}
```

#### Borders & Shadows
```css
.my-element {
    border-width: 2px;
    border-color: rgb(255, 255, 255);
    border-radius: 8px;              /* Zaoblené rohy */
    
    /* Stíny v Unity - používají se přes shadow properties */
}
```

#### Typography
```css
.my-element {
    font-size: 24px;
    -unity-font-style: bold;         /* normal | bold | italic | bold-and-italic */
    -unity-text-align: middle-center; /* upper-left | upper-center | upper-right ... */
    letter-spacing: 2px;
    color: white;
}
```

#### Transitions & Animations
```css
.my-button {
    transition-duration: 0.3s;
    transition-property: background-color, scale;
}

.my-button:hover {
    background-color: rgb(100, 200, 100);
    scale: 1.1 1.1;                  /* X Y scale */
    translate: 0 -5px;               /* X Y translation */
    rotate: 5deg;                    /* Rotation */
}

.my-button:active {
    scale: 0.95 0.95;
}
```

### CSS Variables (Custom Properties)

V `:root` můžete definovat proměnné:

```css
:root {
    --color-primary: rgb(76, 175, 80);
    --spacing-md: 16px;
}

.button {
    background-color: var(--color-primary);
    padding: var(--spacing-md);
}
```

### Pseudo-třídy

Unity podporuje následující pseudo-třídy:

- `:hover` - Po najetí myší
- `:active` - Při kliknutí
- `:focus` - Při zaměření
- `:checked` - Pro toggle/checkbox (zaškrtnuté)
- `:disabled` - Pro zakázané elementy

### Užitečné Unity-specifické vlastnosti

```css
.element {
    /* Display */
    display: flex;                   /* flex | none */
    visibility: hidden;              /* visible | hidden */
    
    /* Position */
    position: absolute;              /* relative | absolute */
    
    /* Unity Text */
    -unity-text-outline-width: 1px;
    -unity-text-outline-color: black;
    
    /* Background */
    -unity-background-scale-mode: scale-to-fit; /* stretch-to-fill | scale-and-crop | scale-to-fit */
    -unity-slice-left: 10;           /* Pro 9-slice sprites */
}
```

## 💡 Tipy pro kvalitní UI

### 1. Konzistentní Design System

- Používejte **CSS proměnné** pro barvy, spacing, atd.
- Definujte paletu barev (primary, secondary, danger, success)
- Používejte konzistentní spacing (4px, 8px, 16px, 24px, ...)

### 2. Hierarchie a Layout

```
Container (flex-direction: column)
  ├─ Header (title, subtitle)
  ├─ Content (flex-grow: 1)
  │   └─ Items (padding, margin)
  └─ Footer (version, copyright)
```

### 3. Vizuální Feedback

- **Hover efekty**: Změna barvy, scale, shadow
- **Active stavy**: Scale down při kliknutí
- **Transitions**: Plynulé přechody (0.2-0.3s)
- **Disabled stavy**: Opacity 0.5, šedá barva

### 4. Responzivní Design

```css
.container {
    width: 80%;              /* Procenta z rodiče */
    max-width: 800px;        /* Maximální šířka */
    min-width: 400px;        /* Minimální šířka */
}
```

### 5. Accessibility

- Dostatečný kontrast textu (světlý text na tmavém pozadí)
- Viditelné focus stavy
- Dostatečně velké klikací oblasti (min. 44x44px)

## 🎯 Best Practices

### DO ✅

1. **Používejte třídy** místo inline stylů
2. **Organizujte styly** do sekcí s komentáři
3. **Používejte Flexbox** pro layout
4. **Testujte na různých rozlišeních**
5. **Používejte USS proměnné** pro opakující se hodnoty

### DON'T ❌

1. ❌ Nekopírujte stejné styly - použijte třídy
2. ❌ Nepřeužívejte `position: absolute`
3. ❌ Nepoužívejte pevné velikosti tam, kde není nutné
4. ❌ Nezapomeňte na hover a focus stavy
5. ❌ Nepoužívejte příliš mnoho animací najednou

## 🔧 Debugging UI

### 1. UI Debugger

V Unity editoru:
- **Window** → **UI Toolkit** → **Debugger**
- Vyberte váš UI Document
- Prohlížejte strukturu a živé styly

### 2. Inspector

- Klikněte na element v Debuggeru
- V pravém panelu vidíte všechny aplikované styly
- Můžete je dočasně měnit pro testování

### 3. Console Log

V C# můžete debugovat:
```csharp
var button = root.Q<Button>("MyButton");
Debug.Log($"Button found: {button != null}");
Debug.Log($"Button classes: {string.Join(", ", button.GetClasses())}");
```

## 📚 Další zdroje

### Oficiální dokumentace Unity

- [UI Toolkit Manual](https://docs.unity3d.com/Manual/UIElements.html)
- [USS Properties Reference](https://docs.unity3d.com/Manual/UIE-USS-Properties-Reference.html)
- [UXML Element Reference](https://docs.unity3d.com/Manual/UIE-ElementRef.html)

### CSS Základy

Protože USS je založeno na CSS, můžete využít:
- [MDN CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [CSS Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

### Unity Learn

- [UI Toolkit Tutorial](https://learn.unity.com/tutorial/ui-toolkit)

## 🎨 Doporučené Color Palettes

### Gamin Palette (Dark)
```css
--bg-dark: rgb(18, 18, 18);
--bg-medium: rgb(33, 33, 33);
--bg-light: rgb(48, 48, 48);
--accent: rgb(76, 175, 80);      /* Green */
--accent-alt: rgb(33, 150, 243); /* Blue */
--danger: rgb(244, 67, 54);      /* Red */
```

### Minimalist (Light)
```css
--bg-light: rgb(250, 250, 250);
--bg-medium: rgb(240, 240, 240);
--bg-dark: rgb(224, 224, 224);
--accent: rgb(96, 125, 139);     /* Blue Grey */
--text-dark: rgb(33, 33, 33);
```

## 🚀 Rozšíření

### Přidání nového tlačítka

1. **V UXML**:
```xml
<ui:Button text="NEW BUTTON" name="NewButton" class="menu-button" />
```

2. **V C#**:
```csharp
private Button newButton;

private void InitializeMenuButtons()
{
    newButton = root.Q<Button>("NewButton");
}

private void RegisterButtonEvents()
{
    if (newButton != null)
    {
        newButton.clicked += OnNewButtonClicked;
        AddHoverEffects(newButton);
    }
}

private void OnNewButtonClicked()
{
    Debug.Log("New button clicked!");
}
```

### Vlastní komponenta

Můžete vytvořit vlastní reusable komponenty v UXML:

```xml
<!-- CustomCard.uxml -->
<ui:UXML>
    <ui:VisualElement class="card">
        <ui:Label name="CardTitle" class="card-title" />
        <ui:Label name="CardDescription" class="card-description" />
    </ui:VisualElement>
</ui:UXML>
```

A použít je:
```xml
<ui:Template src="CustomCard.uxml" name="CardTemplate" />
<ui:Instance template="CardTemplate" />
```

---

## 📝 Poznámky

- USS nepodporuje všechny CSS vlastnosti (např. `box-shadow`)
- Animace jsou omezené - komplexní animace dělejte v C#
- Performance: USS je velmi rychlé, ale zbytečně neměňte styly každý frame

## 🤝 Podpora

Pokud narazíte na problém:
1. Zkontrolujte Unity Console pro chyby
2. Použijte UI Toolkit Debugger
3. Ověřte, že jsou správně přiřazené všechny reference
4. Zkontrolujte, zda jsou názvy elementů správně

---

**Vytvořeno pro Unity 2022.3+ s UI Toolkit**