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

Agent displayed data makes more sense and fixed load screen

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-06-18 00:07:47 -04:00
parent ee204dde46
commit 4ec6c84b4c
4 changed files with 146 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Chrono/Web/Pages/Agents.razor
+5 -5
View File
@@ -17,7 +17,7 @@
Height="700px"
class="agents-grid">
<GridColumns>
<GridColumn Title="Im." Width="30px">
<GridColumn Field="@nameof(CardData.HasImmortalize)" Title="Im." Width="120px">
<Template>
@if (((CardData)context).HasImmortalize)
{
@@ -34,10 +34,10 @@
</div>
</Template>
</GridColumn>
<GridColumn Field="@nameof(CardData.Cost)" Title="Cost" Width="60px"/>
<GridColumn Field="@nameof(CardData.Faction)" Title="Faction" Width="110px"/>
<GridColumn Field="@nameof(CardData.Attack)" Title="ATK" Width="60px"/>
<GridColumn Field="@nameof(CardData.Health)" Title="HP" Width="60px"/>
<GridColumn Field="@nameof(CardData.Cost)" Title="Cost" Width="120px"/>
<GridColumn Field="@nameof(CardData.Faction)" Title="Faction" Width="140px"/>
<GridColumn Field="@nameof(CardData.Attack)" Title="ATK" Width="120px"/>
<GridColumn Field="@nameof(CardData.Health)" Title="HP" Width="120px"/>
<GridColumn Field="@nameof(CardData.Description)" Title="Description" Width="400px"/>
</GridColumns>
Chrono/Web/Pages/Agents.razor.css
+15 -2
View File
@@ -81,8 +81,21 @@
color: var(--text-primary);
}
.agents-page ::deep .k-pager-nav {
color: var(--text-secondary);
.agents-page ::deep .k-pager-wrap {
color: #e8e8f0;
}
.agents-page ::deep .k-pager-nav,
.agents-page ::deep .k-pager-numbers,
.agents-page ::deep .k-pager-numbers .k-link,
.agents-page ::deep .k-pager-input,
.agents-page ::deep .k-pager-info {
color: #e8e8f0;
}
.agents-page ::deep .k-pager-nav:hover,
.agents-page ::deep .k-pager-numbers .k-link:hover {
color: #ffffff;
}
.agents-header {
Chrono/Web/wwwroot/css/app.css
+109
View File
@@ -116,3 +116,112 @@ a, .btn-link {
border-color: var(--border);
color: var(--text-secondary);
}
/* ── Loading Screen ── */
.loading-screen {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center, #141428 0%, #0b0b1a 100%);
gap: 0.75rem;
z-index: 9999;
}
.loading-content {
position: relative;
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.loading-ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
position: absolute;
}
.ring-track {
fill: none;
stroke: var(--border);
stroke-width: 5;
}
.ring-fill {
fill: none;
stroke: var(--accent);
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 263.9;
stroke-dashoffset: calc(263.9 - (263.9 * var(--blazor-load-percentage, 0%)) / 100);
transition: stroke-dashoffset 0.2s ease;
filter: drop-shadow(0 0 6px var(--accent-glow));
}
.loading-icon {
font-size: 1.5rem;
color: var(--accent);
animation: loading-pulse 1.5s ease-in-out infinite;
z-index: 1;
}
@keyframes loading-pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.15); opacity: 1; }
}
.loading-title {
font-size: 1.4rem;
font-weight: 700;
margin: 0;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #e8e8f0 0%, #6c63ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.loading-subtitle {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.loading-bar {
width: 12rem;
margin-top: 0.5rem;
}
.loading-bar-track {
width: 100%;
height: 3px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.loading-bar-fill {
height: 100%;
width: calc(var(--blazor-load-percentage, 0%));
background: linear-gradient(90deg, var(--accent), #8b83ff);
border-radius: 2px;
transition: width 0.2s ease;
}
.loading-status {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
}
.loading-status::after {
content: var(--blazor-load-percentage-text, "Loading...");
}
Chrono/Web/wwwroot/index.html
+16 -4
View File
@@ -21,11 +21,23 @@
<body>
<div id="app">
<svg class="loading-progress">
<circle cx="50%" cy="50%" r="40%"/>
<circle cx="50%" cy="50%" r="40%"/>
<div class="loading-screen">
<div class="loading-content">
<svg class="loading-ring" viewBox="0 0 100 100">
<circle class="ring-track" cx="50" cy="50" r="42"/>
<circle class="ring-fill" cx="50" cy="50" r="42"/>
</svg>
<div class="loading-progress-text"></div>
<div class="loading-icon">✦</div>
</div>
<h1 class="loading-title">Chrono CCG</h1>
<p class="loading-subtitle">Card Gallery</p>
<div class="loading-bar">
<div class="loading-bar-track">
<div class="loading-bar-fill"></div>
</div>
</div>
<p class="loading-status"></p>
</div>
</div>
<div id="blazor-error-ui">