code_of_conquest_dnd/mockups

Handoff: Code of Conquest — Game UI

Overview

Code of Conquest is a single-player, top-down / isometric, turn-based RPG in a gritty high-fantasy world ("The Margreave"). The party is the player character plus AI-controlled companions (NPCs); the story is delivered turn-by-turn by a "Dungeon Master" (DM) narrator, in the spirit of a tabletop D&D session. Target platform: Godot 4.7. Target render resolution: 1920×1080 (16:9).

This bundle contains 11 UI screens designed as a single, consistent visual system. They are meant to be translated into Godot 4.7 scenes (Control-node UI).

Tone — read this first. The whole game is written and styled to be "gritty, not grim." The reference is Batman/DC comics, not Warhammer and not Care Bears. People get hangovers, wounds get infected, people curse and bleed — but it is not nihilistic. All placeholder copy in these files reflects that tone and can be reused or rewritten in the same voice. Recurring tagline: "The world has real problems, and it does not care about you."

---

About the Design Files

The files here are design references authored in HTML/CSS/JS — high-fidelity prototypes showing the intended look, layout, and behavior. They are not production code to ship. The task is to recreate each screen as a Godot 4.7 scene using Godot's own UI system (Control nodes, Theme resources, TextureRect/NinePatchRect, Label/RichTextLabel, Container nodes) and to port the interaction logic to GDScript. Where these mocks use placeholder boxes (dashed rectangles labeled "PORTRAIT", "KEY ART", "ISOMETRIC WORLD VIEW", etc.), those are art slots to be filled with real game art.

How the files are built (and how to view them)

Each screen is a .dc.html component: an HTML file with a template plus a small JavaScript logic class (a React-like Component with state + a renderVals() method). They depend on the runtime support.js included in this folder. To preview a screen, serve this folder over a local static server (e.g. python3 -m http.server) and open the .dc.html file — opening via file:// may not load support.js.

You do not need to run them to implement them. Each .dc.html is readable as plain source:

• The template section = the markup + inline styles (all styling is inline; there are no external stylesheets). This gives you exact layout, sizes, and colors.
• The class Component extends DCLogic / renderVals() section = the state model and interaction logic (initiative order, point-buy math, shop economy, dialogue tree, etc.). Port this logic to GDScript.

Fidelity

High-fidelity. Colors, typography, spacing, and interactions are final-intent. Recreate the UI faithfully, then swap placeholder art boxes for real assets. One exception: Main Window + Wireframes.dc.html contains both the hi-fi main HUD (top, labeled option "2a") and four earlier low-fi wireframe explorations (below it) kept for context — build from 2a.

---

Global Design System

Canvas

• Every screen is a fixed 1920×1080 stage. Design for a 16:9 reference resolution and anchor/scale from there.
• Overlays (Pause Menu) dim + blur the scene behind them.

The core layout motif — "Dark Bay + Parchment"

Almost every screen is a two-panel split:

