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

Compact the critical cell editor

Browse Source
This commit is contained in:
Frank Tovar
2026-03-15 03:02:32 +01:00
parent dea0f97e91
commit dc2dbd29a9
3 changed files with 135 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/player_gm_ux_redesign_plan.md
View File

@@ -531,6 +531,10 @@ Acceptance criteria:
### Phase 2: Compact inline cell editor
Status:
- implemented in the web app on March 15, 2026
Scope:
- remove the dedicated preview panel from the critical cell popup
@@ -626,4 +630,4 @@ Mitigation:
## Recommended Next Step
Implement the new Phase 2 next. The compact inline popup editor is now the most visible remaining UX gap after the lookup flow ergonomics pass.
Implement the new Phase 3 next. The remaining structural gap is generated-versus-overridden state, so re-parse and future import refreshes can preserve intentional curation instead of treating all edited values the same.

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

@@ -56,34 +56,11 @@
<p class="error-text critical-editor-error">@SaveErrorMessage</p>
}
<section class="critical-editor-section">
<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>
<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>
<p class="muted">Update the source text, then correct the visible result rows below.</p>
</div>
<button type="button" class="btn-ritual" @onclick="OnReparse" disabled="@IsSaving || IsReparsing">
@(IsReparsing ? "Re-Parsing..." : "Re-Parse Raw Text")
@@ -98,7 +75,7 @@
<p class="muted critical-editor-advanced-hint">@GetParserNoteSummary(Model.ValidationMessages.Count)</p>
}
<div class="field-shell">
<label>Result Text Override</label>
<label>Result Text</label>
<InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="Model.DescriptionText" />
</div>
</section>
@@ -107,9 +84,9 @@
<div class="critical-editor-section-header">
<div>
<h4>Base Effects</h4>
<p class="muted">These chips appear on the main result.</p>
<p class="muted">Edit the badges and values that appear on the main result.</p>
</div>
<button type="button" class="btn-ritual" @onclick="AddBaseEffect">Add Effect</button>
<button type="button" class="btn-ritual critical-editor-compact-button" @onclick="AddBaseEffect">Add Effect</button>
</div>
@if (Model.Effects.Count == 0)
{
@@ -117,30 +94,15 @@
}
else
{
<div class="critical-editor-chip-list">
<div class="critical-editor-inline-list">
@for (var index = 0; index < Model.Effects.Count; index++)
{
var effect = Model.Effects[index];
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 class="critical-editor-inline-row">
@InlineEffectRow(effect, () => RemoveBaseEffect(index))
</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>@GetEffectLabel(effect)</strong>
</div>
@EffectFields(effect)
</div>
}
}
</section>
@@ -149,9 +111,9 @@
<div class="critical-editor-section-header">
<div>
<h4>Conditions</h4>
<p class="muted">Use condition cards for alternate outcomes.</p>
<p class="muted">Keep alternate outcomes compact and easy to scan.</p>
</div>
<button type="button" class="btn-ritual" @onclick="AddBranch">Add Condition</button>
<button type="button" class="btn-ritual critical-editor-compact-button" @onclick="AddBranch">Add Condition</button>
</div>
@if (Model.Branches.Count == 0)
{
@@ -166,58 +128,45 @@
<div class="critical-editor-card-header">
<div>
<strong>@GetBranchTitle(branch, index)</strong>
<p class="muted critical-editor-inline-copy">Shown when this condition applies.</p>
<p class="muted critical-editor-inline-copy">Shown only when this condition applies.</p>
</div>
<button type="button" class="btn btn-link" @onclick="() => RemoveBranch(index)">Remove</button>
<button type="button" class="critical-editor-inline-button" @onclick="() => RemoveBranch(index)">Remove</button>
</div>
<div class="field-shell">
<label>Condition</label>
<InputText class="input-shell" @bind-Value="branch.ConditionText" />
</div>
<div class="field-shell">
<label>Outcome Text</label>
<InputTextArea class="input-shell critical-editor-textarea compact" @bind-Value="branch.DescriptionText" />
<div class="critical-editor-branch-line">
<div class="field-shell">
<label>Condition</label>
<InputText class="input-shell" @bind-Value="branch.ConditionText" />
</div>
<div class="field-shell critical-editor-branch-outcome">
<label>Outcome Text</label>
<InputText class="input-shell" @bind-Value="branch.DescriptionText" />
</div>
</div>
<div class="critical-editor-subsection">
<div class="critical-editor-section-header">
<div>
<h5>Condition Effects</h5>
<p class="muted">These chips only appear when the condition is met.</p>
<p class="muted">These only appear when the condition is met.</p>
</div>
<button type="button" class="btn-ritual" @onclick="() => AddBranchEffect(branch)">Add Effect</button>
<button type="button" class="btn-ritual critical-editor-compact-button" @onclick="() => AddBranchEffect(branch)">Add Effect</button>
</div>
@if (branch.Effects.Count == 0)
{
<p class="muted">No effects on this condition card yet.</p>
<p class="muted">No effects on this condition yet.</p>
}
else
{
<div class="critical-editor-chip-list">
<div class="critical-editor-inline-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 class="critical-editor-inline-row">
@InlineEffectRow(effect, () => RemoveBranchEffect(branch, effectIndex))
</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>@GetEffectLabel(effect)</strong>
</div>
@EffectFields(effect)
</div>
}
}
</div>
</div>
@@ -545,27 +494,10 @@
!string.IsNullOrWhiteSpace(effect.SourceText) ||
!string.IsNullOrWhiteSpace(effect.SourceType);
private static IReadOnlyList<CriticalEffectLookupResponse> BuildPreviewEffects(IEnumerable<CriticalEffectEditorModel> effects) =>
effects.Select(CreatePreviewEffect).ToList();
private static IReadOnlyList<CriticalEffectLookupResponse> BuildSingleBadgeEffect(CriticalEffectEditorModel effect) =>
[CreateBadgeEffect(effect)];
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) =>
private static CriticalEffectLookupResponse CreateBadgeEffect(CriticalEffectEditorModel effect) =>
new(
effect.EffectCode,
effect.Target,
@@ -581,9 +513,12 @@
}
@functions {
private RenderFragment EffectFields(CriticalEffectEditorModel effect) => @<div class="critical-editor-effect-fields">
<div class="form-grid critical-editor-effect-grid">
<div class="field-shell">
private RenderFragment InlineEffectRow(CriticalEffectEditorModel effect, Action onRemove) => @<div class="critical-editor-effect-row">
<div class="critical-editor-effect-row-main">
<div class="critical-editor-effect-badge">
<AffixBadgeList Effects="@BuildSingleBadgeEffect(effect)" />
</div>
<div class="field-shell critical-editor-effect-kind">
<label>Effect</label>
<select class="input-shell" value="@effect.EffectCode" @onchange="args => HandleEffectCodeChanged(effect, args.Value?.ToString())">
@foreach (var option in GetEffectOptions(effect.EffectCode))
@@ -592,66 +527,59 @@
}
</select>
</div>
@switch (effect.EffectCode)
{
case CriticalEffectCodes.DirectHits:
<div class="field-shell">
<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>Rounds</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.DurationRounds" />
</div>
break;
case CriticalEffectCodes.BleedPerRound:
<div class="field-shell">
<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;
}
@InlineValueField(effect)
@if (!string.IsNullOrWhiteSpace(effect.BodyPart))
{
<div class="field-shell">
<div class="field-shell critical-editor-effect-extra">
<label>Body Part</label>
<InputText class="input-shell" @bind-Value="effect.BodyPart" />
</div>
}
@if (!string.IsNullOrWhiteSpace(effect.Target))
@if (ShouldShowTargetField(effect))
{
<div class="field-shell">
<div class="field-shell critical-editor-effect-extra">
<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" />
<span>Permanent</span>
</label>
<button type="button" class="critical-editor-inline-button" @onclick="onRemove">Remove</button>
</div>;
private RenderFragment InlineValueField(CriticalEffectEditorModel effect) => @<div class="field-shell critical-editor-effect-value">
@switch (effect.EffectCode)
{
case CriticalEffectCodes.DirectHits:
<label>Hits</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.ValueInteger" />
break;
case CriticalEffectCodes.StunnedRounds:
case CriticalEffectCodes.MustParryRounds:
case CriticalEffectCodes.NoParryRounds:
<label>Rounds</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.DurationRounds" />
break;
case CriticalEffectCodes.BleedPerRound:
<label>Bleed / Round</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.PerRound" />
break;
case CriticalEffectCodes.FoePenalty:
case CriticalEffectCodes.AttackerBonusNextRound:
<label>Modifier</label>
<InputNumber TValue="int?" class="input-shell" @bind-Value="effect.Modifier" />
break;
case CriticalEffectCodes.PowerPointModifier:
<label>Expression</label>
<InputText class="input-shell" @bind-Value="effect.ValueExpression" />
break;
default:
<label>Display Text</label>
<InputText class="input-shell" @bind-Value="effect.SourceText" />
break;
}
</div>;
private static bool ShouldShowTargetField(CriticalEffectEditorModel effect) =>
!string.Equals(effect.EffectCode, CriticalEffectCodes.DirectHits, StringComparison.Ordinal) &&
!string.IsNullOrWhiteSpace(effect.Target);
}

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

