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

map.addPoint(p);
      map.stop();
      map.p = undefined;
      $ut.effect('pulse-down');
      if (startUtility.data.type === dataType) {
        last(map.paths).css('stroke', '#C00');
        errors.push(last(map.paths));
        if (dataType === 'house') {
          $section.addHint('housesToEachOther');
        } else {
          $section.addHint('factoriesToEachOther');
        }
      } else {
        let sector = (startUtility.data.type === 'house') ?
                     $('.' + $ut.data.utility, currentUtility)! :
                     $('.' + currentUtility.data.utility, $ut)!;
        sector.css('opacity', 1);
        sectors.set(last(map.paths), sector);
      }
      // TODO Error on connect twice
    });
  }

if (!map.drawing || currentUtility === $ut) return;
      map.addPoint(p);
      map.stop();
      map.p = undefined;
      $ut.effect('pulse-down');
      if (startUtility.data.type === dataType) {
        last(map.paths).css('stroke', '#C00');
        errors.push(last(map.paths));
        if (dataType === 'house') {
          $section.addHint('housesToEachOther');
        } else {
          $section.addHint('factoriesToEachOther');
        }
      } else {
        let sector = (startUtility.data.type === 'house') ?
                     $('.' + $ut.data.utility, currentUtility)! :
                     $('.' + currentUtility.data.utility, $ut)!;
        sector.css('opacity', 1);
        sectors.set(last(map.paths), sector);
      }
      // TODO Error on connect twice
    });
  }

function rollDice() {
    let d = $section.model.d;
    let x = random.weighted(probabilities[d]);

    scores[x] += 1;
    let maxScore = Math.max(...scores);

    for(let i = d; i <= 6 * d; ++i) {
      $('#dc1'+i).text = scores[i];
      $('#dc2'+i).css('height', (scores[i]/maxScore*95)+'%');
    }
  }

$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;
    });

export function utilities($section: Step) {
  let currentUtility: SVGView;
  let startUtility: SVGView;
  let errors: SVGView[] = [];

  const $svg = $('#map-utilities') as SVGParentView;
  const map = new Sketch($svg, {
    noStart: true,
    paths: $('#utility-paths') as SVGView,
    intersect: true
  });

  let attempts = 0;

  function resolve(hint?: string) {
    attempts += 1;
    if (attempts === 3) {
      $section.score('try-three-times');
      $section.addHint('utilitiesImpossible');
    } else if (hint) {
      $section.addHint(hint);
    }
  }

  setTimeout(() => {

function loadCSS(href) {
  if (PROMISES[href]) return;
  PROMISES[href] = Promise.resolve();
  $N('link', {rel: 'stylesheet', type: 'text/css', href}, $(document.head));
}

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', () => {

$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;
    });

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);

    } else if (x === 5) {

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() {