widget.jsx

1import { useMemo, useState } from 'react';2import { ready, ink } from '../../lib/mrly.js';3import { Row, Slider, Stats, Stat } from '../../lib/app.jsx';4import { Grid } from '../../lib/draw.jsx';5import { embed } from '../../lib/widget.jsx';67const m = await ready();89const TOP = 3;1011export function sieve() {12  const [level, setLevel] = useState(2);13  const seen = useMemo(() => ({14    grid: m.wallis_grid('odd', 3, level),15    read: JSON.parse(m.wallis_read('odd', 3, level, 2)),16  }), [level]);17  return (18    <>19      <Grid grid={seen.grid} on={ink.blue} role="img" aria-label="The plane Wallis sieve, the surviving squares inked and every dropped centre left as ground" />20      <Row>21        <Slider label="level" value={level} min={1} max={TOP} onChange={setLevel} />22      </Row>23      <Stats>24        <Stat label="side">{seen.read.side}</Stat>25        <Stat label="cells">{seen.read.cells}</Stat>26        <Stat label="area">{seen.read.ratio.toFixed(6)}</Stat>27      </Stats>28    </>29  );30}3132embed('wallis', { sieve });