Compact the critical cell editor
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user