How to use the @mathigon/core.isOneOf function in @mathigon/core

$section.model.watch((state) => {
    const hint = isOneOf(state.x, 1, 2, 3, 6) ? 'gcd-yes' : 'gcd-no';
    $result.html = $section.getText(hint);
    $tiles.removeChildren();

    for (let x = 0; x < 30; x += state.x) {
      for (let y = 0; y < 18; y += state.x) {
        $N('rect', {
          x: 40 + 10 * x,
          y: 40 + 10 * y,
          width: 10 * state.x,
          height: 10 * state.x,
          stroke: '#736357',
          'stroke-width': 2,
          fill: 'url(#tile)'
        }, $tiles);
      }
    }

$section.model.watch((state) => {
    $result.html = $section.getText(
        isOneOf(state.x, 1, 2, 3, 6) ? 'gcd-yes' : 'gcd-no');

    $tiles.removeChildren();

    for (let x = 0; x < 30; x += state.x) {
      for (let y = 0; y < 18; y += state.x) {
        $N('rect', {
          x: 40 + 10 * x,
          y: 40 + 10 * y,
          width: 10 * state.x,
          height: 10 * state.x,
          stroke: '#736357',
          'stroke-width': 2,
          fill: 'url(#tile)'
        }, $tiles);
      }
    }

$geopad.waitForPath(path => (getLength(path.val.r) === 4 &&
        isOneOf(path.points[0], ...base.points))),
    (path) => {

function drawArcArrows(x: Arc, type: LineArrow) {
  let path = '';

  if (isOneOf(type, 'start', 'both')) {
    const normal = new Line(x.c, x.start).perpendicularVector.inverse;
    path += arrowPath(x.start, normal);
  }

  if (isOneOf(type, 'end', 'both')) {
    const normal = new Line(x.c, x.end).perpendicularVector;
    path += arrowPath(x.end, normal);
  }

  return path;
}

function drawLineArrows(x: Line, type: LineArrow) {
  let path = '';
  if (isOneOf(type, 'start', 'both')) {
    path += arrowPath(x.p1, x.unitVector);
  }
  if (isOneOf(type, 'end', 'both')) {
    path += arrowPath(x.p2, x.unitVector.inverse);
  }
  return path;
}

export function $(query, context = null) {
  if (!query) return null;
  const c = context ? context._el : document.documentElement;
  const el = (typeof query === 'string') ? c.querySelector(query) : query;

  if (!el) return null;
  if (el.$el) return el.$el;

  if (isOneOf(el, window, document.body, document.documentElement))
    return new WindowElement(el);

  const tagName = (el.tagName || '').toLowerCase();
  if (svgTags.indexOf(tagName) >= 0) return new SVGElement(el);
  if (formTags.indexOf(tagName) >= 0) return new FormElement(el);
  if (tagName === 'canvas') return new CanvasElement(el);
  if (isOneOf(tagName, 'video', 'audio')) return new MediaElement(el);

  return new Element(el);
}

$step.model.watch(m => {
    let p = m.a;
    let d = sqrtDistance(p);

    const valid = p.x > 0 && p.y < 17 && isInteger(d);
    $geopad.setClass('triple', valid);
    if (!valid) return;

    if (found.has(p.x + '-' + p.y)) return;

    $step.score('p' + found.size);
    found.add(p.x + '-' + p.y);

    $geopad.drawPoint(() => p, {classes: 'green'});
    if (isOneOf(found.size, 1, 6, 12)) $step.addHint('correct');
  });
}

hasParent(...$p) {
    const tests = $p.map(p => p._el);
    let parent = this._el.parentNode;
    while (parent) {
      if (isOneOf(parent, ...tests)) return true;
      parent = parent.parentNode;
    }
    return false;
  }

$geopad.waitForPath(path => (getLength(path.val.r) === 4 &&
        isOneOf(path.points[0], ...base.points))),
    (path) => {

export function $(query, context = null) {
  if (!query) return null;
  const c = context ? context._el : document.documentElement;
  const el = (typeof query === 'string') ? c.querySelector(query) : query;

  if (!el) return null;
  if (el.$el) return el.$el;

  if (isOneOf(el, window, document.body, document.documentElement))
    return new WindowElement(el);

  const tagName = (el.tagName || '').toLowerCase();
  if (svgTags.indexOf(tagName) >= 0) return new SVGElement(el);
  if (formTags.indexOf(tagName) >= 0) return new FormElement(el);
  if (tagName === 'canvas') return new CanvasElement(el);
  if (isOneOf(tagName, 'video', 'audio')) return new MediaElement(el);

  return new Element(el);
}