Adding vibe hover effect

This commit is contained in:
2026-07-18 16:23:21 -04:00
parent 74f065e0f5
commit 4ce33bdb36
17 changed files with 550 additions and 308 deletions
+29 -12
View File
@@ -1,18 +1,37 @@
@implements IDisposable
@using Shared.Services
@using Model
@inject CardPreviewService PreviewService
@namespace Shared.Components
@if (PreviewService.IsVisible && PreviewService.HoveredCard != null)
{
<div class="card-preview-popup" style="left: @(PreviewService.X + 20)px; top: @(PreviewService.Y)px;">
<div class="preview-content">
<img src="@PreviewService.HoveredCard.ImagePath" alt="@PreviewService.HoveredCard.Name"/>
<div class="preview-info">
<strong>@PreviewService.HoveredCard.Name</strong>
@if (PreviewService.HoveredCard.Cost.HasValue)
<div class="card-preview-container" style="left: @(PreviewService.X + 20)px; top: @(PreviewService.Y - 100)px;">
<div class="card-preview-card">
<img src="@PreviewService.HoveredCard.ImagePath" alt="@PreviewService.HoveredCard.Name" class="preview-image" />
<div class="preview-overlay">
<div class="preview-name">@PreviewService.HoveredCard.Name</div>
<div class="preview-meta">
@if (PreviewService.HoveredCard.Cost.HasValue)
{
<span class="preview-cost"><i class="bi bi-lightning-fill"></i> @PreviewService.HoveredCard.Cost</span>
}
<span class="preview-category">@PreviewService.HoveredCard.Category</span>
</div>
@if (!string.IsNullOrEmpty(PreviewService.HoveredCard.Description))
{
<span class="preview-cost"><i
class="bi bi-lightning-fill"></i> @PreviewService.HoveredCard.Cost</span>
<div class="preview-description">@PreviewService.HoveredCard.Description</div>
}
@if (PreviewService.HoveredCard.Attack.HasValue || PreviewService.HoveredCard.Health.HasValue)
{
<div class="preview-stats">
@if (PreviewService.HoveredCard.Attack.HasValue)
{
<span class="stat-item"><i class="bi bi-shield-shaded"></i> @PreviewService.HoveredCard.Attack</span>
}
@if (PreviewService.HoveredCard.Health.HasValue)
{
<span class="stat-item"><i class="bi bi-heart-fill"></i> @PreviewService.HoveredCard.Health</span>
}
</div>
}
</div>
</div>
@@ -20,7 +39,6 @@
}
@code {
protected override void OnInitialized()
{
PreviewService.OnChange += StateHasChanged;
@@ -30,5 +48,4 @@
{
PreviewService.OnChange -= StateHasChanged;
}
}