near/computersandblues.hitomezashi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nicer styling

Browse source
This commit is contained in:
arne 2024-07-19 10:53:04 +02:00
commit 8343f25f0b
2 changed files with 82 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/main.ts
View file

@ -18,6 +18,10 @@ const cellSize = reactive(cellSize_).map(num => {
return Number.isNaN(next)|| next < 5 ? 5 : next
})
// const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color')
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
const secondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color')
// available size for a2: 420 * 594
const width = 420
const height = 594
@ -52,7 +56,7 @@ const stitches = (seed: number, maxCells: number) =>
const scene = sync({
src: { cellSize, xs, ys, }
}).map(({ cellSize, xs, ys }) => {
console.log({ cellSize, xs, ys })
// console.log({ cellSize, xs, ys })
const minPadding = cellSize
@ -80,7 +84,7 @@ const scene = sync({
const scene = translate(
group(
{ __background: '#eee', stroke: '#222' },
{ __background: primaryColor, stroke: secondaryColor },
[...yLines, ...xLines]
),
[xPadding, yPadding]
@ -90,36 +94,35 @@ const scene = sync({
})
$compile(
["main",
{},
["h1", {}, "Hitomezashi Patterns"],
$canvas(scene, size),
["h2", {}, "Settings"],
["div", {}, ["label", {}, "Grid size: ",
["input", {
type: "number",
min: "5",
value: cellSize.deref()!,
oninput: $input(cellSize)
}]]],
["div", {}, ["label", {}, "X Pattern: ",
["input", {
type: "text",
value: xs_,
oninput: $input(ys)
}]]],
["div", {}, ["label", {}, "Y Pattern: ",
["input", {
type: "text",
value: ys_,
oninput: $input(ys)
}]]],
["h2", {}, "SVG Export"],
["div", {},
["textarea", {
["div.container", {},
["main", {},
["h1", {}, "Hitomezashi Patterns"],
$canvas(scene, size)],
["aside", {},
["h2", {}, "Settings"],
["div", {}, ["label", {}, "Grid size: ",
["input", {
type: "number",
min: "5",
value: cellSize.deref()!,
oninput: $input(cellSize)
}]]],
["div", {}, ["label", {}, "X Pattern: ",
["input", {
type: "text",
value: xs_,
oninput: $input(ys)
}]]],
["div", {}, ["label", {}, "Y Pattern: ",
["input", {
type: "text",
value: ys_,
oninput: $input(ys)
}]]],
["h2", {}, "SVG Export"],
["div", {}, ["textarea", {
value: scene.map((scene) => asSvg(svgDoc({ viewBox: `0 0 ${size[0]} ${size[1]}` }, scene))),
cols: 80,
rows: 20
}]]
]
}]]]]
).mount(document.body)