ee5439285c
Pivots from M5's code-built UI to the editor-authorable .tscn pattern
recommended in GODOT_PORTING_GUIDE.md, after a session of fighting
Godot idioms with code-only layout. Default theme only; the parchment
Theme lands last per the guide's §12 build order so layout bugs surface
as layout bugs, not theming bugs.
GODOT_PORTING_GUIDE.md:
Authored by Claude Design as the canonical port reference. Maps the
React prototype's structure onto Godot 4.6 with concrete code sketches
and a build-order recommendation. Drove the M6 architecture.
Fonts/:
Cormorant Garamond (Medium + MediumItalic) and Crimson Pro (Regular +
Italic + SemiBold) under OFL — the React prototype's serif-display
and serif-body families. Not yet wired through CodexTheme.Build()
because theming is deferred; CodexTheme.LoadFontFromFonts already
picks them up automatically when the Theme pass lands.
Scenes/Wizard.tscn + Wizard.cs:
Wizard shell per guide §4: codex-header (title + folio counter) +
Stepper + Page (StepHost + Aside) + NavBar (Back / validation / Next).
All node lookups via unique-name (%) syntax; layout authored as a
scene file you can open in the editor. Step lifecycle drives the
Aside via signal binding. Stepper logic mirrors app.jsx — locked
iff some EARLIER step is unsatisfied; "type not yet implemented"
doesn't lock.
Scenes/Aside.tscn + Aside.cs:
Right-rail summary per guide §10. Single Refresh() rebuild on
CharacterDraft.Changed; cheap enough not to bother with partial
updates. Width 320 (was 380 before the layout overflow fix).
Scenes/Steps/IStep.cs + StepClade.cs:
Per-step Bind(draft) + Validate() contract. StepClade renders the
3-column clade card grid; click commits via CharacterDraft.Patch
which triggers the Resource.Changed signal that Aside and Wizard
both subscribe to.
UI/CharacterDraft.cs:
Resource (not Node) per guide §2.1. Mirrors app.jsx's `state` shape
exactly. Patch(dictionary) emits the inherited Resource.Changed
signal — listeners use `draft.Changed += handler` regardless of
which field changed. CodexContent provides lazy-loaded immutable
content tables (Clades, Species, Classes, Subclasses, Backgrounds).
Main.{cs,tscn}: Node → Control
When Main was a Node, Control children couldn't anchor to a real
parent rect — they sat at (0,0) at intrinsic min size. With wide
step content (3-column 200-px-card grid), the Wizard's min size
pushed the navbar beyond the viewport's right edge, hiding the Next
button on smaller windowed viewports. Making Main a full-rect-
anchored Control gives child scenes a proper rect to lay out in.
UI/Widgets/CodexStepper.cs:
Anchored the inner vbox to fill the button rect. Without this, the
vbox sat at the button's top-left at intrinsic size and labels
rendered in the corner — visible as the active-step label being
off-center from the highlight bar.
Verified at 1152x720 windowed and (separately) at fullscreen:
- 3-column card grid fits inside Wrap margins + Aside without
horizontal overflow
- Stepper labels centered under their highlight bars
- Next button visible after clade selection; future steps switch
to "coming soon" placeholder when clicked
- Aside summary fills in CLADE block on selection
Closes M6.1. Next per guide §12 build order: M6.2 — StepStats with
drag-drop (highest-risk piece, de-risk before easy steps).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
177 lines
6.2 KiB
C#
177 lines
6.2 KiB
C#
using System;
|
|
using System.Collections.Generic;
|
|
using Godot;
|
|
|
|
namespace Theriapolis.GodotHost.UI.Widgets;
|
|
|
|
/// <summary>
|
|
/// Codex stepper. Mirrors <c>.stepper / .step</c> in the React prototype:
|
|
/// horizontal grid of N steps, each with a Roman numeral and an uppercased
|
|
/// name. Per-step state drives colour and the gild-coloured underline:
|
|
/// Active (current), Complete (✓ + seal), Locked (✕ + dimmed). Click on
|
|
/// any non-locked step emits <see cref="StepClicked"/>.
|
|
///
|
|
/// Lock semantics mirror <c>app.jsx</c>: a step is locked iff some
|
|
/// earlier step has unmet validation. The owning screen passes a per-step
|
|
/// <see cref="StepState"/> array; this widget just renders.
|
|
/// </summary>
|
|
public partial class CodexStepper : HBoxContainer
|
|
{
|
|
public enum StepState { Pending, Active, Complete, Locked }
|
|
|
|
[Signal] public delegate void StepClickedEventHandler(int index);
|
|
|
|
private readonly List<StepEntry> _entries = new();
|
|
|
|
public void SetSteps(IReadOnlyList<string> names, IReadOnlyList<StepState> states)
|
|
{
|
|
if (names.Count != states.Count)
|
|
throw new ArgumentException("names and states must be the same length");
|
|
|
|
// Rebuild children from scratch — N is small (<=8) so this is cheap.
|
|
foreach (var child in GetChildren())
|
|
child.QueueFree();
|
|
_entries.Clear();
|
|
|
|
for (int i = 0; i < names.Count; i++)
|
|
{
|
|
var entry = BuildStep(i, names[i], states[i], isLast: i == names.Count - 1);
|
|
AddChild(entry.Container);
|
|
_entries.Add(entry);
|
|
}
|
|
}
|
|
|
|
private StepEntry BuildStep(int index, string name, StepState state, bool isLast)
|
|
{
|
|
// Outer cell — VBoxContainer with mouse handling on a button child
|
|
// so we get press events for click-to-jump. SizeFlagsHorizontal
|
|
// expand makes each cell take an equal share of the width.
|
|
var btn = new Button
|
|
{
|
|
ThemeTypeVariation = "GhostButton",
|
|
Flat = true,
|
|
FocusMode = FocusModeEnum.None,
|
|
CustomMinimumSize = new Vector2(0, 64),
|
|
SizeFlagsHorizontal = SizeFlags.ExpandFill,
|
|
ToggleMode = false,
|
|
};
|
|
// Build a vbox child for two stacked labels. Button isn't a
|
|
// Container, so the vbox doesn't get auto-laid-out — anchor it to
|
|
// fill the button's rect explicitly. Without this, the vbox sits at
|
|
// (0,0) with intrinsic size and the labels render in the top-left
|
|
// corner instead of centered.
|
|
var vbox = new VBoxContainer
|
|
{
|
|
MouseFilter = MouseFilterEnum.Ignore,
|
|
Alignment = BoxContainer.AlignmentMode.Center,
|
|
};
|
|
vbox.AnchorRight = 1f;
|
|
vbox.AnchorBottom = 1f;
|
|
vbox.OffsetLeft = 0;
|
|
vbox.OffsetRight = 0;
|
|
vbox.OffsetTop = 0;
|
|
vbox.OffsetBottom = 0;
|
|
btn.AddChild(vbox);
|
|
|
|
var num = new Label
|
|
{
|
|
Text = state == StepState.Locked ? "✕" : Roman(index + 1),
|
|
HorizontalAlignment = HorizontalAlignment.Center,
|
|
ThemeTypeVariation = "StepperNum",
|
|
MouseFilter = MouseFilterEnum.Ignore,
|
|
};
|
|
vbox.AddChild(num);
|
|
|
|
var lbl = new Label
|
|
{
|
|
Text = name.ToUpperInvariant(),
|
|
HorizontalAlignment = HorizontalAlignment.Center,
|
|
ThemeTypeVariation = "StepperName",
|
|
MouseFilter = MouseFilterEnum.Ignore,
|
|
};
|
|
vbox.AddChild(lbl);
|
|
|
|
ApplyStateColors(num, lbl, state);
|
|
|
|
if (state != StepState.Locked)
|
|
btn.Pressed += () => EmitSignal(SignalName.StepClicked, index);
|
|
else
|
|
btn.Disabled = true;
|
|
|
|
// The active step gets a 2-px gild underline. Implement as a
|
|
// ColorRect bottom-anchored at -1 within the button.
|
|
if (state == StepState.Active)
|
|
{
|
|
var underline = new ColorRect
|
|
{
|
|
Color = TryGetThemeColor("font_color", "Gild") ?? new Color("#b48a3c"),
|
|
MouseFilter = MouseFilterEnum.Ignore,
|
|
};
|
|
underline.AnchorTop = 1.0f;
|
|
underline.AnchorBottom = 1.0f;
|
|
underline.AnchorLeft = 0.14f;
|
|
underline.AnchorRight = 0.86f;
|
|
underline.OffsetTop = -2;
|
|
underline.OffsetBottom = 0;
|
|
btn.AddChild(underline);
|
|
}
|
|
|
|
return new StepEntry(btn, num, lbl);
|
|
}
|
|
|
|
private static void ApplyStateColors(Label num, Label name, StepState state)
|
|
{
|
|
// Default theme colours come from the StepperNum/StepperName variations
|
|
// (ink-mute). State overrides bring active steps to ink and complete
|
|
// to seal-red. Locked uses the dim default plus reduced opacity.
|
|
Color? numColor = state switch
|
|
{
|
|
StepState.Active => TryGetGlobalThemeColor("Ink", new Color("#2b1d10")),
|
|
StepState.Complete => TryGetGlobalThemeColor("Seal", new Color("#7a1f12")),
|
|
_ => null,
|
|
};
|
|
Color? nameColor = state switch
|
|
{
|
|
StepState.Active => TryGetGlobalThemeColor("Ink", new Color("#2b1d10")),
|
|
_ => null,
|
|
};
|
|
|
|
if (numColor.HasValue) num.AddThemeColorOverride("font_color", numColor.Value);
|
|
if (nameColor.HasValue) name.AddThemeColorOverride("font_color", nameColor.Value);
|
|
|
|
if (state == StepState.Complete)
|
|
num.Text = "✓ " + num.Text;
|
|
|
|
if (state == StepState.Locked)
|
|
{
|
|
num.Modulate = new Color(1, 1, 1, 0.45f);
|
|
name.Modulate = new Color(1, 1, 1, 0.45f);
|
|
}
|
|
}
|
|
|
|
private static Color? TryGetGlobalThemeColor(string name, Color fallback) => fallback;
|
|
|
|
private Color? TryGetThemeColor(string property, string variation)
|
|
{
|
|
if (HasThemeColor(property, variation)) return GetThemeColor(property, variation);
|
|
return null;
|
|
}
|
|
|
|
private static string Roman(int n) => n switch
|
|
{
|
|
1 => "I",
|
|
2 => "II",
|
|
3 => "III",
|
|
4 => "IV",
|
|
5 => "V",
|
|
6 => "VI",
|
|
7 => "VII",
|
|
8 => "VIII",
|
|
9 => "IX",
|
|
10 => "X",
|
|
_ => n.ToString(),
|
|
};
|
|
|
|
private readonly record struct StepEntry(Button Container, Label Num, Label Name);
|
|
}
|