mirror of
https://github.com/misode/misode.github.io.git
synced 2026-05-03 14:12:54 +00:00
Misode
886991af8e
* Start with customized biome UI * Refactor customized page, split logic * Implement biome replacements * Remove debug messages * Disable create button when nothing is modified
58 lines
3.3 KiB
TypeScript
58 lines
3.3 KiB
TypeScript
import { Identifier, ItemStack } from 'deepslate'
|
|
import { ItemDisplay } from '../ItemDisplay.jsx'
|
|
import { TextInput } from '../index.js'
|
|
import { CustomizedInput } from './CustomizedInput.jsx'
|
|
import type { CustomizedModel } from './CustomizedModel.js'
|
|
import { CustomizedSlider } from './CustomizedSlider.jsx'
|
|
import { CustomizedToggle } from './CustomizedToggle.jsx'
|
|
|
|
interface Props {
|
|
model: CustomizedModel,
|
|
initialModel: CustomizedModel,
|
|
changeModel: (model: Partial<CustomizedModel>) => void,
|
|
}
|
|
export function BasicSettings({ model, initialModel, changeModel }: Props) {
|
|
return <>
|
|
<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" help="The highest 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" 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" 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>
|
|
<span>/</span>
|
|
<button class={`customized-toggle${model.oceans === 'lava' ? ' customized-lava' : ''}`} onClick={() => changeModel({ oceans: 'lava' })}>Lava</button>
|
|
<span>/</span>
|
|
<button class={`customized-toggle${model.oceans != 'water' && model.oceans != 'lava' ? ' customized-active' : ''}`} onClick={() => changeModel({ oceans: 'slime_block' })}>Custom</button>
|
|
{model.oceans != 'water' && model.oceans != 'lava' && <>
|
|
<TextInput value={model.oceans} onChange={v => changeModel({ oceans: v })} />
|
|
<ItemDisplay item={new ItemStack(Identifier.parse(model.oceans), 1)} tooltip={false} />
|
|
</>}
|
|
</CustomizedInput>
|
|
<div class="customized-group">
|
|
<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" help="The new caves introduced in 1.18"
|
|
value={model.noiseCaves} onChange={v => changeModel({ noiseCaves: v })}
|
|
initial={initialModel.noiseCaves} />
|
|
<CustomizedToggle label="Old caves" help="The legacy caves"
|
|
value={model.carverCaves} onChange={v => changeModel({ carverCaves: v })}
|
|
initial={initialModel.carverCaves} />
|
|
<CustomizedToggle label="Ravines" help="The legacy ravines and canyons"
|
|
value={model.ravines} onChange={v => changeModel({ ravines: v })}
|
|
initial={initialModel.ravines} />
|
|
</div>}
|
|
</div>
|
|
</>
|
|
}
|