widget.jsx

1import { useMemo, useState } from 'react';2import { ready } from '../../lib/mrly.js';3import { Row, Slider, Check } from '../../lib/app.jsx';4import { Pixels } from '../../lib/draw.jsx';5import { embed } from '../../lib/widget.jsx';67const m = await ready();89const SIDE = 720;1011export function window() {12  const [n, setN] = useState(100);13  const [layers, setLayers] = useState(true);14  const sheet = useMemo(() => m.visible_pixels(n, SIDE, layers), [n, layers]);15  const read = useMemo(() => JSON.parse(m.visible_read(n, 2)), [n]);16  return (17    <>18      <Pixels data={sheet} role="img" aria-label="The corner window of the grid, every visible point lit and every hidden one shaded by the divisor that hides it" />19      <Row>20        <Slider label="window n" value={n} min={8} max={300} onChange={setN} />21        <Check label="shade the layers" checked={layers} onChange={setLayers} />22      </Row>23      <p className="sub">{`${read.lit} visible of ${read.total} points, a share of ${read.density.toFixed(6)}`}</p>24    </>25  );26}2728embed('pi', { window });