今天我們會用 RxJS 來把事件串起來，讓視覺化的地圖動起來。

RxJS 概念簡介

在正式開始之前，我們先想想

假設我想洗澡，但是家裡兩間浴室都有人在用，我想盡快在浴室空出來的時候洗澡怎麼辦呢 ?

有一種比較直覺的方法是

每五分鐘就帶著衣服去兩間浴室巡邏，如果有任何一間空出來了就馬上進去洗

這樣的方式雖然做起來簡單，但是浴室空出來到下次巡邏之間有空檔，浴室可能被別人捷足先登，如果一直在兩間浴室走來走去又很累 ... 所以如果我們可以考慮換個方式

跟洗澡的人先約好「洗完LINE跟我說一下」，在收到通知後馬上去洗

其實這樣解決事情的方法，就是 RxJS 所使用的觀察者模式 !

• 浴室 = 觀察目標 (observable)
• 我 = 觀察者 (observer)

我(observer)要知道浴室(observable)已經空出來(BathroomEmptyEvent)了呢?

至少洗澡的人需要知道你的聯繫方式，例如 line 帳號 (subscribe function)

地圖狀態動畫化

有了以上概念，我們接著利用 RxJS 來幫助我們把地圖事件變成可觀察的目標(observable)
以下實作請參考註解

import * as rx from "rxjs";

const tick = 1000;

const 觀察刀賊移動 = rx
  .timer(2000, tick) // 2秒後起，每一秒產生一個事件，注意這些事件全部都是可以被觀察的
                     // 這些事件目前都只是 index 數字
  .pipe(rx.take(15)) // 取前 15 個事件
  .pipe(rx.map(() => 刀賊向左走)); //把數字轉換成 刀賊向左走 事件

const 觀察刀賊動作 = rx
  .timer(2500, tick) // 2.5秒後起，每一秒產生一個事件
  .pipe(rx.take(15))
  .pipe(
    // 在第 10 個事件出現時，施放迴旋斬
    // 在第 11 個事件出現時，撿取掉落物
    rx.map((_, i) => (i == 10 ? 刀賊迴旋斬 : i == 11 ? 刀賊撿取 : undefined))
  );

// 把兩條時間線合起來，並且使用 subscribe function 開始觀察事件進展


rx.merge(觀察刀賊移動, 觀察刀賊動作).subscribe((event) => {
  if (event) {
    map.on(event);
    console.clear();
    console.log(visualize(map));
  }
});

以以上範例來說，rx.merge(觀察刀賊移動, 觀察刀賊動作)會在 subscribe 開始觸發
但並不是所有的被觀察目標都要藉由觀察來觸發，也有很多其他方法可以在中途進行訂閱
(想像成洗澡洗一半打開門塞手機進去 XD)

最終成果如下