DRY input settings

This commit is contained in:
arne 2024-07-20 18:40:05 +02:00
commit 0e42f55324

View file

@ -96,6 +96,9 @@ const scene = sync({
return scene return scene
}) })
const input = (label: string, attrs: any) =>
["div", {}, ["label", {}, label, ["input", attrs]]]
$compile( $compile(
["div.container", {}, ["div.container", {},
["main", {}, ["main", {},
@ -103,25 +106,22 @@ $compile(
$canvas(scene, size)], $canvas(scene, size)],
["aside", {}, ["aside", {},
["h2", {}, "Settings"], ["h2", {}, "Settings"],
["div", {}, ["label", {}, "Grid size: ", input("Grid size: ", {
["input", {
type: "number", type: "number",
min: "5", min: "5",
value: cellSize.deref()!, value: cellSize.deref()!,
oninput: $input(cellSize) oninput: $input(cellSize)
}]]], }),
["div", {}, ["label", {}, "X Pattern: ", input("X Pattern: ", {
["input", {
type: "text", type: "text",
value: xs_, value: xs_,
oninput: $input(xSeeds) oninput: $input(xSeeds)
}]]], }),
["div", {}, ["label", {}, "Y Pattern: ", input("Y Pattern: ", {
["input", {
type: "text", type: "text",
value: ys_, value: ys_,
oninput: $input(ySeeds) oninput: $input(ySeeds)
}]]], }),
["h2", {}, "SVG Export"], ["h2", {}, "SVG Export"],
["div", {}, ["textarea", { ["div", {}, ["textarea", {
value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))), value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))),