JonathanMcCaffrey/ChronoCCG
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

More tests and WIP vibe work

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-07-18 15:07:21 -04:00
parent c8d10c19de
commit 6062d5b60c
25 changed files with 323 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Chrono/Shared/Components/CardPreview.razor
+32
View File
@@ -0,0 +1,32 @@
@using Shared.Services
@implements IDisposable
@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)
{
<span class="preview-cost"><i class="bi bi-lightning-fill"></i> @PreviewService.HoveredCard.Cost</span>
}
</div>
</div>
</div>
}
@code {
protected override void OnInitialized()
{
PreviewService.OnChange += StateHasChanged;
}
public void Dispose()
{
PreviewService.OnChange -= StateHasChanged;
}
}
Chrono/Shared/Components/CardPreview.razor.css
+33
View File
@@ -0,0 +1,33 @@
.card-preview-popup {
position: fixed;
z-index: 9999;
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;
}
.preview-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: var(--text-primary);
}
.preview-cost {
color: var(--accent);
font-weight: bold;
}
Chrono/Shared/Components/SyndicateDialog.razor
+258
View File
@@ -0,0 +1,258 @@
@using System.Text.RegularExpressions
@using Microsoft.AspNetCore.Components.Rendering
@namespace Shared.Components
@if (Doc != null)
{
<div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
<div class="card-detail card-detail-noimg">
<button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
<div class="detail-layout layout-noimg">
<div class="detail-info">
<div class="detail-header">
<div class="syndicate-badges">
<span class="syn-icon @Doc.Title.ToLowerInvariant()" title="@Doc.Title"></span>
</div>
<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; }
[Parameter] public EventCallback<string> OnNavigate { get; set; }
private void HandleClose()
{
_ = OnClose.InvokeAsync();
}
private void HandleBackdropClick()
{
_ = OnClose.InvokeAsync();
}
private void Navigate(string name)
{
_ = OnNavigate.InvokeAsync(name);
}
private static CardData? LookupCard(string cardName)
{
return CardDatabase.Cards.FirstOrDefault(c =>
string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
}
private static DocData? LookupDoc(string title)
{
return DocDatabase.Docs.FirstOrDefault(d =>
string.Equals(d.Title, title, StringComparison.OrdinalIgnoreCase));
}
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;
var tableLines = new List<string>();
var inTable = false;
for (var i = 0; i < lines.Length; i++)
{
var line = lines[i];
var trimmedLine = line.Trim();
// Handle Tables
if (trimmedLine.StartsWith("|") && trimmedLine.EndsWith("|"))
{
inTable = true;
tableLines.Add(trimmedLine);
continue;
}
else if (inTable)
{
RenderTable(builder, ref seq, tableLines);
tableLines.Clear();
inTable = false;
}
// Handle Lists
if (trimmedLine.StartsWith("- ") || trimmedLine.StartsWith("* "))
{
if (!inList)
{
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)
{
builder.CloseElement(); // Close ul
inList = false;
}
// Handle Headings
if (trimmedLine.StartsWith("### "))
{
builder.OpenElement(seq++, "h4");
RenderInlines(builder, ref seq, trimmedLine[4..], false);
builder.CloseElement();
}
else if (trimmedLine.StartsWith("## "))
{
builder.OpenElement(seq++, "h3");
RenderInlines(builder, ref seq, trimmedLine[3..], false);
builder.CloseElement();
}
else if (trimmedLine.StartsWith("# "))
{
builder.OpenElement(seq++, "h2");
RenderInlines(builder, ref seq, trimmedLine[2..], false);
builder.CloseElement();
}
else if (!string.IsNullOrWhiteSpace(trimmedLine))
{
builder.OpenElement(seq++, "p");
RenderInlines(builder, ref seq, line, false);
builder.CloseElement();
}
}
if (inTable) RenderTable(builder, ref seq, tableLines);
if (inList) builder.CloseElement();
};
}
private void RenderTable(RenderTreeBuilder builder, ref int seq, List<string> lines)
{
if (lines.Count < 2) return;
builder.OpenElement(seq++, "div");
builder.AddAttribute(seq++, "class", "table-responsive");
builder.OpenElement(seq++, "table");
builder.AddAttribute(seq++, "class", "markdown-table");
var hasHeader = lines.Count > 2 && lines[1].Contains("---");
var startIdx = 0;
if (hasHeader)
{
builder.OpenElement(seq++, "thead");
builder.OpenElement(seq++, "tr");
var cells = lines[0].Split('|', StringSplitOptions.RemoveEmptyEntries);
foreach (var cell in cells)
{
builder.OpenElement(seq++, "th");
RenderInlines(builder, ref seq, cell.Trim(), false);
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
startIdx = 2;
}
builder.OpenElement(seq++, "tbody");
for (var i = startIdx; i < lines.Count; i++)
{
if (i == 1 && hasHeader) continue;
builder.OpenElement(seq++, "tr");
var cells = lines[i].Split('|', StringSplitOptions.RemoveEmptyEntries);
foreach (var cell in cells)
{
builder.OpenElement(seq++, "td");
RenderInlines(builder, ref seq, cell.Trim(), false);
builder.CloseElement();
}
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
}
private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text, bool renderAsImage)
{
var remaining = text;
while (!string.IsNullOrEmpty(remaining))
{
var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
var italicMatch = Regex.Match(remaining, @"\*(.*?)\*");
var cardMatch = Regex.Match(remaining, @"\[\[(.*?)\]\]");
var bestIdx = int.MaxValue;
Match? bestMatch = null;
int 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 (bestMatch != null)
{
if (bestIdx > 0)
builder.AddContent(seq++, remaining[..bestIdx]);
var innerText = bestMatch.Groups[1].Value;
if (matchType == 1) // Bold
{
builder.OpenElement(seq++, "strong");
builder.AddContent(seq++, innerText);
builder.CloseElement();
}
else if (matchType == 2) // Italic
{
builder.OpenElement(seq++, "em");
builder.AddContent(seq++, innerText);
builder.CloseElement();
}
else if (matchType == 3) // Card Link / Doc Link
{
var card = LookupCard(innerText);
var doc = LookupDoc(innerText);
if (card != null || doc != null)
{
builder.OpenElement(seq++, "button");
builder.AddAttribute(seq++, "class", "inline-card-btn");
builder.AddAttribute(seq++, "onclick", EventCallback.Factory.Create(this, () => Navigate(innerText)));
builder.AddContent(seq++, innerText);
builder.CloseElement();
}
else
{
builder.AddContent(seq++, innerText);
}
}
remaining = remaining[(bestIdx + bestMatch.Length)..];
}
else
{
builder.AddContent(seq++, remaining);
remaining = "";
}
}
}
}
Chrono/Shared/Components/SyndicateDialog.razor.css
+200
View File
@@ -0,0 +1,200 @@
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.card-detail {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1050;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 0;
max-width: 1100px;
width: 95vw;
height: 90vh;
max-height: 95vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
color: var(--text-primary);
animation: detail-enter 0.25s ease-out;
}
@keyframes detail-enter {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.95);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.detail-close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-primary);
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.9rem;
transition: all var(--transition);
}
.detail-close:hover {
background: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
}
.detail-layout {
display: flex;
padding: 2.5rem 2rem 2rem;
}
.detail-info {
flex: 1;
min-width: 0;
}
.detail-header {
text-align: center;
margin-bottom: 2rem;
}
.syndicate-badges {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.syn-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 15px currentColor;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.detail-header h2 {
margin: 0 0 0.5rem;
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #fff 0%, #aaa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.detail-field {
margin-bottom: 1.5rem;
}
.detail-field.description {
padding: 0;
border-radius: 0;
border: none;
}
.detail-field.description .field-value {
color: var(--text-primary);
display: block;
font-size: 1.1rem;
}
.markdown-content {
color: var(--text-primary);
line-height: 1.6;
}
.markdown-content p {
margin-bottom: 1rem;
}
.markdown-content ul {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.markdown-content li {
margin-bottom: 0.5rem;
}
.markdown-content h2, .markdown-content h3, .markdown-content h4 {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-weight: 700;
}
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.3rem; }
.markdown-content h4 { font-size: 1.1rem; }
/* Syndicate Colors */
.lifeblood { color: #4caf50; }
.phasetide { color: #2196f3; }
.silence { color: #9c27b0; }
.singularity { color: #ffffff; }
.splintergleam { color: #f44336; }
.sungrace { color: #ff9800; }
.inline-card-btn {
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: inherit;
font-weight: 600;
color: var(--accent);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(108, 99, 255, 0.3);
transition: all var(--transition);
}
.inline-card-btn:hover {
color: #7b73ff;
text-decoration-color: #7b73ff;
}
.card-detail::-webkit-scrollbar {
width: 6px;
}
.card-detail::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
@media (max-width: 600px) {
.card-detail {
width: 95vw;
max-height: 90vh;
}
.detail-layout {
padding: 2rem 1.25rem;
}
}
Chrono/Shared/Components/SyndicatePairDialog.razor
+265
View File
@@ -0,0 +1,265 @@
@using System.Text.RegularExpressions
@using Microsoft.AspNetCore.Components.Rendering
@namespace Shared.Components
@if (Doc != null)
{
<div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
<div class="card-detail card-detail-noimg">
<button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
<div class="detail-layout layout-noimg">
<div class="detail-info">
<div class="detail-header">
<div class="syndicate-badges">
@if (Doc.Syndicates != null)
{
foreach (var syn in Doc.Syndicates)
{
<span class="syn-icon @syn.ToLowerInvariant()" title="@syn"></span>
}
}
</div>
<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; }
[Parameter] public EventCallback<string> OnNavigate { get; set; }
private void HandleClose()
{
_ = OnClose.InvokeAsync();
}
private void HandleBackdropClick()
{
_ = OnClose.InvokeAsync();
}
private void Navigate(string name)
{
_ = OnNavigate.InvokeAsync(name);
}
private static CardData? LookupCard(string cardName)
{
return CardDatabase.Cards.FirstOrDefault(c =>
string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
}
private static DocData? LookupDoc(string title)
{
return DocDatabase.Docs.FirstOrDefault(d =>
string.Equals(d.Title, title, StringComparison.OrdinalIgnoreCase));
}
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;
var tableLines = new List<string>();
var inTable = false;
for (var i = 0; i < lines.Length; i++)
{
var line = lines[i];
var trimmedLine = line.Trim();
// Handle Tables
if (trimmedLine.StartsWith("|") && trimmedLine.EndsWith("|"))
{
inTable = true;
tableLines.Add(trimmedLine);
continue;
}
else if (inTable)
{
RenderTable(builder, ref seq, tableLines);
tableLines.Clear();
inTable = false;
}
// Handle Lists
if (trimmedLine.StartsWith("- ") || trimmedLine.StartsWith("* "))
{
if (!inList)
{
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)
{
builder.CloseElement(); // Close ul
inList = false;
}
// Handle Headings
if (trimmedLine.StartsWith("### "))
{
builder.OpenElement(seq++, "h4");
RenderInlines(builder, ref seq, trimmedLine[4..], false);
builder.CloseElement();
}
else if (trimmedLine.StartsWith("## "))
{
builder.OpenElement(seq++, "h3");
RenderInlines(builder, ref seq, trimmedLine[3..], false);
builder.CloseElement();
}
else if (trimmedLine.StartsWith("# "))
{
builder.OpenElement(seq++, "h2");
RenderInlines(builder, ref seq, trimmedLine[2..], false);
builder.CloseElement();
}
else if (!string.IsNullOrWhiteSpace(trimmedLine))
{
builder.OpenElement(seq++, "p");
RenderInlines(builder, ref seq, line, false);
builder.CloseElement();
}
}
if (inTable) RenderTable(builder, ref seq, tableLines);
if (inList) builder.CloseElement();
};
}
private void RenderTable(RenderTreeBuilder builder, ref int seq, List<string> lines)
{
if (lines.Count < 2) return;
builder.OpenElement(seq++, "div");
builder.AddAttribute(seq++, "class", "table-responsive");
builder.OpenElement(seq++, "table");
builder.AddAttribute(seq++, "class", "markdown-table");
var hasHeader = lines.Count > 2 && lines[1].Contains("---");
var startIdx = 0;
if (hasHeader)
{
builder.OpenElement(seq++, "thead");
builder.OpenElement(seq++, "tr");
var cells = lines[0].Split('|', StringSplitOptions.RemoveEmptyEntries);
foreach (var cell in cells)
{
builder.OpenElement(seq++, "th");
RenderInlines(builder, ref seq, cell.Trim(), false);
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
startIdx = 2;
}
builder.OpenElement(seq++, "tbody");
for (var i = startIdx; i < lines.Count; i++)
{
if (i == 1 && hasHeader) continue;
builder.OpenElement(seq++, "tr");
var cells = lines[i].Split('|', StringSplitOptions.RemoveEmptyEntries);
foreach (var cell in cells)
{
builder.OpenElement(seq++, "td");
RenderInlines(builder, ref seq, cell.Trim(), false);
builder.CloseElement();
}
builder.CloseElement();
}
builder.CloseElement();
builder.CloseElement();
builder.CloseElement();
}
private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text, bool renderAsImage)
{
// Simple regex-based inline parser for Bold, Italics, and [[Card Links]]
var remaining = text;
while (!string.IsNullOrEmpty(remaining))
{
var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
var italicMatch = Regex.Match(remaining, @"\*(.*?)\*");
var cardMatch = Regex.Match(remaining, @"\[\[(.*?)\]\]");
var bestIdx = int.MaxValue;
Match? bestMatch = null;
int 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 (bestMatch != null)
{
if (bestIdx > 0)
builder.AddContent(seq++, remaining[..bestIdx]);
var innerText = bestMatch.Groups[1].Value;
if (matchType == 1) // Bold
{
builder.OpenElement(seq++, "strong");
builder.AddContent(seq++, innerText);
builder.CloseElement();
}
else if (matchType == 2) // Italic
{
builder.OpenElement(seq++, "em");
builder.AddContent(seq++, innerText);
builder.CloseElement();
}
else if (matchType == 3) // Card Link / Doc Link
{
var card = LookupCard(innerText);
var doc = LookupDoc(innerText);
if (card != null || doc != null)
{
builder.OpenElement(seq++, "button");
builder.AddAttribute(seq++, "class", "inline-card-btn");
builder.AddAttribute(seq++, "onclick", EventCallback.Factory.Create(this, () => Navigate(innerText)));
builder.AddContent(seq++, innerText);
builder.CloseElement();
}
else
{
builder.AddContent(seq++, innerText);
}
}
remaining = remaining[(bestIdx + bestMatch.Length)..];
}
else
{
builder.AddContent(seq++, remaining);
remaining = "";
}
}
}
}
Chrono/Shared/Components/SyndicatePairDialog.razor.css
+241
View File
@@ -0,0 +1,241 @@
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 1040;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.card-detail {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1050;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 0;
max-width: 1100px;
width: 95vw;
height: 90vh;
max-height: 95vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
color: var(--text-primary);
animation: detail-enter 0.25s ease-out;
}
@keyframes detail-enter {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.95);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.detail-close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-primary);
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.9rem;
transition: all var(--transition);
}
.detail-close:hover {
background: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
}
.detail-layout {
display: flex;
padding: 2.5rem 2rem 2rem;
}
.detail-info {
flex: 1;
min-width: 0;
}
.detail-header {
text-align: center;
margin-bottom: 2rem;
}
.syndicate-badges {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.syn-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 15px currentColor;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.detail-header h2 {
margin: 0 0 0.5rem;
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #fff 0%, #aaa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.detail-meta {
display: flex;
justify-content: center;
}
.meta-badge {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.3rem 0.8rem;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
color: var(--text-muted);
border: 1px solid var(--border);
}
.detail-field {
margin-bottom: 1.5rem;
}
.detail-field .field-label {
display: block;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.detail-field .field-value {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.6;
}
.detail-field.description {
padding: 0;
border-radius: 0;
border: none;
}
.detail-field.description .field-label {
margin-bottom: 0.75rem;
color: var(--accent);
display: flex;
align-items: center;
gap: 0.5rem;
}
.detail-field.description .field-value {
color: var(--text-primary);
display: block;
font-size: 1.1rem;
}
.markdown-content {
color: var(--text-primary);
line-height: 1.6;
}
.markdown-content p {
margin-bottom: 1rem;
}
.markdown-content ul {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.markdown-content li {
margin-bottom: 0.5rem;
}
.markdown-content h2, .markdown-content h3, .markdown-content h4 {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-weight: 700;
}
.markdown-content h2 { font-size: 1.5rem; }
.markdown-content h3 { font-size: 1.3rem; }
.markdown-content h4 { font-size: 1.1rem; }
/* Syndicate Colors */
.lifeblood { color: #4caf50; }
.phasetide { color: #2196f3; }
.silence { color: #9c27b0; }
.singularity { color: #ffffff; }
.splintergleam { color: #f44336; }
.sungrace { color: #ff9800; }
.inline-card-btn {
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: inherit;
font-weight: 600;
color: var(--accent);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(108, 99, 255, 0.3);
transition: all var(--transition);
}
.inline-card-btn:hover {
color: #7b73ff;
text-decoration-color: #7b73ff;
}
.card-detail::-webkit-scrollbar {
width: 6px;
}
.card-detail::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
@media (max-width: 600px) {
.card-detail {
width: 95vw;
max-height: 90vh;
}
.detail-layout {
padding: 2rem 1.25rem;
}
}
Chrono/Shared/Generated/Cards.g.cs
+1 -1
View File
@@ -25,7 +25,7 @@ public static class CardDatabase
{
Name = "Timeline",
Category = "Rule",
Description = "Provides a passive effect to all players. Only one timeline can be active at a time. The play who shifts to the timeline is considered the owner. The owner can be a bit of a confusing mechanic, but technically it can matter for some cards cares about WHO is triggering the effect.",
Description = "Provides a passive effect to all players. Only one timeline can be active at a time. The play who shifts to the timeline is considered the owner. The owner can be a bit of a confusing mechanic, but technically it can matter for some cards cares about WHO is triggering the effect. Like a timeline that deals damage and a card the counts the damage you have dealt.",
Archetypes = [
],
},
Chrono/Shared/Generated/Docs.g.cs
+2 -2
View File
@@ -35,7 +35,7 @@ public static class DocDatabase
Frontmatter = new()
{
{ "category", "Rule" },
{ "description", "Provides a passive effect to all players. Only one timeline can be active at a time. The play who shifts to the timeline is considered the owner. The owner can be a bit of a confusing mechanic, but technically it can matter for some cards cares about WHO is triggering the effect." },
{ "description", "Provides a passive effect to all players. Only one timeline can be active at a time. The play who shifts to the timeline is considered the owner. The owner can be a bit of a confusing mechanic, but technically it can matter for some cards cares about WHO is triggering the effect. Like a timeline that deals damage and a card the counts the damage you have dealt." },
},
},
new()
@@ -847,7 +847,7 @@ public static class DocDatabase
{
Title = "Splintergleam",
Category = "Syndicate",
Content = "# Timelines\n\n## Volcanic Rivers\n\nDeals 1 damage to each core when shifted to.\n\n## Torment\n\n# Mechanics\n\n## Bleed\n\nBleed.\n## Big Timeline Stack\n\nBig Timeline Stack\n## Fervor\n\nFervor\n\n## Self Wound\n\nSelf Wound\n\n\n# Key Cards\n\n## Defensive Cards:\n- [[Soothing Glow]]\n- [[Chaos Control]]\n- [[Radiant Channeling]]\n- [[Supernova]]\n- [[Throw into the Sun]]\n- [[Entropy's End]]\n\n\n## Threats\n- [[Canine Adjutant]]\n- [[Limit Breaker]]\n- [[Debris Collector]]\n- [[Jury of the Second Law]]\n- [[Lightsteel Colossus]]\n- [[APEX Starcruise]]\n- [[Devourer Spawn]]",
Content = "# Timelines\n\n## Volcanic Rivers\n\nDeals 1 damage to each core when shifted to.\n\n## Torment\n\n# Mechanics\n\n## Bleed\n\nBleed.\n## Big Timeline Stack\n\nBig Timeline Stack\n## Fervor\n\nFervor\n\n## Self Wound\n\nSelf Wound\n\n\n# Key Cards\n\n## Defensive Cards:\n- [[Bathe in Flames]]\n- [[Circle of Strife]]\n- [[Paradox Cacophony]]\n- [[Fervor]]\n- [[Sanguine Resurgence]]\n\n\n## Threats\n- [[Pit Dog]]\n- [[Bright-Eyed Supplicant]]\n- [[Blazing Shifter]]\n- [[Toothy Pugilist]]\n- [[Devoted Bloodletter]]\n- [[Hungry Engine]]\n- [[Frontline Juggernaut]]\n- [[Brutal Reveler]]\n- [[Gilded Behemoth]]",
Frontmatter = new()
{
{ "category", "Syndicate" },
Chrono/Shared/Pages/Agents.razor
+2
View File
@@ -1,5 +1,7 @@
@namespace Shared.Pages
@page "/agents"
@rendermode @(new InteractiveServerRenderMode(prerender: false))
@using Shared.Components
<PageTitle>Chrono CCG - Agents</PageTitle>
Chrono/Shared/Pages/Syndicates.razor
+98
View File
@@ -0,0 +1,98 @@
@page "/syndicates"
@rendermode @(new InteractiveServerRenderMode(prerender: false))
@using Model
@using Shared.Components
@inject NavigationManager Navigation
<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();
}
}
}
Chrono/Shared/Pages/Syndicates.razor.css
+99
View File
@@ -0,0 +1,99 @@
.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;
}
}
Chrono/Shared/Services/CardPreviewService.cs
+31
View File
@@ -0,0 +1,31 @@
using Microsoft.AspNetCore.Components;
using Model;
namespace Shared.Services;
public class CardPreviewService
{
public CardData? HoveredCard { get; private set; }
public double X { get; private set; }
public double Y { get; private set; }
public bool IsVisible { get; private set; }
public event Action? OnChange;
public void Show(CardData card, double x, double y)
{
HoveredCard = card;
X = x;
Y = y;
IsVisible = true;
NotifyStateChanged();
}
public void Hide()
{
IsVisible = false;
NotifyStateChanged();
}
private void NotifyStateChanged() => OnChange?.Invoke();
}