now printing message when user leaves the game

src/Home.tsx

@@ -7,7 +7,7 @@ import { Game } from './mancala';
 import { decodeText, encodeText } from './rtmt/byte_util';
 import { Bytes } from './rtmt/rtmt';
 import { RTMTWS } from './rtmt/rtmt_websocket';
-import { channel_game_move, channel_leave_game, channel_on_game_update } from './channel_names';
+import { channel_game_move, channel_leave_game, channel_on_game_update, channel_on_game_user_leave } from './channel_names';
 import Button from './components/Button';
 import InfoPanel from './components/InfoPanel';
 
@@ -26,12 +26,14 @@ type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"
 const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   const [userKey, setUserKey] = useState(undefined);
 
-  const [game, setGame] = useState<Game>(undefined)
-
   const [connectionState, setConnetionState] = useState<ConnectionState>("connecting")
 
+  const [game, setGame] = useState<Game>(undefined)
+
   const [crashMessage, setCrashMessage] = useState<string>(undefined)
 
+  const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string>(undefined)
+
   const onConnectionDone = () => {
     setConnetionState("connected")
   }
@@ -85,6 +87,13 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       console.log(newCrashMessage);
       setCrashMessage(newCrashMessage)
     })
+
+    context.rtmt.listenMessage(channel_on_game_user_leave, (message) => {
+      const userKeyWhoLeave = decodeText(message)
+      console.log("on_game_user_leave");
+      console.log(channel_on_game_user_leave);
+      setUserKeyWhoLeave(userKeyWhoLeave)
+    })
   }
 
   React.useEffect(() => {
@@ -92,7 +101,14 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     connectToServer("connecting")
   }, [])
 
+  const resetGameState = () => {
+    setGame(undefined)
+    setCrashMessage(undefined)
+    setUserKeyWhoLeave(undefined)
+  }
+
   const newGameClick = () => {
+    resetGameState()
     context.rtmt.sendMessage("new_game", new Uint8Array())
   }
 
