How to use @mathigon/boost - 10 common examples

for (const edge of points) {
    const curve = new THREE.LineCurve3(edge[0], edge[1]);
    const geometry = new THREE.TubeGeometry(curve, 1, LINE_RADIUS, LINE_SEGMENTS);
    obj.add(new THREE.Mesh(geometry, material));
  }

  return obj;
}



// -----------------------------------------------------------------------------
// Custom Element

@register('x-solid')
export class Solid extends CustomElementView {
  private isReady = false;
  object!: THREE.Object3D;
  scene!: Graphics3D;

  async ready() {
    const size = this.attr('size').split(',');
    const width = +size[0];
    const height = size.length > 1 ? +size[1] : width;

    this.css({width: width + 'px', height: height + 'px'});

    this.scene = await create3D(this, 35, 2 * width, 2 * height);
    this.scene.camera.position.set(0, 3, 6);
    this.scene.camera.up = new THREE.Vector3(0, 1, 0);
    this.scene.camera.lookAt(new THREE.Vector3(0, 0, 0));

$fullDots[i].addClass('warning');
        $fullDots[i].animate({transform: `translate(50px, 50px) scale(2)`}, 400, 400)
            .promise.then(() => $fullDots[i].exit('pop'));
        $antiDots[i].addClass('warning');
        $antiDots[i].animate({transform: `translate(50px, 50px) scale(2)`}, 400, 400)
            .promise.then(() => $antiDots[i].exit('pop'));
      }, i * 600);
      setTimeout(() => annihilateAudio.play(), i * 600 + 500);
    }
  }

}

// -----------------------------------------------------------------------------

@register('x-dot-machine')
export class DotMachine extends CustomElementView {
  $wrap!: ElementView;
  base!: number;
  spacing!: number;
  cells: Cell[] = [];

  ready() {
    const cellString = (this.attr('cells') || '000');
    const cells = cellString.replace('…', '').split('.');

    this.base = (+this.attr('type') || 10);
    this.spacing = this.hasClass('tiny') ? 14 : 20;

    this.$wrap = $N('div', {class: 'dot-wrap'}, this);
    if (cellString[0] === '…') $N('div', {class: 'dot-ellipses'}, this.$wrap);

3: 0xfd8c00,  // yellow
  4: 0x0f82f2,  // blue
  5: 0x22ab24,  // green
  6: 0xcd0e66,  // red
  8: 0x6f27cc,  // violet
  10: 0x18aa93  // teal
};

const scales: Obj = {
  StellatedDodecahedron: 2,
  Octahedron: 1.3,
  Tetrahedron: 1.1
};


@register('x-polyhedron')
export class Polyhedron extends Solid {

  created() {
    const shape = this.attr('shape');
    const data = PolyhedronData[shape];
    if (!data) return console.error('Unknown polyhedron:', shape);

    const scale = scales[shape] || 1.65;
    this.setAttr('rotate', '1');

    this.addMesh((scene) => {
      const polyhedron = new THREE.Object3D();
      const vertices = data.vertex.map(v =>
          new THREE.Vector3(v[0], v[1], v[2]).multiplyScalar(scale));

      const faceGeometry = new THREE.Geometry();

$editor2.show();
        cm1.refresh();
        cm2.refresh();
      } else if (state === 1) {
        $button.exit('pop');
        this.trigger('continue');
      }
      state += 1;
    });
  }
}

// -----------------------------------------------------------------------------

registerElement('x-code-editor', CodeEditor);
registerElement('x-code-checker', CodeChecker);

$button.text = 'Continue';
        $editor2.show();
        cm1.refresh();
        cm2.refresh();
      } else if (state === 1) {
        $button.exit('pop');
        this.trigger('continue');
      }
      state += 1;
    });
  }
}

// -----------------------------------------------------------------------------

registerElement('x-code-editor', CodeEditor);
registerElement('x-code-checker', CodeChecker);

export function piColours($step: Step) {
  const colours = ['#ff941f', '#e66438', '#cc3450', '#b30469', '#822b9b',
    '#5053cd', '#1f7aff', '#258dab', '#2ba058', '#31b304'];  // TODO New colours

  const $cells = $step.$$('.pi-cell');
  for (let $c of $cells) $c.css('background', colours[+$c.text]);
  const $filter = list(10).map(i => $cells.filter($c => +$c.text !== i));

  for (let $c of $cells) {
    const i = +$c.text;
    hover($c, {
      enter() {
        for (let $c of $filter[i]) $c.addClass('hide');
        $step.score('hover');
      },
      exit() { for (let $c of $filter[i]) $c.removeClass('hide'); }
    });
  }
}

$step.model.watch((state) => {
    // TODO Reuse elements for better performance.
    triangle.removeChildren();
    $circle.removeChildren();

    for (let i = 0; i < state.n2; ++i) {
      $N('path', {}, triangle);
      $N('path', {}, $circle);
    }

    drawRings($circle, 0);
    drawRings(triangle, $slider.current / $slider.steps);
  });

constructor(shape: ShapeOptions, initial: {x: number, y: number, a?: number},
              private readonly $parent: Tessellation) {

    this.$el = $N('g', {class: 'shape'});
    this.$shape =
        $N('polygon', {points: shape.points, fill: shape.colour}, this.$el);
    const $rotate = $N('circle', {r: 8, cy: -30}, this.$el);

    this.polygon = polygonFromPoints(shape.points);
    this.setPosition(new Point(initial.x, initial.y), initial.a || 0);

    let offset: Point;
    slide(this.$shape, {
      start: p => {
        $parent.$svg.append(this.$el);  // Move element to the front.
        offset = p.subtract(this.posn);  // If you're not clicking in the center.
      },
      move: p => this.setPosition(p.subtract(offset), this.angle)
    });

    slide($rotate, {
      move: p => this.setPosition(this.posn, getAngle(p, this.posn))
    });

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