This commit is contained in:
2026-07-18 15:21:20 -04:00
parent 6062d5b60c
commit 74f065e0f5
51 changed files with 634 additions and 285 deletions
+31 -8
View File
@@ -257,7 +257,8 @@
tableLines.Add(trimmedLine);
continue;
}
else if (inTable)
if (inTable)
{
RenderTable(builder, ref seq, tableLines);
tableLines.Clear();
@@ -272,13 +273,15 @@
builder.OpenElement(seq++, "ul");
inList = true;
}
var isCardListItem = trimmedLine.Contains("[[") && trimmedLine.Contains("]]");
builder.OpenElement(seq++, "li");
RenderInlines(builder, ref seq, trimmedLine[2..], true);
builder.CloseElement();
continue;
}
else if (inList)
if (inList)
{
builder.CloseElement(); // Close ul
inList = false;
@@ -339,6 +342,7 @@
RenderInlines(builder, ref seq, cell.Trim(), false);
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
startIdx = 2;
@@ -356,8 +360,10 @@
RenderInlines(builder, ref seq, cell.Trim(), false);
builder.CloseElement();
}
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
@@ -366,7 +372,7 @@
private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text, bool renderAsImage)
{
var remaining = text;
while (!string.IsNullOrEmpty(remaining))
{
var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
@@ -375,11 +381,28 @@
var bestIdx = int.MaxValue;
Match? bestMatch = null;
int matchType = 0; // 1: bold, 2: italic, 3: card
var matchType = 0; // 1: bold, 2: italic, 3: card
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 (cardMatch.Success && cardMatch.Index < bestIdx) { bestIdx = cardMatch.Index; bestMatch = cardMatch; matchType = 3; }
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 (cardMatch.Success && cardMatch.Index < bestIdx)
{
bestIdx = cardMatch.Index;
bestMatch = cardMatch;
matchType = 3;
}
if (bestMatch != null)
{
@@ -387,7 +410,7 @@
builder.AddContent(seq++, remaining[..bestIdx]);
var innerText = bestMatch.Groups[1].Value;
if (matchType == 1) // Bold
{
builder.OpenElement(seq++, "strong");
@@ -224,9 +224,17 @@
font-weight: 700;
}
.markdown-content h2 { font-size: 1.3rem; }
.markdown-content h3 { font-size: 1.2rem; }
.markdown-content h4 { font-size: 1rem; }
.markdown-content h2 {
font-size: 1.3rem;
}
.markdown-content h3 {
font-size: 1.2rem;
}
.markdown-content h4 {
font-size: 1rem;
}
.table-responsive {
overflow-x: auto;
@@ -1,4 +1,3 @@
@using Model
@using System.Text.RegularExpressions
@using Microsoft.AspNetCore.Components.Rendering
@namespace Chrono.Components
@@ -35,8 +34,15 @@
[Parameter] public DocData? Doc { get; set; }
[Parameter] public EventCallback OnClose { get; set; }
private void HandleClose() => _ = OnClose.InvokeAsync();
private void HandleBackdropClick() => _ = OnClose.InvokeAsync();
private void HandleClose()
{
_ = OnClose.InvokeAsync();
}
private void HandleBackdropClick()
{
_ = OnClose.InvokeAsync();
}
private RenderFragment RenderDescription(string content)
{
@@ -61,12 +67,14 @@
builder.OpenElement(seq++, "ul");
inList = true;
}
builder.OpenElement(seq++, "li");
RenderInlines(builder, ref seq, trimmedLine[2..]);
builder.CloseElement();
continue;
}
else if (inList)
if (inList)
{
builder.CloseElement();
inList = false;
@@ -94,10 +102,21 @@
var bestIdx = int.MaxValue;
Match? bestMatch = null;
int matchType = 0; // 1: bold, 2: italic
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 (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)
{
@@ -115,4 +134,5 @@
}
}
}
}
@@ -0,0 +1,97 @@
@page "/syndicates"
@using Chrono.Components
<HeadContent>
<meta name="description" content="Explore each syndicate in Chrono CCG."/>
</HeadContent>
<div class="syndicates-container">
<div class="syndicates-header">
<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 syndicates)
{
var s = doc.Title;
<div class="pairing-card" @onclick="() => OpenSyndicate(doc)">
<div class="pairing-display">
<div class="syndicate-item @s.ToLowerInvariant()">
<span class="syn-icon"></span>
<span class="syn-name">@s</span>
</div>
</div>
<div class="pairing-info">
<span class="pairing-label">Syndicate</span>
</div>
</div>
}
</div>
</div>
<SyndicateDialog Doc="selectedDoc" OnClose="CloseSyndicate" OnNavigate="HandleNavigate"/>
<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate"/>
<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
@code {
private List<DocData> syndicates = [];
private DocData? selectedDoc;
private CardData? selectedCard;
private DocData? selectedGenericDoc;
protected override void OnInitialized()
{
syndicates = DocDatabase.Docs
.Where(d => d.Category == "Syndicate")
.OrderBy(d => d.Title)
.ToList();
}
private void OpenSyndicate(DocData doc)
{
selectedDoc = doc;
}
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();
}
}
}
@@ -0,0 +1,116 @@
.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(250px, 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;
display: inline-block;
}
.syn-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
}
.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);
}
/* 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;
}
}
+5 -4
View File
@@ -141,7 +141,7 @@
<div class="card-shimmer"></div>
<img src="@card.ImagePath" alt="@card.Name" loading="lazy"
onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22280%22><rect fill=%22%23222244%22 width=%22200%22 height=%22280%22/><text fill=%22%23686888%22 font-size=%2214%22 x=%22100%22 y=%22140%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>No Image</text></svg>'"/>
@if (card.Cost.HasValue)
{
<div class="card-cost-badge" title="Cost">@card.Cost</div>
@@ -156,7 +156,8 @@
@if (card.IsImmortalized)
{
<div class="card-immortalize-badge" title="@(card.IsImmortalized ? "Immortalized" : "Immortalizes")">
<div class="card-immortalize-badge"
title="@(card.IsImmortalized ? "Immortalized" : "Immortalizes")">
<i class="bi bi-star-fill"></i>
</div>
}
@@ -169,7 +170,7 @@
{
<div class="card-description">@card.Description</div>
}
@if (card.IsImmortalized && !string.IsNullOrEmpty(card.ImmortalizeFrom))
{
<div class="card-immortalize-info">
@@ -246,7 +247,7 @@
private string categoryFilter = "";
private string immortalFilter = "";
private bool agentLink = true;
private HashSet<string> syndicateFilter = [];
private readonly HashSet<string> syndicateFilter = [];
private string costFilter = "";
private string sortBy = "Cost";
private bool sortDescending;
+34 -11
View File
@@ -221,16 +221,39 @@
background: var(--bg-elevated);
border-color: var(--border);
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Syndicate Colors */
.syndicate-btn.active.singularity { border-color: #ffffff; color: #ffffff; }
.syndicate-btn.active.phasetide { border-color: #2196f3; color: #2196f3; }
.syndicate-btn.active.silence { border-color: #9c27b0; color: #9c27b0; }
.syndicate-btn.active.lifeblood { border-color: #4caf50; color: #4caf50; }
.syndicate-btn.active.sungrace { border-color: #ff9800; color: #ff9800; }
.syndicate-btn.active.splintergleam { border-color: #f44336; color: #f44336; }
.syndicate-btn.active.singularity {
border-color: #ffffff;
color: #ffffff;
}
.syndicate-btn.active.phasetide {
border-color: #2196f3;
color: #2196f3;
}
.syndicate-btn.active.silence {
border-color: #9c27b0;
color: #9c27b0;
}
.syndicate-btn.active.lifeblood {
border-color: #4caf50;
color: #4caf50;
}
.syndicate-btn.active.sungrace {
border-color: #ff9800;
color: #ff9800;
}
.syndicate-btn.active.splintergleam {
border-color: #f44336;
color: #f44336;
}
.syn-icon {
width: 12px;
@@ -522,7 +545,7 @@
font-size: 0.85rem;
font-weight: 700;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: flex-start;
@@ -544,7 +567,7 @@
left: 0;
right: 0;
padding: 2.5rem 0.5rem 0.5rem;
background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
display: flex;
flex-direction: column;
gap: 0.25rem;
@@ -560,7 +583,7 @@
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.card-immortalize-info {
@@ -589,7 +612,7 @@
gap: 0.25rem;
font-weight: 800;
font-size: 1rem;
text-shadow: 0 1px 3px rgba(0,0,0,0.9);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.card-stats-row .stat.attack {
@@ -1,7 +1,5 @@
@page "/syndicate-pairings"
@using Model
@using Chrono.Components
@inject NavigationManager Navigation
<HeadContent>
<meta name="description" content="Explore all syndicate pairings in Chrono CCG."/>
@@ -40,9 +38,9 @@
</div>
</div>
<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate" />
<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate" />
<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc" />
<SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate"/>
<CardDialog Card="selectedCard" OnClose="CloseCard" OnNavigate="HandleNavigate"/>
<GenericDocDialog Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
@code {
private List<DocData> pairings = [];
@@ -91,6 +89,7 @@
{
selectedGenericDoc = new DocData { Title = card.Name, Content = card.Description ?? "", Category = card.Category };
}
StateHasChanged();
return;
}
@@ -102,4 +101,5 @@
StateHasChanged();
}
}
}
@@ -95,123 +95,150 @@
}
/* Syndicate Colors */
.singularity { color: #ffffff; }
.phasetide { color: #2196f3; }
.silence { color: #9c27b0; }
.lifeblood { color: #4caf50; }
.sungrace { color: #ff9800; }
.splintergleam { color: #f44336; }
.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;
}
/* ── 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); }
@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 {
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-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 {
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-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 */
}
.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;
}
.doc-content {
line-height: 1.7;
color: #e0e0e0; /* Explicit light gray */
font-size: 1rem;
}
.inline-card-ref {
font-weight: 600;
color: var(--accent);
}
.inline-card-ref {
font-weight: 600;
color: var(--accent);
}
.doc-content p {
margin-bottom: 1.25rem;
}
.doc-content p {
margin-bottom: 1.25rem;
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
}
.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;
}
.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; }
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}