auto-git:
[change] src/app/App.tsx
This commit is contained in:
456
src/app/App.tsx
456
src/app/App.tsx
@@ -14214,47 +14214,195 @@ export function App({ store, initialStatusMessage }: AppProps) {
|
||||
<div className="material-summary">
|
||||
Blends over the authored day environment around sunrise.
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="label">Background</div>
|
||||
<div className="value">
|
||||
{formatWorldBackgroundLabel(
|
||||
editorState.document.world.timeOfDay.dawn.background
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="world-background-preview"
|
||||
style={createWorldBackgroundStyle(
|
||||
editorState.document.world.timeOfDay.dawn.background,
|
||||
getWorldBackgroundImagePreviewUrl(
|
||||
editorState.document.world.timeOfDay.dawn.background,
|
||||
loadedImageAssets
|
||||
)
|
||||
)}
|
||||
/>
|
||||
<div className="material-summary">
|
||||
{describeWorldBackground(
|
||||
editorState.document.world.timeOfDay.dawn.background,
|
||||
editorState.document.assets,
|
||||
{
|
||||
emptyImageLabel:
|
||||
"Automatic fallback from available day/night images"
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section">
|
||||
<div className="label">Background Mode</div>
|
||||
<div className="inline-actions">
|
||||
<button
|
||||
className={`toolbar__button ${editorState.document.world.timeOfDay.dawn.background.mode === "solid" ? "toolbar__button--active" : ""}`}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
applyWorldTimePhaseBackgroundMode("dawn", "solid")
|
||||
}
|
||||
>
|
||||
Solid
|
||||
</button>
|
||||
<button
|
||||
className={`toolbar__button ${
|
||||
editorState.document.world.timeOfDay.dawn
|
||||
.background.mode === "verticalGradient"
|
||||
? "toolbar__button--active"
|
||||
: ""
|
||||
}`}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
applyWorldTimePhaseBackgroundMode(
|
||||
"dawn",
|
||||
"verticalGradient"
|
||||
)
|
||||
}
|
||||
>
|
||||
Gradient
|
||||
</button>
|
||||
<button
|
||||
className={`toolbar__button ${editorState.document.world.timeOfDay.dawn.background.mode === "image" ? "toolbar__button--active" : ""}`}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
applyWorldTimePhaseBackgroundMode("dawn", "image")
|
||||
}
|
||||
>
|
||||
Image
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editorState.document.world.timeOfDay.dawn.background
|
||||
.mode === "image" ? (
|
||||
<div className="form-section">
|
||||
<div className="label">Dawn Image</div>
|
||||
<label className="form-field">
|
||||
<span className="label">Image</span>
|
||||
<select
|
||||
className="text-input"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dawn
|
||||
.background.assetId
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseBackgroundMode(
|
||||
"dawn",
|
||||
"image",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="">
|
||||
Auto (day/night fallback)
|
||||
</option>
|
||||
{imageAssetList.map((asset) => (
|
||||
<option key={asset.id} value={asset.id}>
|
||||
{asset.sourceName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Intensity</span>
|
||||
<input
|
||||
className="text-input"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.1"
|
||||
value={
|
||||
worldDawnBackgroundEnvironmentIntensityDraft
|
||||
}
|
||||
onChange={(event) =>
|
||||
setWorldDawnBackgroundEnvironmentIntensityDraft(
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
onBlur={() =>
|
||||
applyWorldTimePhaseBackgroundEnvironmentIntensity(
|
||||
"dawn",
|
||||
worldDawnBackgroundEnvironmentIntensityDraft
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<div className="form-section">
|
||||
<div className="label">Background Colors</div>
|
||||
{editorState.document.world.timeOfDay.dawn.background
|
||||
.mode === "solid" ? (
|
||||
<label className="form-field">
|
||||
<span className="label">Color</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dawn
|
||||
.background.colorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseBackgroundColor(
|
||||
"dawn",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<div className="vector-inputs vector-inputs--two">
|
||||
<label className="form-field">
|
||||
<span className="label">Top</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dawn
|
||||
.background.topColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseGradientColor(
|
||||
"dawn",
|
||||
"top",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Bottom</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dawn
|
||||
.background.bottomColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseGradientColor(
|
||||
"dawn",
|
||||
"bottom",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="vector-inputs">
|
||||
<label className="form-field">
|
||||
<span className="label">Sky Top</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dawn
|
||||
.skyTopColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseColor(
|
||||
"dawn",
|
||||
"skyTopColorHex",
|
||||
event.currentTarget.value,
|
||||
"Set dawn sky top color",
|
||||
"Updated the dawn sky top color."
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Sky Bottom</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dawn
|
||||
.skyBottomColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseColor(
|
||||
"dawn",
|
||||
"skyBottomColorHex",
|
||||
event.currentTarget.value,
|
||||
"Set dawn sky bottom color",
|
||||
"Updated the dawn sky bottom color."
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Ambient Color</span>
|
||||
<input
|
||||
@@ -14352,47 +14500,195 @@ export function App({ store, initialStatusMessage }: AppProps) {
|
||||
<div className="material-summary">
|
||||
Blends over the authored day environment around sunset.
|
||||
</div>
|
||||
<div className="stat-card">
|
||||
<div className="label">Background</div>
|
||||
<div className="value">
|
||||
{formatWorldBackgroundLabel(
|
||||
editorState.document.world.timeOfDay.dusk.background
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="world-background-preview"
|
||||
style={createWorldBackgroundStyle(
|
||||
editorState.document.world.timeOfDay.dusk.background,
|
||||
getWorldBackgroundImagePreviewUrl(
|
||||
editorState.document.world.timeOfDay.dusk.background,
|
||||
loadedImageAssets
|
||||
)
|
||||
)}
|
||||
/>
|
||||
<div className="material-summary">
|
||||
{describeWorldBackground(
|
||||
editorState.document.world.timeOfDay.dusk.background,
|
||||
editorState.document.assets,
|
||||
{
|
||||
emptyImageLabel:
|
||||
"Automatic fallback from available day/night images"
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-section">
|
||||
<div className="label">Background Mode</div>
|
||||
<div className="inline-actions">
|
||||
<button
|
||||
className={`toolbar__button ${editorState.document.world.timeOfDay.dusk.background.mode === "solid" ? "toolbar__button--active" : ""}`}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
applyWorldTimePhaseBackgroundMode("dusk", "solid")
|
||||
}
|
||||
>
|
||||
Solid
|
||||
</button>
|
||||
<button
|
||||
className={`toolbar__button ${
|
||||
editorState.document.world.timeOfDay.dusk
|
||||
.background.mode === "verticalGradient"
|
||||
? "toolbar__button--active"
|
||||
: ""
|
||||
}`}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
applyWorldTimePhaseBackgroundMode(
|
||||
"dusk",
|
||||
"verticalGradient"
|
||||
)
|
||||
}
|
||||
>
|
||||
Gradient
|
||||
</button>
|
||||
<button
|
||||
className={`toolbar__button ${editorState.document.world.timeOfDay.dusk.background.mode === "image" ? "toolbar__button--active" : ""}`}
|
||||
type="button"
|
||||
onClick={() =>
|
||||
applyWorldTimePhaseBackgroundMode("dusk", "image")
|
||||
}
|
||||
>
|
||||
Image
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editorState.document.world.timeOfDay.dusk.background
|
||||
.mode === "image" ? (
|
||||
<div className="form-section">
|
||||
<div className="label">Dusk Image</div>
|
||||
<label className="form-field">
|
||||
<span className="label">Image</span>
|
||||
<select
|
||||
className="text-input"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dusk
|
||||
.background.assetId
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseBackgroundMode(
|
||||
"dusk",
|
||||
"image",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="">
|
||||
Auto (day/night fallback)
|
||||
</option>
|
||||
{imageAssetList.map((asset) => (
|
||||
<option key={asset.id} value={asset.id}>
|
||||
{asset.sourceName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Intensity</span>
|
||||
<input
|
||||
className="text-input"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.1"
|
||||
value={
|
||||
worldDuskBackgroundEnvironmentIntensityDraft
|
||||
}
|
||||
onChange={(event) =>
|
||||
setWorldDuskBackgroundEnvironmentIntensityDraft(
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
onBlur={() =>
|
||||
applyWorldTimePhaseBackgroundEnvironmentIntensity(
|
||||
"dusk",
|
||||
worldDuskBackgroundEnvironmentIntensityDraft
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<div className="form-section">
|
||||
<div className="label">Background Colors</div>
|
||||
{editorState.document.world.timeOfDay.dusk.background
|
||||
.mode === "solid" ? (
|
||||
<label className="form-field">
|
||||
<span className="label">Color</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dusk
|
||||
.background.colorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseBackgroundColor(
|
||||
"dusk",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<div className="vector-inputs vector-inputs--two">
|
||||
<label className="form-field">
|
||||
<span className="label">Top</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dusk
|
||||
.background.topColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseGradientColor(
|
||||
"dusk",
|
||||
"top",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Bottom</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dusk
|
||||
.background.bottomColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseGradientColor(
|
||||
"dusk",
|
||||
"bottom",
|
||||
event.currentTarget.value
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="vector-inputs">
|
||||
<label className="form-field">
|
||||
<span className="label">Sky Top</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dusk
|
||||
.skyTopColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseColor(
|
||||
"dusk",
|
||||
"skyTopColorHex",
|
||||
event.currentTarget.value,
|
||||
"Set dusk sky top color",
|
||||
"Updated the dusk sky top color."
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Sky Bottom</span>
|
||||
<input
|
||||
className="color-input"
|
||||
type="color"
|
||||
value={
|
||||
editorState.document.world.timeOfDay.dusk
|
||||
.skyBottomColorHex
|
||||
}
|
||||
onChange={(event) =>
|
||||
applyWorldTimePhaseColor(
|
||||
"dusk",
|
||||
"skyBottomColorHex",
|
||||
event.currentTarget.value,
|
||||
"Set dusk sky bottom color",
|
||||
"Updated the dusk sky bottom color."
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label className="form-field">
|
||||
<span className="label">Ambient Color</span>
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user