M5: Codex design system (dark theme) + kitchen-sink
Programmatic Theme builder + reusable popover and stepper widgets, ported from CharacterCreator.zip's :root design tokens. Kitchen-sink scene exercises every primitive for visual eyeballing. CodexPalette.cs: Color tokens lifted verbatim from the React prototype's `:root` block (--bg, --ink, --gild, --seal, etc.). Variable names mirror the CSS so the audit trail stays readable. Spacing locked at the prototype's normal density (--gap=24, --pad=28, --radius=2). Scope cut: only the Dark theme ships. The React prototype designed Parchment, Dark, and Blood as switchable variations — user direction during M5 is that only Dark (leather + candlelight) is wanted for this game. Parchment/Blood code dropped, plan doc updated to match (§1 goal #5, §4.5 UI map, §5 M5 scope, §10 resolved decisions #4). No runtime theme switcher. CodexTheme.Build(): Programmatically constructs a Godot Theme from CodexPalette.Dark plus CodexSpacing/CodexType tokens. Configures Panel, Card, CodexPopover styleboxes; Label variations for H1..H4, CodexTitle, Eyebrow, Meta, ValidationOk/Error, CardName/Body/Meta, StepperNum/ Name; Button + PrimaryButton + GhostButton variants; LineEdit, CheckBox, scrollbar styling. Fonts: looks for CormorantGaramond / CrimsonPro / JetBrainsMono TTFs in res://Fonts/ (or Content/Fonts/) and graceful-falls-back to Godot defaults if missing. M5 ships with no fonts in repo; user can drop them in later for typography parity with the React prototype. CodexPopover.cs: Hoverable text trigger + floating PanelContainer, mirrors src/trait-hint.jsx. Viewport-clamps horizontally and vertically; flips above the trigger if there's no room below; 80 ms grace period when moving cursor from trigger to popover. Detriment variant uses the seal-coloured stylebox. Future TraitName / SkillChip / BonusPill widgets layer className differences on top. CodexStepper.cs: Roman-numeral horizontal stepper with Pending / Active / Complete / Locked states. Active step gets a 2-px gild underline, Complete shows a ✓ in seal-red, Locked shows ✕ + 0.45 modulate. Emits StepClicked(int) for non-locked rows. M5 is decorative — M6 wires the signal to the character-creation state machine. KitchenSink.cs + Main.cs --codex-test: Verification scene rendering every primitive (header, stepper, buttons, inputs, cards, trait popovers). Clicks log to console. Fonts default to Godot's Noto Sans until res://Fonts/ is populated. Closes M5 of theriapolis-rpg-implementation-plan-godot-port.md. Next: M6 (title + character creation). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Christopher Wiebe
@@ -0,0 +1,214 @@
|
||||
using Godot;
|
||||
|
||||
namespace Theriapolis.GodotHost.UI.Widgets;
|
||||
|
||||
/// <summary>
|
||||
/// Hoverable text trigger that shows a floating popover with name + optional
|
||||
/// tag + description. Mirrors <c>src/trait-hint.jsx</c> from the React
|
||||
/// prototype — viewport-clamp horizontally and vertically, flip above/below
|
||||
/// based on available space, 80ms grace period when moving from trigger to
|
||||
/// popover so the popover stays open across the gap.
|
||||
///
|
||||
/// Used by future TraitName, SkillChip, BonusPill widgets — the React
|
||||
/// version layers className differences on top of this same primitive.
|
||||
/// </summary>
|
||||
public partial class CodexPopover : Control
|
||||
{
|
||||
[Export] public string TriggerText { get; set; } = "trait";
|
||||
[Export] public string Title { get; set; } = "";
|
||||
[Export] public string Tag { get; set; } = "";
|
||||
[Export] public string Description { get; set; } = "";
|
||||
[Export] public bool Detriment { get; set; }
|
||||
|
||||
private const float GracePeriodSec = 0.08f; // ~80 ms — matches trait-hint.jsx
|
||||
private const float ArrowOffset = 6f;
|
||||
private const int ViewportPad = 8;
|
||||
|
||||
private Label _trigger = null!;
|
||||
private PanelContainer? _popover;
|
||||
private Timer _closeTimer = null!;
|
||||
private bool _hovering;
|
||||
|
||||
public override void _Ready()
|
||||
{
|
||||
_trigger = new Label
|
||||
{
|
||||
Text = string.IsNullOrEmpty(Title) ? TriggerText : Title,
|
||||
ThemeTypeVariation = "Label",
|
||||
MouseFilter = MouseFilterEnum.Stop,
|
||||
};
|
||||
_trigger.MouseEntered += OnTriggerEntered;
|
||||
_trigger.MouseExited += OnTriggerExited;
|
||||
AddChild(_trigger);
|
||||
|
||||
_closeTimer = new Timer { OneShot = true, WaitTime = GracePeriodSec };
|
||||
_closeTimer.Timeout += HidePopover;
|
||||
AddChild(_closeTimer);
|
||||
|
||||
CustomMinimumSize = _trigger.GetMinimumSize();
|
||||
}
|
||||
|
||||
public override void _Notification(int what)
|
||||
{
|
||||
// Make sure the popover is freed if the trigger is removed.
|
||||
if (what == NotificationExitTree && _popover is not null)
|
||||
{
|
||||
_popover.QueueFree();
|
||||
_popover = null;
|
||||
}
|
||||
}
|
||||
|
||||
private void OnTriggerEntered()
|
||||
{
|
||||
_hovering = true;
|
||||
_closeTimer.Stop();
|
||||
ShowPopover();
|
||||
}
|
||||
|
||||
private void OnTriggerExited()
|
||||
{
|
||||
_hovering = false;
|
||||
_closeTimer.Start();
|
||||
}
|
||||
|
||||
private void OnPopoverEntered()
|
||||
{
|
||||
_closeTimer.Stop();
|
||||
}
|
||||
|
||||
private void OnPopoverExited()
|
||||
{
|
||||
_closeTimer.Start();
|
||||
}
|
||||
|
||||
private void ShowPopover()
|
||||
{
|
||||
if (_popover is not null && IsInstanceValid(_popover)) { Reposition(); return; }
|
||||
|
||||
_popover = BuildPopoverPanel();
|
||||
_popover.MouseEntered += OnPopoverEntered;
|
||||
_popover.MouseExited += OnPopoverExited;
|
||||
|
||||
var canvas = new CanvasLayer { Layer = 100 };
|
||||
canvas.Name = "CodexPopoverCanvas";
|
||||
canvas.AddChild(_popover);
|
||||
// Attach the canvas layer to the scene's root viewport so the popover
|
||||
// floats above every other UI element regardless of where the trigger
|
||||
// lives in the tree.
|
||||
GetTree().Root.AddChild(canvas);
|
||||
|
||||
// One frame later, the panel has its laid-out size; reposition with
|
||||
// viewport clamp + flip-above logic.
|
||||
CallDeferred(MethodName.Reposition);
|
||||
}
|
||||
|
||||
private void HidePopover()
|
||||
{
|
||||
if (_popover is null) return;
|
||||
// Free the canvas layer parent (which owns the popover).
|
||||
_popover.GetParent()?.QueueFree();
|
||||
_popover = null;
|
||||
}
|
||||
|
||||
private PanelContainer BuildPopoverPanel()
|
||||
{
|
||||
var panel = new PanelContainer
|
||||
{
|
||||
ThemeTypeVariation = "CodexPopover",
|
||||
MouseFilter = MouseFilterEnum.Pass,
|
||||
ZIndex = 100,
|
||||
// Detriment popovers swap to the seal-coloured stylebox.
|
||||
// Theme stylebox names live under "panel" for the default and
|
||||
// "panel_detriment" for the variant; we set whichever via override.
|
||||
};
|
||||
if (Detriment && panel.HasThemeStylebox("panel_detriment", "CodexPopover"))
|
||||
{
|
||||
var box = panel.GetThemeStylebox("panel_detriment", "CodexPopover");
|
||||
panel.AddThemeStyleboxOverride("panel", box);
|
||||
}
|
||||
|
||||
var vbox = new VBoxContainer { CustomMinimumSize = new Vector2(220, 0) };
|
||||
panel.AddChild(vbox);
|
||||
|
||||
var nameRow = new HBoxContainer();
|
||||
nameRow.AddChild(new Label
|
||||
{
|
||||
Text = string.IsNullOrEmpty(Title) ? TriggerText : Title,
|
||||
ThemeTypeVariation = "H3",
|
||||
});
|
||||
if (!string.IsNullOrEmpty(Tag))
|
||||
{
|
||||
var tagPill = new Label
|
||||
{
|
||||
Text = Tag.ToUpperInvariant(),
|
||||
ThemeTypeVariation = "ValidationOk",
|
||||
};
|
||||
nameRow.AddChild(tagPill);
|
||||
}
|
||||
if (Detriment)
|
||||
{
|
||||
var detPill = new Label
|
||||
{
|
||||
Text = "DETRIMENT",
|
||||
ThemeTypeVariation = "ValidationOk",
|
||||
};
|
||||
nameRow.AddChild(detPill);
|
||||
}
|
||||
vbox.AddChild(nameRow);
|
||||
|
||||
if (!string.IsNullOrEmpty(Description))
|
||||
{
|
||||
var desc = new Label
|
||||
{
|
||||
Text = Description,
|
||||
AutowrapMode = TextServer.AutowrapMode.WordSmart,
|
||||
ThemeTypeVariation = "CardBody",
|
||||
};
|
||||
vbox.AddChild(desc);
|
||||
}
|
||||
|
||||
return panel;
|
||||
}
|
||||
|
||||
private void Reposition()
|
||||
{
|
||||
if (_popover is null || !IsInstanceValid(_popover)) return;
|
||||
|
||||
var viewport = GetViewport().GetVisibleRect();
|
||||
var trig = _trigger.GetGlobalRect();
|
||||
var size = _popover.GetCombinedMinimumSize();
|
||||
|
||||
float left = trig.Position.X;
|
||||
float top = trig.Position.Y + trig.Size.Y + ArrowOffset;
|
||||
bool flippedAbove = false;
|
||||
|
||||
if (top + size.Y + ViewportPad > viewport.Size.Y &&
|
||||
trig.Position.Y - ArrowOffset - size.Y >= ViewportPad)
|
||||
{
|
||||
top = trig.Position.Y - ArrowOffset - size.Y;
|
||||
flippedAbove = true;
|
||||
}
|
||||
|
||||
if (left + size.X + ViewportPad > viewport.Size.X)
|
||||
left = viewport.Size.X - size.X - ViewportPad;
|
||||
if (left < ViewportPad) left = ViewportPad;
|
||||
|
||||
if (top + size.Y + ViewportPad > viewport.Size.Y)
|
||||
top = viewport.Size.Y - size.Y - ViewportPad;
|
||||
if (top < ViewportPad) top = ViewportPad;
|
||||
|
||||
_popover.Position = new Vector2(left, top);
|
||||
_popover.Size = size;
|
||||
// flippedAbove can drive a future arrow image; we don't render an
|
||||
// arrow in M5 — the React version's CSS pseudo-element doesn't
|
||||
// map cleanly onto Godot's StyleBox. Border + shadow is sufficient.
|
||||
_ = flippedAbove;
|
||||
}
|
||||
|
||||
public override void _Process(double delta)
|
||||
{
|
||||
// If the trigger is still mounted but the popover got orphaned for any
|
||||
// reason, drop our reference so a fresh hover re-creates it.
|
||||
if (_popover is not null && !IsInstanceValid(_popover)) _popover = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
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.
|
||||
var vbox = new VBoxContainer
|
||||
{
|
||||
MouseFilter = MouseFilterEnum.Ignore,
|
||||
SizeFlagsHorizontal = SizeFlags.ExpandFill,
|
||||
SizeFlagsVertical = SizeFlags.ExpandFill,
|
||||
Alignment = BoxContainer.AlignmentMode.Center,
|
||||
};
|
||||
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);
|
||||
}
|
||||
Reference in New Issue
Block a user