JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<pre>
const enum Side { A, B }

interface ISide {
	a :Side;
	b :Side;
}

abstract class Item {
	constructor(protected id :number) {}
}

class Cutlet extends Item {
	public side :ISide = { a: Side.A, b: Side.B };
}

class Pan extends Item {
	fry(cutlet :Cutlet, side :string) :void {
		++cutlet.side[side];
	}
}

class Stove {
	protected pans :Pan[];
	constructor(...pans :Pan[]) { this.pans = pans }
	fry(index :number, cutlet :Cutlet, side :number) :this;
	fry(index :number, ...args) :this;
	fry(...args) :this {
		this.pans[args.shift()]
			.fry(args[0], args[1]);
		return this;
	}
}

// Usage

let cutlets :Cutlet[] = [],
	stove :Stove = new Stove(new Pan(0), new Pan(1));

// Init cutlets pack
for (let i=0; i < 3; i++) {
	cutlets.push(new Cutlet(i));
}

//  Fry cutlets
for (let tick=0, ticks=3; tick < ticks; tick++){
    stove
      .fry(0, cutlets[tick], tick < 1 ? Side.A : Side.B)
//*
      .fry(1, ...(
			tick < 2
				? [cutlets[tick +1], Side.A]
				: [cutlets[tick -2], Side.B]
			)
		);
//*/
}

console.log(cutlets);
</pre>

Babel + JSX

class Cutlet {
  constructor(i) {
    this.id = i;
    this.side = { a: 0, b: 0 }
  }
}

class Pan {
  constructor(i) { this.id = i }
  fry(cutlet, side) {
    ++cutlet.side[side];
  }
}

class Stove {
  constructor(...pans) { this.pans = pans }
  fry(...args) {
    this.pans[args.shift()].fry(...args);
    return this;
  }
}

// Usage

let cutlets = [],
    stove = new Stove(new Pan(0), new Pan(1));

// Init cutlets pack
for (let i=0;i<3;i++) {
  cutlets.push(new Cutlet(i));
}

//  Fry cutlets
for (let tick=0, ticks=3; tick < ticks; tick ++) {
    stove
      .fry(0, cutlets[tick], tick < 1 ? 'a' : 'b')
      .fry(1, ...(tick < 2
          ? [cutlets[tick +1], 'a']
          : [cutlets[tick -2], 'b']
        ));
}

console.log(cutlets);