• Dark "bay" (left on most screens; right on Dialogue/Shop): a textured near-black panel for portraits, the world/battlefield, a merchant, or an NPC. Built from a diagonal stripe repeating-linear-gradient(135deg, #26221c 0, #26221c 16px, #221e18 16px, #221e18 32px) plus a radial vignette overlay radial-gradient(120% 70% at 50% 38%, transparent 32–45%, rgba(0,0,0,.5–.62) 100%).
• Parchment "sheet/journal/page" (the content side): vertical gradient linear-gradient(180deg, #ece2ca, #e4d8bd), with content cards in #f1e8d2 bordered #bfa878.
• The two panels are divided by a 4px #1a1512 border (border-left).

Keep this split and these two textures consistent — it's the game's UI identity.

Color tokens (exact hex)

Backgrounds / dark

• Near-black stage: #0a0806, #0f0d0b
• Dark bay stripe: #26221c / #221e18 (also seen #201a14/#1a150f, #211d17/#1d1914)
• Dark translucent panels: rgba(18,15,11,.7), rgba(14,11,9,.85), rgba(10,8,6,.9)
• Dark borders (light→dark): #6b6152, #5a5348, #4a4238, #3a352e, #1a1512

Parchment

• Sheet gradient: #ece2ca → #e4d8bd; log/page variants #e7dcc4→#ddd0b2, #ece2ca→#e4d8bd
• Cards: #f1e8d2; darker insets #e6d9b8, #e4d6b6, #d9c9a2, #d3c39a
• Parchment borders: #bfa878, #cbb684, #a99464, #8f7a4a
• Ink text: headings #3a2f1c / #4a3520, body #4a3f2c, muted #6a5a3a / #7a684a, labels #5a4326
• Parchment gold-ink accents: #8f6a2a, #8a7748, #a9885a

Text on dark

• Bone/cream (primary): #e8d9b6, #e8ddc8, #f0e6d0, #f4e6cf
• Secondary: #c9bda3, #d8ccb2
• Muted mono: #9a8f78, #8a7f6c, #7a7060, #5a5040

Accent hues (all deliberately muted / desaturated for grit)

• Blood red (primary CTA, danger, selection, enemies): #8f3a34 (core), #a5423a, #7a2f29, #b8524a, #a5442e, #6f2620
• Gold / brass (highlights, currency, primary-stat, "current turn"): #a9843f, #c8963f, #8f6a2a, #a5772a, #c9a45a, #d9b46a
• Steel blue-teal (allies, mana): #5f8a9a, #4f7ab8, #243f6f, #9caccb
• Green (stamina, success, "cleared"): #5f8a4f, #8f9a4f, #7a9a5a, #2f7a4a

Stat bars

• HP: linear-gradient(90deg, #b8524a, #8f3a34) on track #2a251f border #4a4238
• MP: linear-gradient(90deg, #4f7ab8, #243f6f)
• Stamina: #8f9a4f

Rarity (items) — colored 3px bar at the bottom of each item tile + used for item-name text:

• common #8a8378 · uncommon #5f8a4f · rare #4f7ab8 · epic #8a5fb8 · legendary #c8963f

Typography

Three families, used consistently:

1. Georgia (serif) — headings, the logo (bold up to 116px), and all narrative/DM/flavor body text (often italic). This is the "prose" voice.
2. Architects Daughter (Google Font, handwritten) — accent display type: nameplates, big stat numbers, section flourishes, DM-header labels, hand-inked feel. Load it, or substitute a comparable hand-drawn font in Godot.
3. Monospace (ui-monospace/system mono) — all UI chrome: labels, keybinds, numeric readouts, tags/chips. Usually UPPERCASE with letter-spacing 0.06–0.24em.

• Plain system-ui sans is used for button labels and item names.

Reusable patterns (build these as shared Godot components/Theme styles)

• Item tile: rounded square, 2px rarity-colored border on filled slots, a short mono glyph/abbreviation centered (placeholder for an icon), a 3px rarity bar near the bottom, optional ×N stack count. Empty slots are dashed/recessed.
• Selection states: red (#8f3a34) ring + a small mono tag (CHOSEN / ◎ TARGET) for the player's pick; gold (#8f6a2a/#c8963f) ring + PRIMARY tag for system-highlighted things.
• Tag/chip: mono uppercase, ~10–11px, colored text + matching 1px border + faint tinted background; semantic color (red = aggressive/danger, gold = pay/faith/primary, grey = neutral/locked).
• Tabs: pill buttons; active = solid #8f3a34 bg with cream text; inactive = #efe6cf/dark with muted text + #cbb684 border.
• Primary button (CTA): linear-gradient(180deg, #a5423a, #7a2f29), #8f3a34 border, cream text, box-shadow: 0 4px 16px rgba(143,58,52,.35); hover brightens to #b8524a/#8f3a34.
• Danger/"FAILED"/"COMBAT" stamps: 4px colored border, heavy mono uppercase, rotated ~ -6° to -11°, ~72% opacity.
• Art-slot placeholder: dashed #5a5348 or #4a4238 border, a stripe fill, and a centered mono caption naming what art goes there.

---

Screens / Views

For each screen: read the .dc.html template for exact pixel values and the Component class for the state model. Summaries below cover purpose, layout, key components, interactions, and state.

1. Title Screen — Title Screen.dc.html

• Purpose: Main menu / first impression.
• Layout: Full-bleed atmospheric background; left-aligned content column (padding: 0 120px) vertically centered.
• Components: Background = warm-to-black radial radial-gradient(120% 90% at 70% 20%, #2a2018, #160f0a 45%, #0a0806) + a faint diagonal-stripe key-art placeholder + an off-screen fire glow (radial-gradient bottom, animated opacity) + heavy vignette + drifting ember particles (10 small colored dots, @keyframes ember rising 460px over 7–11s with fade). Logo: kicker "A DARK FANTASY RPG" (mono, letter-spacing:.42em, #a9843f), title "CODE OF CONQUEST" (Georgia 800, 116px, #e8ddc8, two lines), a gold rule, and the tagline (Architects Daughter, 20px, #b0a488). Menu list below.
• Interactions / state: state.sel (index). Menu items: New Game, Continue (with save-info subline "CHAPTER II · VEXCCA · 14:22:07"), Load Game, Settings, Credits, Quit. A gold ◆ marker shows on the selected item (opacity toggle); selected item text brightens to #f0e6d0; hover brightens any item. Footer: version "v0.4.1 · BUILT IN GODOT 4.7 · © 2026" (left) and a [↑ ↓] CHOOSE [↵] ENTER hint (right).

2. Character Creation — Character Creation.dc.html

• Purpose: Build a character before play.
• Layout: Dark portrait bay (left, 660px) + parchment character sheet (right, 1260px).
• Left (bay): "WHO WILL YOU BE?" label, a tall model art slot with ‹ › rotate arrows, a live nameplate (displayName in Architects Daughter + "RACE · CLASS"), and a "THE DM SIZES YOU UP" parchment inset showing a live gritty origin blurb.
• Right (sheet): Header; RACE (4 selectable cards: Human / Elf / Dwarf / Beastfolk, each with a gritty one-liner + trait); CALLING (5 cards: Sellsword / Cutpurse / Hedge-Mage / Bonesetter / Trapper, each tagged with its primary stat); ABILITY SCORES; footer with a NAME text field + "ENTER THE WORLD" CTA.
• Stats (important, game-specific): Six stats exist — STR · DEX · CON · FTH (Faith) · MAG (Magic) · LCK (Luck) — but only five are visible. LCK is hidden from the player entirely: it is rolled silently in the background (kept in state, never rendered — no number, no bar, no row); the player only ever "feels" it through opening-scene prose. Do not surface LCK anywhere in the UI.
  • Each visible stat is rolled to a base via 3d6 (die/formula is flagged TUNABLE in the logic — treat as configurable). The rolled value is a hard floor.
  • There is a shared +3 spend-up pool, additive only: a +-only stepper per row, a "points left" counter, no minus button. A green +N badge shows points added to a row.
  • The selected class's primary stat is highlighted (gold ring + PRIMARY tag): Sellsword→STR, Cutpurse→DEX, Hedge-Mage→MAG, Bonesetter→FTH, Trapper→DEX.
  • A ⟳ re-roll re-rolls all floors (including hidden LCK) and clears spent points.
• State: race, cls, rolled{STR..LCK}, spent{5 visible}, name. Selecting race/class updates highlight + the origin blurb + nameplate. See renderVals() for the point-buy guards.

3. Character Sheet — Character Sheet.dc.html

• Purpose: Persistent character overview (opened in-game with C).
• Layout: Dark portrait bay (left, 560px) + parchment sheet (right, 1360px, three columns).
• Left: portrait slot, nameplate, XP bar, HP/MP vitals, and prominent condition badges (e.g. "⚠ Infected bite — left arm", "Hungover").
• Right, col A: ATTRIBUTES (modifier-forward: big signed modifier + small score; 5 visible stats, LCK still hidden) and SAVING THROWS (proficiency ● / ○ dots + signed value).
• Right, col B: "IN A FIGHT" derived-stat grid (Armor, Initiative, Speed, Carry, Melee, Ranged, Spell DC, Death Saves) and a two-column SKILLS list (proficiency dot + ability tag + value).
• Right, col C: TALENTS (name + description cards), AFFLICTIONS (gritty, color-coded by severity red #8f3a34 / amber #a5772a), and a "THE DM'S NOTES" bio (italic, dashed-border parchment).
• State: mostly static display; renderVals() computes ability modifiers floor((score-10)/2) and skill/save values from a +2 proficiency bonus. Example character: Vexcca, human Sellsword, lvl 4.

4. Inventory — Inventory.dc.html

• Purpose: Equipment + carried items (opened with I).
• Layout: Dark paper-doll (left, 620px) + parchment "Satchel" (right, 1300px).
• Left: a central model slot with 12 equipment slots positioned around it (head, amulet, chest, cloak, gloves, belt, mainhand, offhand, ring×2, legs, boots); filled slots show a rarity bar; a derived stat strip (Armor / Damage / HP / MP).
• Right: header with gold and an encumbrance bar (fills amber→red via weightColor), category tabs (All / Weapons / Armor / Consumables / Misc) that filter live, a 12×5 item grid, and an item detail card at the bottom.
• Interactions / state: sel (selected item id), tab. Clicking any grid item or equipped slot selects it → detail card updates (rarity-colored name, type, stat lines, flavor, weight/value, and context actions Equip / Use / Drop shown conditionally). Tabs filter the grid. Item data (name, cat, rarity, glyph, weight, value, stats, flavor) is in the items() map — reuse it as seed data.

5. World Map — World Map.dc.html

• Purpose: Region travel (opened with M).
• Layout: Parchment map (left, flex) + dark location-detail panel (right, 560px).
• Map: header ("The Margreave" + subtitle), a legend, the map surface (radial parchment; terrain illustration is an art slot), a compass and scale bar. On it: location markers — settlements = circles, dungeons/ruins = diamonds, hostile = red, uncharted = grey fog "?" markers; the current town pulses. Roads are dashed SVG <line>s between locations; a red planned-route line runs from the current location to the selected one.
• Detail panel: selected location's type + status tag, a danger rating (☠), gritty description, any quests here, and travel time + a "SET OUT ▸" CTA (or "You are here" at the current node).
• Interactions / state: sel (location id). Clicking a discovered marker selects it (uncharted markers are non-interactive). Locations carry x,y (0–100 %), status (current/hostile/discovered/undiscovered), danger (0–4), desc, quests[]. Travel time is computed from map distance. Marker/road projection math is in renderVals().

6. Quest Log — Quest Log.dc.html

• Purpose: Track quests (opened with J).
• Layout: Dark journal (left, 620px) + parchment "open page" (right, 1300px).
• Left: tabs with counts (Active / Completed / Failed) and a scrollable quest list — each entry shows type color (main = gold, side = green, bounty = red), location, progress (2/4), and a ★ on the tracked quest.
• Right: selected quest's type/giver/location, a DM-voice brief, an objectives checklist (done items struck through; the active one flagged CURRENT), and an "ON COMPLETION" rewards row (gold / XP / item). Track (★/☆) + Abandon for active quests; completed/failed quests get a rotated COMPLETED / FAILED stamp.
• State: sel, tab, tracked. Switching tab auto-selects the first quest in it. Quest data (type, status, giver, loc, desc, objectives[{text,done}], rewards) is in questData().

7. Shop — Shop.dc.html

• Purpose: Buy/sell with a fence.
• Layout: Parchment wares (left, 1180px) + dark merchant panel (right, 740px).
• Left: header with your purse + the merchant's coin, Buy/Sell tabs, and item rows (rarity tile, name/type, stock-or-owned qty, price).
• Right: merchant "Grud Ninefingers" (portrait slot + a reaction line that changes as you deal), the selected item's detail, the deal price, and a BUY/SELL CTA.
• Interactions / state (a real economy loop): mode (buy/sell), sel, gold, merchantGold, stock{}, owned{}, msg. Buy deducts your gold, moves one unit from stock→owned, adds to merchant coin. Sell pays you ~40% of value, moves item owned→stock, deducts merchant coin. The CTA disables with a gritty reason when you're broke, the merchant is tapped out, an item is sold out, or worthless (value 0). Buy price = item value; sell price = round(value*0.4).

8. Pause Menu / Settings — Pause Menu.dc.html

• Purpose: In-game pause + settings (overlay).
• Layout: The scene is dimmed + blurred (rgba(8,6,4,.72) + backdrop-filter: blur(2px)); a centered 1560×920 ornate-framed panel (8px #1a1512 border + inner 1.5px #a9843f hairline). Left rail (dark, 400px) + right settings (parchment).
• Left rail: "Paused", chapter, action buttons (Resume [primary] / Save Game / Load Game / Quit to Title), and footer status (playtime, last autosave, a permadeath warning).
• Right: SETTINGS with four tabs — Gameplay / Video / Audio / Controls — each rendering a list of controls.
• Controls (fully interactive): custom toggle switches, native range sliders (styled — thumb #8f6a2a, track #cbb684), native selects, and keybind rows (key-cap chips). Gameplay: difficulty select, permadeath/gore/tutorial toggles, narration-speed slider, autosave select. Video: window mode/resolution selects, brightness slider, VSync/motion-blur/damage-flash toggles. Audio: master/music/effects/ambience sliders + subtitles toggle. Controls: keybinds (WASD, E, LMB, ↵, I, C, J, M) + mouse-sensitivity slider + invert-Y toggle. Note the keybinds here are the canonical in-game key map.
• State: tab + a s{} settings object. Controls are generated per tab in renderVals() (slider/toggle/select/keybind helpers) — a good template for a data-driven settings menu in Godot.

9. Dialogue / Conversation — Dialogue.dc.html

• Purpose: Branching NPC conversation.
• Layout: Dimmed scene; NPC side (left, 640px) + parchment conversation (right, flex).
• Left: NPC portrait slot, nameplate (Grud the fence), and a live disposition meter (Hostile → Wary → Neutral → Warming, color-shifting bar).
• Right: speaker label, a DM-voice narration beat (italic), the NPC's spoken line (Georgia 34px, in “curly quotes”), and a numbered response list.
• Choices: each response can carry a skill/approach tag chip (INTIMIDATE · STR, HAGGLE · DEX, FAITH, PAY ◈40 — colored red/gold/grey) and can be gated/disabled (🔒 with a requirement note).
• Interactions / state: node (current dialogue node), disp (0–100 disposition). Selecting a response navigates a real dialogue tree (nodes()), applies a disposition delta (dd), and can dead-end into a COMBAT stamp or a clean exit; terminal nodes offer to restart. Port nodes() as your dialogue-graph data.

10. Combat HUD / Turn Tracker — Combat HUD.dc.html

• Purpose: The turn-based fight screen. The player controls only their own character; the DM resolves the AI companions' and enemies' turns.
• Layout (flex column): top turn tracker ribbon → middle row (left party+log, center battlefield, right enemies) → bottom command bar.
• Turn tracker: every combatant in initiative order with mini HP; the active unit is lifted + pulsing (@keyframes cturn); downed units marked ✕; color-coded (gold = you, teal = AI party, red = enemies) + a ROUND counter.
• Center — isometric battle board: a 7×6 diamond-tile grid (CSS clip-path diamonds, iso projection x=(c-r)*44, y=(c+r)*23) with unit tokens on tiles (colored disc + initial + ground shadow + HP bar). Live with state: active unit's tile outlines gold and its token pulses; on your turn reachable tiles tint teal (move range, Manhattan ≤2); the targeted enemy's tile outlines red and its token gets a dashed red reticle; dead units grey out; a VICTORY/DEFEAT stamp overlays on end. This is the placeholder for the real isometric battlefield — token positions come from POS().
• Left: "YOUR PARTY · AI" companion cards (HP) + a parchment DM combat log (newest first).
• Right: ENEMIES list — click to target (selected gets a red border + ◎ TARGET).
• Bottom: active-hero panel (portrait, HP, action-economy pips: Action ● / Bonus ● / Move) + ability bar (Falchion Slash, Reckless Swing, Shield Bash, Second Wind, Bile Bomb — each tagged ACTION/BONUS with a keybind) + the turn-action button (End Turn on your turn; "RESOLVE {name} ▸" on an AI turn).
• Interactions / state: hp{} per unit, turnPos (index into initiative order), round, target, used{action,bonus}, over (null/victory/defeat), log[]. On your turn: select an enemy, then use abilities (each spends its Action/Bonus, rolls damage from the ability's range, applies to target or heals self, logs a DM line); End Turn advances initiative (resetting your economy when it returns to you). On an AI turn: Resolve plays out that unit's action (enemies hit your side, allies hit enemies) with a narrated log line, then advances. Combat ends at all-enemies-down (victory) or player-down (defeat). Unit stats (init, max HP, AC, glyph) are in base(); abilities in abilityDefs(). This state machine is the spec for your GDScript turn manager.

11. Main Window + Wireframes — Main Window + Wireframes.dc.html

• Purpose: The core exploration HUD (the "tabletop split" main game screen). Build from option "2a" at the top — the four items below it are earlier low-fi wireframes kept only for context.
• 2a layout: isometric world view (left, ~1180px) + a permanent narration "book" (right, ~740px) where the DM tells the story turn-by-turn with inline response choices.
• World side: a turn-order rail (initiative portraits, active ringed gold, downed ✕), a minimap, a slide-in system dock (Inventory / Character / Quest Log / Spellbook / World Map / Party — toggled by a gold tab, animates in/out), and a bottom command bar: HP/MP bars + gold, a quick-select consumables row (drawn from inventory), and an End Turn button.
• Book side (parchment): "THE DUNGEON MASTER" header, narration paragraphs, an action-result callout, numbered response choices, and a free-text "describe your own action" line (reinforcing the tabletop feel).
• State: dockOpen (the system dock slide toggle). The rest is layout.

---

Godot 4.7 Translation Notes

• Resolution: author scenes at 1920×1080; set the project's stretch mode to canvas_items with a 1920×1080 reference and keep aspect (or expand) so the fixed layouts scale cleanly.
• Palette + type → Theme: put the color tokens and the three font families into a shared Theme resource with named StyleBoxes for the recurring pieces (parchment card, dark panel, primary button, tab active/inactive, item tile, tag/chip). Every screen pulls from it — that's what keeps the look consistent.
• Panels/containers: the two-panel splits map to HBoxContainer/HSplitContainer; stat/skill/ability grids to GridContainer; lists to VBoxContainer (+ ScrollContainer). Use MarginContainer for the paddings noted in the templates.
• Textures: parchment gradient, dark stripe, and vignette are best baked as texture assets (or NinePatchRect + a shader) rather than reproduced as many gradient nodes. Art slots (portraits, key art, terrain, isometric world/battlefield) become TextureRect/SubViewport.
• Narrative text: use RichTextLabel for DM narration / quest briefs / dialogue lines (supports the italic + inline colored callouts).
• Logic → GDScript: the Component classes are the behavior spec. The highest-value ports: the combat turn manager (Combat HUD), the dialogue graph (Dialogue nodes()), the shop economy (Shop), and point-buy character creation (with the hidden-LCK rule). Reuse the seed data maps (items, quests, locations, units, abilities) as starting Resources / dictionaries.
• Fonts: "Architects Daughter" (Google Fonts, OFL) and Georgia — bundle equivalents; if Georgia is unavailable, substitute a comparable serif and keep weights/sizes.

Assets

No real art is included — all imagery is placeholder art slots (dashed boxes with captions naming what belongs there): character portraits/models, world/battlefield isometric renders, the world-map terrain illustration, key art, item/ability icons (currently short mono glyphs like FAL, SLV, RNG), and NPC/merchant mugshots. Icons are represented by 2–4-letter abbreviations to be replaced with real icon assets. Fonts: Architects Daughter (Google Fonts) + Georgia (system serif).

Files

• Title Screen.dc.html
• Character Creation.dc.html
• Character Sheet.dc.html
• Inventory.dc.html
• World Map.dc.html
• Quest Log.dc.html
• Shop.dc.html
• Pause Menu.dc.html
• Dialogue.dc.html
• Combat HUD.dc.html
• Main Window + Wireframes.dc.html (build from option 2a)
• support.js — runtime required only to preview the .dc.html files in a browser; not needed for the Godot implementation.