@@ -788,21 +788,12 @@ 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;
}
.critical-editor-textarea.compact {
min-height: 4.5rem;
min-height: 3.5rem;
}
.critical-editor-textarea.json {
@@ -810,7 +801,7 @@ textarea {
}
.critical-editor-textarea.tall {
min-height: 10rem;
min-height: 8rem;
}
.critical-editor-error {
@@ -825,42 +816,56 @@ textarea {
margin: 0;
}
.critical-editor-chip-list {
.critical-editor-inline-list {
display: grid;
gap: 0.65rem;
gap: 0.55rem;
}
.critical-editor-chip-card {
.critical-editor-inline-row {
display: block;
}
.critical-editor-effect-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.8rem;
padding: 0.65rem 0.75rem;
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;
.critical-editor-effect-row-main {
display: grid;
gap: 0.65rem;
grid-template-columns: minmax(88px, auto) minmax(180px, 1.3fr) minmax(130px, 0.8fr);
align-items: end;
flex: 1 1 auto;
}
.critical-editor-effect-badge {
min-width: 0;
}
.critical-editor-chip-preview .affix-badge-list {
.critical-editor-effect-badge .affix-badge-list {
margin-top: 0;
}
.critical-editor-chip-name {
font-family: var(--font-heading);
color: #5b4327;
.critical-editor-effect-kind,
.critical-editor-effect-value,
.critical-editor-effect-extra {
min-width: 0;
}
.critical-editor-effect-fields {
.critical-editor-branch-line {
display: grid;
gap: 0.75rem;
gap: 0.65rem;
grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr);
}
.critical-editor-branch-outcome {
min-width: 0;
}
.critical-editor-validation-list {
@@ -883,7 +888,7 @@ textarea {
.critical-editor-advanced {
border-radius: 18px;
border: 1px solid rgba(127, 96, 55, 0.14);
background: rgba(247, 239, 225, 0.42);
background: rgba(247, 239, 225, 0.3);
overflow: hidden;
}
@@ -912,7 +917,7 @@ textarea {
.critical-editor-advanced-body {
display: grid;
gap: 0.85rem;
padding: 0 1rem 1rem;
padding: 0 0.9rem 0.9rem;
}
.critical-editor-diagnostic-grid {
@@ -971,15 +976,21 @@ textarea {
text-align: right;
}
.critical-editor-effect-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
.critical-editor-inline-button {
border: none;
background: transparent;
color: var(--accent);
padding: 0.2rem 0.1rem;
white-space: nowrap;
}
.critical-editor-checkbox {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #5d4429;
.critical-editor-inline-button:hover {
color: #6e4320;
}
.critical-editor-compact-button {
padding: 0.55rem 0.9rem;
box-shadow: none;
}
@media (max-width: 640.98px) {
@@ -1013,7 +1024,7 @@ textarea {
align-items: stretch;
}
.critical-editor-chip-card,
.critical-editor-effect-row,
.critical-editor-card-header,
.critical-editor-section-header,
.critical-editor-advanced-summary,
@@ -1022,6 +1033,11 @@ textarea {
align-items: stretch;
}
.critical-editor-effect-row-main,
.critical-editor-branch-line {
grid-template-columns: 1fr;
}
.critical-editor-diagnostic-values {
justify-items: start;
text-align: left;