From 35750af200b9f58870878f5dd6e3fff386784bde Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:10:41 +0300
Subject: [PATCH 01/10] refactor BoardView

---
 src/MancalaApp.tsx                 |  1 +
 src/components/board/BoardView.tsx | 46 ++++++++++++------------------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/MancalaApp.tsx b/src/MancalaApp.tsx
index 2329499..79fdc6a 100644
--- a/src/MancalaApp.tsx
+++ b/src/MancalaApp.tsx
@@ -77,6 +77,7 @@ const MancalaApp: FunctionComponent = () => {
         context.themeManager.theme.textColor,
         context.themeManager.theme.textLightColor
     );
+    if(!userKey) return <></>;
     return (
         <>
             <BrowserRouter>
diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx
index 3da5925..29cf0dd 100644
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -13,49 +13,39 @@ const BoardView: FunctionComponent<{
   context: Context;
   boardId: string;
   boardViewModel: BoardViewModel;
-  userKey: string;
+  revert: boolean;
   onPitSelect: (index: number, pit: Pit) => void;
-}> = ({ game, context, boardId, boardViewModel, userKey, onPitSelect: onPitSelect }) => {
+}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
   const mancalaGame = game?.mancalaGame;
-  const createPitView = (key: any, pitViewModel: PitViewModel, onClick: () => void) => {
-    return <PitView key={key} pitViewModel={pitViewModel} onClick={onClick} />;
-  };
-  const player1Pits = mancalaGame?.board.player1Pits.map((pit, index) => {
-    const pitViewModel = boardViewModel.pits[pit.index];
-    return createPitView(index, pitViewModel, () => {
-      if (mancalaGame?.turnPlayerId === mancalaGame?.player1Id && userKey === mancalaGame?.player1Id)
-        onPitSelect(mancalaGame?.board.player1Pits.indexOf(pit), pit);
-    });
-  });
-  const player2Pits = mancalaGame?.board.player2Pits.map((pit, index) => {
-    const pitViewModel = boardViewModel.pits[pit.index];
-    return createPitView(index, pitViewModel, () => {
-      if (mancalaGame?.turnPlayerId === mancalaGame?.player2Id && userKey === mancalaGame?.player2Id)
-        onPitSelect(mancalaGame?.board.player2Pits.indexOf(pit), pit);
-    });
-  });
   const theme = context.themeManager.theme;
-  const player1BankViewModel =
-    boardViewModel.pits[mancalaGame?.board.player1BankIndex()];
-  const player2BankViewModel =
-    boardViewModel.pits[mancalaGame?.board.player2BankIndex()];
-  const isPlayer2 = userKey === mancalaGame?.player2Id;
+
+  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
+    return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} />;
+  };
+  const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
+
+  const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
+  const player2Pits = createPitViewList(mancalaGame?.board.player2Pits);
+  const player1BankIndex = mancalaGame?.board.player1BankIndex();
+  const player2BankIndex = mancalaGame?.board.player2BankIndex();
+  const player1BankViewModel = boardViewModel.pits[player1BankIndex];
+  const player2BankViewModel = boardViewModel.pits[player2BankIndex];
   return (
     <div className="board" style={{ background: theme.boardColor }}>
       <StoreView
         context={context}
-        pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel}
+        pitViewModel={revert ? player2BankViewModel : player1BankViewModel}
         gridColumn="8 / 9"
         gridRow="1 / 3"
       />
       <StoreView
         context={context}
-        pitViewModel={isPlayer2 ? player1BankViewModel : player2BankViewModel}
+        pitViewModel={revert ? player1BankViewModel : player2BankViewModel}
         gridColumn="1 / 2"
         gridRow="1 / 3"
       />
