245 lines
12 KiB
Plaintext
245 lines
12 KiB
Plaintext
@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" style="grid-column: 1 / -1; background: rgba(245, 176, 65, 0.12); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(245, 176, 65, 0.3);">
|
|
<input type="checkbox" @bind="Rules.OlympicMode" />
|
|
<span style="font-weight: 800; color: var(--gold);">🏅 Olympijský Faraón (Turnajový režim)</span>
|
|
<span style="font-size: 0.8rem; color: #94a3b8; margin-left: 6px;">— porazený má v ďalšom kole o 1 kartu menej</span>
|
|
</label>
|
|
<div style="display: flex; align-items: center; gap: 8px; font-size: 0.9rem;">
|
|
<span>Počiatočný počet kariet:</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>
|
|
<option value="6">6 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áš 🎴</div>
|
|
<div class="deck-desc">Autentický dvojhlavý Tell vzor (Piatnik)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deck-option-card @(Rules.SelectedDeck == "janosik" ? "selected-deck" : "")"
|
|
@onclick='() => Rules.SelectedDeck = "janosik"'>
|
|
<div class="deck-preview-img-box">
|
|
<img src="assets/cards/janosik/Hearts_King.webp" class="deck-preview-thumb" alt="Zbojníci" />
|
|
<img src="assets/cards/janosik/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
|
|
</div>
|
|
<div class="deck-info">
|
|
<div class="deck-name">Zbojníci & Legendy 🪓</div>
|
|
<div class="deck-desc">Jánošík, Uhorčík, výšivky a tatranský folklór</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 (postavičky a veľké symboly)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deck-option-card @(Rules.SelectedDeck == "cyberpunk" ? "selected-deck" : "")"
|
|
@onclick='() => Rules.SelectedDeck = "cyberpunk"'>
|
|
<div class="deck-preview-img-box">
|
|
<img src="assets/cards/cyberpunk/Leaves_King.webp" class="deck-preview-thumb" alt="Cyberpunk 2077" />
|
|
<img src="assets/cards/cyberpunk/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
|
|
</div>
|
|
<div class="deck-info">
|
|
<div class="deck-name">Cyberpunk 2077 ⚡</div>
|
|
<div class="deck-desc">Neónový holografický štýl a kybernetickí hrdinovia</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deck-option-card @(Rules.SelectedDeck == "fantasy" ? "selected-deck" : "")"
|
|
@onclick='() => Rules.SelectedDeck = "fantasy"'>
|
|
<div class="deck-preview-img-box">
|
|
<img src="assets/cards/fantasy/Acorns_OverKnave.webp" class="deck-preview-thumb" alt="Fantasy RPG" />
|
|
<img src="assets/cards/fantasy/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
|
|
</div>
|
|
<div class="deck-info">
|
|
<div class="deck-name">Fantasy RPG 🐉</div>
|
|
<div class="deck-desc">Dračí lordi, mágovia, runy a rytieri</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deck-option-card @(Rules.SelectedDeck == "egypt" ? "selected-deck" : "")"
|
|
@onclick='() => Rules.SelectedDeck = "egypt"'>
|
|
<div class="deck-preview-img-box">
|
|
<img src="assets/cards/egypt/Bells_King.webp" class="deck-preview-thumb" alt="Staroveký Egypt" />
|
|
<img src="assets/cards/egypt/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
|
|
</div>
|
|
<div class="deck-info">
|
|
<div class="deck-name">Staroveký Egypt ⚔️</div>
|
|
<div class="deck-desc">Zlatý papyrus, Tutanchamón, Anubis a pyramídy</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deck-option-card @(Rules.SelectedDeck == "pets" ? "selected-deck" : "")"
|
|
@onclick='() => Rules.SelectedDeck = "pets"'>
|
|
<div class="deck-preview-img-box">
|
|
<img src="assets/cards/pets/Hearts_OverKnave.webp" class="deck-preview-thumb" alt="Kráľovské zvieratká" />
|
|
<img src="assets/cards/pets/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
|
|
</div>
|
|
<div class="deck-info">
|
|
<div class="deck-name">Kráľovské Zvieratká 🐱</div>
|
|
<div class="deck-desc">Mačičky a psíkovia v kráľovských korunkách</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deck-option-card @(Rules.SelectedDeck == "pixel" ? "selected-deck" : "")"
|
|
@onclick='() => Rules.SelectedDeck = "pixel"'>
|
|
<div class="deck-preview-img-box">
|
|
<img src="assets/cards/pixel/Leaves_Seven.webp" class="deck-preview-thumb" alt="Retro Pixel" />
|
|
<img src="assets/cards/pixel/Card_Back.webp" class="deck-preview-thumb-back" alt="Rub" />
|
|
</div>
|
|
<div class="deck-info">
|
|
<div class="deck-name">Retro 8-Bit Pixel 🕹️</div>
|
|
<div class="deck-desc">Nostalgický arkádový štýl klasických hier</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));
|
|
}
|
|
}
|