Christopher Wiebe
953bb985ad
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>
88 lines
2.7 KiB
C#
88 lines
2.7 KiB
C#
using Godot;
|
|
|
|
namespace Theriapolis.GodotHost.UI;
|
|
|
|
/// <summary>
|
|
/// Color, font, and spacing tokens lifted from
|
|
/// <c>CharacterCreator.zip/index.html</c>'s <c>:root</c> block. Variable
|
|
/// names mirror the React prototype's CSS custom properties so the audit
|
|
/// trail is readable: --bg, --ink, --gild, --seal, etc.
|
|
///
|
|
/// Single theme ships: Dark (leather + candlelight). The React prototype
|
|
/// shipped Parchment and Blood as alternates and Compact density as a dev
|
|
/// toggle; per user direction during M5, only Dark is needed for this
|
|
/// game and the rest are dropped from scope (port plan §10 resolved
|
|
/// decisions).
|
|
/// </summary>
|
|
public struct CodexPalette
|
|
{
|
|
public Color Bg, Bg2, BgDeep, Ink, InkSoft, InkMute, Rule, Gild, Seal, Seal2, Accent;
|
|
|
|
public static readonly CodexPalette Dark = new()
|
|
{
|
|
Bg = Hex("#1c1410"),
|
|
Bg2 = Hex("#261b14"),
|
|
BgDeep = Hex("#100a07"),
|
|
Ink = Hex("#f0e2c4"),
|
|
InkSoft = Hex("#d4be90"),
|
|
InkMute = Hex("#8c7651"),
|
|
Rule = Hex("#6b5635"),
|
|
Gild = Hex("#d8a84a"),
|
|
Seal = Hex("#b03021"),
|
|
Seal2 = Hex("#7a1f12"),
|
|
Accent = Hex("#d8a84a"),
|
|
};
|
|
|
|
private static Color Hex(string s) => new(s);
|
|
}
|
|
|
|
/// <summary>
|
|
/// Spacing + radius tokens. Density is locked at "normal" per port plan
|
|
/// §10 (compact mode dropped from scope).
|
|
/// </summary>
|
|
public static class CodexSpacing
|
|
{
|
|
public const int Gap = 24; // --gap
|
|
public const int Pad = 28; // --pad
|
|
public const int Radius = 2; // --radius
|
|
}
|
|
|
|
/// <summary>
|
|
/// Font-size + letter-spacing tokens. Sizes are in px, matching the CSS.
|
|
/// Letter-spacing values are in em multiplied by 1000 (em isn't a Godot
|
|
/// concept; we use it for documentation only — see CodexTheme for actual
|
|
/// Theme constant assignment).
|
|
/// </summary>
|
|
public static class CodexType
|
|
{
|
|
// Headings (h1..h4)
|
|
public const int H1Size = 38;
|
|
public const int H2Size = 28;
|
|
public const int H3Size = 20;
|
|
public const int H4Size = 14;
|
|
|
|
// Body / display
|
|
public const int BodySize = 14;
|
|
public const int BodyLargeSize = 15;
|
|
|
|
// Mono micro-text (eyebrows, meta lines, codex-sub)
|
|
public const int MonoEyebrowSize = 11;
|
|
public const int MonoSmallSize = 10;
|
|
public const int MonoXSmallSize = 9;
|
|
|
|
// Codex title (.codex-title)
|
|
public const int CodexTitleSize = 28;
|
|
|
|
// Card components
|
|
public const int CardNameSize = 22;
|
|
public const int CardBodySize = 14;
|
|
|
|
// Buttons
|
|
public const int BtnSize = 16;
|
|
public const int BtnSmallSize = 13;
|
|
|
|
// Stepper
|
|
public const int StepperNumSize = 22;
|
|
public const int StepperNameSize = 10;
|
|
}
|