+
+
+
{
+ if (e.target === e.currentTarget) setSelectedId(null)
+ }}
+ style={{
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: 1280,
+ height: 720,
+ transformOrigin: 'top left',
+ transform: `scale(${scale})`,
+ ...heroBackground(layout),
+ }}
+ >
+ {snap && (
+
+ )}
+ {elements.map((el) => (
+
onElPointerDown(e, el)}
+ >
+ {el.id === selectedId && RESIZABLE[el.type] && (
+ onResizePointerDown(e, el)}
+ title="Resize"
+ style={{ position: 'absolute', right: -6, bottom: -6, width: 14, height: 14, borderRadius: 3, background: 'var(--accent)', border: '1px solid var(--bg-deep)', cursor: 'nwse-resize', pointerEvents: 'auto' }}
+ />
+ )}
+
+ ))}
+
+
+
+ Click to select · drag to move · Delete key removes the selected element.
+
+
+
+
+
+
+ )
+}
+
+// ── Background / overlay panel (no element selected) ────────────────────
+function BackgroundPanel({ bg, overlay, uploading, onUpload, patchBg, setOpacity }) {
+ return (
+ <>
+
Background & overlay
+
+
Background image
+ {bg.image_url ? (
+
+
+
+
+ ) : (
+
Using the default hero image.
+ )}
+
+
+
+
Background position
+
+ {POS_Y.map((py) =>
+ POS_X.map((px) => {
+ const activePos = (bg.position_x || 'left') === px && (bg.position_y || 'center') === py
+ return (
+
+
+
+ Overlay darkness — {Math.round(overlay * 100)}%
+ setOpacity(Number(e.target.value))} style={{ width: '100%' }} />
+
+
+ )
+}
+
+// ── Per-element properties ──────────────────────────────────────────────
+function ElementPanel({ element, onProps, onRemove, onForward, onBack, onDeselect }) {
+ return (
+ <>
+
+
{element.type.replace('_', ' ')}
+
Done
+
+
+ {element.type === 'text_block' &&
}
+ {element.type === 'buttons' &&
}
+ {element.type === 'moon' &&
}
+ {element.type === 'badge' &&
}
+ {element.type === 'image' &&
}
+
+
+
+
+
+
+
+ )
+}
+
+const ALIGNS = ['left', 'center', 'right']
+
+function AlignField({ value, onChange }) {
+ return (
+
+ )
+}
+
+function TextBlockPanel({ element, onProps }) {
+ const lines = element.props?.lines || []
+ const setLine = (i, patch) => onProps({ lines: lines.map((l, idx) => (idx === i ? { ...l, ...patch } : l)) })
+ const addLine = () => onProps({ lines: [...lines, { text: 'New line', tag: 'p', fontSize: 18, color: '#dbe2ea', weight: 400 }] })
+ const removeLine = (i) => onProps({ lines: lines.filter((_, idx) => idx !== i) })
+
+ return (
+
+
onProps({ align: v })} />
+ {lines.map((line, i) => (
+
+
setLine(i, { text: e.target.value })} placeholder="Text" />
+
+
+ { const n = parseInt(e.target.value, 10); setLine(i, { fontSize: Number.isFinite(n) ? n : undefined }) }}
+ placeholder="px"
+ style={{ width: 70 }}
+ />
+ setLine(i, { color: e.target.value })} style={{ width: 40, height: 38, padding: 2, border: '1px solid var(--line)', borderRadius: 6, background: 'var(--bg)' }} title="Color" />
+
+
+
+ {lines.length > 1 && (
+ removeLine(i)}>Remove line
+ )}
+
+
+ )
+}
+
+function ButtonsPanel({ element, onProps }) {
+ const items = element.props?.items || []
+ const setItem = (i, patch) => onProps({ items: items.map((it, idx) => (idx === i ? { ...it, ...patch } : it)) })
+ const addItem = () => onProps({ items: [...items, { label: 'Button', to: '/', variant: 'primary' }] })
+ const removeItem = (i) => onProps({ items: items.filter((_, idx) => idx !== i) })
+
+ return (
+
+
onProps({ align: v })} />
+ {items.map((it, i) => (
+
+ ))}
+
+
+ )
+}
+
+const swatch = { width: '100%', height: 38, padding: 2, border: '1px solid var(--line)', borderRadius: 6, background: 'var(--bg)' }
+
+function MoonPanel({ element, onProps }) {
+ const p = element.props || {}
+ return (
+
+ )
+}
+
+function BadgePanel({ element, onProps }) {
+ const p = element.props || {}
+ return (
+
+ )
+}
+
+function ImagePanel({ element, onProps }) {
+ const p = element.props || {}
+ const [up, setUp] = useState(false)
+ async function onFile(e) {
+ const f = e.target.files?.[0]
+ e.target.value = ''
+ if (!f) return
+ if (f.size > 1024 * 1024 && !confirm('This image is over 1 MB and may slow the page. Upload anyway?')) return
+ setUp(true)
+ try {
+ const { url } = await api.admin.upload(f)
+ onProps({ src: url })
+ } catch {
+ /* ignore */
+ } finally {
+ setUp(false)
+ }
+ }
+ return (
+
+ )
+}
diff --git a/client/src/routes/public/Portal.jsx b/client/src/routes/public/Portal.jsx
index 0c8713f..01f526b 100644
--- a/client/src/routes/public/Portal.jsx
+++ b/client/src/routes/public/Portal.jsx
@@ -1,9 +1,10 @@
+import { useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import PublicLayout from '../../components/PublicLayout.jsx'
+import HeroElement from '../../components/HeroElement.jsx'
import { useSite } from '../../contexts/SiteContext.jsx'
-
-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('/assets/img/uomysticmoon-main-hero.png')"
+import { api } from '../../api/client.js'
+import { defaultLayout, parseLayout, heroBackground } from '../../lib/heroLayout.js'
const QUICK = [
{ label: 'News', to: '/site/news' },
@@ -28,53 +29,63 @@ const DESTINATIONS = [
},
]
+// Admin "Preview" opens the portal with ?preview=1 to render the unpublished draft.
+const PREVIEW = typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('preview') === '1'
+
export default function Portal() {
const { settings } = useSite()
const teaser =
settings.homepage_teaser ||
'Mysticmoon is still being shaped beneath a midnight sky — a quiet preview for the news, screenshots, guides, and community notes to come as the world wakes.'
+ // Published layout (public). Falls back to the pre-populated default if missing,
+ // malformed, the wrong version, or empty — so the hero is never blank.
+ const published = useMemo(() => parseLayout(settings.hero_layout), [settings.hero_layout])
+
+ // In preview mode, pull the draft via the admin endpoint (requires a logged-in
+ // admin cookie); falls back silently to the published/default layout otherwise.
+ const [draft, setDraft] = useState(null)
+ useEffect(() => {
+ if (!PREVIEW) return
+ let active = true
+ api.admin
+ .getSettings()
+ .then((s) => active && setDraft(parseLayout(s.hero_layout_draft)))
+ .catch(() => {})
+ return () => {
+ active = false
+ }
+ }, [])
+
+ const active = (PREVIEW && draft) || (published && published.elements.length ? published : null)
+ const layout = active || defaultLayout(teaser)
+ const isDefault = !active
+ const bgStyle = heroBackground(layout, { isDefault })
+ const elements = [...layout.elements].sort((a, b) => (a.z || 0) - (b.z || 0))
+
return (
+ {PREVIEW && draft && (
+
+ Preview — showing unpublished draft
+
+ )}
-
-
- Private shard project
-
-
- UOMysticmoon
-
-
- A private Ultima Online world in progress
-
-
{teaser}
-
-
- Enter the Website
-
-
- Open the Wiki
-
-
+
+ {elements.map((el) => (
+
+ ))}
diff --git a/client/src/styles/theme.css b/client/src/styles/theme.css
index b93dc4b..8948a0c 100644
--- a/client/src/styles/theme.css
+++ b/client/src/styles/theme.css
@@ -527,6 +527,25 @@ button[disabled] {
text-decoration: line-through;
}
+/* ===== Hero canvas editor ===== */
+.hero-el-editable {
+ outline: 1px dashed rgba(127, 153, 189, 0.45);
+ outline-offset: 2px;
+ user-select: none;
+ touch-action: none; /* let Pointer Events drive drag on touch */
+}
+.hero-el-editable:hover {
+ outline-color: var(--accent);
+}
+.hero-el-editable.is-selected {
+ outline: 2px solid var(--accent);
+}
+.hero-canvas-grid {
+ background-image:
+ linear-gradient(to right, rgba(127, 153, 189, 0.18) 1px, transparent 1px),
+ linear-gradient(to bottom, rgba(127, 153, 189, 0.18) 1px, transparent 1px);
+}
+
/* ===== Admin tables ===== */
.adm-table {
width: 100%;
diff --git a/server/src/model/settings/settings.model.js b/server/src/model/settings/settings.model.js
index 90dbde1..08a1fa9 100644
--- a/server/src/model/settings/settings.model.js
+++ b/server/src/model/settings/settings.model.js
@@ -8,6 +8,7 @@ const PUBLIC_KEYS = [
'homepage_teaser',
'contact_email',
'site_title',
+ 'hero_layout', // portal hero composition (JSON). Draft key stays admin-only.
]
async function get(key) {