Reverse stream processing when merging two streams

rx-colored-letter-numbers.ts

import { from, zip, timer, Observable } from 'rxjs';

const colors: any = {
    'red    ': 31,
    'green  ': 32,
    'yellow ': 33,
    'blue   ': 34,
    'magenta': 35,
    'cyan   ': 36,
    'white  ': 37,
};
const colorKeys = Object.keys(colors);

const coloredNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => ({
    col: colorKeys[n % colorKeys.length],
    num: n,
}));
const $coloredNumber = delayedFrom(coloredNumbers, 0, 250);

const coloredLetters = 'abcdefghij'.split('').map(l => ({
    col: colorKeys[l.charCodeAt(0) % colorKeys.length],
    letter: l,
}));
const $coloredLetter = delayedFrom(coloredLetters, 70, 300);

$coloredNumber.subscribe(_ => console.log(`\x1b[${colors[_.col]}m${_.num} => ${_.col}\x1b[0m`));
$coloredLetter.subscribe(_ => console.log(`\x1b[${colors[_.col]}m                ${_.col} <= ${_.letter}\x1b[0m`));


// HELPERS

// generates an observable from values of an array with delayed publication between each item
function delayedFrom<T>(values: T[], due: number, period: number): Observable<T> {
    return zip(
        from(values),
        timer(due, period),
        v => v as T
    );
}

Your task:

• Create a new stream $coloredNumberLetter
• In case a $coloredNumber event pops up: stream-process all already happened events on $coloredLetter stream
  and find the latest one that matches the same color of current $coloredNumber event.
• In case a $coloredLetter event pops up: stream-process all already happened events on $coloredNumber stream
  and find the latest one that matches the same color of current $coloredLetter event.

$coloredNumber | $coloredLetter | $coloredNumberLetter
---------------+----------------+----------------------------------
1 => green     |                |=> green:    1-
               | white   <= a   |=> white:    -a
2 => yellow    |                |=> yellow:   2-
               | red     <= b   |=> red:      -b
3 => blue      |                |=> blue:     3-
               | green   <= c   |=> green:    1c  // the first match
4 => magenta   |                |=> magenta:  4-
               | yellow  <= d   |=> yellow:   2d
5 => cyan      |                |=> cyan:     5-
6 => white     |                |=> white:    6a
               | blue    <= e   |=> blue:     3e
7 => red       |                |=> red:      7b
               | magenta <= f   |=> magenta:  4f
8 => green     |                |=> green:    8c
               | cyan    <= g   |=> cyan:     5g
9 => yellow    |                |=> yellow:   9d
               | white   <= h   |=> white:    6h
               | red     <= i   |=> red:      7i
               | green   <= j   |=> green:    8j  // be aware, there are two 'green' coloredNumber events on the left -> take the latest one