Add help tooltips to customized

src/app/components/Octicon.tsx

@@ -42,6 +42,7 @@ export const Octicon = {
 	play: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>,
 	plus: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 2a.75.75 0 01.75.75v4.5h4.5a.75.75 0 010 1.5h-4.5v4.5a.75.75 0 01-1.5 0v-4.5h-4.5a.75.75 0 010-1.5h4.5v-4.5A.75.75 0 018 2z"></path></svg>,
 	plus_circle: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.75 4.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"></path></svg>,
+	question: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>,
 	repo: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>,
 	rocket: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M14.064 0a8.75 8.75 0 00-6.187 2.563l-.459.458c-.314.314-.616.641-.904.979H3.31a1.75 1.75 0 00-1.49.833L.11 7.607a.75.75 0 00.418 1.11l3.102.954c.037.051.079.1.124.145l2.429 2.428c.046.046.094.088.145.125l.954 3.102a.75.75 0 001.11.418l2.774-1.707a1.75 1.75 0 00.833-1.49V9.485c.338-.288.665-.59.979-.904l.458-.459A8.75 8.75 0 0016 1.936V1.75A1.75 1.75 0 0014.25 0h-.186zM10.5 10.625c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 00.119-.213v-2.066zM3.678 8.116L5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 00-.213.119l-1.2 1.95 1.782.547zm5.26-4.493A7.25 7.25 0 0114.063 1.5h.186a.25.25 0 01.25.25v.186a7.25 7.25 0 01-2.123 5.127l-.459.458a15.21 15.21 0 01-2.499 2.02l-2.317 1.5-2.143-2.143 1.5-2.317a15.25 15.25 0 012.02-2.5l.458-.458h.002zM12 5a1 1 0 11-2 0 1 1 0 012 0zm-8.44 9.56a1.5 1.5 0 10-2.12-2.12c-.734.73-1.047 2.332-1.15 3.003a.23.23 0 00.265.265c.671-.103 2.273-.416 3.005-1.148z"></path></svg>,
 	rows: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M16 2.75A1.75 1.75 0 0014.25 1H1.75A1.75 1.75 0 000 2.75v2.5A1.75 1.75 0 001.75 7h12.5A1.75 1.75 0 0016 5.25v-2.5zm-1.75-.25a.25.25 0 01.25.25v2.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-2.5a.25.25 0 01.25-.25h12.5zM16 10.75A1.75 1.75 0 0014.25 9H1.75A1.75 1.75 0 000 10.75v2.5A1.75 1.75 0 001.75 15h12.5A1.75 1.75 0 0016 13.25v-2.5zm-1.75-.25a.25.25 0 01.25.25v2.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-2.5a.25.25 0 01.25-.25h12.5z"></path></svg>,

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>}

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;