Files
TheriapolisV3/Theriapolis.Godot/UI/Widgets/CodexStepper.cs
T
Christopher Wiebe 83c6343783 M6.21: Dark theme parity + card shadow polish + hover/selection fixes
--dark command-line flag swaps CodexTheme.DefaultPalette to Dark
before any UI mounts; both TitleScreen and Wizard pick it up via
the no-arg Build() overload.

Stepper colours track the active palette. ApplyStateColors and the
Active step's gild underline previously read from a stub that
hardcoded parchment values, so the Active label rendered as
brown-black ink against the dark bg (invisible). Both sites now
read CodexTheme.DefaultPalette directly.

Card hover stays applied while the cursor is over an inner Button.
PanelContainer.MouseExited fires when the cursor crosses onto a
child that captures input (Sire/Dam toggles, Sheep/Goat toggles,
trait pickers); the recheck defers and uses GetGlobalRect.HasPoint
on the cursor position so hover only drops when the cursor truly
leaves the card area.

Selection stylebox lands on first refresh. SetSelected was
previously called inside BuildCard before AddChild, so
HasThemeStylebox returned false (theme cascade unreachable) and
the override silently dropped — it only re-attached when
MouseEntered later re-ran Apply. Refactored SetSelected/SetHover
through a new ApplyOrDefer helper that uses CallDeferred when the
card isn't in tree yet, so the seal border + drop shadow appear
immediately on selection rather than only after the first hover.

Selection drop shadow refined. Was a 14px shadow at offset (0,14)
which overlapped the next card by 16px in the v_separation:12
grid. Now offset (4,4) + size 6 — diagonal "light from upper-left"
direction, total reach 10px, leaves a 2px clearance before the
next card so the shadow reads as a shadow on the surface below.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-09 22:55:40 -07:00

173 lines
6.0 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 = CodexTheme.DefaultPalette.Gild,
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.
// Pull the colours from CodexTheme.DefaultPalette so the stepper
// tracks the active palette (parchment vs dark) instead of forcing
// the parchment values regardless.
var palette = CodexTheme.DefaultPalette;
Color? numColor = state switch
{
StepState.Active => palette.Ink,
StepState.Complete => palette.Seal,
_ => null,
};
Color? nameColor = state switch
{
StepState.Active => palette.Ink,
_ => 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 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);
}