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

@@ -16,6 +16,8 @@ export type Texts = {
     ConnectingAgain: string,
     ServerError: string,
     SearchingOpponet: string,
+    OpponentLeavesTheGame: string,
+    YouLeftTheGame: string,
 }
 
 export const EnUs: Texts = {
@@ -35,6 +37,8 @@ export const EnUs : Texts = {
     ConnectingAgain: "Connecting Again",
     ServerError: "Server Error",
     SearchingOpponet: "Searching Opponet",
+    OpponentLeavesTheGame: "Opponent Leaves The Game",
+    YouLeftTheGame: "You Left The Game"
 }
 
 export const TrTr: Texts = {
@@ -54,4 +58,6 @@ export const TrTr : Texts = {
     ConnectingAgain: "Tekrar Bağlanılıyor",
     ServerError: "Sunucu Hatası",
     SearchingOpponet: "Rakip Aranıyor",
+    OpponentLeavesTheGame: "Rakip Oyundan Ayrıldı",
+    YouLeftTheGame: "Sen Oyundan Ayrıldın"
 }