@@ -120,6 +136,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   const renderNewGameButton = () => {
     const newGame = <Button text={context.texts.NewGame} color="white" onClick={newGameClick} />
+    if (userKeyWhoLeave) {
+      return newGame
+    }
     if (crashMessage) {
       return newGame
     }
@@ -163,13 +182,17 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       <h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
       <div>
         {renderNewGameButton()}
-        {game && <Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
+        {game && !userKeyWhoLeave && < Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
       </div>
 
     </div>
-    <InfoPanel game={game} crashMessage={crashMessage} userKey={userKey} />
+    <InfoPanel game={game} crashMessage={crashMessage} userKey={userKey} userKeyWhoLeave={userKeyWhoLeave} />
     {game && <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />}
   </div >
 }
 
 export default Home
+
+function channel_game_user_leave(channel_game_user_leave: any, arg1: (message: Uint8Array) => void) {
+  throw new Error('Function not implemented.');
+}

src/channel_names.ts

@@ -4,3 +4,5 @@ export const channel_game_move = "game_move"
 export const channel_on_game_update = "on_game_update"
 export const channel_leave_game = "leave_game"
 export const channel_on_game_end = "on_game_end"
+export const channel_on_game_crashed = "on_game_crashed"
+export const channel_on_game_user_leave = "on_game_user_leave"

src/components/InfoPanel.tsx

@@ -3,7 +3,9 @@ import { FunctionComponent } from "react"
 import { context } from '../context';
 import { Game } from '../mancala';
 
-const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string }> = ({ game, crashMessage, userKey }) => {
+const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string, userKeyWhoLeave: string }> = ({
+    game, crashMessage, userKey, userKeyWhoLeave }) => {
+
     if (crashMessage) {
         return (
             <h4>{
@@ -12,6 +14,19 @@ const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey:
         )
     }
 
+    if (userKeyWhoLeave) {
+        let message = context.texts.OpponentLeavesTheGame
+
+        if (userKeyWhoLeave == userKey) {
+            message = context.texts.YouLeftTheGame
+        }
+        return (
+            <h4>
+                {message}
+            </h4>
+        )
+    }
+
     if (game) {
         if (game.state == "ended") {
             const whoWon = game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost

src/const/texts.ts

@@ -1,57 +1,63 @@
 
 export type Texts = {
-    Mancala : string,
+    Mancala: string,
-    Leave : string,
+    Leave: string,
-    NewGame : string,
+    NewGame: string,
-    YourTurn : string,
+    YourTurn: string,
-    OpponentTurn : string,
+    OpponentTurn: string,
-    GameEnded : string,
+    GameEnded: string,
-    GameCrashed : string,
+    GameCrashed: string,
-    YouWon : string,
+    YouWon: string,
-    YouLost : string,
+    YouLost: string,
-    Connecting : string,
+    Connecting: string,
-    Connected : string,
+    Connected: string,
-    CannotConnect : string,
+    CannotConnect: string,
-    ConnectionLost : string,
+    ConnectionLost: string,
-    ConnectingAgain : string,
+    ConnectingAgain: string,
-    ServerError : string,
+    ServerError: string,
-    SearchingOpponet : string,
+    SearchingOpponet: string,
+    OpponentLeavesTheGame: string,
+    YouLeftTheGame: string,
 }
 
-export const EnUs : Texts = {
+export const EnUs: Texts = {
-    Mancala : "Mancala",
+    Mancala: "Mancala",
-    Leave : "Leave The Game",
+    Leave: "Leave The Game",
-    NewGame : "New Game",
+    NewGame: "New Game",
-    YourTurn : "Your Turn",
+    YourTurn: "Your Turn",
-    OpponentTurn : "Opponent Turn",
+    OpponentTurn: "Opponent Turn",
-    GameEnded : "Game Ended",
+    GameEnded: "Game Ended",
-    GameCrashed : "Game Crashed",
+    GameCrashed: "Game Crashed",
-    YouWon : "You Won",
+    YouWon: "You Won",
-    YouLost : "You Lost",
+    YouLost: "You Lost",
-    Connecting : "Connecting",
+    Connecting: "Connecting",
-    Connected : "Connected",
+    Connected: "Connected",
-    CannotConnect : "Can't Connect",
+    CannotConnect: "Can't Connect",
-    ConnectionLost : "Connection Lost",
+    ConnectionLost: "Connection Lost",
-    ConnectingAgain : "Connecting Again",
+    ConnectingAgain: "Connecting Again",
-    ServerError : "Server Error",
+    ServerError: "Server Error",
-    SearchingOpponet : "Searching Opponet",
+    SearchingOpponet: "Searching Opponet",
+    OpponentLeavesTheGame: "Opponent Leaves The Game",
+    YouLeftTheGame: "You Left The Game"
 }
 
-export const TrTr : Texts = {
+export const TrTr: Texts = {
-    Mancala : "Köçürme",
+    Mancala: "Köçürme",
-    Leave : "Oyundan Ayrıl",
+    Leave: "Oyundan Ayrıl",
-    NewGame : "Yeni Oyun",
+    NewGame: "Yeni Oyun",
-    YourTurn : "Sıra Sende",
+    YourTurn: "Sıra Sende",
-    OpponentTurn : "Sıra Rakipte",
+    OpponentTurn: "Sıra Rakipte",
-    GameEnded : "Oyun Bitti",
+    GameEnded: "Oyun Bitti",
-    GameCrashed : "Oyunda Hata Oluştu",
+    GameCrashed: "Oyunda Hata Oluştu",
-    YouWon : "Kazandın",
+    YouWon: "Kazandın",
-    YouLost : "Kaybettin",
+    YouLost: "Kaybettin",
-    Connecting : "Bağlanılıyor",
+    Connecting: "Bağlanılıyor",
-    Connected : "Bağlandı",
+    Connected: "Bağlandı",
-    CannotConnect : "Bağlanılamadı",
+    CannotConnect: "Bağlanılamadı",
-    ConnectionLost : "Bağlantı Koptu",
+    ConnectionLost: "Bağlantı Koptu",
-    ConnectingAgain : "Tekrar Bağlanılıyor",
+    ConnectingAgain: "Tekrar Bağlanılıyor",
-    ServerError : "Sunucu Hatası",
+    ServerError: "Sunucu Hatası",
-    SearchingOpponet : "Rakip Aranıyor",
+    SearchingOpponet: "Rakip Aranıyor",
+    OpponentLeavesTheGame: "Rakip Oyundan Ayrıldı",
+    YouLeftTheGame: "Sen Oyundan Ayrıldın"
 }