Replace frontend with Blazor UX implementation
This commit is contained in:
10
FAQ.md
10
FAQ.md
@@ -13,7 +13,15 @@ This keeps the first commit small while preserving CI discipline. Additional too
|
||||
|
||||
## Is frontend JavaScript handwritten?
|
||||
|
||||
No. Frontend source code lives in `RpgRoller/frontend/*.ts` and is compiled to `RpgRoller/wwwroot/*.js` for browser delivery.
|
||||
The runtime UI is now built with Blazor components (`RpgRoller/Components/*`).
|
||||
|
||||
There is still small handwritten JavaScript in `RpgRoller/wwwroot/js/rpgroller-api.js` for:
|
||||
|
||||
- browser `fetch` calls with cookie auth
|
||||
- SSE connection/reconnect handling
|
||||
- per-tab session storage helpers used by the Blazor UI
|
||||
|
||||
The TypeScript frontend folders remain in the repo for tooling and generated API client contract checks used by CI.
|
||||
|
||||
## Where is backend state stored locally?
|
||||
|
||||
|
||||
35
FRONTEND_PROGRESS.md
Normal file
35
FRONTEND_PROGRESS.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# Frontend Rebuild Progress (Blazor)
|
||||
|
||||
Tracking against `UX.md` tasks and decisions.
|
||||
|
||||
## Status Snapshot
|
||||
|
||||
- Branch: `feature/blazor-frontend-rebuild-ux`
|
||||
- Runtime frontend stack: Blazor (`RpgRoller/Components/*`) + browser JS interop (`wwwroot/js/rpgroller-api.js`)
|
||||
|
||||
## UX Checklist
|
||||
|
||||
| UX area | Status | Notes |
|
||||
|---|---|---|
|
||||
| 9.1 App load + session restore | Implemented | Health check on load, rulesets/session load, unauthorized session reset, API unhealthy retry banner. |
|
||||
| 9.2 Authentication view | Implemented | Register/login cards, required validation, register password length check, server-error display. |
|
||||
| 9.3 Shared authenticated header | Implemented | User chip, campaign/active context, connection state, screen switch, refresh, logout. |
|
||||
| 9.4 Play screen character column | Implemented | Character icon tabs, sheet, modal edit/create flows, activate action, skill list, roll controls, last roll card. |
|
||||
| 9.5 Play screen log column | Implemented | Chronological feed, private/public badges, private perspective styles (roller vs GM), local time + ISO tooltip. |
|
||||
| 9.6 Campaign management screen | Implemented | Campaign selector/summary, create form, details card, character management actions with modal edit pattern. |
|
||||
| 9.7 Tablet/mobile bottom bar | Implemented | `Character` / `Log` panel switch in play screen and per-tab session persistence. |
|
||||
| 10 Validation and error UX | Partially implemented | Required-field and common API errors are mapped; message/code-specific mapping is limited by current API exposing only text messages. |
|
||||
| 11 Empty/loading/disabled states | Implemented | Empty states, skeleton placeholders, mutation button disabling. |
|
||||
| 12 Real-time and sync rules | Implemented | Campaign-scoped SSE subscribe/unsubscribe, reconnect with exponential backoff, manual refresh fallback. |
|
||||
| 13 Accessibility requirements | Partially implemented | Keyboard-friendly controls, labels, focus styling, `aria-live` announcements; screen-reader validation for all flows still needs dedicated accessibility QA. |
|
||||
| 14 Content and copy guidance | Implemented | Direct action labels and corrective error copy used throughout. |
|
||||
| 15 Visual direction | Implemented | Tabletop utility styling, tokenized colors, responsive layout, private/public visual differentiation. |
|
||||
| 17 Next iteration targets: wireframes | Not yet implemented | No separate low-fidelity wireframe artifact added in repo. |
|
||||
| 17 Next iteration targets: component contracts doc | Not yet implemented | Component contract document not yet extracted from implementation. |
|
||||
| 17 Next iteration targets: visual token doc | Not yet implemented | Tokens are implemented in CSS but not yet documented in a dedicated spec file. |
|
||||
|
||||
## Follow-up Candidates
|
||||
|
||||
1. Add explicit machine-readable API error codes to HTTP responses for richer field-level mapping.
|
||||
2. Add automated accessibility checks (focus order, contrast, and screen-reader behavior assertions).
|
||||
3. Document component contracts and visual token references as separate markdown artifacts.
|
||||
24
README.md
24
README.md
@@ -2,11 +2,12 @@
|
||||
|
||||
Fresh full-stack starter scaffold:
|
||||
|
||||
- `RpgRoller/`: ASP.NET Core backend + static frontend output (`wwwroot`)
|
||||
- `RpgRoller/`: ASP.NET Core backend + Blazor frontend host (`Components` + `wwwroot`)
|
||||
- `RpgRoller/frontend/`: TypeScript frontend source
|
||||
- `RpgRoller.Tests/`: xUnit integration-heavy test project
|
||||
- `RpgRoller.sln`: solution used by local CI script
|
||||
- `UX.md`: frontend UX and interaction design specification (pre-implementation baseline)
|
||||
- `FRONTEND_PROGRESS.md`: implementation tracking (`Implemented` / `Partially implemented` / `Not yet implemented`)
|
||||
|
||||
Test layout:
|
||||
|
||||
@@ -25,10 +26,11 @@ Backend:
|
||||
|
||||
Frontend:
|
||||
|
||||
- `RpgRoller/frontend/app.ts`: orchestration entrypoint
|
||||
- `RpgRoller/frontend/app/`: split modules (`dom`, `state`, `loaders`, `render`, `events`, `actions`)
|
||||
- `RpgRoller/frontend/generated/`: generated API client source
|
||||
- `RpgRoller/wwwroot/`: compiled browser assets
|
||||
- `RpgRoller/Components/`: Blazor root app, routes, layout and page components
|
||||
- `RpgRoller/Components/Pages/Home.razor(.cs)`: main UX implementation for auth/play/management screens
|
||||
- `RpgRoller/wwwroot/js/rpgroller-api.js`: browser-side API + SSE + session storage interop for Blazor
|
||||
- `RpgRoller/wwwroot/styles.css`: responsive UX styling and theme tokens
|
||||
- `RpgRoller/frontend/generated/`: generated TypeScript API client source retained for contract/tooling parity
|
||||
|
||||
Backend state persistence:
|
||||
|
||||
@@ -92,10 +94,14 @@ To use a custom SQLite database path, set `ConnectionStrings__RpgRoller`.
|
||||
|
||||
## Implemented Frontend Scope
|
||||
|
||||
- TypeScript-driven UI for:
|
||||
- Blazor-driven UI for:
|
||||
- registration, login, logout
|
||||
- play screen and campaign management screen switch
|
||||
- campaign creation and selection
|
||||
- character creation and activation
|
||||
- skill creation and editing
|
||||
- character create/edit/activate via modal forms
|
||||
- skill create/edit via modal forms
|
||||
- public/private rolling and campaign log viewing
|
||||
- SSE-backed live refresh for selected campaign state/log
|
||||
- responsive play UX:
|
||||
- desktop two-column (character + log)
|
||||
- tablet/mobile panel switching with bottom tab bar (`Character` / `Log`)
|
||||
- SSE-backed live refresh with reconnect status + manual refresh fallback
|
||||
|
||||
24
RpgRoller.Tests/Api/FrontendHostTests.cs
Normal file
24
RpgRoller.Tests/Api/FrontendHostTests.cs
Normal file
@@ -0,0 +1,24 @@
|
||||
using Microsoft.AspNetCore.Mvc.Testing;
|
||||
|
||||
namespace RpgRoller.Tests;
|
||||
|
||||
public sealed class FrontendHostTests : ApiTestBase
|
||||
{
|
||||
public FrontendHostTests(WebApplicationFactory<Program> factory)
|
||||
: base(factory)
|
||||
{
|
||||
}
|
||||
|
||||
[Fact]
|
||||
public async Task RootPath_ServesBlazorFrontendShell()
|
||||
{
|
||||
using var factory = CreateFactory(1);
|
||||
using var client = factory.CreateClient(new WebApplicationFactoryClientOptions { AllowAutoRedirect = false });
|
||||
var response = await client.GetAsync("/");
|
||||
|
||||
Assert.Equal(HttpStatusCode.OK, response.StatusCode);
|
||||
var html = await response.Content.ReadAsStringAsync();
|
||||
Assert.Contains("_framework/blazor.web.js", html);
|
||||
Assert.Contains("Connecting...", html);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@attribute [ExcludeFromCodeCoverage]
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
@@ -1,7 +1,471 @@
|
||||
@page "/"
|
||||
@attribute [ExcludeFromCodeCoverage]
|
||||
@implements IAsyncDisposable
|
||||
|
||||
<main class="app-shell">
|
||||
<h1>RpgRoller</h1>
|
||||
<p class="status-line">Frontend migration in progress: Blazor shell is active.</p>
|
||||
</main>
|
||||
<div class="rr-app">
|
||||
<p class="sr-only" aria-live="polite">@LiveAnnouncement</p>
|
||||
|
||||
@if (!IsInitialized)
|
||||
{
|
||||
<main class="loading-shell" aria-busy="true" aria-live="polite">
|
||||
<h1>RpgRoller</h1>
|
||||
<p>Connecting...</p>
|
||||
</main>
|
||||
}
|
||||
else
|
||||
{
|
||||
@if (HasHealthIssue)
|
||||
{
|
||||
<section class="health-banner" role="alert">
|
||||
<div>
|
||||
<strong>API currently unavailable.</strong>
|
||||
<p>@HealthIssueMessage</p>
|
||||
</div>
|
||||
<button type="button" @onclick="RetryAfterHealthIssueAsync">Retry</button>
|
||||
</section>
|
||||
}
|
||||
|
||||
@if (User is null)
|
||||
{
|
||||
<main class="auth-shell">
|
||||
<h1>RpgRoller</h1>
|
||||
<p class="auth-subtitle">Register or log in to join a campaign session.</p>
|
||||
@if (!string.IsNullOrWhiteSpace(StatusMessage))
|
||||
{
|
||||
<p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
|
||||
}
|
||||
<div class="auth-grid">
|
||||
<section class="card auth-card">
|
||||
<h2>Register</h2>
|
||||
@if (!string.IsNullOrWhiteSpace(RegisterFormError))
|
||||
{
|
||||
<p class="form-error">@RegisterFormError</p>
|
||||
}
|
||||
<form class="form-grid" @onsubmit="RegisterAsync" @onsubmit:preventDefault>
|
||||
<label for="register-username">Username</label>
|
||||
<input id="register-username" @bind="RegisterForm.Username" @bind:event="oninput" autocomplete="username" />
|
||||
@if (RegisterErrors.TryGetValue("username", out var registerUsernameError))
|
||||
{
|
||||
<p class="field-error">@registerUsernameError</p>
|
||||
}
|
||||
<label for="register-display-name">Display name</label>
|
||||
<input id="register-display-name" @bind="RegisterForm.DisplayName" @bind:event="oninput" autocomplete="name" />
|
||||
@if (RegisterErrors.TryGetValue("displayName", out var registerDisplayNameError))
|
||||
{
|
||||
<p class="field-error">@registerDisplayNameError</p>
|
||||
}
|
||||
<label for="register-password">Password</label>
|
||||
<input id="register-password" type="password" @bind="RegisterForm.Password" @bind:event="oninput" autocomplete="new-password" />
|
||||
@if (RegisterErrors.TryGetValue("password", out var registerPasswordError))
|
||||
{
|
||||
<p class="field-error">@registerPasswordError</p>
|
||||
}
|
||||
<button type="submit" disabled="@IsMutating">@(IsMutating ? "Registering..." : "Register")</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="card auth-card">
|
||||
<h2>Login</h2>
|
||||
@if (!string.IsNullOrWhiteSpace(LoginFormError))
|
||||
{
|
||||
<p class="form-error">@LoginFormError</p>
|
||||
}
|
||||
<form class="form-grid" @onsubmit="LoginAsync" @onsubmit:preventDefault>
|
||||
<label for="login-username">Username</label>
|
||||
<input id="login-username" @bind="LoginForm.Username" @bind:event="oninput" autocomplete="username" />
|
||||
@if (LoginErrors.TryGetValue("username", out var loginUsernameError))
|
||||
{
|
||||
<p class="field-error">@loginUsernameError</p>
|
||||
}
|
||||
<label for="login-password">Password</label>
|
||||
<input id="login-password" type="password" @bind="LoginForm.Password" @bind:event="oninput" autocomplete="current-password" />
|
||||
@if (LoginErrors.TryGetValue("password", out var loginPasswordError))
|
||||
{
|
||||
<p class="field-error">@loginPasswordError</p>
|
||||
}
|
||||
<button type="submit" disabled="@IsMutating">@(IsMutating ? "Logging in..." : "Login")</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="workspace-shell">
|
||||
<header class="workspace-header">
|
||||
<div class="header-group brand">
|
||||
<h1>RpgRoller</h1>
|
||||
<p>Tabletop utility cockpit</p>
|
||||
</div>
|
||||
<div class="header-group context">
|
||||
<p><strong>@User.DisplayName</strong> <span class="muted">(@User.Username)</span></p>
|
||||
<p>Campaign: <strong>@(SelectedCampaignName ?? "No campaign selected")</strong></p>
|
||||
<p>Active: <strong>@(ActiveCharacterName ?? "None selected")</strong></p>
|
||||
</div>
|
||||
<div class="header-group controls">
|
||||
<p class="connection @ConnectionStateCssClass">@ConnectionStateLabel</p>
|
||||
<div class="switch-group" role="tablist" aria-label="Screen selector">
|
||||
<button type="button" class="switch @(CurrentScreen == "play" ? "active" : string.Empty)" @onclick="SwitchToPlayAsync">Play</button>
|
||||
<button type="button" class="switch @(CurrentScreen == "management" ? "active" : string.Empty)" @onclick="SwitchToManagementAsync">Campaign Management</button>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button type="button" @onclick="ManualRefreshAsync" disabled="@IsMutating">Refresh</button>
|
||||
<button type="button" class="ghost" @onclick="LogoutAsync" disabled="@IsMutating">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(StatusMessage))
|
||||
{
|
||||
<p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
|
||||
}
|
||||
|
||||
@if (CurrentScreen == "play")
|
||||
{
|
||||
<main class="play-screen @(MobilePanel == "log" ? "mobile-log" : "mobile-character")">
|
||||
<section class="card character-panel">
|
||||
<div class="section-head"><h2>Character Context</h2></div>
|
||||
@if (IsCampaignDataLoading)
|
||||
{
|
||||
<div class="skeleton-stack"><div class="skeleton-line"></div><div class="skeleton-line short"></div><div class="skeleton-line"></div></div>
|
||||
}
|
||||
else if (SelectedCampaign is null)
|
||||
{
|
||||
<p class="empty">No campaign selected. Choose one in Campaign Management.</p>
|
||||
}
|
||||
else if (SelectedCampaign.Characters.Count == 0)
|
||||
{
|
||||
<p class="empty">No characters in this campaign yet.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="character-picker" role="tablist" aria-label="Character picker">
|
||||
@foreach (var character in SelectedCampaign.Characters)
|
||||
{
|
||||
var isSelectedCharacter = SelectedCharacterId == character.Id;
|
||||
<button type="button" class="icon-tab @(isSelectedCharacter ? "active" : string.Empty)" aria-label="@character.Name" @onclick="() => SelectCharacter(character.Id)">
|
||||
<span class="icon-tab-glyph">@InitialsFor(character.Name)</span>
|
||||
<span class="icon-tab-text">@character.Name</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
@if (SelectedCharacter is not null)
|
||||
{
|
||||
<article class="character-sheet">
|
||||
<h3>@SelectedCharacter.Name</h3>
|
||||
<p>Owner: @OwnerLabel(SelectedCharacter.OwnerUserId)</p>
|
||||
<p>Campaign: @SelectedCampaign.Name</p>
|
||||
@if (SelectedCharacter.Id == ActiveCharacterId)
|
||||
{
|
||||
<span class="badge active">Active</span>
|
||||
}
|
||||
<div class="inline-actions">
|
||||
<button type="button" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" @onclick="() => OpenEditCharacterModal(SelectedCharacter)">Edit Character</button>
|
||||
<button type="button" disabled="@(IsMutating || !CanActivateCharacter(SelectedCharacter))" @onclick="() => ActivateCharacterAsync(SelectedCharacter.Id)">Activate Character</button>
|
||||
</div>
|
||||
</article>
|
||||
<article class="skills-section">
|
||||
<div class="section-head">
|
||||
<h3>Skills</h3>
|
||||
<div class="inline-actions">
|
||||
<button type="button" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" @onclick="OpenCreateSkillModal">Create Skill</button>
|
||||
<button type="button" disabled="@(IsMutating || SelectedSkill is null || !CanEditSkill(SelectedSkill))" @onclick="OpenEditSkillModal">Edit Skill</button>
|
||||
</div>
|
||||
</div>
|
||||
@if (SelectedCharacterSkills.Count == 0)
|
||||
{
|
||||
<p class="empty">No skills for this character yet.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="skill-list">
|
||||
@foreach (var skill in SelectedCharacterSkills)
|
||||
{
|
||||
var isSelectedSkill = SelectedSkillId == skill.Id;
|
||||
<button type="button" class="skill-item @(isSelectedSkill ? "active" : string.Empty)" @onclick="() => SelectSkill(skill.Id)">
|
||||
<strong>@skill.Name</strong><span>@skill.DiceRollDefinition</span>
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<form class="roll-panel" @onsubmit="RollSelectedSkillAsync" @onsubmit:preventDefault>
|
||||
<label for="roll-visibility">Visibility</label>
|
||||
<select id="roll-visibility" @bind="RollVisibility">
|
||||
<option value="public">Public</option>
|
||||
<option value="private">Private</option>
|
||||
</select>
|
||||
<button type="submit" disabled="@(IsMutating || SelectedSkill is null || !CanRollSkill(SelectedSkill))">Roll Skill</button>
|
||||
</form>
|
||||
</article>
|
||||
}
|
||||
}
|
||||
<article class="last-roll">
|
||||
<h3>Last Roll</h3>
|
||||
@if (LastRoll is null)
|
||||
{
|
||||
<p class="empty">No roll yet.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p class="roll-total">@LastRoll.Result</p>
|
||||
<p>@LastRoll.Breakdown</p>
|
||||
<p><span class="badge @(LastRoll.Visibility == "private" ? "private-self" : "public")">@LastRoll.Visibility</span> <time title="@LastRoll.TimestampUtc.ToString("O")">@LastRoll.TimestampUtc.ToLocalTime().ToString("g")</time></p>
|
||||
}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<aside class="card log-panel">
|
||||
<div class="section-head"><h2>Campaign Log</h2></div>
|
||||
@if (IsCampaignDataLoading)
|
||||
{
|
||||
<div class="skeleton-stack"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line short"></div></div>
|
||||
}
|
||||
else if (CampaignLog.Count == 0)
|
||||
{
|
||||
<p class="empty">No log entries yet.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<ul class="log-list">
|
||||
@foreach (var entry in CampaignLog)
|
||||
{
|
||||
<li class="log-entry @LogEntryCssClass(entry)">
|
||||
<p><strong>@RollerLabel(entry)</strong> rolled <strong>@SkillLabel(entry.SkillId)</strong> with <strong>@CharacterLabel(entry.CharacterId)</strong></p>
|
||||
<p>@entry.Breakdown</p>
|
||||
<p class="log-meta"><span class="badge @VisibilityBadgeCssClass(entry)">@VisibilityLabel(entry)</span> <time title="@entry.TimestampUtc.ToString("O")">@entry.TimestampUtc.ToLocalTime().ToString("g")</time></p>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</aside>
|
||||
</main>
|
||||
<nav class="mobile-bottom-nav" aria-label="Play panel selector">
|
||||
<button type="button" class="switch @(MobilePanel == "character" ? "active" : string.Empty)" @onclick="SetMobilePanelCharacterAsync">Character</button>
|
||||
<button type="button" class="switch @(MobilePanel == "log" ? "active" : string.Empty)" @onclick="SetMobilePanelLogAsync">Log</button>
|
||||
</nav>
|
||||
}
|
||||
else
|
||||
{
|
||||
<main class="management-screen">
|
||||
<section class="card">
|
||||
<h2>Campaign Selector</h2>
|
||||
@if (Campaigns.Count == 0)
|
||||
{
|
||||
<p class="empty">No campaigns yet.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<label for="campaign-select">Campaign</label>
|
||||
<select id="campaign-select" @onchange="OnCampaignSelectionChangedAsync">
|
||||
@foreach (var campaign in Campaigns)
|
||||
{
|
||||
<option value="@campaign.Id" selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId)</option>
|
||||
}
|
||||
</select>
|
||||
}
|
||||
<p class="muted">Current campaign in this tab: <strong>@(SelectedCampaignName ?? "None selected")</strong></p>
|
||||
</section>
|
||||
<section class="card">
|
||||
<h2>Create Campaign</h2>
|
||||
@if (!string.IsNullOrWhiteSpace(CampaignFormError))
|
||||
{
|
||||
<p class="form-error">@CampaignFormError</p>
|
||||
}
|
||||
<form class="form-grid" @onsubmit="CreateCampaignAsync" @onsubmit:preventDefault>
|
||||
<label for="campaign-name">Campaign name</label>
|
||||
<input id="campaign-name" @bind="CampaignForm.Name" @bind:event="oninput" />
|
||||
@if (CampaignErrors.TryGetValue("name", out var campaignNameError))
|
||||
{
|
||||
<p class="field-error">@campaignNameError</p>
|
||||
}
|
||||
<label for="campaign-ruleset">Ruleset</label>
|
||||
<select id="campaign-ruleset" @bind="CampaignForm.RulesetId">
|
||||
<option value="">Select ruleset</option>
|
||||
@foreach (var ruleset in Rulesets)
|
||||
{
|
||||
<option value="@ruleset.Id">@ruleset.Name</option>
|
||||
}
|
||||
</select>
|
||||
@if (CampaignErrors.TryGetValue("rulesetId", out var campaignRulesetError))
|
||||
{
|
||||
<p class="field-error">@campaignRulesetError</p>
|
||||
}
|
||||
<button type="submit" disabled="@IsMutating">@(IsMutating ? "Creating..." : "Create Campaign")</button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="card">
|
||||
<h2>Campaign Details</h2>
|
||||
@if (SelectedCampaign is null)
|
||||
{
|
||||
<p class="empty">No campaign selected.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p>Name: <strong>@SelectedCampaign.Name</strong></p>
|
||||
<p>Ruleset: <strong>@SelectedCampaign.RulesetId</strong></p>
|
||||
<p>GM: <strong>@SelectedCampaign.Gm.DisplayName</strong> <span class="muted">(@SelectedCampaign.Gm.Username)</span></p>
|
||||
<p>Characters visible: <strong>@SelectedCampaign.Characters.Count</strong></p>
|
||||
}
|
||||
</section>
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<h2>Character Management</h2>
|
||||
<button type="button" disabled="@(IsMutating || SelectedCampaign is null)" @onclick="OpenCreateCharacterModal">Create Character</button>
|
||||
</div>
|
||||
@if (SelectedCampaign is null)
|
||||
{
|
||||
<p class="empty">Select a campaign first.</p>
|
||||
}
|
||||
else if (SelectedCampaign.Characters.Count == 0)
|
||||
{
|
||||
<p class="empty">No characters in this campaign yet.</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<ul class="management-list">
|
||||
@foreach (var character in SelectedCampaign.Characters)
|
||||
{
|
||||
<li>
|
||||
<div><strong>@character.Name</strong><p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p></div>
|
||||
<div class="inline-actions">
|
||||
<button type="button" disabled="@(IsMutating || !CanEditCharacter(character))" @onclick="() => OpenEditCharacterModal(character)">Edit</button>
|
||||
<button type="button" disabled="@(IsMutating || !CanActivateCharacter(character))" @onclick="() => ActivateCharacterAsync(character.Id)">Activate</button>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</section>
|
||||
</main>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (ShowCreateCharacterModal)
|
||||
{
|
||||
<div class="modal-overlay" role="presentation">
|
||||
<section class="modal-card" role="dialog" aria-modal="true" aria-label="Create character">
|
||||
<h2>Create Character</h2>
|
||||
@if (!string.IsNullOrWhiteSpace(CharacterFormError))
|
||||
{
|
||||
<p class="form-error">@CharacterFormError</p>
|
||||
}
|
||||
<form class="form-grid" @onsubmit="CreateCharacterAsync" @onsubmit:preventDefault>
|
||||
<label for="character-create-name">Character name</label>
|
||||
<input id="character-create-name" @bind="CharacterForm.Name" @bind:event="oninput" />
|
||||
@if (CharacterErrors.TryGetValue("name", out var createCharacterNameError))
|
||||
{
|
||||
<p class="field-error">@createCharacterNameError</p>
|
||||
}
|
||||
<label for="character-create-campaign">Campaign</label>
|
||||
<select id="character-create-campaign" @bind="CharacterForm.CampaignId">
|
||||
<option value="">Select campaign</option>
|
||||
@foreach (var campaign in Campaigns)
|
||||
{
|
||||
<option value="@campaign.Id">@campaign.Name</option>
|
||||
}
|
||||
</select>
|
||||
<div class="inline-actions">
|
||||
<button type="submit" disabled="@IsMutating">Create Character</button>
|
||||
<button type="button" class="ghost" @onclick="CloseCharacterModals">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (ShowEditCharacterModal)
|
||||
{
|
||||
<div class="modal-overlay" role="presentation">
|
||||
<section class="modal-card" role="dialog" aria-modal="true" aria-label="Edit character">
|
||||
<h2>Edit Character</h2>
|
||||
@if (!string.IsNullOrWhiteSpace(EditCharacterFormError))
|
||||
{
|
||||
<p class="form-error">@EditCharacterFormError</p>
|
||||
}
|
||||
<form class="form-grid" @onsubmit="UpdateCharacterAsync" @onsubmit:preventDefault>
|
||||
<label for="character-edit-name">Character name</label>
|
||||
<input id="character-edit-name" @bind="EditCharacterForm.Name" @bind:event="oninput" />
|
||||
@if (EditCharacterErrors.TryGetValue("name", out var editCharacterNameError))
|
||||
{
|
||||
<p class="field-error">@editCharacterNameError</p>
|
||||
}
|
||||
<label for="character-edit-campaign">Campaign</label>
|
||||
<select id="character-edit-campaign" @bind="EditCharacterForm.CampaignId">
|
||||
<option value="">Select campaign</option>
|
||||
@foreach (var campaign in Campaigns)
|
||||
{
|
||||
<option value="@campaign.Id">@campaign.Name</option>
|
||||
}
|
||||
</select>
|
||||
<div class="inline-actions">
|
||||
<button type="submit" disabled="@IsMutating">Save Character</button>
|
||||
<button type="button" class="ghost" @onclick="CloseCharacterModals">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (ShowCreateSkillModal)
|
||||
{
|
||||
<div class="modal-overlay" role="presentation">
|
||||
<section class="modal-card" role="dialog" aria-modal="true" aria-label="Create skill">
|
||||
<h2>Create Skill</h2>
|
||||
@if (!string.IsNullOrWhiteSpace(SkillFormError))
|
||||
{
|
||||
<p class="form-error">@SkillFormError</p>
|
||||
}
|
||||
<form class="form-grid" @onsubmit="CreateSkillAsync" @onsubmit:preventDefault>
|
||||
<label for="skill-create-name">Skill name</label>
|
||||
<input id="skill-create-name" @bind="SkillForm.Name" @bind:event="oninput" />
|
||||
@if (SkillErrors.TryGetValue("name", out var createSkillNameError))
|
||||
{
|
||||
<p class="field-error">@createSkillNameError</p>
|
||||
}
|
||||
<label for="skill-create-expression">Expression</label>
|
||||
<input id="skill-create-expression" @bind="SkillForm.DiceRollDefinition" @bind:event="oninput" />
|
||||
@if (SkillErrors.TryGetValue("diceRollDefinition", out var createSkillExpressionError))
|
||||
{
|
||||
<p class="field-error">@createSkillExpressionError</p>
|
||||
}
|
||||
<div class="inline-actions">
|
||||
<button type="submit" disabled="@IsMutating">Create Skill</button>
|
||||
<button type="button" class="ghost" @onclick="CloseSkillModals">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (ShowEditSkillModal)
|
||||
{
|
||||
<div class="modal-overlay" role="presentation">
|
||||
<section class="modal-card" role="dialog" aria-modal="true" aria-label="Edit skill">
|
||||
<h2>Edit Skill</h2>
|
||||
@if (!string.IsNullOrWhiteSpace(EditSkillFormError))
|
||||
{
|
||||
<p class="form-error">@EditSkillFormError</p>
|
||||
}
|
||||
<form class="form-grid" @onsubmit="UpdateSkillAsync" @onsubmit:preventDefault>
|
||||
<label for="skill-edit-name">Skill name</label>
|
||||
<input id="skill-edit-name" @bind="EditSkillForm.Name" @bind:event="oninput" />
|
||||
@if (EditSkillErrors.TryGetValue("name", out var editSkillNameError))
|
||||
{
|
||||
<p class="field-error">@editSkillNameError</p>
|
||||
}
|
||||
<label for="skill-edit-expression">Expression</label>
|
||||
<input id="skill-edit-expression" @bind="EditSkillForm.DiceRollDefinition" @bind:event="oninput" />
|
||||
@if (EditSkillErrors.TryGetValue("diceRollDefinition", out var editSkillExpressionError))
|
||||
{
|
||||
<p class="field-error">@editSkillExpressionError</p>
|
||||
}
|
||||
<div class="inline-actions">
|
||||
<button type="submit" disabled="@IsMutating">Save Skill</button>
|
||||
<button type="button" class="ghost" @onclick="CloseSkillModals">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
|
||||
1157
RpgRoller/Components/Pages/Home.razor.cs
Normal file
1157
RpgRoller/Components/Pages/Home.razor.cs
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,5 @@
|
||||
@attribute [ExcludeFromCodeCoverage]
|
||||
|
||||
<Router AppAssembly="@typeof(Program).Assembly">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
|
||||
|
||||
@@ -10,6 +10,7 @@ var app = builder.Build();
|
||||
app.InitializeRpgRollerState();
|
||||
|
||||
app.UseStaticFiles();
|
||||
app.UseAntiforgery();
|
||||
|
||||
app.MapRpgRollerApi();
|
||||
app.MapRazorComponents<RpgRoller.Components.App>()
|
||||
|
||||
@@ -1,4 +1,112 @@
|
||||
window.rpgRollerApi = (() => {
|
||||
const sessionPrefix = "rpgroller.";
|
||||
const stateStream = {
|
||||
source: null,
|
||||
dotNetRef: null,
|
||||
campaignId: null,
|
||||
reconnectDelayMs: 1000,
|
||||
reconnectTimer: null,
|
||||
stopped: true
|
||||
};
|
||||
|
||||
function clearReconnectTimer() {
|
||||
if (stateStream.reconnectTimer) {
|
||||
clearTimeout(stateStream.reconnectTimer);
|
||||
stateStream.reconnectTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function invokeDotNet(method, ...args) {
|
||||
if (!stateStream.dotNetRef) {
|
||||
return;
|
||||
}
|
||||
|
||||
stateStream.dotNetRef.invokeMethodAsync(method, ...args).catch(() => {
|
||||
});
|
||||
}
|
||||
|
||||
function scheduleReconnect() {
|
||||
if (stateStream.stopped || stateStream.reconnectTimer) {
|
||||
return;
|
||||
}
|
||||
|
||||
const delay = stateStream.reconnectDelayMs;
|
||||
stateStream.reconnectTimer = setTimeout(() => {
|
||||
stateStream.reconnectTimer = null;
|
||||
if (stateStream.stopped) {
|
||||
return;
|
||||
}
|
||||
|
||||
stateStream.reconnectDelayMs = Math.min(stateStream.reconnectDelayMs * 2, 30000);
|
||||
connectStateStream();
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function connectStateStream() {
|
||||
if (stateStream.stopped || !stateStream.campaignId) {
|
||||
return;
|
||||
}
|
||||
|
||||
clearReconnectTimer();
|
||||
invokeDotNet("OnConnectionStateChanged", "reconnecting");
|
||||
|
||||
const source = new EventSource(`/api/events/state?campaignId=${encodeURIComponent(stateStream.campaignId)}`);
|
||||
stateStream.source = source;
|
||||
|
||||
source.onopen = () => {
|
||||
stateStream.reconnectDelayMs = 1000;
|
||||
invokeDotNet("OnConnectionStateChanged", "connected");
|
||||
};
|
||||
|
||||
source.addEventListener("state", (event) => {
|
||||
try {
|
||||
const payload = JSON.parse(event.data);
|
||||
const version = typeof payload.version === "number" ? payload.version : 0;
|
||||
invokeDotNet("OnStateEventReceived", version);
|
||||
}
|
||||
catch {
|
||||
invokeDotNet("OnStateEventReceived", 0);
|
||||
}
|
||||
});
|
||||
|
||||
source.onerror = () => {
|
||||
if (stateStream.source === source) {
|
||||
source.close();
|
||||
stateStream.source = null;
|
||||
}
|
||||
|
||||
if (stateStream.stopped) {
|
||||
return;
|
||||
}
|
||||
|
||||
invokeDotNet("OnConnectionStateChanged", "reconnecting");
|
||||
scheduleReconnect();
|
||||
};
|
||||
}
|
||||
|
||||
function stopStateEvents() {
|
||||
stateStream.stopped = true;
|
||||
clearReconnectTimer();
|
||||
|
||||
if (stateStream.source) {
|
||||
stateStream.source.close();
|
||||
stateStream.source = null;
|
||||
}
|
||||
|
||||
stateStream.campaignId = null;
|
||||
stateStream.dotNetRef = null;
|
||||
}
|
||||
|
||||
window.addEventListener("offline", () => {
|
||||
invokeDotNet("OnConnectionStateChanged", "offline");
|
||||
});
|
||||
|
||||
window.addEventListener("online", () => {
|
||||
if (!stateStream.stopped) {
|
||||
connectStateStream();
|
||||
}
|
||||
});
|
||||
|
||||
async function request(method, url, body) {
|
||||
const options = {
|
||||
method,
|
||||
@@ -51,7 +159,34 @@ window.rpgRollerApi = (() => {
|
||||
};
|
||||
}
|
||||
|
||||
function getSessionValue(key) {
|
||||
return sessionStorage.getItem(`${sessionPrefix}${key}`);
|
||||
}
|
||||
|
||||
function setSessionValue(key, value) {
|
||||
const qualifiedKey = `${sessionPrefix}${key}`;
|
||||
if (value === null || value === undefined || value === "") {
|
||||
sessionStorage.removeItem(qualifiedKey);
|
||||
return;
|
||||
}
|
||||
|
||||
sessionStorage.setItem(qualifiedKey, value);
|
||||
}
|
||||
|
||||
function startStateEvents(campaignId, dotNetRef) {
|
||||
stopStateEvents();
|
||||
stateStream.stopped = false;
|
||||
stateStream.dotNetRef = dotNetRef;
|
||||
stateStream.campaignId = campaignId;
|
||||
stateStream.reconnectDelayMs = 1000;
|
||||
connectStateStream();
|
||||
}
|
||||
|
||||
return {
|
||||
request
|
||||
request,
|
||||
getSessionValue,
|
||||
setSessionValue,
|
||||
startStateEvents,
|
||||
stopStateEvents
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,66 +1,305 @@
|
||||
:root {
|
||||
--bg-top: #f7f0d8;
|
||||
--bg-bottom: #ecdfc4;
|
||||
--card: #fffaf0;
|
||||
--card-border: #c3b28b;
|
||||
--text: #2b2418;
|
||||
--muted: #6a5b3f;
|
||||
--accent: #385f3d;
|
||||
--accent-2: #9a402b;
|
||||
--warn: #b4681b;
|
||||
--danger: #8f2323;
|
||||
--focus: #1d3f72;
|
||||
--public: #2d6645;
|
||||
--private-self: #4f3a8f;
|
||||
--private-gm: #915119;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(165deg, #f2f4f8 0%, #e6ebf5 100%);
|
||||
color: #1f2937;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.layout {
|
||||
max-width: 56rem;
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.32), transparent 45%),
|
||||
linear-gradient(165deg, var(--bg-top), var(--bg-bottom));
|
||||
color: var(--text);
|
||||
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Segoe UI", sans-serif;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.rr-app {
|
||||
max-width: 78rem;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.25rem;
|
||||
padding: 1rem 1rem 4.5rem;
|
||||
}
|
||||
|
||||
.loading-shell,
|
||||
.auth-shell {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-width: 70rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
margin-top: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.workspace-shell {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
.workspace-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid #c8d2e6;
|
||||
border-radius: 0.6rem;
|
||||
padding: 0.9rem;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: 1.1fr 1.2fr 1fr;
|
||||
background: linear-gradient(120deg, #f1e4c9, #efe0bf);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 0.8rem;
|
||||
padding: 0.85rem;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.grid-form {
|
||||
.header-group {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.inline-controls {
|
||||
.brand h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.brand p,
|
||||
.context p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
justify-items: end;
|
||||
}
|
||||
|
||||
.switch-group,
|
||||
.header-actions,
|
||||
.inline-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: 0.45rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: color-mix(in srgb, var(--card) 94%, #ffffff 6%);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 0.8rem;
|
||||
padding: 0.85rem;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.auth-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
font: inherit;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 0.45rem;
|
||||
border: 1px solid #8e7b57;
|
||||
padding: 0.55rem 0.65rem;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
background: #fffdf5;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 0.4rem;
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(180deg, var(--accent), #2f4f34);
|
||||
color: #f8f7ef;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status,
|
||||
.result {
|
||||
font-weight: 600;
|
||||
button.ghost {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border-color: #8e7b57;
|
||||
}
|
||||
|
||||
.message {
|
||||
min-height: 1.5rem;
|
||||
color: #1d4ed8;
|
||||
font-weight: 600;
|
||||
button.switch {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border-color: #8e7b57;
|
||||
}
|
||||
|
||||
button.switch.active {
|
||||
background: var(--accent-2);
|
||||
border-color: var(--accent-2);
|
||||
color: #fff9ef;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible {
|
||||
outline: 3px solid var(--focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.status-message,
|
||||
.form-error,
|
||||
.field-error {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
color: var(--public);
|
||||
}
|
||||
|
||||
.status-message.error,
|
||||
.form-error,
|
||||
.field-error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.play-screen {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.management-screen {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.character-picker {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.icon-tab {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 0.2rem;
|
||||
min-width: 4.8rem;
|
||||
padding: 0.45rem;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border-color: #8e7b57;
|
||||
}
|
||||
|
||||
.icon-tab.active {
|
||||
background: linear-gradient(145deg, #e9d4a4, #d7b672);
|
||||
border-color: #9e7328;
|
||||
}
|
||||
|
||||
.icon-tab-glyph {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #8e7b57;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.icon-tab-text {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.character-sheet,
|
||||
.skills-section,
|
||||
.last-roll {
|
||||
border: 1px dashed #a89066;
|
||||
border-radius: 0.65rem;
|
||||
padding: 0.65rem;
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.skill-list {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
background: #f8f1df;
|
||||
color: var(--text);
|
||||
border: 1px solid #b39f79;
|
||||
}
|
||||
|
||||
.skill-item.active {
|
||||
border-color: #7b5a1f;
|
||||
background: #ecdfc2;
|
||||
}
|
||||
|
||||
.roll-panel {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.roll-total {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty,
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.log-list {
|
||||
@@ -68,11 +307,213 @@ button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-radius: 0.35rem;
|
||||
background: #f6f8fc;
|
||||
.log-entry {
|
||||
border: 1px solid #b8a37b;
|
||||
border-radius: 0.55rem;
|
||||
padding: 0.5rem;
|
||||
background: #f8f0de;
|
||||
}
|
||||
|
||||
.log-entry.private-self {
|
||||
border-color: #6252a8;
|
||||
background: #ece7ff;
|
||||
}
|
||||
|
||||
.log-entry.private-gm {
|
||||
border-color: #9a5f1e;
|
||||
background: #fff1db;
|
||||
}
|
||||
|
||||
.log-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.18rem 0.45rem;
|
||||
border: 1px solid transparent;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.badge.active {
|
||||
border-color: #8f5f12;
|
||||
background: #f6d28d;
|
||||
color: #5d3808;
|
||||
}
|
||||
|
||||
.badge.public {
|
||||
background: #e1f2e3;
|
||||
color: var(--public);
|
||||
}
|
||||
|
||||
.badge.private-self {
|
||||
background: #e8ddfb;
|
||||
color: var(--private-self);
|
||||
}
|
||||
|
||||
.badge.private-gm {
|
||||
background: #f9e2be;
|
||||
color: var(--private-gm);
|
||||
}
|
||||
|
||||
.badge.private-generic {
|
||||
background: #f4e8d4;
|
||||
color: #6f5832;
|
||||
}
|
||||
|
||||
.connection {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.connection.ok {
|
||||
color: var(--public);
|
||||
}
|
||||
|
||||
.connection.warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
|
||||
.connection.offline {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.skeleton-stack {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.skeleton-line {
|
||||
height: 0.85rem;
|
||||
border-radius: 0.4rem;
|
||||
background: linear-gradient(90deg, #dfd2b7, #efe3c9, #dfd2b7);
|
||||
background-size: 220% 100%;
|
||||
animation: shimmer 1.1s linear infinite;
|
||||
}
|
||||
|
||||
.skeleton-line.short {
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
.health-banner {
|
||||
border: 1px solid #b77a29;
|
||||
background: #fff2db;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.management-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.management-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
border: 1px solid #b8a37b;
|
||||
border-radius: 0.55rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(35, 25, 9, 0.55);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 20;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: min(32rem, 100%);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 0.85rem;
|
||||
padding: 0.9rem;
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.mobile-bottom-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
padding: 0.55rem;
|
||||
display: none;
|
||||
gap: 0.45rem;
|
||||
background: rgba(241, 228, 201, 0.96);
|
||||
border-top: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
background-position: 220% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -220% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.workspace-header {
|
||||
position: static;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.play-screen {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.play-screen.mobile-log .character-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.play-screen.mobile-character .log-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.management-screen {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.auth-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mobile-bottom-nav {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user