diff --git a/Chrono/Cloud/Components/Layout/MainLayout.razor b/Chrono/Cloud/Components/Layout/MainLayout.razor index 56f22af..7e6a004 100644 --- a/Chrono/Cloud/Components/Layout/MainLayout.razor +++ b/Chrono/Cloud/Components/Layout/MainLayout.razor @@ -1,4 +1,5 @@ @inherits LayoutComponentBase +@inject Shared.Services.CardPreviewService PreviewService
@@ -9,6 +10,9 @@
@Body + +
diff --git a/Chrono/Shared/Components/CardGrid.razor b/Chrono/Shared/Components/CardGrid.razor index b3990f5..782c32e 100644 --- a/Chrono/Shared/Components/CardGrid.razor +++ b/Chrono/Shared/Components/CardGrid.razor @@ -1,4 +1,6 @@ -@namespace Shared.Components +@namespace Shared.Components + +@inject Shared.Services.CardPreviewService PreviewService
@foreach (var group in Cards.GroupBy(x => x)) @@ -7,7 +9,9 @@ var count = group.Count(); var card = LookupCard(cardName); +
+
+
+ @if (!string.IsNullOrEmpty(Doc.Category)) + { + @Doc.Category + } +

@Doc.Title

+
+ + @if (!string.IsNullOrWhiteSpace(Doc.Content)) + { +
+
+ @RenderDescription(Doc.Content) +
+
+ } +
+
+
+} + +@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 = ""; + } + } + } + +} diff --git a/Chrono/Shared/Components/DocDetailModal.razor.css b/Chrono/Shared/Components/DocDetailModal.razor.css new file mode 100644 index 0000000..0c709cc --- /dev/null +++ b/Chrono/Shared/Components/DocDetailModal.razor.css @@ -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; +} diff --git a/Chrono/Shared/Pages/Agents.razor b/Chrono/Shared/Pages/Agents.razor index 147e7b8..64172c1 100644 --- a/Chrono/Shared/Pages/Agents.razor +++ b/Chrono/Shared/Pages/Agents.razor @@ -1,4 +1,5 @@ @namespace Shared.Pages +@inject Shared.Services.CardPreviewService PreviewService @page "/agents" Chrono CCG - Agents @@ -29,10 +30,15 @@ diff --git a/Chrono/Shared/Pages/DeckDetail.razor b/Chrono/Shared/Pages/DeckDetail.razor index 2d217e5..572b144 100644 --- a/Chrono/Shared/Pages/DeckDetail.razor +++ b/Chrono/Shared/Pages/DeckDetail.razor @@ -1,5 +1,6 @@ @namespace Shared.Pages @inject CardRenderingService CardRenderer +@inject Shared.Services.CardPreviewService PreviewService @page "/decks/{Name}" Chrono CCG - @(deck?.Name ?? "Deck Details") @@ -75,7 +76,7 @@

Description

