widget.jsx

1import { useMemo, useState } from 'react';2import { ready, ink } from '../../lib/mrly.js';3import { Row, Slider } from '../../lib/app.jsx';4import { Grid } from '../../lib/draw.jsx';5import { embed } from '../../lib/widget.jsx';67const m = await ready();89const STEPS = 127;1011export const run = (number) => {12  const grid = m.eca_seed(number, STEPS);13  let live = 0;14  for (const bit of grid.types) live += bit;15  return { grid: { width: grid.width, height: grid.height, types: grid.types }, live };16};1718export function rule() {19  const [number, setNumber] = useState(90);20  const seen = useMemo(() => run(number), [number]);21  return (22    <>23      <Grid grid={seen.grid} on={ink.yellow} role="img" aria-label={`Rule ${number} from one live cell, ${seen.grid.height} generations`} />24      <Row>25        <Slider label="rule" value={number} min={0} max={255} onChange={setNumber} />26      </Row>27      <p className="sub">{`rule ${number} from one live cell, ${seen.grid.height} generations on ${seen.grid.width} cells, ${seen.live} of them live`}</p>28    </>29  );30}3132embed('wolfram', { rule });