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
-
-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,8 +3,21 @@ import { FunctionComponent } from "react"
 import { context } from '../context';
 import { Game } from '../mancala';
 
-const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string, userKeyWhoLeave: string }> = ({
-    game, crashMessage, userKey, userKeyWhoLeave }) => {
+const InfoPanel: FunctionComponent<{
+    game: Game,
+    crashMessage: string,
+    userKey: string,
+    userKeyWhoLeave: string,
+    searchingOpponent: boolean
+}> = ({
+    game, crashMessage, userKey, userKeyWhoLeave, searchingOpponent }) => {
+        if (searchingOpponent) {
+            return (
+                <h4>{
+                    context.texts.SearchingOpponent + " " + context.texts.PleaseWait
+                }</h4>
+            )
+        }
 
         if (crashMessage) {
             return (
@@ -43,6 +56,6 @@ const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey:
         }
 
         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"
 }