Michal/FaraonCardGame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvements

Browse Source
This commit is contained in:
Michal Vrba
2026-08-28 16:34:40 +02:00
parent 4803bc22a6
commit 02bca7c34a
212 changed files with 622 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Faraon.Client/Components/GameOverModal.razor
+48 -6
View File
@@ -2,14 +2,36 @@
<div class="game-over-overlay">
<div class="game-over-card">
<div class="game-over-title">Výsledky Hry 👑</div>
<div class="game-over-title">
@if (IsOlympicMode)
{
<span>🏆 OLYMPIJSKÝ ŠAMPIÓN 👑</span>
}
else
{
<span>Výsledky Hry 👑</span>
}
</div>
@if (IsOlympicMode && MatchWinner != null)
{
<div style="background: linear-gradient(135deg, rgba(245, 176, 65, 0.25), rgba(212, 172, 13, 0.15)); border: 2px solid var(--gold); border-radius: 14px; padding: 14px; margin-bottom: 18px; text-align: center;">
<div style="font-size: 2.2rem; margin-bottom: 4px;">🥇👑</div>
<div style="font-size: 1.35rem; font-weight: 900; color: var(--gold);">
@MatchWinner.Avatar @MatchWinner.Name
</div>
<div style="font-size: 0.9rem; color: #f1f5f9; margin-top: 4px;">
Prežil všetky kolá ako jediný hráč a zvíťazil v Olympijskom turnaji!
</div>
</div>
}
<div class="podium-list">
@foreach (var player in Players.OrderBy(p => p.FinishedPosition ?? 99))
@foreach (var player in Players.OrderBy(p => p.IsEliminated ? 1 : 0).ThenBy(p => p.FinishedPosition ?? 99))
{
<div class="podium-row @(player.FinishedPosition == 1 ? "winner" : "")">
<div class="podium-row @((MatchWinner != null && player == MatchWinner) || (!IsOlympicMode && player.FinishedPosition == 1) ? "winner" : "")">
<div class="podium-pos">
@if (player.FinishedPosition == 1) { <span>🥇</span> }
@if ((MatchWinner != null && player == MatchWinner) || (!IsOlympicMode && 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> }
@@ -22,8 +44,26 @@
<span style="font-size: 0.75rem; opacity: 0.7;">(AI)</span>
}
</div>
<div>
@(player.FinishedPosition == 1 ? "Víťaz! 🎉" : $"{player.FinishedPosition}. miesto")
<div style="font-weight: 800;">
@if (IsOlympicMode)
{
if (player == MatchWinner)
{
<span style="color: var(--gold);">Šampión! 🏆</span>
}
else if (player.IsEliminated)
{
<span style="color: #ef4444;">Vyradený ☠️</span>
}
else
{
<span>@player.OlympicCardsCount kariet</span>
}
}
else
{
<span>@(player.FinishedPosition == 1 ? "Víťaz! 🎉" : $"{player.FinishedPosition}. miesto")</span>
}
</div>
</div>
}
@@ -42,6 +82,8 @@
@code {
[Parameter] public List<Player> Players { get; set; } = new();
[Parameter] public bool IsOlympicMode { get; set; } = false;
[Parameter] public Player? MatchWinner { get; set; }
[Parameter] public EventCallback OnPlayAgain { get; set; }
[Parameter] public EventCallback OnBackToLobby { get; set; }
}
Faraon.Client/Components/Lobby.razor
+80 -6
View File
@@ -77,15 +77,17 @@
<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 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>Kariet do ruky:</span>
<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>
@@ -103,11 +105,23 @@
<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-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">
@@ -116,7 +130,67 @@
</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 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>
Faraon.Client/Components/PlayerHandView.razor
+4 -4
View File
@@ -88,9 +88,9 @@
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);
double angle = total > 1 ? offset * (Math.Min(35.0 / total, 5.2)) : 0;
double yOffset = Math.Abs(offset) * 3.5;
double stepFactor = total > 8 ? 0.75 : (total > 5 ? 0.88 : 1.0);
// Ak patrí do aktívnej skupiny rovnakej hodnoty, vysunieme ju
string slotClasses = "hand-card-slot";
@@ -99,7 +99,7 @@
slotClasses += " rank-group-lifted";
}
string fanSlotStyle = $"transform: translateX({xOffset}px) translateY({yOffset}px) rotate({angle}deg); z-index: {(isSelected ? 140 + i : (isSameRankAsSelected ? 110 + i : i + 1))};";
string fanSlotStyle = $"transform: translateX(calc({offset.ToString(System.Globalization.CultureInfo.InvariantCulture)} * var(--fan-card-step) * {stepFactor.ToString(System.Globalization.CultureInfo.InvariantCulture)})) translateY({yOffset.ToString(System.Globalization.CultureInfo.InvariantCulture)}px) rotate({angle.ToString(System.Globalization.CultureInfo.InvariantCulture)}deg); z-index: {(isSelected ? 140 + i : (isSameRankAsSelected ? 110 + i : i + 1))};";
string selectedClass = isSelected ? "card-selected-combo" : (isSameRankAsSelected ? "card-group-active" : "");
<div class="@slotClasses" style="@fanSlotStyle">
Faraon.Client/Components/PlayerSlot.razor
+13 -2
View File
@@ -18,7 +18,11 @@
}
</div>
<div class="avatar-card-count">
@if (Player.HasFinished)
@if (Player.IsEliminated)
{
<span style="color: #ef4444; font-weight: 800;">☠️ Vyradený</span>
}
else if (Player.HasFinished)
{
<span>Skončil 🏆</span>
}
@@ -26,11 +30,17 @@
{
<span>@Player.Hand.Count @(Player.Hand.Count == 1 ? "karta" : (Player.Hand.Count < 5 ? "karty" : "kariet"))</span>
}
@if (IsOlympicMode)
{
<div style="font-size: 0.72rem; color: var(--gold); margin-top: 2px;">
🏅 @Player.OlympicCardsCount @(Player.OlympicCardsCount == 1 ? "karta" : (Player.OlympicCardsCount < 5 ? "karty" : "kariet"))
</div>
}
</div>
</div>
<!-- Mini karty pre vizuálny odpočet kariet v ruke -->
@if (!Player.HasFinished)
@if (!Player.HasFinished && !Player.IsEliminated)
{
<div class="opponent-mini-cards">
@for (int i = 0; i < Math.Min(Player.Hand.Count, 8); i++)
@@ -44,5 +54,6 @@
@code {
[Parameter, EditorRequired] public Player Player { get; set; } = default!;
[Parameter] public bool IsCurrentTurn { get; set; } = false;
[Parameter] public bool IsOlympicMode { get; set; } = false;
[Parameter] public string PositionClass { get; set; } = "slot-top";
}
Faraon.Client/Components/RoundOverModal.razor
+93
View File
@@ -0,0 +1,93 @@
@namespace Faraon.Client.Components
<div class="game-over-overlay">
<div class="game-over-card animate-pop" style="max-width: 500px;">
<div class="game-over-title" style="font-size: 1.5rem; color: var(--gold);">
🏅 Kolo #@RoundNumber Skončené!
</div>
@if (RoundLoser != null)
{
<div style="background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;">
<div style="color: #fca5a5; font-weight: 800; font-size: 0.95rem;">
Porazený kola: @RoundLoser.Avatar @RoundLoser.Name
</div>
<div style="color: #cbd5e1; font-size: 0.85rem; margin-top: 3px;">
@if (RoundLoser.IsEliminated)
{
<span style="color: #ef4444; font-weight: 900;">☠️ Stratil všetky karty a VYPADÁVA z Olympijského turnaja!</span>
}
else
{
<span>V ďalšom kole začína s <strong>@RoundLoser.OlympicCardsCount @(RoundLoser.OlympicCardsCount == 1 ? "kartou" : (RoundLoser.OlympicCardsCount < 5 ? "kartami" : "kartami"))</strong> (-1 karta)</span>
}
</div>
</div>
}
<div style="font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; text-align: left;">
Stav Olympijského turnaja:
</div>
<div class="podium-list" style="margin-bottom: 20px;">
@foreach (var player in Players.OrderBy(p => p.IsEliminated ? 1 : 0).ThenBy(p => p.FinishedPosition ?? 99))
{
<div class="podium-row @(player.FinishedPosition == 1 ? "winner" : (player.IsEliminated ? "eliminated-row" : ""))">
<div class="podium-pos">
@if (player.IsEliminated)
{
<span>☠️</span>
}
else if (player.FinishedPosition == 1)
{
<span>🥇</span>
}
else if (player.FinishedPosition == 2)
{
<span>🥈</span>
}
else
{
<span>#@(player.FinishedPosition ?? 3)</span>
}
</div>
<div class="podium-player">
<span>@player.Avatar</span>
<span style="@(player.IsEliminated ? "text-decoration: line-through; opacity: 0.6;" : "")">@player.Name</span>
@if (player.Type == PlayerType.AI)
{
<span style="font-size: 0.75rem; opacity: 0.7;">(AI)</span>
}
</div>
<div style="font-weight: 800; font-size: 0.9rem;">
@if (player.IsEliminated)
{
<span style="color: #ef4444;">Vyradený</span>
}
else
{
<span style="color: var(--gold);">🎴 @player.OlympicCardsCount @(player.OlympicCardsCount == 1 ? "karta" : (player.OlympicCardsCount < 5 ? "karty" : "kariet"))</span>
}
</div>
</div>
}
</div>
<div style="display: flex; gap: 12px; justify-content: center;">
<button class="btn-primary-glow" style="padding: 12px 28px; font-size: 1.1rem;" @onclick="OnNextRound">
⚔️ Začať Kolo #@(RoundNumber + 1)
</button>
<button class="btn-pill" style="padding: 12px 20px;" @onclick="OnBackToLobby">
Do Lobby 🏠
</button>
</div>
</div>
</div>
@code {
[Parameter] public int RoundNumber { get; set; } = 1;
[Parameter] public Player? RoundLoser { get; set; }
[Parameter] public List<Player> Players { get; set; } = new();
[Parameter] public EventCallback OnNextRound { get; set; }
[Parameter] public EventCallback OnBackToLobby { get; set; }
}