inial impl

2026-08-28 13:59:36 +02:00
parent efec4e62c5
commit 6abf0f91a0
180 changed files with 64651 additions and 0 deletions
@@ -0,0 +1,34 @@
+@namespace Faraon.Client.Components
+
+<div class="game-card marias-card @(IsBack ? "card-back" : "") @(IsPlayable ? "playable" : (IsInteractive && !IsPlayable ? "unplayable" : "")) @CustomClass"
+     style="@CustomStyle"
+     @onclick="HandleClick">
+
+    @if (IsBack || Card == null)
+    {
+        <img src="assets/cards/@(Deck)/Card_Back.webp" class="marias-card-img" alt="Rub karty" draggable="false" />
+    }
+    else
+    {
+        <img src="assets/cards/@(Deck)/@(Card.Suit)_@(Card.Rank).webp" class="marias-card-img" alt="@Card.Name" draggable="false" />
+    }
+</div>
+
+@code {
+    [Parameter] public Card? Card { get; set; }
+    [Parameter] public string Deck { get; set; } = "original";
+    [Parameter] public bool IsBack { get; set; } = false;
+    [Parameter] public bool IsPlayable { get; set; } = false;
+    [Parameter] public bool IsInteractive { get; set; } = false;
+    [Parameter] public string CustomClass { get; set; } = "";
+    [Parameter] public string CustomStyle { get; set; } = "";
+    [Parameter] public EventCallback<Card> OnCardClicked { get; set; }
+
+    private async Task HandleClick()
+    {
+        if (IsInteractive && Card != null)
+        {
+            await OnCardClicked.InvokeAsync(Card);
+        }
+    }
+}
@@ -0,0 +1,47 @@
+@namespace Faraon.Client.Components
+
+<div class="game-over-overlay">
+    <div class="game-over-card">
+        <div class="game-over-title">Výsledky Hry 👑</div>
+
+        <div class="podium-list">
+            @foreach (var player in Players.OrderBy(p => p.FinishedPosition ?? 99))
+            {
+                <div class="podium-row @(player.FinishedPosition == 1 ? "winner" : "")">
+                    <div class="podium-pos">
+                        @if (player.FinishedPosition == 1) { <span>🥇</span> }
+                        else if (player.FinishedPosition == 2) { <span>🥈</span> }
+                        else if (player.FinishedPosition == 3) { <span>🥉</span> }
+                        else { <span>#@(player.FinishedPosition ?? 4)</span> }
+                    </div>
+                    <div class="podium-player">
+                        <span>@player.Avatar</span>
+                        <span>@player.Name</span>
+                        @if (player.Type == PlayerType.AI)
+                        {
+                            <span style="font-size: 0.75rem; opacity: 0.7;">(AI)</span>
+                        }
+                    </div>
+                    <div>
+                        @(player.FinishedPosition == 1 ? "Víťaz! 🎉" : $"{player.FinishedPosition}. miesto")
+                    </div>
+                </div>
+            }
+        </div>
+
+        <div style="display: flex; gap: 12px; justify-content: center;">
+            <button class="btn-primary-glow" @onclick="OnPlayAgain">
+                Hrať znova 🔄
+            </button>
+            <button class="btn-pill" style="padding: 12px 24px;" @onclick="OnBackToLobby">
+                Do Lobby 🏠
+            </button>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public List<Player> Players { get; set; } = new();
+    [Parameter] public EventCallback OnPlayAgain { get; set; }
+    [Parameter] public EventCallback OnBackToLobby { get; set; }
+}
@@ -0,0 +1,170 @@
+@namespace Faraon.Client.Components
+
+<div class="lobby-screen">
+    <div class="lobby-container">
+        <div class="lobby-header">
+            <h1 class="lobby-title">FARAÓN</h1>
+            <div class="lobby-subtitle">Tradičná mariášová kartová hra s moderným nábojom</div>
+        </div>
+
+        <!-- Výber počtu hráčov -->
+        <div style="text-align: center; margin-bottom: 8px; font-weight: 700; font-size: 0.95rem; color: var(--gold);">
+            POČET HRÁČOV:
+        </div>
+        <div class="player-count-picker">
+            @for (int count = 2; count <= 4; count++)
+            {
+                var c = count;
+                <button class="btn-pill @(SelectedPlayerCount == c ? "active" : "")" @onclick="() => SetPlayerCount(c)">
+                    @c Hráči
+                </button>
+            }
+        </div>
+
+        <!-- Karty konfigurácie jednotlivých hráčov -->
+        <div class="players-config-grid">
+            @for (int i = 0; i < SelectedPlayerCount; i++)
+            {
+                var idx = i;
+                var p = PlayerConfigs[idx];
+
+                <div class="player-setup-card">
+                    <!-- Avatar selektor -->
+                    <div style="cursor: pointer; font-size: 2.4rem;" title="Kliknite pre zmenu avatara" @onclick="() => CycleAvatar(idx)">
+                        @p.Avatar
+                    </div>
+
+                    <!-- Meno hráča -->
+                    <input class="player-setup-input" type="text" @bind="p.Name" placeholder="Meno hráča" />
+
+                    <!-- Typ hráča: Človek vs AI -->
+                    <select class="player-setup-select" @bind="p.Type">
+                        <option value="@PlayerType.Human">👤 Človek (Hráč)</option>
+                        <option value="@PlayerType.AI">🤖 AI Počítač</option>
+                    </select>
+
+                    <!-- Obtiažnosť AI (ak je AI) -->
+                    @if (p.Type == PlayerType.AI)
+                    {
+                        <select class="player-setup-select" @bind="p.Difficulty">
+                            <option value="@AIDifficulty.Easy">🌱 Začiatočník (Ľahký)</option>
+                            <option value="@AIDifficulty.Medium">⚔️ Taktik (Stredný)</option>
+                            <option value="@AIDifficulty.Hard">🔥 Veľmajster (Ťažký)</option>
+                        </select>
+                    }
+                </div>
+            }
+        </div>
+
+        <!-- Nastavenia pravidiel -->
+        <div style="font-weight: 700; margin-bottom: 8px; color: var(--gold); font-size: 0.95rem;">
+            PRAVIDLÁ A NASTAVENIA:
+        </div>
+        <div class="rules-toggle-grid">
+            <label class="rule-check-item">
+                <input type="checkbox" @bind="Rules.StackSevens" />
+                <span>Kumulácia sediem (+2, +4, +6...)</span>
+            </label>
+            <label class="rule-check-item">
+                <input type="checkbox" @bind="Rules.CounterAceWithAce" />
+                <span>Prebíjanie esa esom</span>
+            </label>
+            <label class="rule-check-item">
+                <input type="checkbox" @bind="Rules.RedSevenRevives" />
+                <span>Červená sedma oživuje víťaza</span>
+            </label>
+            <label class="rule-check-item">
+                <input type="checkbox" @bind="Rules.FourOfAKindBurns" />
+                <span>Spálenie (4 rovnaké karty)</span>
+            </label>
+            <label class="rule-check-item">
+                <input type="checkbox" @bind="Rules.PassAndPlayPrivacyScreen" />
+                <span>Pass & Play clona pre ľudí</span>
+            </label>
+            <div style="display: flex; align-items: center; gap: 8px; font-size: 0.9rem;">
+                <span>Kariet do ruky:</span>
+                <select class="player-setup-select" style="width: auto; padding: 2px 8px;" @bind="Rules.InitialCardCount">
+                    <option value="4">4 karty</option>
+                    <option value="5">5 kariet</option>
+                </select>
+            </div>
+        </div>
+
+        <!-- Výber balíčka kariet (Deck Theme) -->
+        <div style="margin-bottom: 24px;">
+            <h3 style="font-size: 1.05rem; color: var(--gold); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;">
+                🎨 Vizuálny štýl balíčka kariet
+            </h3>
+            <div class="deck-selector-grid">
+                <div class="deck-option-card @(Rules.SelectedDeck == "original" ? "selected-deck" : "")"
+                     @onclick='() => Rules.SelectedDeck = "original"'>
+                    <div class="deck-preview-img-box">
+                        <img src="assets/cards/original/Hearts_Seven.webp" class="deck-preview-thumb" alt="Original Mariáš" />
+                        <img src="assets/cards/original/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
+                    </div>
+                    <div class="deck-info">
+                        <div class="deck-name">Tradičný Mariáš (Original)</div>
+                        <div class="deck-desc">Autentický dvojhlavý Tell vzor (Piatnik)</div>
+                    </div>
+                </div>
+
+                <div class="deck-option-card @(Rules.SelectedDeck == "spongebob" ? "selected-deck" : "")"
+                     @onclick='() => Rules.SelectedDeck = "spongebob"'>
+                    <div class="deck-preview-img-box">
+                        <img src="assets/cards/spongebob/Hearts_OverKnave.webp" class="deck-preview-thumb" alt="SpongeBob Cartoon" />
+                        <img src="assets/cards/spongebob/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
+                    </div>
+                    <div class="deck-info">
+                        <div class="deck-name">SpongeBob Cartoon 🧽</div>
+                        <div class="deck-desc">Bikini Bottom edícia (Krabby Patty & postavičky)</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Štart tlačidlo -->
+        <div style="text-align: center;">
+            <button class="btn-primary-glow" style="padding: 14px 45px; font-size: 1.25rem;" @onclick="StartGame">
+                SPUSTIŤ HRU ⚔️
+            </button>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public EventCallback<(List<Player>, RuleOptions)> OnStartGame { get; set; }
+
+    private int SelectedPlayerCount = 4;
+    private RuleOptions Rules = new();
+
+    private readonly string[] Avatars = ["👑", "🧙‍♂️", "🦊", "🦁", "🐯", "🤖", "🐉", "🥷", "👸", "🤠", "🦅", "🐺"];
+
+    private List<Player> PlayerConfigs = new()
+    {
+        new Player("Ty (Hráč 1)", PlayerType.Human, "👑"),
+        new Player("AI Jano", PlayerType.AI, "🦊", AIDifficulty.Medium),
+        new Player("AI Zuzka", PlayerType.AI, "👸", AIDifficulty.Hard),
+        new Player("AI Mišo", PlayerType.AI, "🤖", AIDifficulty.Easy)
+    };
+
+    private void SetPlayerCount(int count)
+    {
+        SelectedPlayerCount = count;
+    }
+
+    private void CycleAvatar(int index)
+    {
+        var currentAvatar = PlayerConfigs[index].Avatar;
+        int nextIdx = (Array.IndexOf(Avatars, currentAvatar) + 1) % Avatars.Length;
+        PlayerConfigs[index].Avatar = Avatars[nextIdx];
+    }
+
+    private async Task StartGame()
+    {
+        var activePlayers = PlayerConfigs.Take(SelectedPlayerCount).Select(p =>
+            new Player(p.Name, p.Type, p.Avatar, p.Difficulty)
+        ).ToList();
+
+        await OnStartGame.InvokeAsync((activePlayers, Rules));
+    }
+}
@@ -0,0 +1,96 @@
+@namespace Faraon.Client.Components
+
+<div class="marias-pip-wrapper @CustomClass" style="@CustomStyle">
+    @if (Suit == Suit.Hearts)
+    {
+        <!-- ČERVEŇ / SRDCE -->
+        <svg viewBox="0 0 32 32" class="pip-svg">
+            <defs>
+                <radialGradient id="heartGrad" cx="35%" cy="35%" r="65%">
+                    <stop offset="0%" stop-color="#ff4d4d"/>
+                    <stop offset="70%" stop-color="#c1121f"/>
+                    <stop offset="100%" stop-color="#780000"/>
+                </radialGradient>
+            </defs>
+            <path d="M16 28 C16 28 3 19 3 10 C3 5 7.5 2 12 2 C14.5 2 15.5 3.5 16 4.5 C16.5 3.5 17.5 2 20 2 C24.5 2 29 5 29 10 C29 19 16 28 16 28 Z"
+                  fill="url(#heartGrad)" stroke="#5e0000" stroke-width="1.2"/>
+            <path d="M16 23 C16 23 7 16 7 10.5 C7 7 9 4.5 12 4.5 C14 4.5 15 5.5 16 7 C17 5.5 18 4.5 20 4.5 C23 4.5 25 7 25 10.5 C25 16 16 23 16 23 Z"
+                  fill="none" stroke="#ffd166" stroke-width="0.8" opacity="0.65"/>
+        </svg>
+    }
+    else if (Suit == Suit.Leaves)
+    {
+        <!-- ZELEŇ / LIST -->
+        <svg viewBox="0 0 32 32" class="pip-svg">
+            <defs>
+                <linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="#38b000"/>
+                    <stop offset="60%" stop-color="#1b4332"/>
+                    <stop offset="100%" stop-color="#081c15"/>
+                </linearGradient>
+            </defs>
+            <path d="M16 2 C10 8 5 15 6 24 C7 27.5 11 29.5 16 30 C21 29.5 25 27.5 26 24 C27 15 22 8 16 2 Z"
+                  fill="url(#leafGrad)" stroke="#081c15" stroke-width="1.2"/>
+            <path d="M16 4 L16 28" stroke="#ffdd00" stroke-width="1.4" stroke-linecap="round"/>
+            <path d="M16 10 Q10 13 8 17 M16 16 Q10 19 8 23 M16 10 Q22 13 24 17 M16 16 Q22 19 24 23"
+                  stroke="#ffdd00" stroke-width="1.1" fill="none" stroke-linecap="round"/>
+        </svg>
+    }
+    else if (Suit == Suit.Acorns)
+    {
+        <!-- ŽALUĎ -->
+        <svg viewBox="0 0 32 32" class="pip-svg">
+            <defs>
+                <linearGradient id="acornNutGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="#e9c46a"/>
+                    <stop offset="60%" stop-color="#bc6c25"/>
+                    <stop offset="100%" stop-color="#703604"/>
+                </linearGradient>
+                <linearGradient id="acornCapGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stop-color="#8c5835"/>
+                    <stop offset="100%" stop-color="#3d2110"/>
+                </linearGradient>
+            </defs>
+            <!-- Stopka -->
+            <path d="M16 2 Q15 5 16 7" stroke="#3d2110" stroke-width="2" stroke-linecap="round" fill="none"/>
+            <!-- Čiapočka -->
+            <path d="M8 12 C7 8 12 7 16 7 C20 7 25 8 24 12 Q16 14 8 12 Z"
+                  fill="url(#acornCapGrad)" stroke="#221107" stroke-width="1.2"/>
+            <path d="M11 9 L21 11 M13 8 L19 12" stroke="#d4a373" stroke-width="0.8" opacity="0.6"/>
+            <!-- Oriešok / Telo žaluďa -->
+            <path d="M9 13 C9 22 13 29 16 30.5 C19 29 23 22 23 13 Q16 14.5 9 13 Z"
+                  fill="url(#acornNutGrad)" stroke="#432204" stroke-width="1.2"/>
+            <path d="M12 15 C12 21 14 26 16 28.5" stroke="#fff3b0" stroke-width="1.1" fill="none" opacity="0.8" stroke-linecap="round"/>
+        </svg>
+    }
+    else
+    {
+        <!-- GUĽA / ROLNIČKA -->
+        <svg viewBox="0 0 32 32" class="pip-svg">
+            <defs>
+                <radialGradient id="bellGrad" cx="35%" cy="30%" r="70%">
+                    <stop offset="0%" stop-color="#fff07c"/>
+                    <stop offset="40%" stop-color="#f4a261"/>
+                    <stop offset="85%" stop-color="#e76f51"/>
+                    <stop offset="100%" stop-color="#8c2f16"/>
+                </radialGradient>
+            </defs>
+            <!-- Očko na zavesenie -->
+            <ellipse cx="16" cy="4.5" rx="3.5" ry="2.5" fill="none" stroke="#b07d10" stroke-width="1.5"/>
+            <!-- Telo gule -->
+            <circle cx="16" cy="18" r="12" fill="url(#bellGrad)" stroke="#66200e" stroke-width="1.2"/>
+            <!-- Stredový červeno-zlatý pás -->
+            <path d="M4.5 17 Q16 13 27.5 17" stroke="#c1121f" stroke-width="3" fill="none"/>
+            <path d="M4.5 17 Q16 13 27.5 17" stroke="#ffe066" stroke-width="1" fill="none"/>
+            <!-- Štrbina a stredová dierka -->
+            <circle cx="16" cy="23.5" r="2" fill="#2b0d06"/>
+            <path d="M10.5 23.5 L21.5 23.5" stroke="#2b0d06" stroke-width="1.6" stroke-linecap="round"/>
+        </svg>
+    }
+</div>
+
+@code {
+    [Parameter] public Suit Suit { get; set; } = Suit.Hearts;
+    [Parameter] public string CustomClass { get; set; } = "";
+    [Parameter] public string CustomStyle { get; set; } = "";
+}
@@ -0,0 +1,22 @@
+@namespace Faraon.Client.Components
+
+<div class="pass-screen-overlay">
+    <div class="pass-screen-card">
+        <div class="pass-avatar">@Player.Avatar</div>
+        <div class="pass-title">Na rade je @Player.Name!</div>
+        <div class="pass-subtitle">Odovzdajte zariadenie hráčovi <strong>@Player.Name</strong> a uistite sa, že nikto iný nevidí obrazovku.</div>
+        <button class="btn-primary-glow" @onclick="HandleContinue">
+            Odkryť karty a hrať 🃏
+        </button>
+    </div>
+</div>
+
+@code {
+    [Parameter, EditorRequired] public Player Player { get; set; } = default!;
+    [Parameter] public EventCallback OnContinue { get; set; }
+
+    private async Task HandleContinue()
+    {
+        await OnContinue.InvokeAsync();
+    }
+}
@@ -0,0 +1,208 @@
+@namespace Faraon.Client.Components
+
+<div class="player-hand-container">
+    @if (SelectedCards.Count > 0 && IsMyTurn)
+    {
+        var firstSelected = SelectedCards[0];
+        var lastSelected = SelectedCards[SelectedCards.Count - 1];
+        var matchingHandCards = Player.Hand.Where(c => c.Rank == firstSelected.Rank).ToList();
+        var canPlayCombo = CanPlayCards(SelectedCards);
+
+        <div class="hand-combo-action-bar animate-pop">
+            <!-- Poradie vykladania kariet -->
+            <div class="combo-sequence-container">
+                <span class="combo-seq-label">Poradie:</span>
+                <div class="combo-sequence-items">
+                    @for (int s = 0; s < SelectedCards.Count; s++)
+                    {
+                        var sc = SelectedCards[s];
+                        var isFinal = (s == SelectedCards.Count - 1 && SelectedCards.Count > 1);
+                        <span class="combo-seq-item @(isFinal ? "combo-seq-final" : "")" style="color: @sc.SuitColor;">
+                            <span class="seq-num">@(s + 1).</span>
+                            <span class="seq-symbol">@sc.SuitSymbol</span>
+                            <span class="seq-suit">@sc.SuitName</span>
+                            @if (isFinal)
+                            {
+                                <span class="seq-crown" title="Karta ostane na vrchu odhadzovacieho balíčka">👑</span>
+                            }
+                        </span>
+                        @if (s < SelectedCards.Count - 1)
+                        {
+                            <span class="combo-seq-arrow">➔</span>
+                        }
+                    }
+                </div>
+            </div>
+
+            <!-- Tlačidlo na zahranie vybratých kariet -->
+            @if (canPlayCombo)
+            {
+                <button class="btn btn-gold btn-combo-play" @onclick="PlaySelected">
+                    <span>⚡ Zahrať (@SelectedCards.Count @(SelectedCards.Count == 1 ? "kartu" : (SelectedCards.Count < 5 ? "karty" : "kariet")))</span>
+                </button>
+            }
+            else
+            {
+                <div class="combo-invalid-badge">
+                    <span>Nemožno zahrať na stôl</span>
+                </div>
+            }
+
+            <!-- Možnosť otočiť poradie kariet -->
+            @if (SelectedCards.Count > 1)
+            {
+                <button class="btn btn-dark btn-combo-reverse" @onclick="ReverseSelectionOrder" title="Otočiť poradie kariet (zmení vrchnú kartu na stole)">
+                    <span>⇄ Otočiť</span>
+                </button>
+            }
+
+            <!-- Vybrať všetky karty danej hodnoty -->
+            @if (matchingHandCards.Count > SelectedCards.Count)
+            {
+                <button class="btn btn-dark btn-combo-all" @onclick="SelectAllOfRank" title="Pridať všetky zostávajúce karty tejto hodnoty">
+                    <span>+ Všetky (@matchingHandCards.Count)</span>
+                </button>
+            }
+
+            <!-- Zrušenie výberu -->
+            <button class="btn btn-dark btn-combo-clear" @onclick="ClearSelection" title="Zrušiť výber">
+                <span>✕</span>
+            </button>
+        </div>
+    }
+
+    <div class="player-hand-fanning">
+        @for (int i = 0; i < Player.Hand.Count; i++)
+        {
+            var card = Player.Hand[i];
+            var selectedIdx = SelectedCards.IndexOf(card);
+            var isSelected = selectedIdx >= 0;
+            var isPlayable = IsMyTurn && (CanPlayCard(card) || (SelectedCards.Count > 0 && SelectedCards[0].Rank == card.Rank && CanPlayCards(new List<Card> { card })));
+
+            // Výpočet vejárovitého natočenia kariet v ruke
+            int total = Player.Hand.Count;
+            double mid = (total - 1) / 2.0;
+            double offset = i - mid;
+            double angle = total > 1 ? offset * (Math.Min(35.0 / total, 5.5)) : 0;
+            double yOffset = Math.Abs(offset) * 4.0;
+            double xOffset = offset * (total > 8 ? 26 : 38);
+
+            string fanSlotStyle = $"transform: translateX({xOffset}px) translateY({yOffset}px) rotate({angle}deg); z-index: {(isSelected ? 120 + i : i + 1)};";
+            string selectedClass = isSelected ? "card-selected-combo" : "";
+
+            <div class="hand-card-slot" style="@fanSlotStyle">
+                <CardView Card="card"
+                          Deck="@Deck"
+                          IsInteractive="@IsMyTurn"
+                          IsPlayable="@isPlayable"
+                          CustomClass="@selectedClass"
+                          OnCardClicked="HandleCardClick" />
+
+                @if (isSelected)
+                {
+                    var orderNum = selectedIdx + 1;
+                    var isTopCard = (selectedIdx == SelectedCards.Count - 1 && SelectedCards.Count > 1);
+                    <div class="card-order-badge @(isTopCard ? "is-top-badge" : "")">
+                        <span class="order-number">@orderNum.</span>
+                        @if (isTopCard)
+                        {
+                            <span class="order-tag">👑 Vrch</span>
+                        }
+                    </div>
+                }
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter, EditorRequired] public Player Player { get; set; } = default!;
+    [Parameter] public string Deck { get; set; } = "original";
+    [Parameter] public bool IsMyTurn { get; set; } = false;
+    [Parameter] public Func<Card, bool> CanPlayCardFunc { get; set; } = _ => false;
+    [Parameter] public Func<List<Card>, bool> CanPlayCardsFunc { get; set; } = _ => false;
+    [Parameter] public EventCallback<List<Card>> OnPlayCards { get; set; }
+
+    private List<Card> SelectedCards = new();
+
+    private bool CanPlayCard(Card card) => CanPlayCardFunc(card);
+    private bool CanPlayCards(List<Card> cards) => CanPlayCardsFunc(cards);
+
+    protected override void OnParametersSet()
+    {
+        // Vyčistíme karty, ktoré hráč už nemá v ruke
+        SelectedCards.RemoveAll(c => !Player.Hand.Contains(c));
+    }
+
+    private async Task HandleCardClick(Card card)
+    {
+        if (!IsMyTurn) return;
+
+        var rankCount = Player.Hand.Count(c => c.Rank == card.Rank);
+
+        // Ak už máme vybraté karty inej hodnoty, zresetujeme výber
+        if (SelectedCards.Count > 0 && SelectedCards[0].Rank != card.Rank)
+        {
+            SelectedCards.Clear();
+        }
+
+        // Ak má hráč v ruke len 1 kartu danej hodnoty a žiadna nie je vybratá:
+        if (rankCount == 1 && SelectedCards.Count == 0)
+        {
+            if (CanPlayCard(card))
+            {
+                await OnPlayCards.InvokeAsync(new List<Card> { card });
+            }
+            return;
+        }
+
+        // Ak je už karta v zozname vybratých -> odoberieme ju (deselect)
+        if (SelectedCards.Contains(card))
+        {
+            SelectedCards.Remove(card);
+        }
+        else
+        {
+            // Pridáme na koniec zoznamu ako ďalšiu v poradí
+            SelectedCards.Add(card);
+        }
+
+        StateHasChanged();
+    }
+
+    private void ReverseSelectionOrder()
+    {
+        SelectedCards.Reverse();
+        StateHasChanged();
+    }
+
+    private void SelectAllOfRank()
+    {
+        if (SelectedCards.Count == 0) return;
+        var rank = SelectedCards[0].Rank;
+        foreach (var c in Player.Hand.Where(c => c.Rank == rank))
+        {
+            if (!SelectedCards.Contains(c))
+            {
+                SelectedCards.Add(c);
+            }
+        }
+        StateHasChanged();
+    }
+
+    private void ClearSelection()
+    {
+        SelectedCards.Clear();
+        StateHasChanged();
+    }
+
+    private async Task PlaySelected()
+    {
+        if (SelectedCards.Count > 0 && CanPlayCards(SelectedCards))
+        {
+            var cardsToPlay = new List<Card>(SelectedCards);
+            SelectedCards.Clear();
+            await OnPlayCards.InvokeAsync(cardsToPlay);
+        }
+    }
+}
@@ -0,0 +1,48 @@
+@namespace Faraon.Client.Components
+
+<div class="player-slot @PositionClass">
+    <div class="avatar-badge @(IsCurrentTurn ? "active-turn" : "") @(Player.IsSkipped ? "is-skipped" : "") @(Player.HasFinished ? "is-finished" : "")">
+        @if (Player.HasFinished)
+        {
+            <div class="badge-finished-pos">
+                @Player.FinishedPosition
+            </div>
+        }
+        
+        <div class="avatar-icon">@Player.Avatar</div>
+        <div class="avatar-name">
+            @Player.Name
+            @if (Player.Type == PlayerType.AI)
+            {
+                <span style="font-size: 0.7rem; opacity: 0.8;">(AI)</span>
+            }
+        </div>
+        <div class="avatar-card-count">
+            @if (Player.HasFinished)
+            {
+                <span>Skončil 🏆</span>
+            }
+            else
+            {
+                <span>@Player.Hand.Count @(Player.Hand.Count == 1 ? "karta" : (Player.Hand.Count < 5 ? "karty" : "kariet"))</span>
+            }
+        </div>
+    </div>
+
+    <!-- Mini karty pre vizuálny odpočet kariet v ruke -->
+    @if (!Player.HasFinished)
+    {
+        <div class="opponent-mini-cards">
+            @for (int i = 0; i < Math.Min(Player.Hand.Count, 8); i++)
+            {
+                <div class="mini-card-back"></div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter, EditorRequired] public Player Player { get; set; } = default!;
+    [Parameter] public bool IsCurrentTurn { get; set; } = false;
+    [Parameter] public string PositionClass { get; set; } = "slot-top";
+}
@@ -0,0 +1,40 @@
+@namespace Faraon.Client.Components
+
+<div class="suit-picker-overlay">
+    <div class="suit-picker-title">Zvoľte farbu (Horník)</div>
+    <div class="suit-picker-grid">
+        <button class="suit-btn" style="color: #d62828;" @onclick="() => SelectSuit(Suit.Hearts)">
+            <div style="width: 50px; height: 50px;">
+                <MariasPip Suit="Suit.Hearts" />
+            </div>
+            <span class="suit-btn-name">ČERVEŇ</span>
+        </button>
+        <button class="suit-btn" style="color: #2d6a4f;" @onclick="() => SelectSuit(Suit.Leaves)">
+            <div style="width: 50px; height: 50px;">
+                <MariasPip Suit="Suit.Leaves" />
+            </div>
+            <span class="suit-btn-name">ZELEŇ</span>
+        </button>
+        <button class="suit-btn" style="color: #8b5a2b;" @onclick="() => SelectSuit(Suit.Acorns)">
+            <div style="width: 50px; height: 50px;">
+                <MariasPip Suit="Suit.Acorns" />
+            </div>
+            <span class="suit-btn-name">ŽALUĎ</span>
+        </button>
+        <button class="suit-btn" style="color: #d48b1a;" @onclick="() => SelectSuit(Suit.Bells)">
+            <div style="width: 50px; height: 50px;">
+                <MariasPip Suit="Suit.Bells" />
+            </div>
+            <span class="suit-btn-name">GUĽA</span>
+        </button>
+    </div>
+</div>
+
+@code {
+    [Parameter] public EventCallback<Suit> OnSuitSelected { get; set; }
+
+    private async Task SelectSuit(Suit suit)
+    {
+        await OnSuitSelected.InvokeAsync(suit);
+    }
+}