hero-feature #4

whitlocktech · 2026-06-28T14:18:21Z

whitlocktech commented

2026-06-28 14:18:21 +00:00

Hero Canvas Editor (v1)

Summary

This PR introduces a complete WYSIWYG hero canvas editor for the portal, allowing administrators to visually build, preview, draft, and publish hero layouts without modifying code.

The implementation was completed in four phases, culminating in a full-featured editor with drag-and-drop editing, resizing, snap grids, image uploads, live preview, and a faithful scaled representation of the production hero.

Highlights

Layout-driven hero rendering

Introduces a JSON-based hero_layout configuration
Adds shared rendering through HeroElement
Falls back to a default layout that exactly matches the existing hero until a custom layout is published
Keeps hero_layout_draft admin-only while exposing only published layouts publicly

Shared rendering architecture

New shared heroLayout utilities used by both the portal and editor
Portal and editor now render from the same layout engine
Version-checked parsing with graceful fallbacks

New Hero Editor (`/admin/hero`)

Live 16:9 canvas preview
Background image upload
Background positioning (3×3 grid)
Overlay opacity controls
Debounced auto-save (800 ms)
Draft / Preview / Publish / Revert workflow
Preview mode via /?preview=1
Draft banner when previewing unpublished changes

Visual editing

Click-to-select elements
Drag-and-drop positioning using native Pointer Events
Delete support
Z-order controls
Property panels for each element type
Live editing with immediate canvas updates

Supported element types

Text blocks
Button groups
Moon
Badge
Image

Each element includes dedicated editing controls.

Resize support

Corner resize handles
Scale-aware resizing
Element-specific resize behavior:
- Images → width
- Moon → size
- Text blocks → width

Snap grid

Optional 8px snap grid
Visual grid overlay
Drag snapping when enabled

Faithful editing canvas

Addresses feedback that the original editor was too cramped.

Changes include:

Admin hero page now uses the full available content width
Canvas is now a scaled 1280×720 stage
Scale-aware drag and resize math
Viewport-based typography scales identically to production
Default content no longer overlaps
Canvas accurately represents the live portal

Real hero moon

Replaces the generated CSS moon with the actual moon artwork extracted from the hero image.

Adds:

Moon image asset
Circular alpha mask
Adjustable size
Glow controls

Technical Details

New Components

HeroEditor
HeroElement

New Shared Utilities

heroLayout.js

Portal Changes

Layout-driven rendering
Shared rendering pipeline
Preview mode support

Admin Changes

New /admin/hero route
Sidebar navigation entry
Full-width editor layout

Settings

Adds hero_layout to public settings
hero_layout_draft remains admin-only
No database schema changes

Verification

Verified end-to-end:

Default hero renders identically before publishing
Draft auto-save works
Preview displays unpublished drafts
Publish updates the live portal
Background editing updates in real time
Drag-and-drop positioning works
Resize handles function correctly
Snap grid operates correctly
All five element types can be created and edited
Image uploads function correctly
Real moon artwork renders correctly
Default editor elements no longer overlap
Clean client build
No console errors

Notes

Completes the planned Hero Canvas Editor v1 implementation described in HERO_EDITOR.md.
No database schema changes.
No new dependencies introduced.

