added Searching Opponent message

src/Home.tsx

@@ -28,6 +28,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   const [connectionState, setConnetionState] = useState<ConnectionState>("connecting")
 
+  const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false)
+
   const [game, setGame] = useState<Game>(undefined)
 
   const [crashMessage, setCrashMessage] = useState<string>(undefined)
@@ -78,6 +80,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       const newGame: Game = JSON.parse(decodeText(message))
       console.log("on_game_start");
       console.log(newGame);
+      setSearchingOpponent(false)
       setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
     })
 
@@ -109,6 +112,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   const newGameClick = () => {
     resetGameState()
+    setSearchingOpponent(true)
     context.rtmt.sendMessage("new_game", new Uint8Array())
   }
 
@@ -182,17 +186,18 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       <h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
       <div>
         {renderNewGameButton()}
-        {game && !userKeyWhoLeave && < Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
+        {game && !userKeyWhoLeave && !crashMessage && < Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
       </div>
 
     </div>
-    <InfoPanel game={game} crashMessage={crashMessage} userKey={userKey} userKeyWhoLeave={userKeyWhoLeave} />
+    <InfoPanel
+      game={game}
+      crashMessage={crashMessage}
+      userKey={userKey}
+      userKeyWhoLeave={userKeyWhoLeave}
+      searchingOpponent={searchingOpponent} />
     {game && <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />}
   </div >
 }
 
-export default Home
+export default Home
-
-function channel_game_user_leave(channel_game_user_leave: any, arg1: (message: Uint8Array) => void) {
-  throw new Error('Function not implemented.');
-}

src/components/InfoPanel.tsx

@@ -3,46 +3,59 @@ import { FunctionComponent } from "react"
 import { context } from '../context';
 import { Game } from '../mancala';
 
-const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string, userKeyWhoLeave: string }> = ({
+const InfoPanel: FunctionComponent<{
-    game, crashMessage, userKey, userKeyWhoLeave }) => {
+    game: Game,
-
+    crashMessage: string,
-    if (crashMessage) {
+    userKey: string,
-        return (
+    userKeyWhoLeave: string,
-            <h4>{
+    searchingOpponent: boolean
-                context.texts.GameCrashed + " " + crashMessage
+}> = ({
-            }</h4>
+    game, crashMessage, userKey, userKeyWhoLeave, searchingOpponent }) => {
-        )
+        if (searchingOpponent) {
-    }
-
-    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
             return (
                 <h4>{
-                    context.texts.GameEnded + " " + whoWon
+                    context.texts.SearchingOpponent + " " + context.texts.PleaseWait
                 }</h4>
             )
-        } else {
+        }
+
+        if (crashMessage) {
             return (
-                <h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
+                <h4>{
+                    context.texts.GameCrashed + " " + crashMessage
+                }</h4>
             )
         }
+
+        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
+                return (
+                    <h4>{
+                        context.texts.GameEnded + " " + whoWon
+                    }</h4>
+                )
+            } else {
+                return (
+                    <h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
+                )
+            }
+        }
+
+        return <h4></h4>
     }
 
-    return <h4></h4>
-}
-
 export default InfoPanel

src/const/texts.ts

@@ -18,6 +18,8 @@ export type Texts = {
     SearchingOpponet: string,
     OpponentLeavesTheGame: string,
     YouLeftTheGame: string,
+    SearchingOpponent: string,
+    PleaseWait : string
 }
 
 export const EnUs: Texts = {
@@ -38,7 +40,9 @@ export const EnUs: Texts = {
     ServerError: "Server Error",
     SearchingOpponet: "Searching Opponet",
     OpponentLeavesTheGame: "Opponent Leaves The Game",
-    YouLeftTheGame: "You Left The Game"
+    YouLeftTheGame: "You Left The Game",
+    SearchingOpponent: "Searching Opponent",
+    PleaseWait : "Please Wait"
 }
 
 export const TrTr: Texts = {
@@ -59,5 +63,7 @@ export const TrTr: Texts = {
     ServerError: "Sunucu Hatası",
     SearchingOpponet: "Rakip Aranıyor",
     OpponentLeavesTheGame: "Rakip Oyundan Ayrıldı",
-    YouLeftTheGame: "Sen Oyundan Ayrıldın"
+    YouLeftTheGame: "Sen Oyundan Ayrıldın",
+    SearchingOpponent: "Rakip Aranıyor",
+    PleaseWait: "Lütfen Bekleyin"
 }