Customized worlds (#387)

* Customized tool UI

* Working version of the customized generator

* Error reporting and only allow 1.20 for now

src/app/components/customized/CustomizedOre.tsx

@@ -0,0 +1,42 @@
+import { useCallback } from 'preact/hooks'
+import type { CustomizedModel, CustomizedOreModel } from './CustomizedModel.js'
+import { CustomizedSlider } from './CustomizedSlider.jsx'
+
+interface Props {
+	model: CustomizedModel,
+	value: CustomizedOreModel,
+	initial: CustomizedOreModel,
+	onChange: (value: CustomizedOreModel) => void,
+}
+export function CustomizedOre({ model, value, initial, onChange }: Props) {
+	const changeOre = useCallback((change: Partial<CustomizedOreModel>) => {
+		onChange({ ...value, ...change })
+	}, [value])
+
+	return <>
+		<CustomizedSlider label="Size" value={value.size} onChange={v => changeOre({ size: v })} min={1} max={64} initial={initial.size} />
+		{Number.isInteger(value.tries)
+			? <CustomizedSlider label="Tries"
+				value={value.tries} onChange={v => changeOre({ tries: v })}
+				min={1} max={100} initial={initial.tries}/>
+			: <CustomizedSlider label="Rarity"
+				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'}
+			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'}
+			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} />
+	</>
+}
+
+function calcHeight(model: CustomizedModel, aboveBottom: number | undefined, belowTop: number | undefined, absolute: number | undefined) {
+	return aboveBottom !== undefined
+		? (model.minHeight + aboveBottom)
+		: belowTop !== undefined
+			? (model.maxHeight - belowTop)
+			: absolute
+}