- @CardRenderer.RenderDescription(deck.Description, SelectCard) + @CardRenderer.RenderDescription(deck.Description, SelectCard, doc => PreviewService.SelectDoc(doc), PreviewService)
} @@ -86,7 +87,7 @@ + DescriptionRenderer="@(desc => CardRenderer.RenderDescription(desc, SelectCard, doc => PreviewService.SelectDoc(doc), PreviewService))"/> @code { [Parameter] public string Name { get; set; } = ""; diff --git a/Chrono/Shared/Pages/Docs.razor b/Chrono/Shared/Pages/Docs.razor index 0e3ddc6..503ea9b 100644 --- a/Chrono/Shared/Pages/Docs.razor +++ b/Chrono/Shared/Pages/Docs.razor @@ -1,3 +1,5 @@ +@inject Shared.Services.CardRenderingService CardRenderer +@inject Shared.Services.CardPreviewService PreviewService @namespace Shared.Pages @page "/docs" @@ -85,7 +87,9 @@ @if (key == "description") { -

@val

+
+ @CardRenderer.RenderDescription(val, _ => {}, doc => PreviewService.SelectDoc(doc), PreviewService) +
} else { diff --git a/Chrono/Standalone/Pages/SyndicatePairings.razor b/Chrono/Shared/Pages/SyndicatePairings.razor similarity index 89% rename from Chrono/Standalone/Pages/SyndicatePairings.razor rename to Chrono/Shared/Pages/SyndicatePairings.razor index 84d0557..0fd2d9a 100644 --- a/Chrono/Standalone/Pages/SyndicatePairings.razor +++ b/Chrono/Shared/Pages/SyndicatePairings.razor @@ -1,5 +1,5 @@ @page "/syndicate-pairings" -@using Chrono.Components +@namespace Shared.Pages @@ -38,9 +38,9 @@
- - - + + + @code { private List pairings = []; diff --git a/Chrono/Shared/Pages/SyndicatePairings.razor.css b/Chrono/Shared/Pages/SyndicatePairings.razor.css new file mode 100644 index 0000000..92b6a9a --- /dev/null +++ b/Chrono/Shared/Pages/SyndicatePairings.razor.css @@ -0,0 +1,130 @@ +.syndicates-container { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +.syndicates-header { + margin-bottom: 2rem; + text-align: center; +} + +.pairings-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1.5rem; +} + +.pairing-card { + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.5rem; + display: flex; + flex-direction: column; + align-items: center; + transition: transform var(--transition), box-shadow var(--transition); + cursor: pointer; +} + +.pairing-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow); + border-color: var(--accent); +} + +.pairing-display { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; + width: 100%; + justify-content: center; +} + +.syndicate-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + flex: 1; +} + +.syn-icon { + width: 24px; + height: 24px; + border-radius: 50%; + background: currentColor; + box-shadow: 0 0 10px currentColor; +} + +.syn-name { + font-size: 0.9rem; + font-weight: 600; + color: var(--text-primary); +} + +.pairing-separator { + color: var(--text-muted); + font-size: 0.8rem; + opacity: 0.5; +} + +.pairing-info { + border-top: 1px solid var(--border); + padding-top: 0.75rem; + width: 100%; + text-align: center; +} + +.pairing-label { + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-muted); +} + +.syn-icon { + width: 24px; + height: 24px; + border-radius: 50%; + background: currentColor; + box-shadow: 0 0 10px currentColor; + display: inline-block; /* Ensure visibility */ +} + +/* Syndicate Colors */ +.singularity { + color: #ffffff; +} + +.phasetide { + color: #2196f3; +} + +.silence { + color: #9c27b0; +} + +.lifeblood { + color: #4caf50; +} + +.sungrace { + color: #ff9800; +} + +.splintergleam { + color: #f44336; +} + +@media (max-width: 600px) { + .pairings-grid { + grid-template-columns: 1fr; + } + + .syndicates-container { + padding: 1rem; + } +} diff --git a/Chrono/Standalone/Components/Syndicates.razor b/Chrono/Shared/Pages/Syndicates.razor similarity index 87% rename from Chrono/Standalone/Components/Syndicates.razor rename to Chrono/Shared/Pages/Syndicates.razor index e79e9b2..ed08ef8 100644 --- a/Chrono/Standalone/Components/Syndicates.razor +++ b/Chrono/Shared/Pages/Syndicates.razor @@ -1,5 +1,5 @@ -@page "/syndicates" -@using Chrono.Components +@page "/syndicates" +@namespace Shared.Pages @@ -30,9 +30,9 @@ - - - + + + @code { private List syndicates = []; diff --git a/Chrono/Standalone/Components/Syndicates.razor.css b/Chrono/Shared/Pages/Syndicates.razor.css similarity index 100% rename from Chrono/Standalone/Components/Syndicates.razor.css rename to Chrono/Shared/Pages/Syndicates.razor.css diff --git a/Chrono/Shared/Services/CardPreviewService.cs b/Chrono/Shared/Services/CardPreviewService.cs index 522a55b..10fc1f1 100644 --- a/Chrono/Shared/Services/CardPreviewService.cs +++ b/Chrono/Shared/Services/CardPreviewService.cs @@ -5,6 +5,7 @@ namespace Shared.Services; public class CardPreviewService { public CardData? HoveredCard { get; private set; } + public DocData? SelectedDoc { get; private set; } public double X { get; private set; } public double Y { get; private set; } public bool IsVisible { get; private set; } @@ -26,6 +27,12 @@ public class CardPreviewService NotifyStateChanged(); } + public void SelectDoc(DocData? doc) + { + SelectedDoc = doc; + NotifyStateChanged(); + } + private void NotifyStateChanged() { OnChange?.Invoke(); diff --git a/Chrono/Shared/Services/CardRenderingService.cs b/Chrono/Shared/Services/CardRenderingService.cs index 0a4c7e5..91d0adb 100644 --- a/Chrono/Shared/Services/CardRenderingService.cs +++ b/Chrono/Shared/Services/CardRenderingService.cs @@ -7,8 +7,9 @@ namespace Shared.Services; public class CardRenderingService { private readonly Dictionary _cardLookup; - private readonly List _cardNames; - private readonly Regex _nameRegex; + private readonly Dictionary _docLookup; + private readonly List _allTerms; + private readonly Regex _termRegex; public CardRenderingService() { @@ -20,16 +21,25 @@ public class CardRenderingService .GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase) .ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase); - _cardNames = allCards - .Select(c => c.Name) + var allDocs = DocDatabase.Docs + .Where(d => !string.IsNullOrWhiteSpace(d.Title)) + .ToList(); + + _docLookup = allDocs + .GroupBy(d => d.Title, StringComparer.OrdinalIgnoreCase) + .ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase); + + _allTerms = _cardLookup.Keys + .Concat(_docLookup.Keys) + .Distinct(StringComparer.OrdinalIgnoreCase) .OrderByDescending(n => n.Length) .ToList(); - var pattern = string.Join("|", _cardNames.Select(n => $@"\b{Regex.Escape(n)}\b")); - _nameRegex = new Regex(pattern, RegexOptions.IgnoreCase | RegexOptions.Compiled); + var pattern = string.Join("|", _allTerms.Select(n => $@"\b{Regex.Escape(n)}\b")); + _termRegex = new Regex(pattern, RegexOptions.IgnoreCase | RegexOptions.Compiled); } - public RenderFragment RenderDescription(string description, Action onCardClick) + public RenderFragment RenderDescription(string description, Action onCardClick, Action? onDocClick = null, CardPreviewService? previewService = null) { return builder => { @@ -40,7 +50,7 @@ public class CardRenderingService { builder.OpenElement(sequence++, "p"); - var matches = _nameRegex.Matches(paragraph); + var matches = _termRegex.Matches(paragraph); var lastIndex = 0; foreach (Match match in matches) @@ -48,14 +58,33 @@ public class CardRenderingService if (match.Index > lastIndex) builder.AddContent(sequence++, paragraph.Substring(lastIndex, match.Index - lastIndex)); - var cardName = match.Value; - var card = LookupCard(cardName); + var term = match.Value; + var card = LookupCard(term); + var doc = LookupDoc(term); builder.OpenElement(sequence++, "button"); builder.AddAttribute(sequence++, "class", "inline-card-btn"); - builder.AddAttribute(sequence++, "onclick", - EventCallback.Factory.Create(this, () => onCardClick(card))); - builder.AddContent(sequence++, cardName); + + if (card != null) + { + builder.AddAttribute(sequence++, "onclick", + EventCallback.Factory.Create(this, () => onCardClick(card))); + + if (previewService != null) + { + builder.AddAttribute(sequence++, "onmouseenter", + EventCallback.Factory.Create(this, e => previewService.Show(card, e.ClientX, e.ClientY))); + builder.AddAttribute(sequence++, "onmouseleave", + EventCallback.Factory.Create(this, () => previewService.Hide())); + } + } + else if (doc != null && onDocClick != null) + { + builder.AddAttribute(sequence++, "onclick", + EventCallback.Factory.Create(this, () => onDocClick(doc))); + } + + builder.AddContent(sequence++, term); builder.CloseElement(); lastIndex = match.Index + match.Length; @@ -68,8 +97,13 @@ public class CardRenderingService }; } - private CardData? LookupCard(string cardName) + private CardData? LookupCard(string name) { - return _cardLookup.GetValueOrDefault(cardName); + return _cardLookup.GetValueOrDefault(name); + } + + private DocData? LookupDoc(string name) + { + return _docLookup.GetValueOrDefault(name); } } \ No newline at end of file diff --git a/Chrono/Standalone/Components/Layout/MainLayout.razor b/Chrono/Standalone/Components/Layout/MainLayout.razor index 56f22af..7e6a004 100644 --- a/Chrono/Standalone/Components/Layout/MainLayout.razor +++ b/Chrono/Standalone/Components/Layout/MainLayout.razor @@ -1,4 +1,5 @@ @inherits LayoutComponentBase +@inject Shared.Services.CardPreviewService PreviewService
@@ -9,6 +10,9 @@
@Body + +
diff --git a/Chrono/Standalone/Pages/SyndicatePairings.razor.css b/Chrono/Standalone/Pages/SyndicatePairings.razor.css deleted file mode 100644 index 5837a0b..0000000 --- a/Chrono/Standalone/Pages/SyndicatePairings.razor.css +++ /dev/null @@ -1,244 +0,0 @@ -.syndicates-container { - max-width: 1200px; - margin: 0 auto; - padding: 2rem; -} - -.syndicates-header { - margin-bottom: 2rem; - text-align: center; -} - -.pairings-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 1.5rem; -} - -.pairing-card { - background: var(--bg-surface); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: 1.5rem; - display: flex; - flex-direction: column; - align-items: center; - transition: transform var(--transition), box-shadow var(--transition); - cursor: pointer; -} - -.pairing-card:hover { - transform: translateY(-4px); - box-shadow: var(--shadow); - border-color: var(--accent); -} - -.pairing-display { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1rem; - width: 100%; - justify-content: center; -} - -.syndicate-item { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - flex: 1; -} - -.syn-icon { - width: 24px; - height: 24px; - border-radius: 50%; - background: currentColor; - box-shadow: 0 0 10px currentColor; -} - -.syn-name { - font-size: 0.9rem; - font-weight: 600; - color: var(--text-primary); -} - -.pairing-separator { - color: var(--text-muted); - font-size: 0.8rem; - opacity: 0.5; -} - -.pairing-info { - border-top: 1px solid var(--border); - padding-top: 0.75rem; - width: 100%; - text-align: center; -} - -.pairing-label { - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--text-muted); -} - -.syn-icon { - width: 24px; - height: 24px; - border-radius: 50%; - background: currentColor; - box-shadow: 0 0 10px currentColor; - display: inline-block; /* Ensure visibility */ -} - -/* Syndicate Colors */ -.singularity { - color: #ffffff; -} - -.phasetide { - color: #2196f3; -} - -.silence { - color: #9c27b0; -} - -.lifeblood { - color: #4caf50; -} - -.sungrace { - color: #ff9800; -} - -.splintergleam { - color: #f44336; -} - -@media (max-width: 600px) { - .pairings-grid { - grid-template-columns: 1fr; - } - - .syndicates-container { - padding: 1rem; - } -} - -/* ── Dialog ── */ -.pairing-dialog { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 92vw; - max-width: 600px; - max-height: 85vh; - background: #1a1a1a; /* Explicit dark background */ - border: 1px solid var(--border); - border-radius: var(--radius-lg); - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); - z-index: 1050; - display: flex; - flex-direction: column; - overflow: hidden; - animation: dialog-enter 0.25s ease-out; -} - -@keyframes dialog-enter { - from { - opacity: 0; - transform: translate(-50%, -50%) scale(0.92); - } - to { - opacity: 1; - transform: translate(-50%, -50%) scale(1); - } -} - -.dialog-close { - position: absolute; - top: 0.75rem; - right: 0.75rem; - background: rgba(0, 0, 0, 0.5); - 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; - z-index: 2; - transition: all var(--transition); - font-size: 0.8rem; -} - -.dialog-close:hover { - background: rgba(255, 255, 255, 0.15); -} - -.dialog-header { - padding: 2.5rem 1.5rem 1.5rem; - background: #252525; /* Explicit slightly lighter dark */ - border-bottom: 1px solid var(--border); - text-align: center; -} - -.dialog-header h2 { - margin: 1.25rem 0 0; - font-size: 1.6rem; - font-weight: 700; - color: #ffffff; /* Explicit white */ -} - -.dialog-body { - padding: 1.5rem; - overflow-y: auto; - flex: 1; - background: #1a1a1a; /* Explicit dark */ -} - -.doc-content { - line-height: 1.7; - color: #e0e0e0; /* Explicit light gray */ - font-size: 1rem; -} - -.inline-card-ref { - font-weight: 600; - color: var(--accent); -} - -.doc-content p { - margin-bottom: 1.25rem; -} - -.empty-state { - text-align: center; - padding: 3rem 1rem; - color: var(--text-muted); -} - -.modal-backdrop { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.45); - backdrop-filter: blur(2px); - z-index: 1040; - animation: fade-in 0.2s ease-out; -} - -@keyframes fade-in { - from { - opacity: 0; - } - to { - opacity: 1; - } -}