diff --git a/src/app/components/Octicon.tsx b/src/app/components/Octicon.tsx index 69af9f77..68acfd40 100644 --- a/src/app/components/Octicon.tsx +++ b/src/app/components/Octicon.tsx @@ -42,6 +42,7 @@ export const Octicon = { play: , plus: , plus_circle: , + question: , repo: , rocket: , rows: , diff --git a/src/app/components/customized/BasicSettings.tsx b/src/app/components/customized/BasicSettings.tsx index df3f747c..3c3cd717 100644 --- a/src/app/components/customized/BasicSettings.tsx +++ b/src/app/components/customized/BasicSettings.tsx @@ -13,18 +13,18 @@ interface Props { } export function BasicSettings({ model, initialModel, changeModel }: Props) { return <> - changeModel({ minHeight: v })} min={-128} max={384} step={16} initial={initialModel.minHeight} error={model.minHeight % 16 !== 0 ? 'Min height needs to be a multiple of 16' : undefined} /> - changeModel({ maxHeight: v })} min={-128} max={384} step={16} initial={initialModel.maxHeight} error={model.maxHeight <= model.minHeight ? 'Max height needs to be larger than Min height' : model.maxHeight % 16 !== 0 ? 'Max height needs to be a multiple of 16' : undefined} /> - changeModel({ seaLevel: v })} min={-128} max={384} initial={initialModel.seaLevel} /> - changeModel({ oceans: v })} initial={initialModel.oceans}> @@ -38,22 +38,22 @@ export function BasicSettings({ model, initialModel, changeModel }: Props) { }
- changeModel({ caves: v })} initial={initialModel.caves} /> {model.caves &&
- changeModel({ noiseCaves: v })} initial={initialModel.noiseCaves} /> - changeModel({ carverCaves: v })} initial={initialModel.carverCaves} /> - changeModel({ ravines: v })} initial={initialModel.ravines} />
}
- changeModel({ biomeSize: v })} min={1} max={8} initial={initialModel.biomeSize} /> diff --git a/src/app/components/customized/CustomizedInput.tsx b/src/app/components/customized/CustomizedInput.tsx index 2c1d9370..283a9041 100644 --- a/src/app/components/customized/CustomizedInput.tsx +++ b/src/app/components/customized/CustomizedInput.tsx @@ -4,6 +4,7 @@ import { Octicon } from '../index.js' interface Props { label: ComponentChildren, + help?: string, value: T, initial?: T, onChange: (value: T) => void, @@ -11,11 +12,13 @@ interface Props { children?: ComponentChildren, trailing?: ComponentChildren, } -export function CustomizedInput({ label, value, initial, onChange, error, children, trailing }: Props) { +export function CustomizedInput({ label, help, value, initial, onChange, error, children, trailing }: Props) { const isModified = initial !== undefined && !deepEqual(value, initial) - return
+ return
{typeof label === 'string' ? : label} + {isModified && *} + {help !== undefined && {Octicon.question}} {children} {(isModified && initial != undefined) && } diff --git a/src/app/components/customized/CustomizedOre.tsx b/src/app/components/customized/CustomizedOre.tsx index efef5ba6..9d1b580c 100644 --- a/src/app/components/customized/CustomizedOre.tsx +++ b/src/app/components/customized/CustomizedOre.tsx @@ -14,19 +14,19 @@ export function CustomizedOre({ model, value, initial, onChange }: Props) { }, [value]) return <> - changeOre({ size: v })} min={1} max={64} initial={initial.size} /> + changeOre({ size: v })} min={1} max={64} initial={initial.size} /> {Number.isInteger(value.tries) - ? changeOre({ tries: v })} min={1} max={100} initial={initial.tries}/> - : changeOre({ tries: 1 / v })} min={1} max={100} initial={Math.round(1 / initial.tries)} />} - changeOre(value.minAboveBottom !== undefined ? { minAboveBottom: v - model.minHeight } : value.minBelowTop != undefined ? { minBelowTop: model.maxHeight - v } : { minHeight: v })} min={-64} max={320} initial={calcHeight(model, initial.minAboveBottom, initial.minBelowTop, initial.minHeight) ?? 0} /> - changeOre(value.maxAboveBottom !== undefined ? { maxAboveBottom: v - model.minHeight } : value.maxBelowTop != undefined ? { maxBelowTop: model.maxHeight - v } : { maxHeight: v })} min={-64} max={320} initial={calcHeight(model, initial.maxAboveBottom, initial.maxBelowTop, initial.maxHeight) ?? 0} /> diff --git a/src/app/components/customized/CustomizedSlider.tsx b/src/app/components/customized/CustomizedSlider.tsx index f39a4c6f..3a15c447 100644 --- a/src/app/components/customized/CustomizedSlider.tsx +++ b/src/app/components/customized/CustomizedSlider.tsx @@ -4,6 +4,7 @@ import { CustomizedInput } from './CustomizedInput.jsx' interface Props { label: string, + help?: string, value: number, min: number, max: number, diff --git a/src/app/components/customized/CustomizedToggle.tsx b/src/app/components/customized/CustomizedToggle.tsx index 60c74d23..3a529606 100644 --- a/src/app/components/customized/CustomizedToggle.tsx +++ b/src/app/components/customized/CustomizedToggle.tsx @@ -3,6 +3,7 @@ import { CustomizedInput } from './CustomizedInput.jsx' interface Props { label: string, + help?: string, value: boolean, initial?: boolean, onChange: (value: boolean) => void, diff --git a/src/app/components/customized/StructuresSettings.tsx b/src/app/components/customized/StructuresSettings.tsx index e9cab1bb..f80cd43d 100644 --- a/src/app/components/customized/StructuresSettings.tsx +++ b/src/app/components/customized/StructuresSettings.tsx @@ -57,10 +57,10 @@ export function StructuresSettings({ model, initialModel, changeModel }: Props) changeModel({ woodlandMansions: v })} initial={initialModel.woodlandMansions} /> - changeModel({ dungeons: v })} initial={initialModel.dungeons}> - {model.dungeons && changeModel({ dungeonTries: v })} min={1} max={256} initial={initialModel.dungeonTries} />} @@ -69,10 +69,10 @@ export function StructuresSettings({ model, initialModel, changeModel }: Props) value={model.lavaLakes} onChange={v => changeModel({ lavaLakes: v })} initial={initialModel.lavaLakes} /> {model.lavaLakes &&
- changeModel({ lavaLakeRarity: v })} min={1} max={400} initial={initialModel.lavaLakeRarity} /> - changeModel({ lavaLakeRarityUnderground: v })} min={1} max={400} initial={initialModel.lavaLakeRarityUnderground} />
} diff --git a/src/styles/global.css b/src/styles/global.css index f66df0ee..6b8618fc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -718,14 +718,14 @@ main.has-project { .customized-input .customized-label { height: 28px; - min-width: 140px; - padding-right: 10px; + min-width: 160px; + padding-right: 3px; display: inline-flex; align-items: center; } .customized-childs .customized-label { - min-width: 118px; + min-width: 138px; color: var(--text-2); } @@ -733,14 +733,24 @@ main.has-project { position: relative; } -.customized-input.customized-modified > .customized-label label::after { - content: '*'; +.customized-input .customized-label .customized-modified { color: var(--accent-primary); - position: absolute; - left: 100%; margin-left: 3px; } +.customized-input .customized-label .customized-help { + padding: 6px 0; + width: 16px; + height: 28px; + fill: var(--text-3); + margin-left: 6px; +} + +.customized-input .customized-label .customized-help > svg { + width: 16px; + height: 16px; +} + .customized-input .customized-label .item-display { width: 32px; height: 32px;