mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
64140aec92
* Customized tool UI * Working version of the customized generator * Error reporting and only allow 1.20 for now
43 lines
2.3 KiB
TypeScript
43 lines
2.3 KiB
TypeScript
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
|
|
}
|