added tr trasnlation and reconnecting

src/Home.tsx

@@ -8,6 +8,7 @@ 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 Button from './components/Button';
 
 const testBoard = (): Board => {
   const board = new Board(
@@ -19,46 +20,55 @@ const testBoard = (): Board => {
 
 const testGame = new Game("0", "1", testBoard(), "player2", "playing")
 
+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<"connecting" | "error" | "connected">("connecting")
+  const [connectionState, setConnetionState] = useState<ConnectionState>("connecting")
-
-  React.useEffect(() => {
-
-    context.userKeyStore.getUserKey((userKey: string) => {
-      setUserKey(userKey)
-      const rtmtws = context.rtmt as RTMTWS
-      if (rtmtws) {
-        rtmtws.initWebSocket(userKey, onConnectionDone)
-      } else {
-        console.log("context.rtmt is not RTMTWS");
-      }
-    })
-
-    context.rtmt.listenMessage(channel_on_game_update, (message: Bytes) => {
-      const newGame: Game = JSON.parse(decodeText(message))
-      console.log("on game update");
-      console.log(newGame);
-      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
-    })
-
-    context.rtmt.listenMessage(channel_on_game_update, (message: Bytes) => {
-      const newGame: Game = JSON.parse(decodeText(message))
-      console.log("on game update");
-      console.log(newGame);
-      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
-    })
-  }, [])
 
   const onConnectionDone = () => {
     setConnetionState("connected")
   }
 
-  const newGameClick = () => {
+  const onConnectionLost = () => {
-    context.rtmt.sendMessage("new_game", new Uint8Array())
+    connectToServer("reconnecting")
+  }
+
+  const onConnectionError = (event: Event) => {
+    setConnetionState("error")
+  }
+
+  const connectToServer = (connectionState: ConnectionState) => {
+    setConnetionState(connectionState)
+    context.userKeyStore.getUserKey((userKey: string) => {
+      setUserKey(userKey)
+      const rtmtws = context.rtmt as RTMTWS
+      if (rtmtws) {
+        rtmtws.initWebSocket(userKey, onConnectionDone, onConnectionLost, onConnectionError)
+      } else {
+        console.log("context.rtmt is not RTMTWS");
+      }
+    })
+  }
+
+  const listenMessages = () => {
+    context.rtmt.listenMessage(channel_on_game_update, (message: Bytes) => {
+      const newGame: Game = JSON.parse(decodeText(message))
+      console.log("on game update");
+      console.log(newGame);
+      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
+    })
+
+    context.rtmt.listenMessage(channel_on_game_update, (message: Bytes) => {
+      const newGame: Game = JSON.parse(decodeText(message))
+      console.log("on game update");
+      console.log(newGame);
+      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
+    })
+
     context.rtmt.listenMessage("on_game_start", (message) => {
       const newGame: Game = JSON.parse(decodeText(message))
       console.log("on_game_start");
@@ -67,6 +77,15 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     })
   }
 
+  React.useEffect(() => {
+    listenMessages()
+    connectToServer("connecting")
+  }, [])
+
+  const newGameClick = () => {
+    context.rtmt.sendMessage("new_game", new Uint8Array())
+  }
+
   const leaveGame = () => {
     context.rtmt.sendMessage(channel_leave_game, new Uint8Array())
   }
@@ -76,6 +95,19 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     context.rtmt.sendMessage(channel_game_move, encodeText(JSON.stringify(gameMove)))
   }
 
+  const showConnectionState = connectionState != "connected"
+
+  const connectionStateText = () => {
+    let map: { [key: string]: string } = {
+      "connecting": context.texts.Connecting,
+      "connected": context.texts.Connected,
+      "error": context.texts.CannotConnect,
+      "reconnecting": context.texts.ConnectingAgain
+    };
+
+    return map[connectionState]
+  }
+
   return <div style={{
     display: "flex",
     flexDirection: "column",
@@ -83,6 +115,19 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     background: "#EEEEEE",
     flex: "1",
   }}>
+    {
+      showConnectionState && <div style={{
+        position: "absolute",
+        bottom: "0px",
+        left: "0px",
+        padding: "15px 15px 5px 5px",
+        borderTopRightRadius: "1vw",
+        minWidth: "10vw",
+        minHeight: "1vw",
+        background: "grey"
+      }}>
+        {connectionStateText()}
+      </div>}
     <div style={{
       padding: "0px 50px",
       background: "rgb(228, 228, 228)",
@@ -92,21 +137,25 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       justifyContent: "space-between",
       alignSelf: "stretch"
     }}>
-      <h1>Mancala</h1>
+      <h1
+        style={{
+          margin: "10px 0px",
+        }}
+      >{context.texts.Mancala}</h1>
       {
         game && (
           <div>
-            {game.state == "ended" && <button onClick={newGameClick}>New Game</button>}
+            {game.state == "ended" && <button onClick={newGameClick}>{context.texts.NewGame}</button>}
-            <button onClick={leaveGame}>Leave</button>
+            <Button color="white" text={context.texts.Leave} onClick={leaveGame} />
           </div>)
       }
-      {!game && <button onClick={newGameClick}>New Game</button>}
+      {!game && <Button color="white" text={context.texts.NewGame} onClick={newGameClick} />}
     </div>
 
     {game && (
       <>
-        {game.state == "ended" ? <h4>Game ended</h4> :
+        {game.state == "ended" ? <h4>{context.texts.GameEnded}</h4> :
-          <h4>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h4>
+          <h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
         }
         <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />
       </>

src/components/Button.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { FunctionComponent } from "react"
+
+const Button: FunctionComponent<{ text: String,onClick: () => void,  color: string }> = ({ text, color, onClick }) => {
+
+    return (
+        <button
+            onClick={onClick}
+            style={{
+                background: color,
+                margin: "5px",
+                padding: "10px",
+                border : "none",
+                borderRadius: "3vw",
+            }} >
+            {text}
+        </button>
+    )
+}
+
+export default Button

src/const/texts.ts

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

src/context.tsx

@@ -1,3 +1,4 @@
+import { Texts, TrTr } from "./const/texts"
 import { RTMT } from "./rtmt/rtmt"
 import { RTMTWS } from "./rtmt/rtmt_websocket"
 import { UserKeyStore, UserKeyStoreImpl } from "./store/key_store"
@@ -5,14 +6,17 @@ import { UserKeyStore, UserKeyStoreImpl } from "./store/key_store"
 type Context = {
     rtmt : RTMT
     userKeyStore : UserKeyStore
+    texts : Texts
 }
 
 export const initContext = ()=> {
     const rtmt =  new RTMTWS()
     const userKeyStore = new UserKeyStoreImpl()
+    const texts = TrTr
     return {
         rtmt : rtmt,       
         userKeyStore : userKeyStore,
+        texts : texts,
     }
 }
 

src/rtmt/rtmt_websocket.ts

@@ -12,7 +12,7 @@ export class RTMTWS implements RTMT {
         this.messageChannels = new Map<String, OnMessage>()
     }
 
-    initWebSocket(userKey: string, onopen: () => any) {
+    initWebSocket(userKey: string, onopen: () => any, onClose: () => any, onError: (event: Event) => any) {
         const url = wsServerAdress + '?userKey=' + userKey
         const ws = new WebSocket(url)
         ws.binaryType = "arraybuffer"; //for firefox
@@ -24,6 +24,7 @@ export class RTMTWS implements RTMT {
         ws.onclose = () => {
             console.log('(RTMT) ws has closed')
             //this.ws = undefined
+            onClose()
         }
 
         ws.onmessage = (event: MessageEvent) => {
@@ -32,6 +33,7 @@ export class RTMTWS implements RTMT {
 
         ws.addEventListener("error", ev => {
             console.log({ ws_error: ev });
+            onError(ev)
         })
     }
 

src/service/http_service.ts

@@ -1,8 +1,8 @@
-//export const serverAdress = "http://localhost:5000" 
+export const serverAdress = "http://localhost:5000" 
-//export const wsServerAdress = "ws://localhost:5000" 
+export const wsServerAdress = "ws://localhost:5000" 
 
-export const serverAdress = "https://halitaksoy.com/mancala" 
+//export const serverAdress = "https://halitaksoy.com/mancala" 
-export const wsServerAdress = "wss://halitaksoy.com/mancala/" 
+//export const wsServerAdress = "wss://halitaksoy.com/mancala/" 
 
 interface HttpService {
     get: (route: string, succes: () => any, error: () => any) => any