Adding Syndicate Pages

2026-07-18 13:18:04 -04:00
parent 54e7dc06c0
commit c8d10c19de
35 changed files with 2119 additions and 468 deletions
@@ -136,7 +136,7 @@
            {
                <div class="card-cell @(selectedCard == card ? "selected" : "")"
                     style="--i: @idx"
-                     @onclick="() => SelectCard(card)">
+                     @onclick="() => SelectCard(card.Name)">
                    <div class="card-image-wrapper">
                        <div class="card-shimmer"></div>
                        <img src="@card.ImagePath" alt="@card.Name" loading="lazy"
@@ -147,6 +147,13 @@
                            <div class="card-cost-badge" title="Cost">@card.Cost</div>
                        }

+                        @if (card.IsSpell && !string.IsNullOrEmpty(card.Speed))
+                        {
+                            <div class="card-speed-badge" title="Speed">
+                                <i class="bi bi-wind"></i> @card.Speed
+                            </div>
+                        }
+
                        @if (card.IsImmortalized)
                        {
                            <div class="card-immortalize-badge" title="@(card.IsImmortalized ? "Immortalized" : "Immortalizes")">
@@ -389,10 +396,14 @@
        search = "";
    }

-    private void SelectCard(CardData card)
+    private void SelectCard(string name)
    {
-        selectedCard = card;
-        _ = AnalyticsService.TrackEvent("select_item", new { item_name = card.Name, item_category = card.Category });
+        var card = allCards.FirstOrDefault(c => string.Equals(c.Name, name, StringComparison.OrdinalIgnoreCase));
+        if (card != null)
+        {
+            selectedCard = card;
+            _ = AnalyticsService.TrackEvent("select_item", new { item_name = card.Name, item_category = card.Category });
+        }
    }

    private void CloseDetail()
@@ -645,6 +645,29 @@
    border: 1px solid rgba(255, 215, 0, 0.3);
 }

+.card-speed-badge {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: #ce93d8; /* Match spell category color */
+    font-weight: 700;
+    font-size: 0.65rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid rgba(206, 147, 216, 0.3);
+    z-index: 2;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}
+
+.card-speed-badge i {
+    font-size: 0.75rem;
+}
+
 /* ── Card Label ── */
 .card-label {
    display: flex;
@@ -0,0 +1,105 @@
+@page "/syndicate-pairings"
+@using Model
+@using Chrono.Components
+@inject NavigationManager Navigation
+
+<HeadContent>
+    <meta name="description" content="Explore all syndicate pairings in Chrono CCG."/>
+</HeadContent>
+
+<div class="syndicates-container">
+    <div class="syndicates-header">
+        <h1>Syndicate Pairings</h1>
+        <p class="text-secondary">Explore all @pairings.Count combinations of syndicates</p>
+    </div>
+
+    <div class="pairings-grid">
+        @foreach (var doc in pairings)
+        {
+            var s1 = doc.Syndicates?[0] ?? "";
+            var s2 = doc.Syndicates?[1] ?? "";
+            <div class="pairing-card" @onclick="() => OpenPairing(doc)">
+                <div class="pairing-display">
+                    <div class="syndicate-item @s1.ToLowerInvariant()">
+                        <span class="syn-icon"></span>
+                        <span class="syn-name">@s1</span>
+                    </div>
+                    <div class="pairing-separator">
+                        <i class="bi bi-x-lg"></i>
+                    </div>
+                    <div class="syndicate-item @s2.ToLowerInvariant()">
+                        <span class="syn-icon"></span>
+                        <span class="syn-name">@s2</span>
+                    </div>
+                </div>
+                <div class="pairing-info">
+                    <span class="pairing-label">Dual-Syndicate Pairing</span>
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate" />
+<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate" />
+<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc" />
+
+@code {
+    private List<DocData> pairings = [];
+    private DocData? selectedDoc;
+    private CardData? selectedCard;
+    private DocData? selectedGenericDoc;
+
+    protected override void OnInitialized()
+    {
+        pairings = DocDatabase.Docs
+            .Where(d => d.Category == "Syndicate Pairings")
+            .OrderBy(d => d.Title)
+            .ToList();
+    }
+
+    private void OpenPairing(DocData doc)
+    {
+        selectedDoc = doc;
+    }
+
+    private void ClosePairing()
+    {
+        selectedDoc = null;
+    }
+
+    private void CloseCard()
+    {
+        selectedCard = null;
+    }
+
+    private void CloseGenericDoc()
+    {
+        selectedGenericDoc = null;
+    }
+
+    private void HandleNavigate(string name)
+    {
+        var card = CardDatabase.Cards.FirstOrDefault(c => string.Equals(c.Name, name, StringComparison.OrdinalIgnoreCase));
+        if (card != null)
+        {
+            if (card.Category is "Agent" or "Spell")
+            {
+                selectedCard = card;
+            }
+            else
+            {
+                selectedGenericDoc = new DocData { Title = card.Name, Content = card.Description ?? "", Category = card.Category };
+            }
+            StateHasChanged();
+            return;
+        }
+
+        var doc = DocDatabase.Docs.FirstOrDefault(d => string.Equals(d.Title, name, StringComparison.OrdinalIgnoreCase));
+        if (doc != null)
+        {
+            selectedGenericDoc = doc;
+            StateHasChanged();
+        }
+    }
+}
@@ -0,0 +1,217 @@
+.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; }
+    }
@@ -1,66 +1,97 @@
-@page "/syndicates"
+@page "/syndicates"
@using Model
@using Chrono.Components
@inject NavigationManager Navigation

 <HeadContent>
