whitlocktech
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>
90 lines
3.4 KiB
JavaScript
90 lines
3.4 KiB
JavaScript
// Shared hero-layout helpers used by the public portal and the admin editor.
|
|
|
|
export const DEFAULT_HERO_IMAGE = '/assets/img/uomysticmoon-main-hero.png'
|
|
|
|
// The original hand-tuned multi-gradient hero background (used only for the
|
|
// untouched default so the live page is byte-for-byte unchanged until edited).
|
|
export const HERO_BG =
|
|
"linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
|
|
DEFAULT_HERO_IMAGE +
|
|
"')"
|
|
|
|
// Single-stop dark overlay driven by the editor's opacity slider.
|
|
export function buildOverlay(opacity) {
|
|
return `linear-gradient(180deg,rgba(11,15,20,${opacity * 0.15}) 0%,rgba(11,15,20,${opacity}) 100%)`
|
|
}
|
|
|
|
// Background style for a layout. When `isDefault` and no custom image is set, use
|
|
// the exact original gradient stack; otherwise compose the overlay over the image.
|
|
export function heroBackground(layout, { isDefault = false } = {}) {
|
|
const bg = layout.background || {}
|
|
const backgroundImage =
|
|
isDefault && !bg.image_url
|
|
? HERO_BG
|
|
: `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || DEFAULT_HERO_IMAGE}')`
|
|
return {
|
|
backgroundColor: 'var(--bg-deep)',
|
|
backgroundImage,
|
|
backgroundPosition: `${bg.position_x || 'left'} ${bg.position_y || 'center'}`,
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: bg.size || 'cover',
|
|
}
|
|
}
|
|
|
|
// Parse a stored layout string; return null if missing/malformed/wrong version.
|
|
export function parseLayout(str) {
|
|
try {
|
|
const l = str ? JSON.parse(str) : null
|
|
return l && l.version === 1 && Array.isArray(l.elements) ? l : null
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
// The current hardcoded hero as a HeroLayout, so the page is unchanged until
|
|
// staff publish their own. Font sizes use the existing clamp() strings so the
|
|
// default stays responsive (editor-created text uses px).
|
|
export function defaultLayout(teaser) {
|
|
return {
|
|
version: 1,
|
|
background: { image_url: null, position_x: 'left', position_y: 'center', size: 'cover' },
|
|
overlay: { opacity: 0.72 },
|
|
elements: [
|
|
{
|
|
id: 'default-text',
|
|
type: 'text_block',
|
|
x: 50,
|
|
y: 42,
|
|
z: 1,
|
|
anchor: 'center',
|
|
props: {
|
|
align: 'center',
|
|
width: 760,
|
|
lines: [
|
|
{ text: 'Private shard project', tag: 'span', fontSize: '0.74rem', color: '#c2d2e6', weight: 700, letterSpacing: '0.22em', transform: 'uppercase', font: 'sans' },
|
|
{ text: 'UOMysticmoon', tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
|
|
{ text: 'A private Ultima Online world in progress', tag: 'p', fontSize: '1.32rem', color: '#dbe2ea', italic: true, marginTop: 22 },
|
|
{ text: teaser, tag: 'p', fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
id: 'default-buttons',
|
|
type: 'buttons',
|
|
x: 50,
|
|
y: 72,
|
|
z: 2,
|
|
anchor: 'center',
|
|
props: {
|
|
align: 'center',
|
|
gap: 12,
|
|
items: [
|
|
{ label: 'Enter the Website', to: '/site', variant: 'primary' },
|
|
{ label: 'Open the Wiki', to: '/wiki', variant: 'ghost' },
|
|
],
|
|
},
|
|
},
|
|
],
|
|
}
|
|
}
|