Adding vibe hover effect

2026-07-18 16:23:21 -04:00
parent 74f065e0f5
commit 4ce33bdb36
17 changed files with 550 additions and 308 deletions
@@ -1,4 +1,6 @@
-@namespace Shared.Components
+@namespace Shared.Components
+
+@inject Shared.Services.CardPreviewService PreviewService

 <div class="deck-card-row">
    @foreach (var group in Cards.GroupBy(x => x))
@@ -7,7 +9,9 @@
        var count = group.Count();
        var card = LookupCard(cardName);
        <button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
-                @onclick="() => SelectCard(card)">
+                @onclick="() => SelectCard(card)"
+                @onmouseenter="@(e => PreviewService.Show(card, e.ClientX, e.ClientY))"
+                @onmouseleave="@(() => PreviewService.Hide())">
            <div class="mini-card-stack">
                @for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
                {
@@ -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;
    }
-
 }
@@ -1,33 +1,93 @@
-.card-preview-popup {
+.card-preview-container {
    position: fixed;
-    z-index: 9999;
+    z-index: 10000;
    pointer-events: none;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-    padding: 0.5rem;
-    width: 220px;
    transition: opacity 0.15s ease-in-out;
 }

-.preview-content img {
-    width: 100%;
-    height: auto;
-    border-radius: 4px;
-    display: block;
-    margin-bottom: 0.5rem;
+.card-preview-card {
+    width: 280px;
+    background: #1a1a1a;
+    border: 2px solid #333;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    animation: previewFadeIn 0.2s ease-out;
 }

-.preview-info {
+.preview-image {
+    width: 100%;
+    display: block;
+}
+
+.preview-overlay {
+    padding: 10px;
+    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.preview-name {
+    font-weight: bold;
+    color: white;
+    font-size: 1.1rem;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+}
+
+.preview-meta {
    display: flex;
    justify-content: space-between;
-    align-items: center;
-    font-size: 0.9rem;
-    color: var(--text-primary);
+    font-size: 0.85rem;
+    margin-top: 4px;
 }

 .preview-cost {
-    color: var(--accent);
-    font-weight: bold;
+    color: #00d2ff;
+}
+
+.preview-category {
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.preview-description {
+    margin-top: 8px;
+    font-size: 0.85rem;
+    color: #eee;
+    line-height: 1.3;
+    font-style: italic;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 6px;
+}
+
+.preview-stats {
+    display: flex;
+    gap: 15px;
+    margin-top: 8px;
+    padding-top: 6px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.stat-item .bi-shield-shaded {
+    color: #ff4d4d;
+}
+
+.stat-item .bi-heart-fill {
+    color: #2ecc71;
+}
+
+@keyframes previewFadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
@@ -0,0 +1,139 @@
+@using System.Text.RegularExpressions
+@using Microsoft.AspNetCore.Components.Rendering
+@using Model
+@namespace Shared.Components
+
+@if (Doc != null)
+{
+    <div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
+    <div class="generic-detail">
+        <button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
+        <div class="detail-layout">
+            <div class="detail-info">
+                <div class="detail-header">
+                    @if (!string.IsNullOrEmpty(Doc.Category))
+                    {
+                        <span class="category-badge">@Doc.Category</span>
+                    }
+                    <h2>@Doc.Title</h2>
+                </div>
+
+                @if (!string.IsNullOrWhiteSpace(Doc.Content))
+                {
+                    <div class="detail-field description">
+                        <div class="markdown-content">
+                            @RenderDescription(Doc.Content)
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public DocData? Doc { get; set; }
+    [Parameter] public EventCallback OnClose { get; set; }
+
+    private void HandleClose()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void HandleBackdropClick()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private RenderFragment RenderDescription(string content)
+    {
+        return builder =>
+        {
+            if (string.IsNullOrWhiteSpace(content)) return;
+
+            var seq = 0;
+            var lines = content.Split(['\r', '\n'], StringSplitOptions.None);
+            var inList = false;
+
+            for (var i = 0; i < lines.Length; i++)
+            {
+                var line = lines[i];
+                var trimmedLine = line.Trim();
+
+                // Handle Lists
+                if (trimmedLine.StartsWith("- ") || trimmedLine.StartsWith("* "))
+                {
+                    if (!inList)
+                    {
+                        builder.OpenElement(seq++, "ul");
+                        inList = true;
+                    }
+
+                    builder.OpenElement(seq++, "li");
+                    RenderInlines(builder, ref seq, trimmedLine[2..]);
+                    builder.CloseElement();
+                    continue;
+                }
+
+                if (inList)
+                {
+                    builder.CloseElement();
+                    inList = false;
+                }
+
+                if (!string.IsNullOrWhiteSpace(trimmedLine))
+                {
+                    builder.OpenElement(seq++, "p");
+                    RenderInlines(builder, ref seq, line);
+                    builder.CloseElement();
+                }
+            }
+
+            if (inList) builder.CloseElement();
+        };
+    }
+
+    private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text)
+    {
+        var remaining = text;
+        while (!string.IsNullOrEmpty(remaining))
+        {
+            var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
+            var italicMatch = Regex.Match(remaining, @"\*(.*?)\*");
+
+            var bestIdx = int.MaxValue;
+            Match? bestMatch = null;
+            var matchType = 0; // 1: bold, 2: italic
+
+            if (boldMatch.Success && boldMatch.Index < bestIdx)
+            {
+                bestIdx = boldMatch.Index;
+                bestMatch = boldMatch;
+                matchType = 1;
+            }
+
+            if (italicMatch.Success && italicMatch.Index < bestIdx)
+            {
+                bestIdx = italicMatch.Index;
+                bestMatch = italicMatch;
+                matchType = 2;
+            }
+
+            if (bestMatch != null)
+            {
+                if (bestIdx > 0) builder.AddContent(seq++, remaining[..bestIdx]);
+                var innerText = bestMatch.Groups[1].Value;
+                builder.OpenElement(seq++, matchType == 1 ? "strong" : "em");
+                builder.AddContent(seq++, innerText);
+                builder.CloseElement();
+                remaining = remaining[(bestIdx + bestMatch.Length)..];
+            }
+            else
+            {
+                builder.AddContent(seq++, remaining);
+                remaining = "";
+            }
+        }
+    }
+
+}
@@ -0,0 +1,76 @@
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1060;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+}
+
+.generic-detail {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1070;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 2rem;
+    max-width: 600px;
+    width: 90vw;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    color: var(--text-primary);
+}
+
+.detail-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.detail-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: rotate(90deg);
+}
+
+.detail-header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.category-badge {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    background: var(--accent);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+.detail-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+}
+
+.markdown-content {
+    line-height: 1.6;
+}
+
+.markdown-content p {
+    margin-bottom: 1rem;
+}