Add help tooltips to customized

src/app/components/customized/BasicSettings.tsx

@@ -13,18 +13,18 @@ interface Props {
 }
 export function BasicSettings({ model, initialModel, changeModel }: Props) {
 	return <>
-		<CustomizedSlider label="Min height"
+		<CustomizedSlider label="Min height" help="The lowest Y level of the world"
 			value={model.minHeight} onChange={v => 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} />
-		<CustomizedSlider label="Max height"
+		<CustomizedSlider label="Max height" help="The heighest Y level of the world"
 			value={model.maxHeight} onChange={v => 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} />
-		<CustomizedSlider label="Sea level"
+		<CustomizedSlider label="Sea level" help="The top Y level of the oceans"
 			value={model.seaLevel} onChange={v => changeModel({ seaLevel: v })}
 			min={-128} max={384} initial={initialModel.seaLevel} />
-		<CustomizedInput label="Oceans"
+		<CustomizedInput label="Oceans" help="The block used to fill the oceans"
 			value={model.oceans} onChange={v => changeModel({ oceans: v })}
 			initial={initialModel.oceans}>
 			<button class={`customized-toggle${model.oceans === 'water' ? ' customized-water' : ''}`} onClick={() => changeModel({ oceans: 'water' })}>Water</button>
@@ -38,22 +38,22 @@ export function BasicSettings({ model, initialModel, changeModel }: Props) {
 			</>}
 		</CustomizedInput>
 		<div class="customized-group">
-			<CustomizedToggle label="Caves"
+			<CustomizedToggle label="Caves" help="Whether caves will generate"
 				value={model.caves} onChange={v => changeModel({ caves: v })}
 				initial={initialModel.caves} />
 			{model.caves && <div class="customized-childs">
-				<CustomizedToggle label="Noise caves"
+				<CustomizedToggle label="Noise caves" help="The new caves introduced in 1.18"
 					value={model.noiseCaves} onChange={v => changeModel({ noiseCaves: v })}
 					initial={initialModel.noiseCaves} />
-				<CustomizedToggle label="Old caves"
+				<CustomizedToggle label="Old caves" help="The legacy caves"
 					value={model.carverCaves} onChange={v => changeModel({ carverCaves: v })}
 					initial={initialModel.carverCaves} />
-				<CustomizedToggle label="Ravines"
+				<CustomizedToggle label="Ravines" help="The legacy ravines and canyons"
 					value={model.ravines} onChange={v => changeModel({ ravines: v })}
 					initial={initialModel.ravines} />
 			</div>}
 		</div>
-		<CustomizedSlider label="Biome size"
+		<CustomizedSlider label="Biome size" help="The scale of the biome layout, 6 corresponds to the large biomes preset"
 			value={model.biomeSize} onChange={v => changeModel({ biomeSize: v })}
 			min={1} max={8} initial={initialModel.biomeSize} />
 	</>

src/app/components/customized/CustomizedInput.tsx

@@ -4,6 +4,7 @@ import { Octicon } from '../index.js'
 
 interface Props<T> {
 	label: ComponentChildren,
+	help?: string,
 	value: T,
 	initial?: T,
 	onChange: (value: T) => void,
@@ -11,11 +12,13 @@ interface Props<T> {
 	children?: ComponentChildren,
 	trailing?: ComponentChildren,
 }
-export function CustomizedInput<T>({ label, value, initial, onChange, error, children, trailing }: Props<T>) {
+export function CustomizedInput<T>({ label, help, value, initial, onChange, error, children, trailing }: Props<T>) {
 	const isModified = initial !== undefined && !deepEqual(value, initial)
-	return <div class={`customized-input${isModified ? ' customized-modified' : ''}${error !== undefined ? ' customized-errored' : ''}`}>
+	return <div class={`customized-input${error !== undefined ? ' customized-errored' : ''}`}>
 		<span class="customized-label">
 			{typeof label === 'string' ? <label>{label}</label> : label}
+			{isModified && <span class="customized-modified">*</span>}
+			{help !== undefined && <span class="customized-help tooltipped tip-se" aria-label={help}>{Octicon.question}</span>}
 		</span>
 		{children}
 		{(isModified && initial != undefined) && <button class="customized-icon tooltipped tip-se" aria-label="Reset to default" onClick={() => onChange(deepClone(initial))}>{Octicon.undo}</button>}

src/app/components/customized/CustomizedOre.tsx

@@ -14,19 +14,19 @@ export function CustomizedOre({ model, value, initial, onChange }: Props) {
 	}, [value])
 
 	return <>
-		<CustomizedSlider label="Size" value={value.size} onChange={v => changeOre({ size: v })} min={1} max={64} initial={initial.size} />
+		<CustomizedSlider label="Size" help="The size of the ore vein, does not directly correspond with number of blocks" value={value.size} onChange={v => changeOre({ size: v })} min={1} max={64} initial={initial.size} />
 		{Number.isInteger(value.tries)
-			? <CustomizedSlider label="Tries"
+			? <CustomizedSlider label="Tries" help="The number of attempts to generate an ore vein per chunk"
 				value={value.tries} onChange={v => changeOre({ tries: v })}
 				min={1} max={100} initial={initial.tries}/>
-			: <CustomizedSlider label="Rarity"
+			: <CustomizedSlider label="Rarity" help="The chance to generate an ore vein per chunk, larger values make them rarer"
 				value={Math.round(1 / value.tries)} onChange={v => changeOre({ tries: 1 / v })}
 				min={1} max={100} initial={Math.round(1 / initial.tries)} />}
-		<CustomizedSlider label={value.trapezoid ? 'Min triangle' : 'Min height'}
+		<CustomizedSlider label={value.trapezoid ? 'Min triangle' : 'Min height'} help="The lowest Y level the ore vein can generate at"
 			value={calcHeight(model, value.minAboveBottom, value.minBelowTop, value.minHeight) ?? 0}
 			onChange={v => 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} />
-		<CustomizedSlider label={value.trapezoid ? 'Max triangle' : 'Max height'}
+		<CustomizedSlider label={value.trapezoid ? 'Max triangle' : 'Max height'} help="The heighest Y level the ore vein can generate at"
 			value={calcHeight(model, value.maxAboveBottom, value.maxBelowTop, value.maxHeight) ?? 0}
 			onChange={v => 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} />

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,

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,

src/app/components/customized/StructuresSettings.tsx

@@ -57,10 +57,10 @@ export function StructuresSettings({ model, initialModel, changeModel }: Props)
 		<CustomizedToggle label="Woodland mansions"
 			value={model.woodlandMansions} onChange={v => changeModel({ woodlandMansions: v })}
 			initial={initialModel.woodlandMansions} />
-		<CustomizedToggle label="Dungeons"
+		<CustomizedToggle label="Dungeons" help="The smaller monster rooms with a spawner and chest"
 			value={model.dungeons} onChange={v => changeModel({ dungeons: v })}
 			initial={initialModel.dungeons}>
-			{model.dungeons && <CustomizedSlider label="Tries"
+			{model.dungeons && <CustomizedSlider label="Tries" help="The number of attempts to generate per chunk"
 				value={model.dungeonTries} onChange={v => changeModel({ dungeonTries: v })}
 				min={1} max={256} initial={initialModel.dungeonTries} />}
 		</CustomizedToggle>
@@ -69,10 +69,10 @@ export function StructuresSettings({ model, initialModel, changeModel }: Props)
 				value={model.lavaLakes} onChange={v => changeModel({ lavaLakes: v })}
 				initial={initialModel.lavaLakes} />
 			{model.lavaLakes && <div class="customized-childs">
-				<CustomizedSlider label="Surface rarity"
+				<CustomizedSlider label="Surface rarity" help="The chance that a lava lake attempts to generate on the surface, larger numbers make them rarer"
 					value={model.lavaLakeRarity} onChange={v => changeModel({ lavaLakeRarity: v })}
 					min={1} max={400} initial={initialModel.lavaLakeRarity} />
-				<CustomizedSlider label="Underground rarity"
+				<CustomizedSlider label="Underground rarity" help="The chance that a lava lake attempts to generate underground, larger numbers make them rarer"
 					value={model.lavaLakeRarityUnderground} onChange={v => changeModel({ lavaLakeRarityUnderground: v })}
 					min={1} max={400} initial={initialModel.lavaLakeRarityUnderground} />
 			</div>}