Нужен эксперт rxjs, чтобы решить эту загадочную загадку :)

Question

Мне действительно нужна помощь, чтобы разобраться с этой загадкой, с которой я столкнулся ... Я нарисую ее с точки зрения производства пончиков.(тот круг, который мы едим, когда у нас стресс)

Как и должно быть

В идеальном случае пользователь должен иметь возможность изменять настройки Factory & Toppingпончик.

Дело в том, что каждый раз, когда пончик импортируется, выбранная фабрика немедленно делает пончик с выбранной начинкой.

Продолжительность приготовления пончика варьируется.

Послепончик сделан, он будет храниться.

Теперь проблема, с которой я сталкиваюсь, заключается в том, что я не могу изменить Factory & Topping.(Это всегда значение по умолчанию N1, игра с кодами, приведенными ниже, должна помочь лучше объяснить загадку.)

Примечание

Последовательность имеет значение.Если пользователь вводит a, b, c, пончики должны быть ["N1a", "N1b", "N1c"], даже если для пончика определенного типа пончик требуется больше времени.Если пользователь вводит a, 2, i, j, k, 3, x, y, пончики должны быть ["N1a", "N2i", "N2j", "N2k", "N3x", "N3y"]

Вот код, который я разработал ниже, надеюсь, что эксперты rxjs найдут радость в решении этой проблемы, поскольку я уже съел слишком много пончиков, пытаясь решить эту проблему уже!

Код: https://stackblitz.com/edit/rxjs-uhqftu

import {
  fromEvent, combineLatest, of, concat, merge,
} from 'rxjs';
import {
  filter, tap, map, concatMap,
} from 'rxjs/operators';

console.log( 'Press arrow keys to change factory' );
console.log( 'Press [0-9] to change topping' );
console.log( 'Press [a-z] to import donuts' );

const donuts = [];

const allEvents$ = concat( of( 'ArrowUp', '1' ), fromEvent( document, 'keydown' ).pipe( map( event => event.key ) ) );

const factoryLocations = {
  ArrowUp: 'N',
  ArrowLeft: 'W',
  ArrowDown: 'S',
  ArrowRight: 'E',
};

const factoryEvent$ = allEvents$.pipe(
  filter( val => factoryLocations[ val ] ),
  map( val => factoryLocations[ val ] ),
  tap( x => console.log( `%c Change Factory ${ x }`, 'color: #e57373' ) )
);

const toppingEvent$ = allEvents$.pipe(
  filter( val => Number.isInteger( Number( val ) ) ),
  tap( x => console.log( `%c Change Topping ${ x }`, 'color: #f06292' ) )
);

const importDonutEvent$ = allEvents$.pipe(
  filter( val => !Number.isInteger( Number( val ) ) && !factoryLocations[ val ] ),
  tap( x => console.log( `%c Importing Donut ${ x }`, 'color: #f06292' ) )
);

const settingEvents$ = combineLatest( factoryEvent$, toppingEvent$ );

const processEvent$ = settingEvents$.pipe(
  concatMap( ( [ factory, topping ] ) => merge(
    importDonutEvent$
  ).pipe(
    map( type => ( { factory, topping, type } ) ),
  ) )
);

processEvent$.pipe(
  concatMap( ( { factory, topping, type } ) => makeDonut( factory, topping, type ) ),
).subscribe( donut => {
  console.log( `%c DONE   ${ donut }`, 'color: #4db6ac' );
  donuts.push( donut );
  console.log( donuts );
} );

function makeDonut ( factory, topping, type ) {
  const time = Math.random() * 3000;
  const donut = factory + topping + type;

  console.log( `%c MAKING ${ donut }`, 'color: #7986cb' );
  return new Promise( resolve => setTimeout( () => resolve( donut ), time ) );
}