# Hero Canvas Editor (v1) ## Summary This PR introduces a complete WYSIWYG hero canvas editor for the portal, allowing administrators to visually build, preview, draft, and publish hero layouts without modifying code. The implementation was completed in four phases, culminating in a full-featured editor with drag-and-drop editing, resizing, snap grids, image uploads, live preview, and a faithful scaled representation of the production hero. --- ## Highlights ### Layout-driven hero rendering * Introduces a JSON-based `hero_layout` configuration * Adds shared rendering through `HeroElement` * Falls back to a default layout that exactly matches the existing hero until a custom layout is published * Keeps `hero_layout_draft` admin-only while exposing only published layouts publicly ### Shared rendering architecture * New shared `heroLayout` utilities used by both the portal and editor * Portal and editor now render from the same layout engine * Version-checked parsing with graceful fallbacks ### New Hero Editor (`/admin/hero`) * Live 16:9 canvas preview * Background image upload * Background positioning (3×3 grid) * Overlay opacity controls * Debounced auto-save (800 ms) * Draft / Preview / Publish / Revert workflow * Preview mode via `/?preview=1` * Draft banner when previewing unpublished changes ### Visual editing * Click-to-select elements * Drag-and-drop positioning using native Pointer Events * Delete support * Z-order controls * Property panels for each element type * Live editing with immediate canvas updates ### Supported element types * Text blocks * Button groups * Moon * Badge * Image Each element includes dedicated editing controls. ### Resize support * Corner resize handles * Scale-aware resizing * Element-specific resize behavior: * Images → width * Moon → size * Text blocks → width ### Snap grid * Optional 8px snap grid * Visual grid overlay * Drag snapping when enabled ### Faithful editing canvas Addresses feedback that the original editor was too cramped. Changes include: * Admin hero page now uses the full available content width * Canvas is now a scaled 1280×720 stage * Scale-aware drag and resize math * Viewport-based typography scales identically to production * Default content no longer overlaps * Canvas accurately represents the live portal ### Real hero moon Replaces the generated CSS moon with the actual moon artwork extracted from the hero image. Adds: * Moon image asset * Circular alpha mask * Adjustable size * Glow controls --- ## Technical Details ### New Components * `HeroEditor` * `HeroElement` ### New Shared Utilities * `heroLayout.js` ### Portal Changes * Layout-driven rendering * Shared rendering pipeline * Preview mode support ### Admin Changes * New `/admin/hero` route * Sidebar navigation entry * Full-width editor layout ### Settings * Adds `hero_layout` to public settings * `hero_layout_draft` remains admin-only * No database schema changes --- ## Verification Verified end-to-end: * [x] Default hero renders identically before publishing * [x] Draft auto-save works * [x] Preview displays unpublished drafts * [x] Publish updates the live portal * [x] Background editing updates in real time * [x] Drag-and-drop positioning works * [x] Resize handles function correctly * [x] Snap grid operates correctly * [x] All five element types can be created and edited * [x] Image uploads function correctly * [x] Real moon artwork renders correctly * [x] Default editor elements no longer overlap * [x] Clean client build * [x] No console errors --- ## Notes * Completes the planned **Hero Canvas Editor v1** implementation described in `HERO_EDITOR.md`. * No database schema changes. * No new dependencies introduced.

whitlocktech added 6 commits 2026-06-28 14:18:23 +00:00

Add hero canvas editor spec (corrected to current code) 30c2a30c80

Build contract for the WYSIWYG portal-hero editor on hero-feature, derived
from the design doc and corrected against the codebase:
- public settings is a whitelist (getPublic/PUBLIC_KEYS), so hero_layout must
  be added there — the doc's "no backend changes" was wrong
- moon is the reusable MoonDot component; route vs nav live in App.jsx vs
  AdminLayout.jsx; admin content is 1000px (canvas scales to fit)

Locked decisions: full v1, buttons as a first-class element type, pre-populate
the current hero on first run, native Pointer Events for drag. Phased plan
with per-phase exit checks. No schema change (JSON in settings).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Hero Phase 1: layout data path + portal renderer 578bffc51f

First phase of the hero canvas editor (see HERO_EDITOR.md).

- settings.model: add hero_layout to PUBLIC_KEYS so the portal receives it
  (corrects the design doc — public settings is a whitelist, not getAll();
  hero_layout_draft stays admin-only)
- new HeroElement.jsx: renders one layout element by type (text_block,
  buttons, moon, badge, image); absolute % positioning with anchor; shared
  by the portal now and the editor canvas later
- MoonDot: optional color override for the hero moon element
- Portal.jsx: parse hero_layout (version-checked, try/catch), render elements
  sorted by z; fall back to a DEFAULT_LAYOUT built from the current hero so the
  page is byte-for-byte unchanged until staff publish their own

No schema change. Verified: default render matches the old hero; publishing a
hero_layout re-renders the portal; the draft key is not exposed publicly; client
builds; no console errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Hero Phase 2: editor shell + background/overlay + draft/preview/publish ccad727ec3

Second phase of the hero canvas editor (see HERO_EDITOR.md).

- new lib/heroLayout.js: shared defaultLayout/buildOverlay/heroBackground/
  parseLayout used by both the portal and the editor (Portal refactored onto it)
