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

fixes

Browse Source
This commit is contained in:
Michal Vrba
2026-09-03 17:25:35 +02:00
parent 5d9194e14f
commit 00aa94ea7c
8 changed files with 323 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Faraon.Client/Components/PlayerSlot.razor
+9 -1
View File
@@ -1,7 +1,15 @@
@namespace Faraon.Client.Components
<div class="player-slot @PositionClass">
<div class="player-slot @PositionClass @(IsCurrentTurn ? "active-turn-slot" : "")">
<div class="avatar-badge @(IsCurrentTurn ? "active-turn" : "") @(Player.IsSkipped ? "is-skipped" : "") @(Player.HasFinished ? "is-finished" : "")">
@if (IsCurrentTurn && !Player.HasFinished && !Player.IsEliminated)
{
<div class="turn-indicator-badge">
<span class="turn-indicator-dot"></span>
<span class="turn-indicator-text">NA ŤAHU</span>
</div>
}
@if (Player.HasFinished)
{
<div class="badge-finished-pos">
Faraon.Client/Pages/Home.razor
+31 -6
View File
@@ -24,9 +24,9 @@ else
</span>
}
</div>
<div style="font-size: 0.95rem; font-weight: 700; color: #a3b899;">
<div class="turn-header-info">
Ťah #@Engine.State.TurnCount &bull; Na rade:
<span style="color: var(--gold); font-weight: 900;">
<span class="active-turn-header-player">
@Engine.State.CurrentPlayer.Avatar @Engine.State.CurrentPlayer.Name
</span>
</div>
@@ -98,13 +98,20 @@ else
</div>
<!-- Spodný slot: Aktívny hráč v zobrazení -->
<div class="slot-bottom">
<div class="slot-bottom @(IsViewingPlayerTurn ? "active-turn-slot" : "")">
<div class="avatar-badge @(IsViewingPlayerTurn ? "active-turn" : "") @(ViewingPlayer.IsSkipped ? "is-skipped" : "")"
style="margin-bottom: 8px;">
@if (IsViewingPlayerTurn && !ViewingPlayer.HasFinished && !ViewingPlayer.IsEliminated)
{
<div class="turn-indicator-badge">
<span class="turn-indicator-dot"></span>
<span class="turn-indicator-text">SI NA ŤAHU</span>
</div>
}
<div style="display: flex; align-items: center; gap: 8px;">
<span class="avatar-icon">@ViewingPlayer.Avatar</span>
<span class="avatar-name">@ViewingPlayer.Name</span>
<span class="avatar-card-count">(@ViewingPlayer.Hand.Count kariet)</span>
<span class="avatar-card-count">(@ViewingPlayer.Hand.Count @(ViewingPlayer.Hand.Count == 1 ? "karta" : (ViewingPlayer.Hand.Count < 5 ? "karty" : "kariet")))</span>
@if (Engine.State.Rules.OlympicMode)
{
<span style="font-size: 0.75rem; color: var(--gold); background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(245, 176, 65, 0.4);">
@@ -211,6 +218,7 @@ else
private List<Player> ConfiguredPlayers = new();
private RuleOptions ConfiguredRules = new();
private Player? _previousTurnPlayer;
private Player ViewingPlayer
{
@@ -260,6 +268,7 @@ else
Engine.OnGameEvent += HandleGameEvent;
Engine.StartGame(gamePlayers, ConfiguredRules);
_previousTurnPlayer = Engine.State.CurrentPlayer;
IsInLobby = false;
LastEventMessage = "Hra začala! Veľa šťastia.";
@@ -282,7 +291,7 @@ else
await Fx.PlayCardDrawAsync();
break;
case GameEventType.SevenStacked:
await Fx.PlaySevenStackAsync(Math.Max(1, e.ExtraData / 2));
await Fx.PlaySevenStackAsync(Math.Max(1, e.ExtraData / 3));
await Fx.TriggerDopamineBannerAsync($"🔥 +{e.ExtraData} KARIET!", "Trestná reťaz sediem", "triple");
break;
case GameEventType.AceSkipped:
@@ -297,7 +306,6 @@ else
break;
case GameEventType.CardsBurned:
await Fx.PlayBurnExplosionAsync();
await Fx.TriggerDopamineBannerAsync("💥 SPÁLENÉ!", "Zhoda 4 kariet na stole", "quad");
break;
case GameEventType.PlayerFinished:
case GameEventType.MatchWon:
@@ -311,10 +319,27 @@ else
await Fx.PlayHeartbeatAsync();
}
await CheckTurnTransitionAsync();
StateHasChanged();
});
}
private async Task CheckTurnTransitionAsync()
{
if (Engine == null || Engine.State.Players.Count == 0 || Engine.State.IsGameOver) return;
var current = Engine.State.CurrentPlayer;
if (_previousTurnPlayer != null && _previousTurnPlayer != current)
{
var prev = _previousTurnPlayer;
_previousTurnPlayer = current;
await Fx.AnimateTurnTransitionAsync(GetPlayerPosition(prev), GetPlayerPosition(current));
}
else
{
_previousTurnPlayer = current;
}
}
private string GetPlayerPosition(Player player)
{
if (player == ViewingPlayer) return "bottom";
Faraon.Client/Services/FxService.cs
+9
View File
@@ -114,6 +114,15 @@ public class FxService
catch { }
}
public async ValueTask AnimateTurnTransitionAsync(string fromPosition, string toPosition)
{
try
{
await _js.InvokeVoidAsync("FaraonFx.animateTurnTransition", fromPosition, toPosition);
}
catch { }
}
public async ValueTask PlaySelectStepAsync(int step)
{
try { await _js.InvokeVoidAsync("FaraonFx.playSelectStep", step); } catch { }
Faraon.Client/wwwroot/css/app.css
+143 -5
View File
@@ -190,6 +190,26 @@ body, html {
transition: all 0.3s ease;
}
.player-slot.active-turn-slot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140%;
height: 140%;
background: radial-gradient(ellipse at center, rgba(245, 176, 65, 0.28) 0%, rgba(245, 176, 65, 0.08) 55%, transparent 75%);
pointer-events: none;
z-index: -1;
border-radius: 50%;
animation: aura-breathe 2.2s infinite ease-in-out alternate;
}
@keyframes aura-breathe {
0% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.6; }
100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
.slot-top {
grid-row: 1;
grid-column: 2;
@@ -208,6 +228,22 @@ body, html {
.slot-bottom {
grid-row: 3;
grid-column: 1 / span 3;
position: relative;
}
.slot-bottom.active-turn-slot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 120px;
background: radial-gradient(ellipse at center, rgba(245, 176, 65, 0.22) 0%, rgba(245, 176, 65, 0.05) 50%, transparent 75%);
pointer-events: none;
z-index: -1;
border-radius: 50%;
animation: aura-breathe 2.2s infinite ease-in-out alternate;
}
.slot-center {
@@ -219,6 +255,35 @@ body, html {
gap: 20px;
}
/* TURN HEADER INFO */
.turn-header-info {
font-size: 0.95rem;
font-weight: 700;
color: #a3b899;
display: flex;
align-items: center;
gap: 6px;
}
.active-turn-header-player {
color: var(--gold);
font-weight: 900;
text-shadow: 0 0 10px rgba(245, 176, 65, 0.8);
background: rgba(245, 176, 65, 0.15);
padding: 2px 10px;
border-radius: 12px;
border: 1px solid rgba(245, 176, 65, 0.45);
display: inline-flex;
align-items: center;
gap: 4px;
animation: header-pulse 1.8s infinite alternate;
}
@keyframes header-pulse {
0% { box-shadow: 0 0 4px rgba(245, 176, 65, 0.3); }
100% { box-shadow: 0 0 16px rgba(245, 176, 65, 0.8); }
}
/* AVATAR BADGE */
.avatar-badge {
position: relative;
@@ -230,19 +295,92 @@ body, html {
border-radius: 16px;
padding: 6px 12px;
backdrop-filter: blur(8px);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.avatar-badge.active-turn {
border-color: var(--gold);
box-shadow: 0 0 20px rgba(245, 176, 65, 0.8), inset 0 0 10px rgba(245, 176, 65, 0.3);
transform: scale(1.08);
box-shadow: 0 0 25px rgba(245, 176, 65, 0.9), inset 0 0 12px rgba(245, 176, 65, 0.35);
transform: scale(1.09);
animation: turn-pulse 1.8s infinite;
}
@keyframes turn-pulse {
0%, 100% { box-shadow: 0 0 15px rgba(245, 176, 65, 0.7); }
50% { box-shadow: 0 0 25px rgba(245, 176, 65, 1), 0 0 40px rgba(245, 176, 65, 0.5); }
0%, 100% { box-shadow: 0 0 16px rgba(245, 176, 65, 0.7); }
50% { box-shadow: 0 0 30px rgba(245, 176, 65, 1), 0 0 45px rgba(245, 176, 65, 0.55); }
}
/* TURN INDICATOR BADGE (NA ŤAHU) */
.turn-indicator-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 5px;
background: linear-gradient(135deg, #ffd700, #f5b041);
color: #11281d;
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.8px;
padding: 2px 9px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 215, 0, 0.8);
border: 1.5px solid #ffffff;
white-space: nowrap;
z-index: 20;
animation: turn-badge-float 1.8s ease-in-out infinite alternate;
}
@keyframes turn-badge-float {
0% { transform: translateX(-50%) translateY(0); }
100% { transform: translateX(-50%) translateY(-3px); }
}
.turn-indicator-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #0d3824;
box-shadow: 0 0 4px #0d3824;
animation: dot-blink 1s ease-in-out infinite alternate;
}
@keyframes dot-blink {
0% { opacity: 0.4; transform: scale(0.75); }
100% { opacity: 1; transform: scale(1.25); }
}
/* TURN ARRIVAL EFFECT */
.turn-arrived-pulse {
animation: turn-arrival 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes turn-arrival {
0% { transform: scale(1); }
40% { transform: scale(1.18); box-shadow: 0 0 35px rgba(245, 176, 65, 1), 0 0 55px rgba(255, 215, 0, 0.8); }
100% { transform: scale(1.09); }
}
/* TURN TRANSFER ORB */
.turn-transfer-orb {
position: fixed;
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #ffffff, #ffd700 45%, #ff8c00 85%, transparent);
box-shadow: 0 0 18px rgba(255, 215, 0, 0.95), 0 0 36px rgba(245, 176, 65, 0.7);
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 998;
filter: drop-shadow(0 0 10px rgba(245, 176, 65, 0.85));
animation: orb-glow 0.38s infinite alternate;
}
@keyframes orb-glow {
0% { transform: translate(-50%, -50%) scale(0.9); }
100% { transform: translate(-50%, -50%) scale(1.25); }
}
.avatar-icon {
Faraon.Client/wwwroot/js/gameFx.js
+125
View File
@@ -461,6 +461,130 @@ window.FaraonFx = (function () {
}
}
// --- TURN TRANSITION ANIMATION ---
function getSlotElement(pos) {
if (!pos) return null;
const normalized = pos.replace('slot-', '');
if (normalized === 'bottom') {
return document.querySelector('.slot-bottom .avatar-badge') || document.querySelector('.slot-bottom');
}
return document.querySelector('.slot-' + normalized + ' .avatar-badge') || document.querySelector('.slot-' + normalized);
}
function playTurnPassSound() {
if (isMuted) return;
const ctx = getAudioContext();
if (!ctx) return;
const now = ctx.currentTime;
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(540, now);
osc.frequency.exponentialRampToValueAtTime(820, now + 0.11);
gain.gain.setValueAtTime(0.07, now);
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.13);
osc.connect(gain);
gain.connect(ctx.destination);
osc.start(now);
osc.stop(now + 0.14);
}
function animateTurnTransition(fromPosition, toPosition) {
if (!fromPosition || !toPosition || fromPosition === toPosition) return Promise.resolve();
return new Promise((resolve) => {
const fromElem = getSlotElement(fromPosition);
const toElem = getSlotElement(toPosition);
const startPos = fromElem ? getElementCenter(fromElem) : getPositionCoords(fromPosition);
const endPos = toElem ? getElementCenter(toElem) : getPositionCoords(toPosition);
const container = document.getElementById('game-table-container') || document.body;
const orb = document.createElement('div');
orb.className = 'turn-transfer-orb';
orb.style.left = `${startPos.x}px`;
orb.style.top = `${startPos.y}px`;
container.appendChild(orb);
const midX = (startPos.x + endPos.x) / 2;
const midY = Math.min(startPos.y, endPos.y) - 35;
const duration = 380;
const startTime = performance.now();
function step(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const t = 1 - Math.pow(1 - progress, 3); // Ease out cubic
// Quadratic Bezier curve
const currentX = (1 - t) * (1 - t) * startPos.x + 2 * (1 - t) * t * midX + t * t * endPos.x;
const currentY = (1 - t) * (1 - t) * startPos.y + 2 * (1 - t) * t * midY + t * t * endPos.y;
orb.style.left = `${currentX}px`;
orb.style.top = `${currentY}px`;
if (particleCanvas && Math.random() < 0.4) {
particles.push({
x: currentX,
y: currentY,
vx: (Math.random() - 0.5) * 1.5,
vy: (Math.random() - 0.5) * 1.5,
gravity: 0,
size: 3 + Math.random() * 3,
color: Math.random() > 0.4 ? '#ffd700' : '#f5b041',
shape: 'spark',
life: 0.6,
decay: 0.04,
rotation: Math.random() * Math.PI
});
}
if (progress < 1) {
requestAnimationFrame(step);
} else {
orb.remove();
if (toElem) {
toElem.classList.remove('turn-arrived-pulse');
void toElem.offsetWidth;
toElem.classList.add('turn-arrived-pulse');
setTimeout(() => toElem.classList.remove('turn-arrived-pulse'), 600);
}
if (particleCanvas) {
for (let i = 0; i < 8; i++) {
const angle = Math.random() * Math.PI * 2;
const spd = 1.5 + Math.random() * 2.5;
particles.push({
x: endPos.x,
y: endPos.y,
vx: Math.cos(angle) * spd,
vy: Math.sin(angle) * spd,
gravity: 0.02,
size: 3 + Math.random() * 3,
color: '#ffd700',
shape: 'spark',
life: 0.7,
decay: 0.035,
rotation: Math.random() * Math.PI
});
}
}
playTurnPassSound();
resolve();
}
}
requestAnimationFrame(step);
});
}
// --- PARTICLE ENGINE ---
function initParticles(canvasId) {
particleCanvas = document.getElementById(canvasId);
@@ -912,6 +1036,7 @@ window.FaraonFx = (function () {
triggerGoldStarExplosion,
animateCardPlay,
animateCardDraw,
animateTurnTransition,
toggleMute
};
})();