_gameInterval: Subscription;
 
  auto(delay: number) {
    this._gameInterval = timer(0, delay).subscribe(() => {
      this._update();
    });
  }

export class Piece {
  x: number;
  y: number;
  rotation = PieceRotation.Deg0;
  type: PieceTypes;
  shape: Shape;
  next: Shape;
 
  private _shapes: Shapes;
  private _lastConfig: Partial<Piece>;
 
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
 
  protected setShapes(shapes: Shapes) {
    this._shapes = shapes;
    this.shape = shapes[this.rotation];
  }
}

const ShapesL: Shapes = [];
ShapesL[PieceRotation.Deg0] = [
  [0, 0, 0, 0],
  [1, 0, 0, 0],
  [1, 0, 0, 0],
  [1, 1, 0, 0]
];
 
ShapesL[PieceRotation.Deg90] = [
  [0, 0, 0, 0],
  [0, 0, 0, 0],
  [1, 1, 1, 0],
  [1, 0, 0, 0]
];
 
export class PieceL extends Piece {
  constructor(x: number, y: number) {
    super(x, y);
    this.type = PieceTypes.L;
    this.next = [
      [0, 0, 1, 0],
      [1, 1, 1, 0]
    ];
    this.setShapes(ShapesL);
  }
}

const ShapesF: Shapes = [];
ShapesF[PieceRotation.Deg0] = [
  [1, 0, 0, 0],
  [1, 1, 0, 0],
  [1, 0, 0, 0],
  [1, 1, 0, 0]
];
 
export class PieceF extends Piece {
  constructor(x, y) {
    super(x, y);
    this.type = PieceTypes.F;
    this.next = [
      [1, 0, 1, 0],
      [1, 1, 1, 1]
    ];
    this.setShapes(ShapesF);
  }
}

div.b {
  transform: scale(-1, 1);
}

div.cube {
  width: 150px;
  height: 80px;
  background-color: yellow;
}
 
div.a {
  transform: scale(1, 1);
}

.dragon {
    width: 80px;
    height: 86px;
    margin: 0 auto;
    background-position: 0 -100px;
  
    &.l1 {
      background-position: 0 -100px;
    }
    &.l1
      transform: scale(-1, 1);
    }
  }

.dragon {
    width: 80px;
    height: 86px;
    margin: 0 auto;
    background-position: 0 -100px;
  
    &.r1 {
      background-position: 0 -100px;
    }
  }

  eyes() {
    return timer(0, 500).pipe(
      startWith(0),
      map((x) => x + 1),
      takeWhile((x) => x < 6),
      tap((x) => {
        let state = x % 2 === 0 ? 1 : 2;
        this.className = `l${ state }`;
      })
    );
  }

  run() {
    let side = 'r';
    return timer(0, 100).pipe(
      startWith(0),
      map((x) => x + 1),
      takeWhile((x) => x <= 40),
      tap((x) => {
        if (x === 10 || x === 20 || x === 30) {
          side = side === 'r' ? 'l' : 'r';
        }
        let state = x % 2 === 0 ? 3 : 4;
        this.className = `${ side }${ state }`;
      }),
      finalize(() => {
        this.className = `${ side }1`;
      })
    );
  }

  ngOnInit(): void {
    concat(this.run(), this.eyes())
      .pipe(
        delay(5000),
        repeat(1000),
        untilDestroyed(this)
      )
      .subscribe();
  }