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

Adding agents table UI

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-06-17 23:50:45 -04:00
parent 34cd7a9f13
commit c6b5f8b205
9 changed files with 193 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Chrono/Web/Layout/MainLayout.razor
+3 -1
View File
@@ -6,7 +6,9 @@
<main>
<article class="content px-4">
@Body
<TelerikRootComponent>
@Body
</TelerikRootComponent>
</article>
</main>
</div>
Chrono/Web/Layout/NavMenu.razor
+8 -3
View File
@@ -11,12 +11,17 @@
<nav class="nav flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
<i class="bi bi-house-door-fill nav-icon"></i> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="cards">
<span class="bi bi-collection-fill-nav-menu" aria-hidden="true"></span> Cards
<i class="bi bi-collection-fill nav-icon"></i> Cards
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="agents">
<i class="bi bi-people-fill nav-icon"></i> Agents
</NavLink>
</div>
</nav>
@@ -32,4 +37,4 @@
collapseNavMenu = !collapseNavMenu;
}
}
}
Chrono/Web/Layout/NavMenu.razor.css
+4 -21
View File
@@ -11,26 +11,11 @@
font-size: 1.1rem;
}
.bi {
display: inline-block;
position: relative;
width: 1.25rem;
height: 1.25rem;
.nav-icon {
margin-right: 0.75rem;
top: -1px;
background-size: cover;
}
.bi-house-door-fill-nav-menu {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}
.bi-plus-square-fill-nav-menu {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}
.bi-list-nested-nav-menu {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
font-size: 1.05rem;
width: 1.25rem;
text-align: center;
}
.nav-item {
@@ -71,12 +56,10 @@
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
Chrono/Web/Pages/Agents.razor
+58
View File
@@ -0,0 +1,58 @@
@page "/agents"
@using Chrono.Model
<PageTitle>Agents</PageTitle>
<div class="agents-page">
<div class="agents-header">
<h1>Agents</h1>
<p class="text-secondary">@agents.Count agents in the database</p>
</div>
<TelerikGrid Data="@agents"
Sortable="true"
FilterMode="@GridFilterMode.FilterRow"
Pageable="true"
PageSize="250"
Resizable="true"
Height="700px"
class="agents-grid">
<GridColumns>
<GridColumn Title="Im." Width="30px">
<Template>
@if (((CardData)context).HasImmortalize)
{
<i class="bi bi-star-fill" style="color: #ffd700;" title="Immortalizes"></i>
}
</Template>
</GridColumn>
<GridColumn Field="@nameof(CardData.Name)" Title="Card" Width="220px">
<Template>
<div class="agent-name-cell">
<img src="@(((CardData)context).ImagePath)" alt="@(((CardData)context).Name)" class="agent-thumb"/>
<span>@(((CardData)context).Name)</span>
</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.Description)" Title="Description" Width="400px"/>
</GridColumns>
</TelerikGrid>
</div>
@code {
private List<CardData> agents = [];
protected override void OnInitialized()
{
agents = CardDatabase.Cards
.Where(c => c.Category == "Agent")
.OrderBy(c => c.Cost)
.ThenBy(c => c.Name)
.ToList();
}
}
Chrono/Web/Pages/Agents.razor.css
+113
View File
@@ -0,0 +1,113 @@
.agents-page {
--kendo-color-app-surface: oklch(5.3% 0.013 270deg);
--kendo-color-subtle: oklch(64% 0.018 270deg);
--kendo-color-surface: oklch(10% 0.015 270deg);
--kendo-color-border: oklch(25% 0.025 270deg / 0.7);
--kendo-color-border-alt: oklch(30% 0.03 270deg / 0.5);
--kendo-color-base: oklch(16% 0.02 270deg);
--kendo-color-primary: oklch(55% 0.23 275deg);
--kendo-color-secondary: oklch(35% 0 0deg);
--kendo-color-tertiary: oklch(55% 0.15 240deg);
--kendo-color-info: oklch(65% 0.15 250deg);
--kendo-color-success: oklch(60% 0.15 140deg);
--kendo-color-warning: oklch(75% 0.14 85deg);
--kendo-color-error: oklch(55% 0.20 30deg);
--kendo-color-inverse: oklch(85% 0.01 270deg);
--kendo-color-series: oklch(55% 0.23 275deg);
max-width: 1400px;
margin: 0 auto;
padding: 1.5rem;
}
.agents-page ::deep .k-grid,
.agents-page ::deep .k-grid-container,
.agents-page ::deep .k-grid-content,
.agents-page ::deep .k-grid-header-wrap {
background: transparent;
color: inherit;
}
.agents-page ::deep .k-grid-header,
.agents-page ::deep .k-grid-footer,
.agents-page ::deep .k-pager-wrap {
background: var(--bg-elevated);
}
.agents-page ::deep .k-grid-header .k-header,
.agents-page ::deep .k-grid-header .k-column-title,
.agents-page ::deep .k-grid-header .k-link,
.agents-page ::deep .k-grid-header .k-grid-filter {
color: #e8e8f0;
}
.agents-page ::deep .k-grid-header .k-link:hover,
.agents-page ::deep .k-grid-header .k-grid-filter:hover {
color: #ffffff;
}
.agents-page ::deep .k-grid td,
.agents-page ::deep .k-grid-header th.k-header {
border-color: oklch(25% 0.025 270deg / 0.7);
}
.agents-page ::deep .k-grid tr.k-alt {
background: oklch(12% 0.015 270deg);
}
.agents-page ::deep .k-grid tr:hover {
background: oklch(20% 0.025 270deg);
}
.agents-page ::deep .k-grid-filter,
.agents-page ::deep .k-grid-filter:hover {
color: var(--text-secondary);
}
.agents-page ::deep .k-input,
.agents-page ::deep .k-picker {
color: var(--text-primary);
background: var(--bg-surface);
border-color: var(--border);
}
.agents-page ::deep .k-button-solid-base {
color: var(--text-secondary);
background: var(--bg-elevated);
border-color: var(--border);
}
.agents-page ::deep .k-button-solid-base:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.agents-page ::deep .k-pager-nav {
color: var(--text-secondary);
}
.agents-header {
margin-bottom: 1.5rem;
}
.agents-header h1 {
margin-bottom: 0.25rem;
}
.agents-header p {
font-size: 0.9rem;
margin: 0;
}
.agent-name-cell {
display: flex;
align-items: center;
gap: 0.6rem;
}
.agent-thumb {
width: 36px;
height: 50px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
Chrono/Web/Program.cs
+2
View File
@@ -1,5 +1,6 @@
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Telerik.Blazor;
using Web;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -7,5 +8,6 @@ builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddTelerikBlazor();
await builder.Build().RunAsync();
Chrono/Web/Web.csproj
+1
View File
@@ -10,6 +10,7 @@
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.9"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.9" PrivateAssets="all"/>
<PackageReference Include="Telerik.UI.for.Blazor" Version="14.0.0" />
</ItemGroup>
<ItemGroup>
Chrono/Web/_Imports.razor
+3 -1
View File
@@ -8,4 +8,6 @@
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Web
@using Web.Layout
@using Web.Layout
@using Telerik.Blazor
@using Telerik.Blazor.Components
Chrono/Web/wwwroot/index.html
+1
View File
@@ -13,6 +13,7 @@
<link rel="preload" id="webassembly" />
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="Web.styles.css" rel="stylesheet" />
<script type="importmap"></script>