- new admin view HeroEditor.jsx at /admin/hero (+ sidebar nav + route):
  - live canvas preview (16:9) rendering the draft via HeroElement
  - background panel: image upload (/admin/uploads, >1MB warning), 3x3 position
    grid, overlay opacity slider — all update the canvas in real time
  - debounced (800ms) auto-save to hero_layout_draft
  - Publish (writes hero_layout + draft), Preview (opens /?preview=1), Revert
- Portal: ?preview=1 renders the draft via the admin settings endpoint, with a
  "showing unpublished draft" banner; normal load renders the published layout

No schema/dep changes. Verified end to end: overlay/position update the canvas,
auto-save writes the draft, publish updates the live portal, preview shows the
draft while the public page shows live. Element drag/properties land in Phase 3.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Hero Phase 3: element select / drag / edit (text_block + buttons) 785090eb97

Third phase of the hero canvas editor (see HERO_EDITOR.md).

- HeroElement: editor mode — inner content made non-interactive so the wrapper
  handles select/drag; selection outline; box width now canvas-relative
  (calc(100% - 36px)) so text blocks fit the smaller editor canvas
- HeroEditor: element tray (+ Text / + Buttons), click-to-select, native
  Pointer Events drag (position as % of the canvas, clamped), Delete key + panel
  delete, z-order (send back / bring forward), and per-type property panels:
  - text_block: per-line text / tag / font size (px) / color / bold, add+remove
    lines, alignment
  - buttons: per-item label / path / variant, add+remove, alignment
  empty-canvas click deselects (back to the background panel)
- theme.css: .hero-el-editable outline/hover/selected + grid helper

Verified in-browser: selecting shows the line editor, editing updates the canvas
live, drag repositions, add/delete and z-order work, deselect returns to the
background panel; no console errors. Moon/badge/image + resize + snap are Phase 4.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Hero Phase 4: moon/badge/image elements + resize + snap grid f69c86f737

Final phase of the hero canvas editor (see HERO_EDITOR.md) — v1 complete.

- element tray adds moon, badge, and image; property panels:
  - moon: size / glow / color
  - badge: text / background / text color / corner radius
  - image: upload (/admin/uploads, >1MB warning) / width% / alt
- corner resize handle on selected elements (image→width%, moon→size,
  text_block→box width)
- 8px snap-grid toggle with a faint canvas grid overlay; drag snaps when on
- HeroElement: image element shows an "Upload an image" placeholder until a
  source is set (a srcless image never ships live)

Verified in-browser: all five element types add + edit; moon resized 64->104px
via the handle; snap grid overlays; a published moon + badge render on the live
portal; no console errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Hero editor: larger faithful canvas + real moon from the hero art 73eac2a138

Addresses feedback that the editor was too small/cramped (elements overlapping)
and that the generated CSS moon looked bad.

- AdminLayout: the /admin/hero view now uses the full content width (no 1000px cap)
- HeroEditor canvas is a scaled 1280x720 "stage" (transform: scale to fit the
  column, capped at ~66vh). Because viewport-unit fonts and % positions scale
  together, the canvas is now a faithful miniature of the live hero — the default
  text block and CTA buttons no longer overlap. Drag snaps to the 8px stage grid;
  resize math is scale-aware.
- Moon element now renders the actual moon cropped from the hero artwork
  (client/public/assets/img/hero-moon.png, circular alpha mask) instead of the CSS
  dot; MoonPanel exposes size + glow.

Verified: at 1440px the canvas is ~785x442 with the panel beside it, default
elements don't overlap, and the moon loads the real image. Build clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

whitlocktech reviewed 2026-06-28 14:22:13 +00:00

whitlocktech left a comment

The moon needs to be replaced but othewise itis good.

whitlocktech merged commit fecd28238d into main

2026-06-28 14:22:43 +00:00

whitlocktech referenced this issue from a commit

2026-06-28 14:22:44 +00:00

Merge pull request 'hero-feature' (#4) from hero-feature into main

wtclaude referenced this pull request

2026-07-29 02:07:07 +00:00

feat(shard): ingest points.board and publish the leaderboards #114

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: RunicGateway/website#4