xTr1m/RolemasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign critical cell editor

Browse Source
This commit is contained in:
Frank Tovar
2026-03-15 01:49:12 +01:00
parent adeba60dce
commit c5800d6878
3 changed files with 333 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/player_gm_ux_redesign_plan.md
View File

@@ -533,6 +533,10 @@ Acceptance criteria:
### Phase 3: Redesign the cell editor
Status:
- implemented in the web app on March 15, 2026
Scope:
- add live result preview

342
src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor
View File

@@ -1,22 +1,29 @@
@using System
@using System.Collections.Generic
@using System.Linq
@using RolemasterDb.App.Domain
@using RolemasterDb.App.Features
<div class="critical-editor-backdrop" @onclick="HandleBackdropClicked">
<div class="critical-editor-dialog" @onclick:stopPropagation="true">
<header class="critical-editor-header">
<div>
<span class="eyebrow">Manual Curation</span>
@if (Model is not null)
{
<h3 class="panel-title">Edit @Model.TableName</h3>
<h3 class="panel-title">Edit Result Card</h3>
<p class="muted critical-editor-meta">
Roll band <strong>@Model.RollBand</strong>, column <strong>@Model.ColumnLabel</strong>
<strong>@Model.TableName</strong>
<span> · Roll band <strong>@Model.RollBand</strong></span>
<span> · Severity <strong>@Model.ColumnLabel</strong></span>
@if (!string.IsNullOrWhiteSpace(Model.GroupLabel))
{
<span>, group <strong>@Model.GroupLabel</strong></span>
<span> · Variant <strong>@Model.GroupLabel</strong></span>
}
</p>
}
else
{
<h3 class="panel-title">Critical Cell Editor</h3>
<h3 class="panel-title">Edit Result Card</h3>
}
</div>
<button type="button" class="btn btn-link critical-editor-close" @onclick="OnClose">Close</button>
@@ -44,49 +51,80 @@
}
<section class="critical-editor-section">
<h4>Base Cell</h4>
<div class="field-shell">
<label>Raw Cell Text</label>
<InputTextArea class="input-shell critical-editor-textarea tall" @bind-Value="Model.RawCellText" />
<div class="critical-editor-section-header">
<div>
<h4>Result Preview</h4>
<p class="muted">This is the card the table browser will show.</p>
</div>
<div class="field-shell">
<label>Description / Prose</label>
<InputText class="input-shell" @bind-Value="Model.DescriptionText" />
</div>
<div class="field-shell">
<label>Affix Text</label>
<InputText class="input-shell" @bind-Value="Model.RawAffixText" />
</div>
<div class="form-grid">
<div class="field-shell">
<label>Parse Status</label>
<InputText class="input-shell" @bind-Value="Model.ParseStatus" />
</div>
<div class="field-shell">
<label>Parsed Json</label>
<InputTextArea class="input-shell critical-editor-textarea json" @bind-Value="Model.ParsedJson" />
<div class="result-card critical-editor-preview-card">
<div class="result-stats">
<span class="stat-pill">Severity: @Model.ColumnLabel</span>
<span class="stat-pill">Roll band: @Model.RollBand</span>
@if (!string.IsNullOrWhiteSpace(Model.GroupLabel))
{
<span class="stat-pill">Variant: @Model.GroupLabel</span>
}
</div>
<CompactCriticalCell
Description="@Model.DescriptionText"
Effects="@BuildPreviewEffects(Model.Effects)"
Branches="@BuildPreviewBranches(Model.Branches)" />
</div>
</section>
<section class="critical-editor-section">
<div class="critical-editor-section-header">
<div>
<h4>Raw Text</h4>
<p class="muted">Update the source text, then adjust the visible card fields below.</p>
</div>
</div>
<div class="field-shell">
<label>Raw Cell Text</label>
<InputTextArea class="input-shell critical-editor-textarea tall" @bind-Value="Model.RawCellText" />
</div>
<div class="field-shell">
<label>Result Text Override</label>
<InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="Model.DescriptionText" />
</div>
</section>
<section class="critical-editor-section">
<div class="critical-editor-section-header">
<div>
<h4>Base Effects</h4>
<p class="muted">These chips appear on the main result.</p>
</div>
<button type="button" class="btn-ritual" @onclick="AddBaseEffect">Add Effect</button>
</div>
@if (Model.Effects.Count == 0)
{
<p class="muted">No normalized base effects for this cell.</p>
<p class="muted">No base effects on this result yet.</p>
}
else
{
<div class="critical-editor-chip-list">
@for (var index = 0; index < Model.Effects.Count; index++)
{
var effect = Model.Effects[index];
<div class="critical-editor-card">
var effectIndex = index;
<div class="critical-editor-chip-card">
<div class="critical-editor-chip-preview">
<AffixBadgeList Effects="@BuildSinglePreviewEffect(effect)" />
<span class="critical-editor-chip-name">@GetEffectLabel(effect)</span>
</div>
<button type="button" class="btn btn-link" @onclick="() => RemoveBaseEffect(effectIndex)">Remove</button>
</div>
}
</div>
@for (var index = 0; index < Model.Effects.Count; index++)
{
var effect = Model.Effects[index];
<div class="critical-editor-card nested">
<div class="critical-editor-card-header">
<strong>Effect @(index + 1)</strong>
<button type="button" class="btn btn-link" @onclick="() => RemoveBaseEffect(index)">Remove</button>
<strong>@GetEffectLabel(effect)</strong>
</div>
@EffectFields(effect)
</div>
@@ -96,12 +134,15 @@
<section class="critical-editor-section">
<div class="critical-editor-section-header">
<h4>Branches</h4>
<button type="button" class="btn-ritual" @onclick="AddBranch">Add Branch</button>
<div>
<h4>Conditions</h4>
<p class="muted">Use condition cards for alternate outcomes.</p>
</div>
<button type="button" class="btn-ritual" @onclick="AddBranch">Add Condition</button>
</div>
@if (Model.Branches.Count == 0)
{
<p class="muted">No branch records on this cell.</p>
<p class="muted">No alternate condition cards on this result yet.</p>
}
else
{
@@ -110,68 +151,56 @@
var branch = Model.Branches[index];
<div class="critical-editor-card branch-card-editor">
<div class="critical-editor-card-header">
<strong>Branch @(index + 1)</strong>
<div>
<strong>@GetBranchTitle(branch, index)</strong>
<p class="muted critical-editor-inline-copy">Shown when this condition applies.</p>
</div>
<button type="button" class="btn btn-link" @onclick="() => RemoveBranch(index)">Remove</button>
</div>
<div class="form-grid">
<div class="field-shell">
<label>Branch Kind</label>
<InputText class="input-shell" @bind-Value="branch.BranchKind" />
</div>
<div class="field-shell">
<label>Condition Key</label>
<InputText class="input-shell" @bind-Value="branch.ConditionKey" />
</div>
<div class="field-shell">
<label>Sort Order</label>
<InputNumber TValue="int" class="input-shell" @bind-Value="branch.SortOrder" />
</div>
</div>
<div class="field-shell">
<label>Condition Text</label>
<label>Condition</label>
<InputText class="input-shell" @bind-Value="branch.ConditionText" />
</div>
<div class="field-shell">
<label>Raw Text</label>
<InputTextArea class="input-shell critical-editor-textarea" @bind-Value="branch.RawText" />
</div>
<div class="field-shell">
<label>Description / Prose</label>
<InputText class="input-shell" @bind-Value="branch.DescriptionText" />
</div>
<div class="field-shell">
<label>Affix Text</label>
<InputText class="input-shell" @bind-Value="branch.RawAffixText" />
</div>
<div class="form-grid">
<div class="field-shell">
<label>Condition Json</label>
<InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="branch.ConditionJson" />
</div>
<div class="field-shell">
<label>Parsed Json</label>
<InputTextArea class="input-shell critical-editor-textarea json" @bind-Value="branch.ParsedJson" />
</div>
<label>Outcome Text</label>
<InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="branch.DescriptionText" />
</div>
<div class="critical-editor-subsection">
<div class="critical-editor-section-header">
<h5>Branch Effects</h5>
<div>
<h5>Condition Effects</h5>
<p class="muted">These chips only appear when the condition is met.</p>
</div>
<button type="button" class="btn-ritual" @onclick="() => AddBranchEffect(branch)">Add Effect</button>
</div>
@if (branch.Effects.Count == 0)
{
<p class="muted">No normalized branch effects.</p>
<p class="muted">No effects on this condition card yet.</p>
}
else
{
<div class="critical-editor-chip-list">
@for (var effectIndex = 0; effectIndex < branch.Effects.Count; effectIndex++)
{
var effect = branch.Effects[effectIndex];
var localEffectIndex = effectIndex;
<div class="critical-editor-chip-card">
<div class="critical-editor-chip-preview">
<AffixBadgeList Effects="@BuildSinglePreviewEffect(effect)" />
<span class="critical-editor-chip-name">@GetEffectLabel(effect)</span>
</div>
<button type="button" class="btn btn-link" @onclick="() => RemoveBranchEffect(branch, localEffectIndex)">Remove</button>
</div>
}
</div>
@for (var effectIndex = 0; effectIndex < branch.Effects.Count; effectIndex++)
{
var effect = branch.Effects[effectIndex];
<div class="critical-editor-card nested">
<div class="critical-editor-card-header">
<strong>Branch Effect @(effectIndex + 1)</strong>
<button type="button" class="btn btn-link" @onclick="() => RemoveBranchEffect(branch, effectIndex)">Remove</button>
<strong>@GetEffectLabel(effect)</strong>
</div>
@EffectFields(effect)
</div>
@@ -229,7 +258,7 @@
private void AddBaseEffect()
{
Model?.Effects.Add(new CriticalEffectEditorModel());
Model?.Effects.Add(CreateDefaultEffectModel());
}
private void RemoveBaseEffect(int index)
@@ -251,6 +280,7 @@
Model.Branches.Add(new CriticalBranchEditorModel
{
ConditionText = $"Condition {Model.Branches.Count + 1}",
SortOrder = Model.Branches.Count + 1
});
}
@@ -267,7 +297,7 @@
private static void AddBranchEffect(CriticalBranchEditorModel branch)
{
branch.Effects.Add(new CriticalEffectEditorModel());
branch.Effects.Add(CreateDefaultEffectModel());
}
private static void RemoveBranchEffect(CriticalBranchEditorModel branch, int index)
@@ -279,55 +309,167 @@
branch.Effects.RemoveAt(index);
}
private static CriticalEffectEditorModel CreateDefaultEffectModel() =>
new()
{
EffectCode = CriticalEffectCodes.DirectHits,
SourceType = "symbol"
};
private static string GetBranchTitle(CriticalBranchEditorModel branch, int index) =>
string.IsNullOrWhiteSpace(branch.ConditionText)
? $"Condition {index + 1}"
: branch.ConditionText;
private static string GetEffectLabel(CriticalEffectEditorModel effect)
{
if (AffixDisplayMap.TryGet(effect.EffectCode, out var info))
{
return info.Label;
}
return string.IsNullOrWhiteSpace(effect.EffectCode) ? "Custom Effect" : effect.EffectCode;
}
private static IEnumerable<KeyValuePair<string, string>> GetEffectOptions(string? currentCode)
{
if (!string.IsNullOrWhiteSpace(currentCode) && !AffixDisplayMap.Entries.ContainsKey(currentCode))
{
yield return new KeyValuePair<string, string>(currentCode, currentCode);
}
foreach (var entry in AffixDisplayMap.Entries.OrderBy(item => item.Value.Label))
{
yield return new KeyValuePair<string, string>(entry.Key, entry.Value.Label);
}
}
private static void HandleEffectCodeChanged(CriticalEffectEditorModel effect, string? newCode)
{
var normalizedCode = newCode?.Trim() ?? string.Empty;
if (string.Equals(effect.EffectCode, normalizedCode, StringComparison.Ordinal))
{
return;
}
effect.EffectCode = normalizedCode;
effect.Target = null;
effect.ValueInteger = null;
effect.ValueDecimal = null;
effect.ValueExpression = null;
effect.DurationRounds = null;
effect.PerRound = null;
effect.Modifier = null;
effect.BodyPart = null;
effect.IsPermanent = false;
effect.SourceText = null;
effect.SourceType = AffixDisplayMap.TryGet(effect.EffectCode, out _) ? "symbol" : "manual";
}
private static IReadOnlyList<CriticalEffectLookupResponse> BuildPreviewEffects(IEnumerable<CriticalEffectEditorModel> effects) =>
effects.Select(CreatePreviewEffect).ToList();
private static IReadOnlyList<CriticalEffectLookupResponse> BuildSinglePreviewEffect(CriticalEffectEditorModel effect) =>
[CreatePreviewEffect(effect)];
private static IReadOnlyList<CriticalBranchLookupResponse> BuildPreviewBranches(IEnumerable<CriticalBranchEditorModel> branches) =>
branches
.OrderBy(branch => branch.SortOrder)
.Select(branch => new CriticalBranchLookupResponse(
branch.BranchKind,
branch.ConditionKey,
branch.ConditionText,
branch.DescriptionText,
branch.RawAffixText,
BuildPreviewEffects(branch.Effects),
branch.RawText,
branch.SortOrder))
.ToList();
private static CriticalEffectLookupResponse CreatePreviewEffect(CriticalEffectEditorModel effect) =>
new(
effect.EffectCode,
effect.Target,
effect.ValueInteger,
effect.ValueExpression,
effect.DurationRounds,
effect.PerRound,
effect.Modifier,
effect.BodyPart,
effect.IsPermanent,
effect.SourceType,
effect.SourceText);
}
@functions {
private RenderFragment EffectFields(CriticalEffectEditorModel effect) => @<div>
<div class="form-grid">
private RenderFragment EffectFields(CriticalEffectEditorModel effect) => @<div class="critical-editor-effect-fields">
<div class="form-grid critical-editor-effect-grid">
<div class="field-shell">
<label>Effect Code</label>
<InputText class="input-shell" @bind-Value="effect.EffectCode" />
<label>Effect</label>
<select class="input-shell" value="@effect.EffectCode" @onchange="args => HandleEffectCodeChanged(effect, args.Value?.ToString())">
@foreach (var option in GetEffectOptions(effect.EffectCode))
{
<option value="@option.Key">@option.Value</option>
}
</select>
</div>
@switch (effect.EffectCode)
{
case CriticalEffectCodes.DirectHits:
<div class="field-shell">
<label>Target</label>
<InputText class="input-shell" @bind-Value="effect.Target" />
</div>
<div class="field-shell">
<label>Source Type</label>
<InputText class="input-shell" @bind-Value="effect.SourceType" />
</div>
<div class="field-shell">
<label>Source Text</label>
<InputText class="input-shell" @bind-Value="effect.SourceText" />
</div>
<div class="field-shell">
<label>Value Integer</label>
<label>Hits</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.ValueInteger" />
</div>
break;
case CriticalEffectCodes.StunnedRounds:
case CriticalEffectCodes.MustParryRounds:
case CriticalEffectCodes.NoParryRounds:
<div class="field-shell">
<label>Value Decimal</label>
<InputNumber TValue="decimal?" class="input-shell" @bind-Value="effect.ValueDecimal" step="0.01" />
</div>
<div class="field-shell">
<label>Value Expression</label>
<InputText class="input-shell" @bind-Value="effect.ValueExpression" />
</div>
<div class="field-shell">
<label>Duration Rounds</label>
<label>Rounds</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.DurationRounds" />
</div>
break;
case CriticalEffectCodes.BleedPerRound:
<div class="field-shell">
<label>Per Round</label>
<label>Bleed / Round</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.PerRound" />
</div>
break;
case CriticalEffectCodes.FoePenalty:
case CriticalEffectCodes.AttackerBonusNextRound:
<div class="field-shell">
<label>Modifier</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.Modifier" />
</div>
break;
case CriticalEffectCodes.PowerPointModifier:
<div class="field-shell">
<label>Expression</label>
<InputText class="input-shell" @bind-Value="effect.ValueExpression" />
</div>
break;
default:
<div class="field-shell">
<label>Display Text</label>
<InputText class="input-shell" @bind-Value="effect.SourceText" />
</div>
break;
}
@if (!string.IsNullOrWhiteSpace(effect.BodyPart))
{
<div class="field-shell">
<label>Body Part</label>
<InputText class="input-shell" @bind-Value="effect.BodyPart" />
</div>
}
@if (!string.IsNullOrWhiteSpace(effect.Target))
{
<div class="field-shell">
<label>Target</label>
<InputText class="input-shell" @bind-Value="effect.Target" />
</div>
}
</div>
<label class="critical-editor-checkbox">
<InputCheckbox class="form-check-input" @bind-Value="effect.IsPermanent" />

68
src/RolemasterDb.App/wwwroot/app.css
View File

@@ -728,6 +728,12 @@ textarea {
margin: 0;
}
.critical-editor-section-header > div,
.critical-editor-card-header > div {
display: grid;
gap: 0.2rem;
}
.critical-editor-section-header,
.critical-editor-card-header {
display: flex;
@@ -749,6 +755,15 @@ textarea {
background: rgba(252, 248, 238, 0.96);
}
.critical-editor-preview-card {
display: grid;
gap: 0.85rem;
}
.critical-editor-preview-card .critical-cell-description {
font-size: 1.05rem;
}
.critical-editor-textarea {
min-height: 7rem;
}
@@ -773,6 +788,52 @@ textarea {
border: 1px solid rgba(141, 43, 30, 0.18);
}
.critical-editor-inline-copy {
margin: 0;
}
.critical-editor-chip-list {
display: grid;
gap: 0.65rem;
}
.critical-editor-chip-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.8rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(127, 96, 55, 0.12);
}
.critical-editor-chip-preview {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
min-width: 0;
}
.critical-editor-chip-preview .affix-badge-list {
margin-top: 0;
}
.critical-editor-chip-name {
font-family: var(--font-heading);
color: #5b4327;
}
.critical-editor-effect-fields {
display: grid;
gap: 0.75rem;
}
.critical-editor-effect-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.critical-editor-checkbox {
display: inline-flex;
align-items: center;
@@ -810,4 +871,11 @@ textarea {
flex-direction: column;
align-items: stretch;
}
.critical-editor-chip-card,
.critical-editor-card-header,
.critical-editor-section-header {
flex-direction: column;
align-items: stretch;
}
}