-      {isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()}
-      {isPlayer2 ? player2Pits : player1Pits}
+      {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
+      {revert ? player2Pits : player1Pits}
       <style jsx>{`
         .board {
           padding: 2vw;

From 4c0a8877b6e0f38ef1220fecc1b3669e7a159506 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:11:48 +0300
Subject: [PATCH 02/10] feature: add channel listen_game_events

---
 src/const/channel_names.ts |  4 +++-
 src/routes/GamePage.tsx    | 33 ++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/const/channel_names.ts b/src/const/channel_names.ts
index 789d501..d088b0b 100644
--- a/src/const/channel_names.ts
+++ b/src/const/channel_names.ts
@@ -8,4 +8,6 @@ export const channel_on_game_crashed = "on_game_crashed"
 export const channel_on_game_user_leave = "on_game_user_leave"
 export const channel_ping = "ping"
 export const channel_pong = "pong"
-export const channel_on_user_connection_change = "channel_on_user_connection_change"
\ No newline at end of file
+export const channel_on_user_connection_change = "channel_on_user_connection_change"
+export const channel_listen_game_events = "channel_listen_game_events"
+export const channel_unlisten_game_events = "channel_unlisten_game_events"
\ No newline at end of file
diff --git a/src/routes/GamePage.tsx b/src/routes/GamePage.tsx
index f306eed..dd0c823 100644
--- a/src/routes/GamePage.tsx
+++ b/src/routes/GamePage.tsx
@@ -17,7 +17,7 @@ import LoadingComponent from '../components/LoadingComponent';
 import PageContainer from '../components/PageContainer';
 import Row from '../components/Row';
 import UserStatus from '../components/UserStatus';
-import { channel_on_game_update, channel_on_game_crashed, channel_on_game_user_leave, channel_on_user_connection_change, channel_leave_game, channel_game_move } from '../const/channel_names';
+import { channel_on_game_update, channel_on_game_crashed, channel_on_game_user_leave, channel_on_user_connection_change, channel_leave_game, channel_game_move, channel_listen_game_events, channel_unlisten_game_events } from '../const/channel_names';
 import { Context } from '../context/context';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import { ConnectionState } from '../models/ConnectionState';
@@ -61,7 +61,12 @@ const GamePage: FunctionComponent<{
 
     const [gameLoadingState, setLoadingStateGame] = useState<LoadingState<Game>>(LoadingState.Unset());
 
+
+    const checkIsSpectator = (game: Game) => userKey !== game.mancalaGame.player1Id && userKey !== game.mancalaGame.player2Id;
+
     const mancalaGame: MancalaGame | undefined = game?.mancalaGame;
+    const isSpectator = game ? checkIsSpectator(game) : undefined;
+    const isPlayer2 = !isSpectator && userKey === mancalaGame?.player2Id;
 
     const onGameUpdate = (pitAnimator: PitAnimator, newGame: Game) => {
         setGame(newGame);
@@ -100,13 +105,15 @@ const GamePage: FunctionComponent<{
         setGameUsersConnectionInfo(gameUsersConnectionInfo);
     };
 
-    const listenMessages = (pitAnimator: PitAnimator): () => void => {
+    const listenMessages = (game: Game, pitAnimator: PitAnimator): () => void => {
         const _onGameUpdate = (message: object) => onGameUpdateEvent(pitAnimator, message);
         context.rtmt.listenMessage(channel_on_game_update, _onGameUpdate);
         context.rtmt.listenMessage(channel_on_game_crashed, onGameCrashed);
         context.rtmt.listenMessage(channel_on_game_user_leave, onGameUserLeave);
-        context.rtmt.listenMessage(channel_on_user_connection_change, onUserConnectionChange)
+        context.rtmt.listenMessage(channel_on_user_connection_change, onUserConnectionChange);
+        checkIsSpectator(game) && userKey && context.rtmt.sendMessage(channel_listen_game_events, game.id);
         return () => {
+            checkIsSpectator(game) && userKey && context.rtmt.sendMessage(channel_unlisten_game_events, game.id);
             context.rtmt.unlistenMessage(channel_on_game_update, _onGameUpdate);
             context.rtmt.unlistenMessage(channel_on_game_crashed, onGameCrashed);
             context.rtmt.unlistenMessage(channel_on_game_user_leave, onGameUserLeave);
@@ -140,20 +147,28 @@ const GamePage: FunctionComponent<{
     };
 
     const onPitSelect = (index: number, pit: Pit) => {
+        if (!game || isSpectator || !userKey) {
+            return;
+        }
+        const pitIndexForUser = index % (game.mancalaGame.board.totalPitCount() / 2);
+        if (game.mancalaGame.getPlayerIdByIndex(index) !== userKey ||
+            !game.mancalaGame.canPlayerMove(userKey, pitIndexForUser)) {
+            return;
+        }
         if (checkHasAnOngoingAction()) {
             return;
         }
         setHasOngoingAction(true);
         if (!boardViewModel) return;
-        //TODO : stoneCount comes from view model!
+        //TODO: this check should be in mancala.js
         if (pit.stoneCount === 0) {
             //TODO : warn user
             return;
         }
-        boardViewModel.pits[getBoardIndex(index)].pitColor =
+        boardViewModel.pits[getBoardIndex(pitIndexForUser)].pitColor =
             context.themeManager.theme.pitSelectedColor;
         updateBoardViewModel(boardViewModel);
-        const gameMove: GameMove = { index: index };
+        const gameMove: GameMove = { index: pitIndexForUser };
         context.rtmt.sendMessage(channel_game_move, gameMove);
     };
 
@@ -166,7 +181,7 @@ const GamePage: FunctionComponent<{
                 pitAnimator = new PitAnimator(context, updateBoardViewModel);
                 setPitAnimator(pitAnimator);
                 onGameUpdate(pitAnimator, game);
-                unlistenMessages = listenMessages(pitAnimator);
+                unlistenMessages = listenMessages(game, pitAnimator);
                 setLoadingStateGame(LoadingState.Loaded({ value: game }))
             } else {
                 setLoadingStateGame(LoadingState.Error({ errorMessage: context.texts.GameNotFound }))
@@ -242,12 +257,12 @@ const GamePage: FunctionComponent<{
             </BoardToolbar>
             {showBoardView && (
                 <BoardView
-                    userKey={userKey}
                     game={game}
                     boardId={boardId}
                     boardViewModel={boardViewModel}
                     context={context}
-                    onPitSelect={onPitSelect} />
+                    onPitSelect={onPitSelect}
+                    revert={isPlayer2} />
             )}
             <Center>
                 <LoadingComponent context={context} loadingState={gameLoadingState}></LoadingComponent>

From 959544b2abfd4eeb8da10501afbc341dedba4a57 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:00:14 +0300
Subject: [PATCH 03/10] add event emitter

---
 package.json |  2 ++
 yarn.lock    | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 80ddca4..81ed6d8 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,10 @@
   "dependencies": {
     "@szhsin/react-menu": "^3.0.2",
     "@types/": "szhsin/react-menu",
+    "@types/eventemitter2": "^4.1.0",
     "@types/styled-jsx": "^3.4.4",
     "@types/uuid": "^8.3.4",
+    "eventemitter2": "^6.4.7",
     "mancala.js": "^0.0.2-beta.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/yarn.lock b/yarn.lock
index c13b937..bcb2a71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1087,6 +1087,13 @@
     prop-types "^15.7.2"
     react-transition-state "^1.1.4"
 
+"@types/eventemitter2@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@types/eventemitter2/-/eventemitter2-4.1.0.tgz#090b4a67f25aa0fc087c8f2403e46f5ccc3fdfbc"
+  integrity sha512-IyrCYFL+FakW3gVd/x2b0QIpcVrdgcNCkj985xoBVinc0rNwoV87IbBx7KlS5aP+bx7uIZxVypLCiSwmI4jZrg==
+  dependencies:
+    eventemitter2 "*"
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -1421,6 +1428,11 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+eventemitter2@*, eventemitter2@^6.4.7:
+  version "6.4.7"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
+  integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -1735,7 +1747,7 @@ prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-"react-dom@^16.0.0 || ^17.0.0 || ^18.0.0":
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -1778,7 +1790,7 @@ react-transition-state@^1.1.4:
   resolved "https://registry.yarnpkg.com/react-transition-state/-/react-transition-state-1.1.4.tgz#113224eaa27e0ff81661305e44d5e0348cdf61ac"
   integrity sha512-6nQLWWx95gYazCm6OdtD1zGbRiirvVXPrDtHAGsYb4xs9spMM7bA8Vx77KCpjL8PJ8qz1lXFGz2PTboCSvt7iw==
 
-"react@^16.0.0 || ^17.0.0 || ^18.0.0":
+react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==

From 1dd2f352f3dd962a3bdc2476c52e7fd92609c552 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:01:09 +0300
Subject: [PATCH 04/10] add event emitter to theme manager

---
 src/theme/ThemeManager.ts | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/theme/ThemeManager.ts b/src/theme/ThemeManager.ts
index 4260147..8aa28f6 100644
--- a/src/theme/ThemeManager.ts
+++ b/src/theme/ThemeManager.ts
@@ -2,15 +2,18 @@ import lightTheme from "./LightTheme";
 import greyTheme from "./GreyTheme";
 import { Theme } from "./Theme";
 import darkTheme from "./DarkTheme";
+import EventEmitter2, { Listener } from "eventemitter2";
 
 export const themes = [lightTheme, darkTheme, greyTheme];
 
 const THEME_ID = "theme_id";
 
-export default class ThemeManager {
-  _theme: Theme;
-  onThemeChange: (theme: Theme) => void;
+export type ThemeManagerEvents = "themechange";
+
+export default class ThemeManager extends EventEmitter2 {
+  private _theme: Theme;
   constructor() {
+    super();
     this._theme = this.readFromLocalStorage() || lightTheme;
   }
 
@@ -20,7 +23,7 @@ export default class ThemeManager {
 
   public set theme(value: Theme) {
     this._theme = value;
-    this.onThemeChange?.(value);
+    this.emit("themechange", value);
     this.writetToLocalStorage(value);
   }
 
@@ -28,7 +31,7 @@ export default class ThemeManager {
     localStorage.setItem(THEME_ID, value.id);
   }
 
-  private readFromLocalStorage(): Theme {
+  private readFromLocalStorage(): Theme | undefined {
     const themeID = localStorage.getItem(THEME_ID);
     const theme = themes.find((eachTheme: Theme) => themeID === eachTheme.id);
     return theme;
@@ -37,4 +40,11 @@ export default class ThemeManager {
   public get themes(): Theme[] {
     return themes;
   }
+
+  public on(event: ThemeManagerEvents, callback: (...value: any[]) => void): Listener | this {
+    return super.on(event, callback);
+  }
+  public off(event: ThemeManagerEvents, callback: (...value: any[]) => void): this {
+    return super.off(event, callback);
+  }
 }

From 0b251367e13f2bc83cca7f5f691f75876e943d5a Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:01:55 +0300
Subject: [PATCH 05/10] add event emitter to rtmt

---
 src/rtmt/rtmt.ts           |  16 ++++--
 src/rtmt/rtmt_websocket.ts | 114 +++++++++++++++++--------------------
 2 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/src/rtmt/rtmt.ts b/src/rtmt/rtmt.ts
index bc04659..4e5e010 100644
--- a/src/rtmt/rtmt.ts
+++ b/src/rtmt/rtmt.ts
@@ -1,8 +1,16 @@
+import EventEmitter2, { Listener } from "eventemitter2"
+
 export type Bytes = Uint8Array
 export type OnMessage = (message : Object) => any
 
-export interface RTMT{
-    sendMessage : (channel : string, message : Object) => any
-    listenMessage : (channel : string, callback : OnMessage) => any
-    unlistenMessage : (channel : string, callback : OnMessage) => any
+
+export type RtmtEventTypes = "open" | "close" | "connected" | "error" | "disconnected" | "message";
+
+export interface RTMT extends EventEmitter2 {
+    sendMessage: (channel: string, message: Object) => void;
+    addMessageListener(channel: string, callback: (message: any) => void);
+    removeMessageListener(channel: string, callback: (message: any) => void);
+    on(event: RtmtEventTypes, callback: (...value: any[]) => void): Listener | this;
+    off(event: RtmtEventTypes, callback: (...value: any[]) => void): this;
+    dispose();
 }
\ No newline at end of file
diff --git a/src/rtmt/rtmt_websocket.ts b/src/rtmt/rtmt_websocket.ts
index 180d3c2..a60d2e4 100644
--- a/src/rtmt/rtmt_websocket.ts
+++ b/src/rtmt/rtmt_websocket.ts
@@ -1,101 +1,93 @@
 import { decode, encode } from "./encode_decode_message";
-import { Bytes, OnMessage, RTMT } from "./rtmt";
 import { channel_ping, channel_pong } from "../const/channel_names";
 import { server } from "../const/config";
+import EventEmitter2, { Listener } from "eventemitter2";
+import { Bytes, RTMT, RtmtEventTypes } from "./rtmt";
 
 const PING_INTERVAL = 15000, PING_INTERVAL_BUFFER_TIME = 1000;
+const MESSAGE_CHANNEL_PREFIX = "message_channel";
 
-export class RTMTWS implements RTMT {
-  private messageChannels: Map<String, OnMessage | undefined>;
-  private ws: WebSocket;
-
+export class RTMTWS extends EventEmitter2 implements RTMT {
+  private webSocket: WebSocket;
   private pingTimeout?: number = undefined;
 
   constructor() {
-    this.messageChannels = new Map<String, OnMessage>();
+    super();
   }
 
-  initWebSocket(
-    userKey: string,
-    onopen: () => any,
-    onClose: () => any,
-    onError: (event: Event) => any
-  ) {
+  public initWebSocket(userKey: string) {
     const url = server.wsServerAdress + "?userKey=" + userKey;
-    const ws = new WebSocket(url);
-    ws.binaryType = "arraybuffer"; //for firefox
-    ws.onopen = () => {
-      console.info("(RTMT) ws has opened");
-      this.ws = ws;
+    const webSocket = new WebSocket(url);
+    webSocket.onopen = () => {
+      console.info("(RTMT) WebSocket has opened");
+      this.webSocket = webSocket;
       this.heartbeat();
-      onopen();
+      this.emit("open");
     };
-    ws.onclose = () => {
-      console.info("(RTMT) ws has closed");
-      //this.ws = undefined
+    webSocket.onclose = () => {
+      console.info("(RTMT) WebSocket has closed");
+      //this.WebSocket = undefined
       clearTimeout(this.pingTimeout);
-      onClose();
+      this.emit("close");
     };
-
-    ws.onmessage = (event: MessageEvent) => {
-      this.onWebSocketMessage(this, event);
+    webSocket.onmessage = (event: MessageEvent) => {
+      const { channel, message } = decode(event.data);
+      this.onMessage(channel, message);
     };
-
-    ws.addEventListener("error", (ev) => {
-      console.error({ ws_error: ev });
-      onError(ev);
-    });
+    webSocket.onerror = (error) => {
+      console.error(error);
+      this.emit("error", error);
+    }
   }
 
-  heartbeat() {
+  private heartbeat() {
     clearTimeout(this.pingTimeout);
-
     // Use `WebSocket#terminate()`, which immediately destroys the connection,
     // instead of `WebSocket#close()`, which waits for the close timer.
     // Delay should be equal to the interval at which your server
     // sends out pings plus a conservative assumption of the latency.
     this.pingTimeout = setTimeout(() => {
-      this.ws.close();
+      this.webSocket.close();
     }, PING_INTERVAL + PING_INTERVAL_BUFFER_TIME);
   }
 
-
-  sendMessage(channel: string, message: Object) {
-    if (this.ws === undefined) {
-      console.error("(RTMT) ws is undefined");
+  public sendMessage(channel: string, message: Object) {
+    if (this.webSocket === undefined) {
+      console.error("(RTMT) WebSocket is undefined");
       return;
     }
     const data = encode(channel, message);
-    this.ws.send(data);
+    this.webSocket.send(data);
   }
 
-  // todo: support multible listeners
-  listenMessage(channel: string, callback: OnMessage) {
-    this.messageChannels.set(channel, callback);
-  }
-
-  // todo: support multible listeners
-  unlistenMessage(channel : string, callback : OnMessage) {
-    this.messageChannels.set(channel, undefined);
-  }
-
-  onWebSocketMessage(rtmt: RTMTWS, event: MessageEvent) {
-    const { channel, message } = decode(event.data);
-    rtmt.onMessage(channel, message);
-  }
-
-  onMessage(channel: string, message: Bytes) {
-    if(channel === channel_ping) {
+  private onMessage(channel: string, message: Bytes) {
+    if (channel === channel_ping) {
       this.heartbeat();
       this.sendMessage(channel_pong, {});
       return;
     }
-    const callback = this.messageChannels.get(channel);
+    // TODO: Maybe we should warn if there is not any listener for channel
+    this.emit(MESSAGE_CHANNEL_PREFIX + channel, message);
+  }
 
-    if (callback) {
-      callback(message);
-    } else {
-      console.warn("(RTMT) Channel callback not found!" + channel);
-    }
+  public on(event: RtmtEventTypes, callback: (...value: any[]) => void): Listener | this {
+    return super.on(event, callback);
+  }
+
+  public off(event: RtmtEventTypes, callback: (...value: any[]) => void): this {
+    return super.off(event, callback);
+  }
+
+  public addMessageListener(channel: string, callback: (message: any) => void) {
+    super.on(MESSAGE_CHANNEL_PREFIX + channel, callback);
+  }
+
+  public removeMessageListener(channel: string, callback: (message: any) => void) {
+    super.off(MESSAGE_CHANNEL_PREFIX + channel, callback);
+  }
+
+  public dispose() {
+    this.webSocket.close();
+    this.removeAllListeners();
   }
 }

From 23d2edb23e5c2eaf7cd420320dd3128c5f44d1c6 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:02:34 +0300
Subject: [PATCH 06/10] add texts for spectator

---
 src/const/texts.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/const/texts.ts b/src/const/texts.ts
index ac2de91..cf8cfce 100644
--- a/src/const/texts.ts
+++ b/src/const/texts.ts
@@ -8,6 +8,7 @@ export type Texts = {
     GameEnded: string,
     GameCrashed: string,
     YouWon: string,
+    Won: string,
     YouLost: string,
     Connecting: string,
     Connected: string,
@@ -16,14 +17,16 @@ export type Texts = {
     ConnectingAgain: string,
     ServerError: string,
     SearchingOpponet: string,
-    OpponentLeavesTheGame: string,
+    OpponentLeftTheGame: string,
     YouLeftTheGame: string,
+    UserLeftTheGame: string,
     SearchingOpponent: string,
     PleaseWait : string,
     GameDraw : string,
     Anonymous: string,
     GameNotFound: string,
     Loading: string,
+    Playing: string,
 }
 
 export const EnUs: Texts = {
@@ -35,6 +38,7 @@ export const EnUs: Texts = {
     GameEnded: "Game Ended",
     GameCrashed: "Game Crashed",
     YouWon: "You Won",
+    Won: "Won",
     YouLost: "You Lost",
     Connecting: "Connecting",
     Connected: "Connected",
@@ -43,14 +47,16 @@ export const EnUs: Texts = {
     ConnectingAgain: "Connecting Again",
     ServerError: "Server Error",
     SearchingOpponet: "Searching Opponet",
-    OpponentLeavesTheGame: "Opponent Leaves The Game",
+    OpponentLeftTheGame: "Opponent Leaves The Game",
     YouLeftTheGame: "You Left The Game",
+    UserLeftTheGame: "Left The Game",
     SearchingOpponent: "Searching Opponent",
     PleaseWait : "Please Wait",
     GameDraw : "Draw",
     Anonymous: "Anonymous",
     GameNotFound: "Game Not Found",
     Loading: "Loading",
+    Playing: "Playing",
 }
 
 export const TrTr: Texts = {
@@ -62,6 +68,7 @@ export const TrTr: Texts = {
     GameEnded: "Oyun Bitti",
     GameCrashed: "Oyunda Hata Oluştu",
     YouWon: "Kazandın",
+    Won: "Kazandı",
     YouLost: "Kaybettin",
     Connecting: "Bağlanılıyor",
     Connected: "Bağlandı",
@@ -70,12 +77,14 @@ export const TrTr: Texts = {
     ConnectingAgain: "Tekrar Bağlanılıyor",
     ServerError: "Sunucu Hatası",
     SearchingOpponet: "Rakip Aranıyor",
-    OpponentLeavesTheGame: "Rakip Oyundan Ayrıldı",
+    OpponentLeftTheGame: "Rakip Oyundan Ayrıldı",
     YouLeftTheGame: "Sen Oyundan Ayrıldın",
+    UserLeftTheGame: "Oyundan Ayrıldı",
     SearchingOpponent: "Rakip Aranıyor",
     PleaseWait: "Lütfen Bekleyin",
     GameDraw : "Berabere",
     Anonymous: "Anonim",
     GameNotFound: "Oyun Bulunamadı",
     Loading: "Yükleniyor",
+    Playing: "Oynuyor",
 }
\ No newline at end of file

From 51d541b5e7c77f6a7b2c670397351616a8ec57db Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:03:17 +0300
Subject: [PATCH 07/10] update for event emitter rtmt

---
 src/routes/LobyPage.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/routes/LobyPage.tsx b/src/routes/LobyPage.tsx
index c20ae89..dcccaa9 100644
--- a/src/routes/LobyPage.tsx
+++ b/src/routes/LobyPage.tsx
@@ -23,18 +23,19 @@ const LobyPage: FunctionComponent<{
 
     let navigate = useNavigate();
 
-    useEffect(() => {
-        listenMessages();
-        context.rtmt.sendMessage("new_game", {});
-    }, []);
-
-    const listenMessages = () => {
-        context.rtmt.listenMessage(channel_on_game_start, (message: Object) => {
-            const newGame: CommonMancalaGame = message as CommonMancalaGame;
-            navigate(`/game/${newGame.id}`)
-        });
+    const onGameStart = (message: Object) => {
+        const newGame: CommonMancalaGame = message as CommonMancalaGame;
+        navigate(`/game/${newGame.id}`)
     }
 
+    useEffect(() => {
+        context.rtmt.addMessageListener(channel_on_game_start, onGameStart);
+        context.rtmt.sendMessage("new_game", {});
+        return () => {
+            context.rtmt.removeMessageListener(channel_on_game_start, onGameStart);
+        }
+    }, []);
+    
     const textColorOnAppBar = getColorByBrightness(
         context.themeManager.theme.appBarBgColor,
         context.themeManager.theme.textColor,

From 419ae7600aa63e0642d92db57def433c792c6ee7 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:03:37 +0300
Subject: [PATCH 08/10] update for event emitter

---
 src/MancalaApp.tsx | 39 ++++++++++++++++++---------------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/MancalaApp.tsx b/src/MancalaApp.tsx
index 79fdc6a..450acf0 100644
--- a/src/MancalaApp.tsx
+++ b/src/MancalaApp.tsx
@@ -29,35 +29,32 @@ const MancalaApp: FunctionComponent = () => {
         setConnetionState("connected");
     };
     const onConnectionLost = () => {
-        connectToServer("reconnecting");
+        setConnetionState("reconnecting");
+        connectToServer();
     };
     const onConnectionError = (event: Event) => {
         setConnetionState("error");
+        connectToServer();
     };
-    const connectToServer = async (connectionState: ConnectionState) => {
-        setConnetionState(connectionState);
+    const onThemeChange = (theme: Theme) => {
+        setTheme(theme)
+    }
+    const connectToServer = async () => {
         const userKey = await context.userKeyStore.getUserKey();
         setUserKey(userKey);
-        const rtmtws = context.rtmt as RTMTWS;
-        if (rtmtws) {
-            rtmtws.initWebSocket(
-                userKey,
-                onConnectionDone,
-                onConnectionLost,
-                onConnectionError
-            );
-        } else {
-            console.error("context.rtmt is not RTMTWS");
-        }
+        (context.rtmt as RTMTWS).initWebSocket(userKey);
     };
+
     React.useEffect(() => {
-        connectToServer("connecting");
-        context.themeManager.onThemeChange = (theme: Theme) => {
-            setTheme(theme);
-        }
+        context.rtmt.on("open", onConnectionDone);
+        context.rtmt.on("close", onConnectionLost);
+        context.rtmt.on("error", onConnectionError);
+        context.themeManager.on("themechange", onThemeChange);
+        setConnetionState("connecting");
+        connectToServer();
         return () => {
-            // todo: dispose rtmt.dispose
-            //context.rtmt.dispose();
+            context.rtmt.dispose();
+            context.themeManager.on("themechange", onThemeChange);
         };
     }, []);
 
@@ -77,7 +74,7 @@ const MancalaApp: FunctionComponent = () => {
         context.themeManager.theme.textColor,
         context.themeManager.theme.textLightColor
     );
-    if(!userKey) return <></>;
+    if (!userKey) return <></>;
     return (
         <>
             <BrowserRouter>

From c73333667db0830cdac358146310e4c6e07493e6 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 2 Sep 2022 00:04:21 +0300
Subject: [PATCH 09/10] feature: spectator

---
 src/components/InfoPanel.tsx |  91 +++++++++++---------
 src/routes/GamePage.tsx      | 157 ++++++++++++++++++++---------------
 2 files changed, 145 insertions(+), 103 deletions(-)

diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
index 850414b..5ccbafc 100644
--- a/src/components/InfoPanel.tsx
+++ b/src/components/InfoPanel.tsx
@@ -2,70 +2,83 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 import { Context } from "../context/context";
 import { Game } from "../models/Game";
+import { User } from "../models/User";
 import { getColorByBrightness } from "../util/ColorUtil";
 import CircularPanel from "./CircularPanel";
 
 function getInfoPanelTextByGameState(params: {
   context: Context;
   game?: Game;
-  crashMessage?: string;
-  userKey?: string;
-  userKeyWhoLeave?: string;
+  currentUser: User;
+  whitePlayer: User;
+  blackPlayer: User;
+  leftPlayer?: User;
+  isSpectator?: boolean;
 }): string | undefined {
   const {
     context,
     game,
-    crashMessage,
-    userKey,
-    userKeyWhoLeave,
+    currentUser,
+    whitePlayer,
+    blackPlayer,
+    leftPlayer,
+    isSpectator
   } = params;
-  if (crashMessage) {
-    return context.texts.GameCrashed + " " + crashMessage;
-  } else if (userKeyWhoLeave) {
-    let message = context.texts.OpponentLeavesTheGame;
-    if (userKeyWhoLeave == userKey) {
-      message = context.texts.YouLeftTheGame;
-    }
-    return message;
-  } else if (game?.mancalaGame.state == "ended") {
-    const wonPlayer = game.mancalaGame.getWonPlayerId();
-    let whoWon =
-      game.mancalaGame.getWonPlayerId() === userKey
-        ? context.texts.YouWon
-        : context.texts.YouLost;
-    if (!wonPlayer) {
+
+  if (leftPlayer) {
+    return isSpectator ? `${leftPlayer.name} ${context.texts.UserLeftTheGame}` :
+      leftPlayer.id == currentUser.id ? context.texts.YouLeftTheGame : context.texts.OpponentLeftTheGame;
+  }
+
+  const isGameEnded = game?.mancalaGame.state == "ended";
+  if (isGameEnded) {
+    const wonPlayerID = game.mancalaGame.getWonPlayerId();
+    const wonPlayer = wonPlayerID == whitePlayer.id ? whitePlayer : blackPlayer;
+    let whoWon;
+    if (wonPlayer) {
+      whoWon = isSpectator ? `${wonPlayer.name} ${context.texts.Won}` :
+        game.mancalaGame.getWonPlayerId() === currentUser.id
+          ? context.texts.YouWon
+          : context.texts.YouLost;
+    } else {
       whoWon = context.texts.GameDraw;
     }
     return context.texts.GameEnded + " " + whoWon;
-  } else {
-    if (game) {
-      return userKey ? game.mancalaGame.checkIsPlayerTurn(userKey)
-        ? context.texts.YourTurn
-        : context.texts.OpponentTurn : undefined;
-    }
   }
+
+  if (game) {
+    const playingPlayer = game.mancalaGame.checkIsPlayerTurn(whitePlayer.id) ? whitePlayer : blackPlayer;
+    return isSpectator ? `${playingPlayer.name} ${context.texts.Playing}` : game.mancalaGame.checkIsPlayerTurn(currentUser.id)
+      ? context.texts.YourTurn
+      : context.texts.OpponentTurn;
+  }
+
   return undefined;
 }
 
 const InfoPanel: FunctionComponent<{
   context: Context;
   game?: Game;
-  crashMessage?: string;
-  userKey?: string;
-  userKeyWhoLeave?: string;
+  currentUser: User;
+  whitePlayer: User;
+  blackPlayer: User;
+  leftPlayer?: User;
   style?: React.CSSProperties;
   visible?: boolean;
+  isSpectator?: boolean;
 }> = ({
   context,
   game,
-  crashMessage,
-  userKey,
-  userKeyWhoLeave,
+  currentUser,
+  whitePlayer,
+  blackPlayer,
+  leftPlayer,
   style,
-  visible
+  visible,
+  isSpectator
 }) => {
     if (visible === false) return <></>;
-    const isUserTurn = userKey ? game?.mancalaGame.checkIsPlayerTurn(userKey) : false;
+    const isUserTurn = currentUser.id ? game?.mancalaGame.checkIsPlayerTurn(currentUser.id) : false;
     const containerColor = isUserTurn
       ? context.themeManager.theme.playerTurnColor
       : context.themeManager.theme.boardColor;
@@ -77,9 +90,11 @@ const InfoPanel: FunctionComponent<{
     const text = getInfoPanelTextByGameState({
       context,
       game,
-      crashMessage,
-      userKey,
-      userKeyWhoLeave
+      currentUser,
+      whitePlayer,
+      blackPlayer,
+      leftPlayer,
+      isSpectator
     });
     if (text) {
       return (
diff --git a/src/routes/GamePage.tsx b/src/routes/GamePage.tsx
index dd0c823..6ec6e64 100644
--- a/src/routes/GamePage.tsx
+++ b/src/routes/GamePage.tsx
@@ -39,8 +39,6 @@ const GamePage: FunctionComponent<{
 
     const [game, setGame] = useState<Game | undefined>(undefined);
 
-    const [crashMessage, setCrashMessage] = useState<string | undefined>(undefined);
-
     const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string | undefined>(undefined);
 
     const [boardViewModel, setBoardViewModel] = useState<BoardViewModel | undefined>(undefined);
@@ -93,7 +91,6 @@ const GamePage: FunctionComponent<{
         const newCrashMessage = message as string;
         console.error("on_game_crash");
         console.error(newCrashMessage);
-        setCrashMessage(newCrashMessage);
     }
     const onGameUserLeave = (message: any) => {
         const userKeyWhoLeave = message;
@@ -107,17 +104,17 @@ const GamePage: FunctionComponent<{
 
     const listenMessages = (game: Game, pitAnimator: PitAnimator): () => void => {
         const _onGameUpdate = (message: object) => onGameUpdateEvent(pitAnimator, message);
-        context.rtmt.listenMessage(channel_on_game_update, _onGameUpdate);
-        context.rtmt.listenMessage(channel_on_game_crashed, onGameCrashed);
-        context.rtmt.listenMessage(channel_on_game_user_leave, onGameUserLeave);
-        context.rtmt.listenMessage(channel_on_user_connection_change, onUserConnectionChange);
+        context.rtmt.addMessageListener(channel_on_game_update, _onGameUpdate);
+        context.rtmt.addMessageListener(channel_on_game_crashed, onGameCrashed);
+        context.rtmt.addMessageListener(channel_on_game_user_leave, onGameUserLeave);
+        context.rtmt.addMessageListener(channel_on_user_connection_change, onUserConnectionChange);
         checkIsSpectator(game) && userKey && context.rtmt.sendMessage(channel_listen_game_events, game.id);
         return () => {
             checkIsSpectator(game) && userKey && context.rtmt.sendMessage(channel_unlisten_game_events, game.id);
-            context.rtmt.unlistenMessage(channel_on_game_update, _onGameUpdate);
-            context.rtmt.unlistenMessage(channel_on_game_crashed, onGameCrashed);
-            context.rtmt.unlistenMessage(channel_on_game_user_leave, onGameUserLeave);
-            context.rtmt.unlistenMessage(channel_on_user_connection_change, onUserConnectionChange);
+            context.rtmt.removeMessageListener(channel_on_game_update, _onGameUpdate);
+            context.rtmt.removeMessageListener(channel_on_game_crashed, onGameCrashed);
+            context.rtmt.removeMessageListener(channel_on_game_user_leave, onGameUserLeave);
+            context.rtmt.removeMessageListener(channel_on_user_connection_change, onUserConnectionChange);
         }
     };
 
@@ -198,63 +195,36 @@ const GamePage: FunctionComponent<{
         context.themeManager.theme.textColor,
         context.themeManager.theme.textLightColor
     );
-    const renderNewGameBtn = userKeyWhoLeave || !game || (game && game.mancalaGame.state == "ended");
-    const showBoardView = game && boardViewModel && userKey && true;
-    const opponentId = getOpponentId();
-    const opponentUser = { id: getOpponentId() || "0", name: "Anonymous", isOnline: opponentId ? isUserOnline(opponentId) : false, isAnonymous: true };
-    const user = { id: userKey || "1", name: "Anonymous", isOnline: connectionState === "connected", isAnonymous: true };
-
     const isMobile = width < 600;
 
+    const renderNewGameBtn = isSpectator || (userKeyWhoLeave || !game || (game && game.mancalaGame.state == "ended"));
+    const showBoardView = game && boardViewModel && userKey && true;
+    const topLocatedUserId = (isSpectator ? mancalaGame?.player2Id : getOpponentId()) || "0";
+    const bottomLocatedUserId = (isSpectator ? mancalaGame?.player1Id : userKey) || "1";
+    const topLocatedUser = {
+        id: topLocatedUserId,
+        name: "Anonymous",
+        isOnline: isUserOnline(topLocatedUserId),
+        isAnonymous: true
+    };
+    const bottomLocatedUser = {
+        id: bottomLocatedUserId,
+        name: "Anonymous",
+        isOnline: isSpectator ? isUserOnline(bottomLocatedUserId) : connectionState === "connected",
+        isAnonymous: true
+    };
+    const currentUser = isSpectator ? {
+        id: "2",
+        name: "Anonymous",
+        isOnline: connectionState === "connected",
+        isAnonymous: true
+    } : bottomLocatedUser;
+    const leftPlayer = userKeyWhoLeave ? (userKeyWhoLeave === topLocatedUser.id ? topLocatedUser : bottomLocatedUser) : undefined;
     return (
         <PageContainer theme={theme!}>
-            <HeaderBar color={theme?.appBarBgColor}>
-                <Row>
-                    <Link style={{ textDecoration: 'none' }} to={"/"}>
-                        <HeaderbarIcon />
-                    </Link>
-                    <Link style={{ textDecoration: 'none' }} to={"/"}>
-                        <HeaderbarTitle title={context.texts.Mancala} color={textColorOnAppBar} />
-                    </Link>
-                </Row>
-                <Row>
-                    <ThemeSwitchMenu context={context} textColor={textColorOnAppBar} />
-                    <Button
-                        context={context}
-                        color={context.themeManager.theme.pitColor}
-                        text={renderNewGameBtn ? context.texts.NewGame : context.texts.Leave}
-                        onClick={renderNewGameBtn ? onNewGameClick : onLeaveGameClick} />
-                </Row>
-            </HeaderBar>
-            <BoardToolbar style={{ justifyContent: "center" }} visible={showBoardView && isMobile || false}>
-                <InfoPanel
-                    style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}
-                    context={context}
-                    game={game}
-                    crashMessage={crashMessage}
-                    userKey={userKey}
-                    userKeyWhoLeave={userKeyWhoLeave} />
-            </BoardToolbar>
-            <BoardToolbar style={{ alignItems: "flex-end" }} visible={showBoardView || false}>
-                <UserStatus style={{
-                    marginBottom: "0.5rem", marginLeft: "6%", maxWidth: isMobile ? "40vw" : "30vw",
-                    width: isMobile ? "40vw" : "30vw"
-                }} context={context} layoutMode="left" user={opponentUser} visible={showBoardView || false} />
-                <InfoPanel
-                    style={{
-                        marginTop: "0.5rem", marginBottom: "0.5rem",
-                    }}
-                    context={context}
-                    game={game}
-                    crashMessage={crashMessage}
-                    userKey={userKey}
-                    userKeyWhoLeave={userKeyWhoLeave}
-                    visible={!isMobile} />
-                <UserStatus style={{
-                    marginBottom: "0.5rem", marginRight: "6%", maxWidth: isMobile ? "40vw" : "30vw",
-                    width: isMobile ? "40vw" : "30vw"
-                }} context={context} layoutMode="right" user={user} visible={showBoardView || false} />
-            </BoardToolbar>
+            {renderHeaderBar()}
+            {renderMobileBoardToolbar()}
+            {buildBoardTopToolbar()}
             {showBoardView && (
                 <BoardView
                     game={game}
@@ -269,6 +239,63 @@ const GamePage: FunctionComponent<{
             </Center>
         </PageContainer>
     );
+
+    function renderHeaderBar() {
+        return <HeaderBar color={theme?.appBarBgColor}>
+            <Row>
+                <Link style={{ textDecoration: 'none' }} to={"/"}>
+                    <HeaderbarIcon />
+                </Link>
+                <Link style={{ textDecoration: 'none' }} to={"/"}>
+                    <HeaderbarTitle title={context.texts.Mancala} color={textColorOnAppBar} />
+                </Link>
+            </Row>
+            <Row>
+                <ThemeSwitchMenu context={context} textColor={textColorOnAppBar} />
+                <Button
+                    context={context}
+                    color={context.themeManager.theme.pitColor}
+                    text={renderNewGameBtn ? context.texts.NewGame : context.texts.Leave}
+                    onClick={renderNewGameBtn ? onNewGameClick : onLeaveGameClick} />
+            </Row>
+        </HeaderBar>;
+    }
+
+    function renderMobileBoardToolbar() {
+        return <BoardToolbar style={{ justifyContent: "center" }} visible={showBoardView && isMobile || false}>
+            {buildInfoPanel()}
+        </BoardToolbar>;
+    }
+
+    function buildBoardTopToolbar() {
+        return <BoardToolbar style={{ alignItems: "flex-end" }} visible={showBoardView || false}>
+            <UserStatus style={{
+                marginBottom: "0.5rem", marginLeft: "6%", maxWidth: isMobile ? "40vw" : "30vw",
+                width: isMobile ? "40vw" : "30vw"
+            }} context={context} layoutMode="left" user={topLocatedUser} visible={showBoardView || false} />
+            {buildInfoPanel()}
+            <UserStatus style={{
+                marginBottom: "0.5rem", marginRight: "6%", maxWidth: isMobile ? "40vw" : "30vw",
+                width: isMobile ? "40vw" : "30vw"
+            }} context={context} layoutMode="right" user={bottomLocatedUser} visible={showBoardView || false} />
+        </BoardToolbar>;
+    }
+
+    function buildInfoPanel() {
+        return (
+            <InfoPanel
+                style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}
+                context={context}
+                game={game}
+                currentUser={currentUser}
+                whitePlayer={topLocatedUser}
+                blackPlayer={bottomLocatedUser}
+                leftPlayer={leftPlayer}
+                visible={!isMobile}
+                isSpectator={isSpectator} />
+        );
+    }
 }
 
-export default GamePage;
\ No newline at end of file
+export default GamePage;
+

From 76677bdbb76d3169214a0ad26b287dfccba78621 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Sat, 3 Sep 2022 19:04:28 +0300
Subject: [PATCH 10/10] review

---
 src/MancalaApp.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/MancalaApp.tsx b/src/MancalaApp.tsx
index 450acf0..ba62f58 100644
--- a/src/MancalaApp.tsx
+++ b/src/MancalaApp.tsx
@@ -54,7 +54,7 @@ const MancalaApp: FunctionComponent = () => {
         connectToServer();
         return () => {
             context.rtmt.dispose();
-            context.themeManager.on("themechange", onThemeChange);
+            context.themeManager.off("themechange", onThemeChange);
         };
     }, []);