How to use the @mathigon/boost.$$ function in @mathigon/boost

export function bridges1($section) {
  let $svg = $section.$('svg');

  let $water   = $('.water', $svg);
  let $bg      = $('.background', $svg);
  let $bridges = $$('.bridge', $svg);

  let $edges    = $$('.edge', $svg);
  let $vertices = $$('.vertex', $svg);
  let $trace    = $('.trace', $svg);

  $edges.forEach($e => { $e.hide(); });
  $vertices.forEach($e => { $e.hide(); });
  $trace.hide();

  $section.onScore('blank-0', () => {
    $vertices.forEach($v => $v.enter('pop', 400));
  });

  $section.onScore('blank-1', () => {
    setTimeout(() => { for (let $x of [$water, $bg, ...$bridges]) $x.exit('fade', 800); }, 1600);
    $edges.forEach($e => $e.enter('draw', 800));

export function bridges1($section: Step) {
  let $svg = $section.$('svg');

  let $water = $('.water', $svg)!;
  let $bg = $('.background', $svg)!;
  let $bridges = $$('.bridge', $svg);

  let $edges = $$('.edge', $svg);
  let $vertices = $$('.vertex', $svg);
  let $trace = $('.trace', $svg)!;

  $edges.forEach($e => { $e.hide(); });
  $vertices.forEach($e => { $e.hide(); });
  $trace.hide();

  $section.onScore('blank-0', () => {
    $vertices.forEach($v => $v.enter('pop', 400));
  });

  $section.onScore('blank-1', () => {
    setTimeout(() => {
      for (let $x of [$water, $bg, ...$bridges]) $x.exit('fade', 800);
    }, 1600);
    $edges.forEach($e => $e.enter('draw', 800));

export function bridges1($section: Step) {
  let $svg = $section.$('svg');

  let $water = $('.water', $svg)!;
  let $bg = $('.background', $svg)!;
  let $bridges = $$('.bridge', $svg);

  let $edges = $$('.edge', $svg);
  let $vertices = $$('.vertex', $svg);
  let $trace = $('.trace', $svg)!;

  $edges.forEach($e => { $e.hide(); });
  $vertices.forEach($e => { $e.hide(); });
  $trace.hide();

  $section.onScore('blank-0', () => {
    $vertices.forEach($v => $v.enter('pop', 400));
  });

  $section.onScore('blank-1', () => {
    setTimeout(() => {
      for (let $x of [$water, $bg, ...$bridges]) $x.exit('fade', 800);

export function bridges1($section) {
  let $svg = $section.$('svg');

  let $water   = $('.water', $svg);
  let $bg      = $('.background', $svg);
  let $bridges = $$('.bridge', $svg);

  let $edges    = $$('.edge', $svg);
  let $vertices = $$('.vertex', $svg);
  let $trace    = $('.trace', $svg);

  $edges.forEach($e => { $e.hide(); });
  $vertices.forEach($e => { $e.hide(); });
  $trace.hide();

  $section.onScore('blank-0', () => {
    $vertices.forEach($v => $v.enter('pop', 400));
  });

  $section.onScore('blank-1', () => {
    setTimeout(() => { for (let $x of [$water, $bg, ...$bridges]) $x.exit('fade', 800); }, 1600);
    $edges.forEach($e => $e.enter('draw', 800));
  });

export function bridges1($section: Step) {
  let $svg = $section.$('svg');

  let $water = $('.water', $svg)!;
  let $bg = $('.background', $svg)!;
  let $bridges = $$('.bridge', $svg);

  let $edges = $$('.edge', $svg);
  let $vertices = $$('.vertex', $svg);
  let $trace = $('.trace', $svg)!;

  $edges.forEach($e => { $e.hide(); });
  $vertices.forEach($e => { $e.hide(); });
  $trace.hide();

  $section.onScore('blank-0', () => {
    $vertices.forEach($v => $v.enter('pop', 400));
  });

  $section.onScore('blank-1', () => {
    setTimeout(() => {
      for (let $x of [$water, $bg, ...$bridges]) $x.exit('fade', 800);
    }, 1600);
    $edges.forEach($e => $e.enter('draw', 800));
  });

export function bridges4($section: Step) {
  const $svg = $('svg', $section)!;
  const $g = $('g', $section)!;
  const $edges = $$('line', $svg);
  const $vertex = $('circle', $svg)!;
  const $text = $('text', $svg)!;
  const $trace = $('path', $svg)!;
  const $slideshow = $section.$('x-slideshow')!;

  for (let i = 0; i < 6; ++i) $edges[i].hide();
  $trace.hide();

  $slideshow.on('next', async (x: number) => {
    if (x < 4) {
      await $edges[2 * x - 2].enter('draw', 600).promise;
      $text.textStr = 2 * x - 1;
      $vertex.css('fill', RED);
      await $edges[2 * x - 1].enter('draw', 600).promise;
      $text.textStr = 2 * x;
      $vertex.css('fill', GREEN);

$section.$$('.tab').forEach(($el, i) => {
    const $svg = $el.$('svg.frame');
    const $paths = $('.paths', $svg);
    const $water = $('.water', $svg);
    const $bridges = $$('.bridge', $svg);
    const $error = $('.error', $svg);
    const $solveds = $section.$$('x-solved');

    let success = false;
    let attempts = 0;
    let totalCrossed = 0;

    $error.hide();

    let map = new Sketch($svg, { paths: $paths });
    map.on('start', () => {
      map.clear();
      attempts += 1;
    });

    function completeMap() {

$section.$$('.tab').forEach(($el, i) => {
    const $svg = $el.$('svg.frame') as SVGParentView;
    const $paths = $('.paths', $svg) as SVGView;
    const $water = $('.water', $svg)!;
    const $bridges = $$('.bridge', $svg);
    const $error = $('.error', $svg)!;
    const $solveds = $section.$$('x-solved');

    let success = false;
    let attempts = 0;
    let totalCrossed = 0;

    $error.hide();

    let map = new Sketch($svg, {paths: $paths});
    map.on('start', () => {
      map.clear();
      attempts += 1;
    });

    function completeMap() {

export function handshakes3($section: Step) {
  let graphs = $$('.graph', $section) as SVGParentView[];
  new Graph(graphs[0], 4, subsets(list(4), 2) as [number, number][]);
  new Graph(graphs[1], 5, subsets(list(5), 2) as [number, number][]);
  new Graph(graphs[2], 6, subsets(list(6), 2) as [number, number][]);
  new Graph(graphs[3], 7, subsets(list(7), 2) as [number, number][]);
}

export function bridges4($section) {
  let $svg    = $('svg', $section);
  let $g      = $('g', $section);
  let $edges  = $$('line', $svg);
  let $vertex = $('circle', $svg);
  let $text   = $('text', $svg);
  let $trace  = $('path', $svg);

  for (let i=0; i<6; ++i) $edges[i].hide();
  $trace.hide();

  $section.$slides.on('next', function(x) {
    if (x < 4) {
      $edges[2 * x - 2].enter('draw', 600).then(function() {
        $text.text = 2 * x - 1;
        $vertex.css('fill', RED);
      }).then(function() {
        return $edges[2 * x - 1].enter('draw', 600)
      }).then(function() {
        $text.text = 2 * x;