Update UI for Scene settings and enhance World background display
This commit is contained in:
182
src/app/App.tsx
182
src/app/App.tsx
@@ -7234,64 +7234,136 @@ export function App({ store, initialStatusMessage }: AppProps) {
|
|||||||
|
|
||||||
<aside className="side-column">
|
<aside className="side-column">
|
||||||
{editorState.selection.kind === "none" ? (
|
{editorState.selection.kind === "none" ? (
|
||||||
<Panel title="World">
|
<>
|
||||||
<div className="stat-card">
|
<Panel title="Scene">
|
||||||
<div className="label">Background</div>
|
<div className="stat-card">
|
||||||
<div
|
<div className="label">Active Scene</div>
|
||||||
className="value"
|
<div className="value">{activeProjectScene.name}</div>
|
||||||
data-testid="world-background-mode-value"
|
<div className="material-summary">
|
||||||
>
|
Runner overlay data is authored per scene and shown during
|
||||||
{formatWorldBackgroundLabel(editorState.document.world)}
|
initial runtime load and future scene transitions.
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="world-background-preview"
|
|
||||||
data-testid="world-background-preview"
|
|
||||||
style={createWorldBackgroundStyle(
|
|
||||||
editorState.document.world.background,
|
|
||||||
editorState.document.world.background.mode === "image"
|
|
||||||
? (loadedImageAssets[
|
|
||||||
editorState.document.world.background.assetId
|
|
||||||
]?.sourceUrl ?? null)
|
|
||||||
: null
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div className="material-summary">
|
|
||||||
{editorState.document.world.background.mode === "solid"
|
|
||||||
? editorState.document.world.background.colorHex
|
|
||||||
: editorState.document.world.background.mode ===
|
|
||||||
"verticalGradient"
|
|
||||||
? `${editorState.document.world.background.topColorHex} -> ${editorState.document.world.background.bottomColorHex}`
|
|
||||||
: (editorState.document.assets[
|
|
||||||
editorState.document.world.background.assetId
|
|
||||||
]?.sourceName ??
|
|
||||||
editorState.document.world.background.assetId)}
|
|
||||||
</div>
|
|
||||||
{editorState.document.world.background.mode !==
|
|
||||||
"image" ? null : (
|
|
||||||
<div
|
|
||||||
className="material-summary"
|
|
||||||
data-testid="world-background-asset-value"
|
|
||||||
>
|
|
||||||
Background Asset:{" "}
|
|
||||||
{editorState.document.assets[
|
|
||||||
editorState.document.world.background.assetId
|
|
||||||
]?.sourceName ??
|
|
||||||
editorState.document.world.background.assetId}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="form-section">
|
<div className="form-section">
|
||||||
<div className="label">Background Mode</div>
|
<div className="label">Runner Loading Overlay</div>
|
||||||
<div className="inline-actions">
|
<label className="form-field">
|
||||||
<button
|
<span className="label">Fade Color</span>
|
||||||
className={`toolbar__button ${editorState.document.world.background.mode === "solid" ? "toolbar__button--active" : ""}`}
|
<input
|
||||||
type="button"
|
data-testid="scene-loading-color"
|
||||||
data-testid="world-background-mode-solid"
|
className="color-input"
|
||||||
onClick={() => applyWorldBackgroundMode("solid")}
|
type="color"
|
||||||
|
value={activeProjectScene.loadingScreen.colorHex}
|
||||||
|
onChange={(event) =>
|
||||||
|
applySceneLoadingColor(event.currentTarget.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="form-field">
|
||||||
|
<span className="label">Headline</span>
|
||||||
|
<input
|
||||||
|
data-testid="scene-loading-headline"
|
||||||
|
className="text-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="Optional hint or location title"
|
||||||
|
value={sceneLoadingHeadlineDraft}
|
||||||
|
onChange={(event) =>
|
||||||
|
setSceneLoadingHeadlineDraft(event.currentTarget.value)
|
||||||
|
}
|
||||||
|
onBlur={applySceneLoadingHeadline}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
applySceneLoadingHeadline();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="form-field">
|
||||||
|
<span className="label">Description</span>
|
||||||
|
<input
|
||||||
|
data-testid="scene-loading-description"
|
||||||
|
className="text-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="Optional loading note or gameplay tip"
|
||||||
|
value={sceneLoadingDescriptionDraft}
|
||||||
|
onChange={(event) =>
|
||||||
|
setSceneLoadingDescriptionDraft(
|
||||||
|
event.currentTarget.value
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onBlur={applySceneLoadingDescription}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
applySceneLoadingDescription();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="material-summary">
|
||||||
|
Scene name is always shown automatically. Headline and
|
||||||
|
description are optional.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
|
||||||
|
<Panel title="World">
|
||||||
|
<div className="stat-card">
|
||||||
|
<div className="label">Background</div>
|
||||||
|
<div
|
||||||
|
className="value"
|
||||||
|
data-testid="world-background-mode-value"
|
||||||
>
|
>
|
||||||
Solid
|
{formatWorldBackgroundLabel(editorState.document.world)}
|
||||||
</button>
|
</div>
|
||||||
|
<div
|
||||||
|
className="world-background-preview"
|
||||||
|
data-testid="world-background-preview"
|
||||||
|
style={createWorldBackgroundStyle(
|
||||||
|
editorState.document.world.background,
|
||||||
|
editorState.document.world.background.mode === "image"
|
||||||
|
? (loadedImageAssets[
|
||||||
|
editorState.document.world.background.assetId
|
||||||
|
]?.sourceUrl ?? null)
|
||||||
|
: null
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="material-summary">
|
||||||
|
{editorState.document.world.background.mode === "solid"
|
||||||
|
? editorState.document.world.background.colorHex
|
||||||
|
: editorState.document.world.background.mode ===
|
||||||
|
"verticalGradient"
|
||||||
|
? `${editorState.document.world.background.topColorHex} -> ${editorState.document.world.background.bottomColorHex}`
|
||||||
|
: (editorState.document.assets[
|
||||||
|
editorState.document.world.background.assetId
|
||||||
|
]?.sourceName ??
|
||||||
|
editorState.document.world.background.assetId)}
|
||||||
|
</div>
|
||||||
|
{editorState.document.world.background.mode !==
|
||||||
|
"image" ? null : (
|
||||||
|
<div
|
||||||
|
className="material-summary"
|
||||||
|
data-testid="world-background-asset-value"
|
||||||
|
>
|
||||||
|
Background Asset:{" "}
|
||||||
|
{editorState.document.assets[
|
||||||
|
editorState.document.world.background.assetId
|
||||||
|
]?.sourceName ??
|
||||||
|
editorState.document.world.background.assetId}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-section">
|
||||||
|
<div className="label">Background Mode</div>
|
||||||
|
<div className="inline-actions">
|
||||||
|
<button
|
||||||
|
className={`toolbar__button ${editorState.document.world.background.mode === "solid" ? "toolbar__button--active" : ""}`}
|
||||||
|
type="button"
|
||||||
|
data-testid="world-background-mode-solid"
|
||||||
|
onClick={() => applyWorldBackgroundMode("solid")}
|
||||||
|
>
|
||||||
|
Solid
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
className={`toolbar__button ${
|
className={`toolbar__button ${
|
||||||
editorState.document.world.background.mode ===
|
editorState.document.world.background.mode ===
|
||||||
|
|||||||
Reference in New Issue
Block a user