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

Vibe deck improvements

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-06-25 11:27:13 -04:00
parent f8b0974b79
commit 0289063d29
13 changed files with 716 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Chrono/Server/Program.cs
+1
View File
@@ -7,6 +7,7 @@ builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<Shared.Services.CardRenderingService>();
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<AppDbContext>(options =>
Chrono/Shared/Components/CardDetailModal.razor
+150
View File
@@ -0,0 +1,150 @@
@namespace Shared.Components
@using Chrono.Model
@if (Card != null)
{
<div class="detail-overlay" @onclick="Close"></div>
<div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
<button class="detail-close" @onclick="Close"><i class="bi bi-x-lg"></i></button>
<div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
@if (HasImage)
{
<div class="detail-image">
<img src="@Card.ImagePath" alt="@Card.Name"
onerror="this.style.display='none';this.parentElement.style.display='none'" />
</div>
}
<div class="detail-info">
<div class="detail-header">
<h2>@Card.Name</h2>
<div class="detail-meta">
<span class="meta-badge category @Card.Category?.ToLowerInvariant()">@Card.Category</span>
@if (Card.Cost.HasValue)
{
<span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @Card.Cost</span>
}
@if (Card.Attack.HasValue)
{
<span class="meta-badge attack"><i class="bi bi-crosshair"></i> @Card.Attack</span>
}
@if (Card.Health.HasValue)
{
<span class="meta-badge health"><i class="bi bi-heart-fill"></i> @Card.Health</span>
}
@if (Card.Speed != null)
{
<span class="meta-badge speed"><i class="bi bi-wind"></i> @Card.Speed</span>
}
</div>
</div>
@if (Card.Faction != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-flag-fill"></i> Faction</span>
<span class="field-value">@Card.Faction</span>
</div>
}
@if (Card.Description != null)
{
<div class="detail-field description">
<span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
<span class="field-value">@RenderCardDescription(Card.Description)</span>
</div>
}
@if (Card.Set != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-collection"></i> Set</span>
<span class="field-value">@Card.Set</span>
</div>
}
@if (Card.Archetypes is { Count: > 0 })
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
<span class="field-value">@string.Join(", ", Card.Archetypes)</span>
</div>
}
@if (Card.ImmortalizeWhen != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
<span class="field-value">@Card.ImmortalizeWhen</span>
</div>
}
@if (Card.HasImmortalize)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
<span class="field-value">
@foreach (var name in Card.ImmortalizeTo!)
{
var targetName = name;
var target = LookupCard(targetName);
if (target != null)
{
<button class="inline-card-btn" @onclick="() => SelectCard(target)">@targetName</button>
}
else
{
@targetName
}
}
</span>
</div>
}
@if (Card.ImmortalizeFrom != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
<span class="field-value">
@{
var fromCard = LookupCard(Card.ImmortalizeFrom);
if (fromCard != null)
{
<button class="inline-card-btn" @onclick="() => SelectCard(fromCard)">@Card.ImmortalizeFrom</button>
}
else
{
@Card.ImmortalizeFrom
}
}
</span>
</div>
}
</div>
</div>
</div>
}
@code {
[Parameter] public CardData? Card { get; set; }
[Parameter] public EventCallback OnClose { get; set; }
[Parameter] public EventCallback<CardData> OnSelectCard { get; set; }
[Parameter] public RenderFragment<string>? DescriptionRenderer { get; set; }
private bool HasImage => Card?.ImageFile is { Length: > 0 } && Card.ImageFile != "placeholder.png";
private async Task Close() => await OnClose.InvokeAsync();
private async Task SelectCard(CardData card) => await OnSelectCard.InvokeAsync(card);
private RenderFragment RenderCardDescription(string description)
{
if (DescriptionRenderer != null) return DescriptionRenderer(description);
return builder => builder.AddContent(0, description);
}
private CardData? LookupCard(string cardName)
{
return CardDatabase.Cards.FirstOrDefault(c =>
string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
}
}
Chrono/Shared/Components/CardDetailModal.razor.css
+255
View File
@@ -0,0 +1,255 @@
/* ── Card Detail Overlay (inline modal) ── */
.detail-overlay {
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: 16px;
padding: 0;
max-width: 720px;
width: 92vw;
max-height: 88vh;
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.92);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.detail-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 1;
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;
font-size: 0.8rem;
transition: all var(--transition);
}
.detail-close:hover {
background: rgba(255, 255, 255, 0.15);
}
.detail-layout {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
}
.detail-image {
flex: 0 0 260px;
}
.detail-image img {
width: 100%;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.card-detail-noimg {
max-width: 460px;
}
.layout-noimg {
justify-content: center;
}
.detail-info {
flex: 1;
min-width: 0;
}
.detail-header {
margin-bottom: 1rem;
}
.detail-header h2 {
margin: 0 0 0.75rem;
font-size: 1.4rem;
line-height: 1.3;
}
.detail-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.meta-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.6rem;
border-radius: 100px;
background: var(--bg-hover);
color: var(--text-secondary);
border: 1px solid var(--border);
}
.meta-badge.category.agent,
.meta-badge.category.immortalized {
background: rgba(79, 195, 247, 0.15);
color: #4fc3f7;
border-color: rgba(79, 195, 247, 0.3);
}
.meta-badge.category.spell {
background: rgba(206, 147, 216, 0.15);
color: #ce93d8;
border-color: rgba(206, 147, 216, 0.3);
}
.meta-badge.cost {
background: rgba(255, 215, 0, 0.12);
color: var(--gold);
border-color: rgba(255, 215, 0, 0.3);
}
.meta-badge.attack {
background: rgba(239, 83, 80, 0.15);
color: #ef5350;
border-color: rgba(239, 83, 80, 0.3);
}
.meta-badge.health {
background: rgba(102, 187, 106, 0.15);
color: #66bb6a;
border-color: rgba(102, 187, 106, 0.3);
}
.meta-badge.speed {
background: rgba(79, 195, 247, 0.12);
color: #4fc3f7;
border-color: rgba(79, 195, 247, 0.3);
}
.detail-field {
display: flex;
gap: 0.5rem;
margin-bottom: 0.6rem;
font-size: 0.88rem;
line-height: 1.45;
}
.detail-field.description {
background: var(--bg-elevated);
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
border-left: 3px solid var(--accent);
margin-top: 0.25rem;
}
.field-label {
flex-shrink: 0;
color: var(--text-muted);
font-size: 0.8rem;
font-weight: 500;
min-width: 7.5rem;
display: flex;
align-items: flex-start;
gap: 0.3rem;
}
.detail-field.description .field-label {
min-width: auto;
color: var(--accent);
}
.field-value {
color: var(--text-secondary);
}
.detail-field.description .field-value {
color: var(--text-primary);
font-style: italic;
}
.card-detail::-webkit-scrollbar {
width: 4px;
}
.card-detail::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
.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: color var(--transition), text-decoration-color var(--transition);
}
.inline-card-btn:hover {
color: #7b73ff;
text-decoration-color: #7b73ff;
}
@media (max-width: 768px) {
.detail-layout {
flex-direction: column;
padding: 1rem;
}
.detail-image {
flex: 0 0 auto;
max-width: 180px;
margin: 0 auto;
}
.card-detail,
.card-detail-noimg {
max-height: 90vh;
}
.card-detail-noimg {
max-width: 92vw;
}
}
Chrono/Shared/Components/CardGrid.razor
+46
View File
@@ -0,0 +1,46 @@
@namespace Shared.Components
@using Chrono.Model
<div class="deck-card-row">
@foreach (var group in Cards.GroupBy(x => x))
{
var cardName = group.Key;
var count = group.Count();
var card = LookupCard(cardName);
<button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
@onclick="() => SelectCard(card)">
<div class="mini-card-stack">
@for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
{
<div class="mini-card" style="--stack-index: @i">
<div class="mini-card-img">
<img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
loading="lazy"/>
</div>
</div>
}
@if (count > 1)
{
<div class="mini-card-count">@count</div>
}
</div>
</button>
}
</div>
@code {
[Parameter, EditorRequired] public List<string> Cards { get; set; } = [];
[Parameter] public EventCallback<CardData?> OnSelectCard { get; set; }
private async Task SelectCard(CardData? card) => await OnSelectCard.InvokeAsync(card);
private static readonly Dictionary<string, CardData> CardLookup = CardDatabase.Cards
.Where(c => !string.IsNullOrWhiteSpace(c.Name))
.GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
.ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
private CardData? LookupCard(string cardName)
{
return CardLookup.GetValueOrDefault(cardName);
}
}
Chrono/Shared/Components/CardGrid.razor.css
+92
View File
@@ -0,0 +1,92 @@
.deck-card-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.mini-card-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
display: block;
}
.mini-card {
width: 100px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color var(--transition), transform var(--transition);
position: relative;
aspect-ratio: 2.5 / 3.5;
display: flex;
flex-direction: column;
}
.mini-card:hover {
border-color: var(--accent);
z-index: 10;
}
.mini-card-img {
flex: 1;
overflow: hidden;
background: var(--bg-primary);
display: flex;
align-items: center;
justify-content: center;
}
.mini-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.mini-card-name {
font-size: 0.7rem;
font-weight: 500;
padding: 0.25rem 0.3rem;
text-align: center;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--bg-elevated);
border-top: 1px solid var(--border);
}
.mini-card-stack {
position: relative;
width: 110px;
height: 140px;
}
.mini-card-stack .mini-card {
position: absolute;
top: calc(var(--stack-index) * 4px);
left: calc(var(--stack-index) * 4px);
z-index: calc(10 - var(--stack-index));
}
.mini-card-count {
position: absolute;
top: 0.25rem;
right: 0.25rem;
background: var(--accent);
color: white;
font-size: 0.65rem;
font-weight: 800;
padding: 0.1rem 0.3rem;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 20;
}
.mini-card-btn.is-stacked:hover .mini-card {
transform: translate(calc(var(--stack-index) * 2px), calc(var(--stack-index) * -2px));
}
Chrono/Shared/Components/ManaCurve.razor
+20
View File
@@ -0,0 +1,20 @@
@namespace Shared.Components
<div class="mana-curve">
@foreach (var entry in Distribution)
{
var height = MaxCount > 0 ? (entry.Count * 100 / MaxCount) : 0;
<div class="mana-bar-container">
<div class="mana-bar-label">@entry.Count</div>
<div class="mana-bar" style="height: @($"{Math.Max(height, 5)}%")"></div>
<div class="mana-cost">@(entry.Cost >= MaxCostLabel ? $"{MaxCostLabel}+" : entry.Cost.ToString())</div>
</div>
}
</div>
@code {
[Parameter, EditorRequired] public List<(int Cost, int Count)> Distribution { get; set; } = [];
[Parameter] public int MaxCostLabel { get; set; } = 10;
private int MaxCount => Distribution.Count > 0 ? Distribution.Max(x => x.Count) : 0;
}
Chrono/Shared/Components/ManaCurve.razor.css
+43
View File
@@ -0,0 +1,43 @@
.mana-curve {
display: flex;
align-items: flex-end;
gap: 0.5rem;
height: 80px;
margin-top: 1rem;
padding: 0 0.5rem;
}
.mana-bar-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.mana-bar-label {
font-size: 0.7rem;
color: var(--text-muted);
margin-bottom: 0.2rem;
}
.mana-bar {
width: 100%;
background: var(--accent);
border-radius: 4px 4px 0 0;
min-height: 4px;
transition: height 0.3s ease;
}
.mana-cost {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
margin-top: 0.4rem;
background: var(--bg-elevated);
width: 100%;
text-align: center;
border-radius: 4px;
padding: 0.1rem 0;
}
Chrono/Shared/Pages/DeckDetail.razor
+16 -307
View File
@@ -1,4 +1,5 @@
@namespace Shared.Pages
@inject CardRenderingService CardRenderer
@page "/decks/{Name}"
<PageTitle>@deck?.Name</PageTitle>
@@ -39,41 +40,14 @@
}
</div>
@{
var distribution = GetManaDistribution();
var maxCount = distribution.Max(x => x.Count);
}
<div class="mana-curve">
@foreach (var entry in distribution)
{
var height = maxCount > 0 ? (entry.Count * 100 / maxCount) : 0;
<div class="mana-bar-container">
<div class="mana-bar-label">@entry.Count</div>
<div class="mana-bar" style="height: @($"{Math.Max(height, 5)}%")"></div>
<div class="mana-cost">@(entry.Cost >= 10 ? "10+" : entry.Cost.ToString())</div>
</div>
}
</div>
<ManaCurve Distribution="GetManaDistribution()" MaxCostLabel="10" />
</header>
@if (deck.Keycards.Count > 0)
{
<section class="deck-section">
<h2><i class="bi bi-star-fill" style="color: var(--gold);"></i> Keycards</h2>
<div class="deck-card-row">
@foreach (var cardName in deck.Keycards)
{
var card = LookupCard(cardName);
<button class="mini-card-btn" @onclick="() => SelectCard(card)">
<div class="mini-card">
<div class="mini-card-img">
<img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
loading="lazy"/>
</div>
</div>
</button>
}
</div>
<CardGrid Cards="deck.Keycards" OnSelectCard="SelectCard" />
</section>
}
@@ -81,47 +55,13 @@
{
<section class="deck-section">
<h2><i class="bi bi-shuffle"></i> Divers</h2>
<div class="deck-card-row">
@foreach (var cardName in deck.Divers)
{
var card = LookupCard(cardName);
<button class="mini-card-btn" @onclick="() => SelectCard(card)">
<div class="mini-card">
<div class="mini-card-img">
<img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
loading="lazy"/>
</div>
</div>
</button>
}
</div>
<CardGrid Cards="deck.Divers" OnSelectCard="SelectCard" />
</section>
}
<section class="deck-section">
<h2><i class="bi bi-collection-fill"></i> Cards</h2>
<div class="deck-card-row">
@foreach (var group in deck.Cards.GroupBy(x => x))
{
var cardName = group.Key;
var count = group.Count();
var card = LookupCard(cardName);
<button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
@onclick="() => SelectCard(card)">
<div class="mini-card-stack">
@for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
{
<div class="mini-card" style="--stack-index: @i">
<div class="mini-card-img">
<img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
loading="lazy"/>
</div>
</div>
}
</div>
</button>
}
</div>
<CardGrid Cards="deck.Cards" OnSelectCard="SelectCard" />
</section>
@if (deck.Description != null)
@@ -129,7 +69,7 @@
<section class="deck-section description">
<h2><i class="bi bi-chat-quote-fill"></i> Description</h2>
<div class="deck-description">
@RenderDescription(deck.Description)
@CardRenderer.RenderDescription(deck.Description, SelectCard)
</div>
</section>
}
@@ -137,128 +77,10 @@
}
</div>
@if (selectedCard != null)
{
<div class="detail-overlay" @onclick="CloseDetail"></div>
<div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
<button class="detail-close" @onclick="CloseDetail"><i class="bi bi-x-lg"></i></button>
<div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
@if (HasImage)
{
<div class="detail-image">
<img src="@selectedCard.ImagePath" alt="@selectedCard.Name"
onerror="this.style.display='none';this.parentElement.style.display='none'" />
</div>
}
<div class="detail-info">
<div class="detail-header">
<h2>@selectedCard.Name</h2>
<div class="detail-meta">
<span class="meta-badge category @selectedCard.Category?.ToLowerInvariant()">@selectedCard.Category</span>
@if (selectedCard.Cost.HasValue)
{
<span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @selectedCard.Cost</span>
}
@if (selectedCard.Attack.HasValue)
{
<span class="meta-badge attack"><i class="bi bi-crosshair"></i> @selectedCard.Attack</span>
}
@if (selectedCard.Health.HasValue)
{
<span class="meta-badge health"><i class="bi bi-heart-fill"></i> @selectedCard.Health</span>
}
@if (selectedCard.Speed != null)
{
<span class="meta-badge speed"><i class="bi bi-wind"></i> @selectedCard.Speed</span>
}
</div>
</div>
@if (selectedCard.Faction != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-flag-fill"></i> Faction</span>
<span class="field-value">@selectedCard.Faction</span>
</div>
}
@if (selectedCard.Description != null)
{
<div class="detail-field description">
<span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
<span class="field-value">@RenderCardDescription(selectedCard.Description)</span>
</div>
}
@if (selectedCard.Set != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-collection"></i> Set</span>
<span class="field-value">@selectedCard.Set</span>
</div>
}
@if (selectedCard.Archetypes is { Count: > 0 })
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
<span class="field-value">@string.Join(", ", selectedCard.Archetypes)</span>
</div>
}
@if (selectedCard.ImmortalizeWhen != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
<span class="field-value">@selectedCard.ImmortalizeWhen</span>
</div>
}
@if (selectedCard.HasImmortalize)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
<span class="field-value">
@foreach (var name in selectedCard.ImmortalizeTo!)
{
var targetName = name;
var target = LookupCard(targetName);
if (target != null)
{
<button class="inline-card-btn" @onclick="() => SelectCard(target)">@targetName</button>
}
else
{
@targetName
}
}
</span>
</div>
}
@if (selectedCard.ImmortalizeFrom != null)
{
<div class="detail-field">
<span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
<span class="field-value">
@{
var fromCard = LookupCard(selectedCard.ImmortalizeFrom);
if (fromCard != null)
{
<button class="inline-card-btn" @onclick="() => SelectCard(fromCard)">@selectedCard.ImmortalizeFrom</button>
}
else
{
@selectedCard.ImmortalizeFrom
}
}
</span>
</div>
}
</div>
</div>
</div>
}
<CardDetailModal Card="selectedCard"
OnClose="CloseDetail"
OnSelectCard="SelectCard"
DescriptionRenderer="@(desc => CardRenderer.RenderDescription(desc, SelectCard))" />
@code {
[Parameter] public string Name { get; set; } = "";
@@ -274,10 +96,14 @@
deck = DeckDatabase.Decks.FirstOrDefault(d => d.IsVisible && d.Name == decoded);
}
private static readonly Dictionary<string, CardData> CardLookup = CardDatabase.Cards
.Where(c => !string.IsNullOrWhiteSpace(c.Name))
.GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
.ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
private CardData? LookupCard(string cardName)
{
return CardDatabase.Cards.FirstOrDefault(c =>
string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
return CardLookup.GetValueOrDefault(cardName);
}
private void SelectCard(CardData? card)
@@ -309,121 +135,4 @@
return counts.OrderBy(x => x.Key).Select(x => (x.Key, x.Value)).ToList();
}
private RenderFragment RenderDescription(string description)
{
return builder =>
{
var cardNames = CardDatabase.Cards
.Select(c => c.Name)
.Where(n => !string.IsNullOrWhiteSpace(n))
.OrderByDescending(n => n.Length)
.ToList();
int sequence = 0;
var paragraphs = description.Split('\n', StringSplitOptions.RemoveEmptyEntries);
foreach (var paragraph in paragraphs)
{
builder.OpenElement(sequence++, "p");
var currentText = paragraph;
while (!string.IsNullOrEmpty(currentText))
{
int bestMatchIndex = -1;
string? bestMatchName = null;
foreach (var name in cardNames)
{
int index = currentText.IndexOf(name, StringComparison.OrdinalIgnoreCase);
if (index != -1 && (bestMatchIndex == -1 || index < bestMatchIndex))
{
bestMatchIndex = index;
bestMatchName = name;
}
}
if (bestMatchIndex != -1 && bestMatchName != null)
{
if (bestMatchIndex > 0)
{
builder.AddContent(sequence++, currentText.Substring(0, bestMatchIndex));
}
var card = LookupCard(bestMatchName);
builder.OpenElement(sequence++, "button");
builder.AddAttribute(sequence++, "class", "inline-card-btn");
builder.AddAttribute(sequence++, "onclick", EventCallback.Factory.Create(this, () => SelectCard(card)));
builder.AddContent(sequence++, bestMatchName);
builder.CloseElement();
currentText = currentText.Substring(bestMatchIndex + bestMatchName.Length);
}
else
{
builder.AddContent(sequence++, currentText);
currentText = string.Empty;
}
}
builder.CloseElement();
}
};
}
private RenderFragment RenderCardDescription(string description) => builder =>
{
var cardNames = CardDatabase.Cards
.Select(c => c.Name)
.Where(n => !string.IsNullOrWhiteSpace(n))
.OrderByDescending(n => n.Length)
.ToList();
int seq = 0;
var remaining = description;
while (!string.IsNullOrEmpty(remaining))
{
int bestIdx = -1;
string? bestName = null;
foreach (var name in cardNames)
{
int idx = remaining.IndexOf(name, StringComparison.OrdinalIgnoreCase);
if (idx != -1 && (bestIdx == -1 || idx < bestIdx))
{
bestIdx = idx;
bestName = name;
}
}
if (bestIdx != -1 && bestName != null)
{
if (bestIdx > 0)
builder.AddContent(seq++, remaining[..bestIdx]);
var card = LookupCard(bestName);
if (card != null)
{
builder.OpenElement(seq++, "button");
builder.AddAttribute(seq++, "class", "inline-card-btn");
builder.AddAttribute(seq++, "onclick",
EventCallback.Factory.Create(this, () => SelectCard(card)));
builder.AddContent(seq++, bestName);
builder.CloseElement();
}
else
{
builder.AddContent(seq++, bestName);
}
remaining = remaining[(bestIdx + bestName.Length)..];
}
else
{
builder.AddContent(seq++, remaining);
remaining = "";
}
}
};
}
Chrono/Shared/Pages/DeckDetail.razor.css
+2 -369
View File
@@ -62,50 +62,6 @@
margin: 0 0 1.5rem;
}
.mana-curve {
display: flex;
align-items: flex-end;
gap: 0.5rem;
height: 80px;
margin-top: 1rem;
padding: 0 0.5rem;
}
.mana-bar-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.mana-bar-label {
font-size: 0.7rem;
color: var(--text-muted);
margin-bottom: 0.2rem;
}
.mana-bar {
width: 100%;
background: var(--accent);
border-radius: 4px 4px 0 0;
min-height: 4px;
transition: height 0.3s ease;
}
.mana-cost {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-secondary);
margin-top: 0.4rem;
background: var(--bg-elevated);
width: 100%;
text-align: center;
border-radius: 4px;
padding: 0.1rem 0;
}
.deck-section {
margin-bottom: 2rem;
}
@@ -124,99 +80,6 @@
color: var(--text-primary);
}
.deck-card-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.mini-card-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
display: block;
}
.mini-card {
width: 100px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
transition: border-color var(--transition), transform var(--transition);
position: relative;
aspect-ratio: 2.5 / 3.5;
display: flex;
flex-direction: column;
}
.mini-card:hover {
border-color: var(--accent);
z-index: 10;
}
.mini-card-img {
flex: 1;
overflow: hidden;
background: var(--bg-primary);
display: flex;
align-items: center;
justify-content: center;
}
.mini-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
.mini-card-name {
font-size: 0.7rem;
font-weight: 500;
padding: 0.25rem 0.3rem;
text-align: center;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--bg-elevated);
border-top: 1px solid var(--border);
}
.mini-card-stack {
position: relative;
width: 110px;
height: 140px;
}
.mini-card-stack .mini-card {
position: absolute;
top: calc(var(--stack-index) * 4px);
left: calc(var(--stack-index) * 4px);
z-index: calc(10 - var(--stack-index));
}
.mini-card-count {
position: absolute;
top: 0.25rem;
right: 0.25rem;
background: var(--accent);
color: white;
font-size: 0.65rem;
font-weight: 800;
padding: 0.1rem 0.3rem;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 20;
}
.mini-card-btn.is-stacked:hover .mini-card {
transform: translate(calc(var(--stack-index) * 2px), calc(var(--stack-index) * -2px));
}
.deck-description {
font-size: 0.95rem;
line-height: 1.7;
@@ -244,220 +107,6 @@
margin-bottom: 1rem;
}
/* ── Card Detail Overlay (inline modal) ── */
.detail-overlay {
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: 16px;
padding: 0;
max-width: 720px;
width: 92vw;
max-height: 88vh;
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.92);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.detail-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 1;
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;
font-size: 0.8rem;
transition: all var(--transition);
}
.detail-close:hover {
background: rgba(255, 255, 255, 0.15);
}
.detail-layout {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
}
.detail-image {
flex: 0 0 260px;
}
.detail-image img {
width: 100%;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.card-detail-noimg {
max-width: 460px;
}
.layout-noimg {
justify-content: center;
}
.detail-info {
flex: 1;
min-width: 0;
}
.detail-header {
margin-bottom: 1rem;
}
.detail-header h2 {
margin: 0 0 0.75rem;
font-size: 1.4rem;
line-height: 1.3;
}
.detail-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.meta-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.6rem;
border-radius: 100px;
background: var(--bg-hover);
color: var(--text-secondary);
border: 1px solid var(--border);
}
.meta-badge.category.agent,
.meta-badge.category.immortalized {
background: rgba(79, 195, 247, 0.15);
color: #4fc3f7;
border-color: rgba(79, 195, 247, 0.3);
}
.meta-badge.category.spell {
background: rgba(206, 147, 216, 0.15);
color: #ce93d8;
border-color: rgba(206, 147, 216, 0.3);
}
.meta-badge.cost {
background: rgba(255, 215, 0, 0.12);
color: var(--gold);
border-color: rgba(255, 215, 0, 0.3);
}
.meta-badge.attack {
background: rgba(239, 83, 80, 0.15);
color: #ef5350;
border-color: rgba(239, 83, 80, 0.3);
}
.meta-badge.health {
background: rgba(102, 187, 106, 0.15);
color: #66bb6a;
border-color: rgba(102, 187, 106, 0.3);
}
.meta-badge.speed {
background: rgba(79, 195, 247, 0.12);
color: #4fc3f7;
border-color: rgba(79, 195, 247, 0.3);
}
.detail-field {
display: flex;
gap: 0.5rem;
margin-bottom: 0.6rem;
font-size: 0.88rem;
line-height: 1.45;
}
.detail-field.description {
background: var(--bg-elevated);
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
border-left: 3px solid var(--accent);
margin-top: 0.25rem;
}
.field-label {
flex-shrink: 0;
color: var(--text-muted);
font-size: 0.8rem;
font-weight: 500;
min-width: 7.5rem;
display: flex;
align-items: flex-start;
gap: 0.3rem;
}
.detail-field.description .field-label {
min-width: auto;
color: var(--accent);
}
.field-value {
color: var(--text-secondary);
}
.detail-field.description .field-value {
color: var(--text-primary);
font-style: italic;
}
.card-detail::-webkit-scrollbar {
width: 4px;
}
.card-detail::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
.inline-card-btn {
background: none;
border: none;
@@ -479,23 +128,7 @@
}
@media (max-width: 768px) {
.detail-layout {
flex-direction: column;
padding: 1rem;
}
.detail-image {
flex: 0 0 auto;
max-width: 180px;
margin: 0 auto;
}
.card-detail,
.card-detail-noimg {
max-height: 90vh;
}
.card-detail-noimg {
max-width: 92vw;
.back-link {
margin-bottom: 1rem;
}
}
Chrono/Shared/Services/CardRenderingService.cs
+79
View File
@@ -0,0 +1,79 @@
using Microsoft.AspNetCore.Components;
using Chrono.Model;
using System.Text.RegularExpressions;
namespace Shared.Services;
public class CardRenderingService
{
private readonly List<string> _cardNames;
private readonly Dictionary<string, CardData> _cardLookup;
private readonly Regex _nameRegex;
public CardRenderingService()
{
var allCards = CardDatabase.Cards
.Where(c => !string.IsNullOrWhiteSpace(c.Name))
.ToList();
_cardLookup = allCards
.GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
.ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
_cardNames = allCards
.Select(c => c.Name)
.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);
}
public RenderFragment RenderDescription(string description, Action<CardData?> onCardClick)
{
return builder =>
{
int sequence = 0;
var paragraphs = description.Split('\n', StringSplitOptions.RemoveEmptyEntries);
foreach (var paragraph in paragraphs)
{
builder.OpenElement(sequence++, "p");
var matches = _nameRegex.Matches(paragraph);
int lastIndex = 0;
foreach (Match match in matches)
{
if (match.Index > lastIndex)
{
builder.AddContent(sequence++, paragraph.Substring(lastIndex, match.Index - lastIndex));
}
var cardName = match.Value;
var card = LookupCard(cardName);
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);
builder.CloseElement();
lastIndex = match.Index + match.Length;
}
if (lastIndex < paragraph.Length)
{
builder.AddContent(sequence++, paragraph.Substring(lastIndex));
}
builder.CloseElement();
}
};
}
private CardData? LookupCard(string cardName)
{
return _cardLookup.GetValueOrDefault(cardName);
}
}
Chrono/Shared/_Imports.razor
+2
View File
@@ -11,3 +11,5 @@
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.DataSource
@using Shared.Components
@using Shared.Services
Chrono/Web/Components/CardDialog.razor
+9 -4
View File
@@ -227,11 +227,16 @@
foreach (var name in cardNames)
{
int idx = remaining.IndexOf(name, StringComparison.OrdinalIgnoreCase);
if (idx != -1 && (bestIdx == -1 || idx < bestIdx))
var pattern = $@"\b{System.Text.RegularExpressions.Regex.Escape(name)}\b";
var match = System.Text.RegularExpressions.Regex.Match(remaining, pattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase);
if (match.Success)
{
bestIdx = idx;
bestName = name;
if (bestIdx == -1 || match.Index < bestIdx)
{
bestIdx = match.Index;
bestName = match.Value;
}
}
}
Chrono/Web/Program.cs
+1
View File
@@ -8,5 +8,6 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddTelerikBlazor();
builder.Services.AddSingleton<Shared.Services.CardRenderingService>();
await builder.Build().RunAsync();