-    <meta name="description" content="Explore all syndicate pairings in Chrono CCG."/>
+    <meta name="description" content="Explore each syndicate in Chrono CCG."/>
 </HeadContent>

 <div class="syndicates-container">
    <div class="syndicates-header">
-        <h1>Syndicate Pairings</h1>
-        <p class="text-secondary">Explore all @pairings.Count combinations of syndicates</p>
+        <h1>Syndicates</h1>
+        <p class="text-secondary">Explore the @syndicates.Count core syndicates of Chrono CCG</p>
    </div>

    <div class="pairings-grid">
-        @foreach (var doc in pairings)
+        @foreach (var doc in syndicates)
        {
-            var s1 = doc.Syndicates?[0] ?? "";
-            var s2 = doc.Syndicates?[1] ?? "";
-            <div class="pairing-card" @onclick="() => OpenPairing(doc)">
+            var s = doc.Title;
+            <div class="pairing-card" @onclick="() => OpenSyndicate(doc)">
                <div class="pairing-display">
-                    <div class="syndicate-item @s1.ToLowerInvariant()">
+                    <div class="syndicate-item @s.ToLowerInvariant()">
                        <span class="syn-icon"></span>
-                        <span class="syn-name">@s1</span>
-                    </div>
-                    <div class="pairing-separator">
-                        <i class="bi bi-x-lg"></i>
-                    </div>
-                    <div class="syndicate-item @s2.ToLowerInvariant()">
-                        <span class="syn-icon"></span>
-                        <span class="syn-name">@s2</span>
+                        <span class="syn-name">@s</span>
                    </div>
                </div>
                <div class="pairing-info">
-                    <span class="pairing-label">Dual-Syndicate</span>
+                    <span class="pairing-label">Syndicate</span>
                </div>
            </div>
        }
    </div>
 </div>

-<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" />
+<SyndicateDialog Doc="selectedDoc" OnClose="CloseSyndicate" OnNavigate="HandleNavigate" />
+<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate" />
+<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc" />

@code {
-    private List<DocData> pairings = [];
+    private List<DocData> syndicates = [];
    private DocData? selectedDoc;
+    private CardData? selectedCard;
+    private DocData? selectedGenericDoc;

    protected override void OnInitialized()
    {
-        pairings = DocDatabase.Docs
-            .Where(d => d.Category == "Syndicate Pairings")
+        syndicates = DocDatabase.Docs
+            .Where(d => d.Category == "Syndicate")
            .OrderBy(d => d.Title)
            .ToList();
    }

-    private void OpenPairing(DocData doc)
+    private void OpenSyndicate(DocData doc)
    {
        selectedDoc = doc;
    }

-    private void ClosePairing()
+    private void CloseSyndicate()
    {
        selectedDoc = null;
    }
+
+    private void CloseCard()
+    {
+        selectedCard = null;
+    }
+
+    private void CloseGenericDoc()
+    {
+        selectedGenericDoc = null;
+    }
+
+    private void HandleNavigate(string name)
+    {
+        var card = CardDatabase.Cards.FirstOrDefault(c => string.Equals(c.Name, name, StringComparison.OrdinalIgnoreCase));
+        if (card != null)
+        {
+            if (card.Category is "Agent" or "Spell")
+            {
+                selectedCard = card;
+            }
+            else
+            {
+                selectedGenericDoc = new DocData { Title = card.Name, Content = card.Description ?? "", Category = card.Category };
+            }
+            StateHasChanged();
+            return;
+        }
+
+        var doc = DocDatabase.Docs.FirstOrDefault(d => string.Equals(d.Title, name, StringComparison.OrdinalIgnoreCase));
+        if (doc != null)
+        {
+            selectedGenericDoc = doc;
+            StateHasChanged();
+        }
+    }
 }
@@ -11,7 +11,7 @@

 .pairings-grid {
    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
 }

@@ -56,6 +56,7 @@
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
+    display: inline-block;
 }

 .syn-name {
@@ -64,12 +65,6 @@
    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;
@@ -85,15 +80,6 @@
    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; }
@@ -111,107 +97,3 @@
        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; }
-    }