now printing game crash message

src/Home.tsx

@@ -9,6 +9,7 @@ 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';
+import InfoPanel from './components/InfoPanel';
 
 const testBoard = (): Board => {
   const board = new Board(
@@ -29,6 +30,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   const [connectionState, setConnetionState] = useState<ConnectionState>("connecting")
 
+  const [crashMessage, setCrashMessage] = useState<string>(undefined)
+
   const onConnectionDone = () => {
     setConnetionState("connected")
   }
@@ -75,6 +78,13 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       console.log(newGame);
       setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
     })
+
+    context.rtmt.listenMessage("on_game_crashed", (message) => {
+      const newCrashMessage = decodeText(message)
+      console.log("on_game_crash");
+      console.log(newCrashMessage);
+      setCrashMessage(newCrashMessage)
+    })
   }
 
   React.useEffect(() => {
@@ -108,6 +118,19 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     return map[connectionState]
   }
 
+  const renderNewGameButton = () => {
+    const newGame = <Button text={context.texts.NewGame} color="white" onClick={newGameClick} />
+    if (crashMessage) {
+      return newGame
+    }
+    if (!game) {
+      return newGame
+    } else if (game.state == "ended") {
+      return newGame
+    }
+    return <></>
+  }
+
   return <div style={{
     display: "flex",
     flexDirection: "column",
@@ -115,8 +138,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     background: "#EEEEEE",
     flex: "1",
   }}>
-    {
+    {showConnectionState &&
-      showConnectionState && <div style={{
+      <div style={{
         position: "absolute",
         bottom: "0px",
         left: "0px",
@@ -137,29 +160,15 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       justifyContent: "space-between",
       alignSelf: "stretch"
     }}>
-      <h1
+      <h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
-        style={{
-          margin: "10px 0px",
-        }}
-      >{context.texts.Mancala}</h1>
-      {
-        game && (
       <div>
-            {game.state == "ended" && <Button text={context.texts.NewGame} color="white" onClick={newGameClick} />}
+        {renderNewGameButton()}
-            <Button color="white" text={context.texts.Leave} onClick={leaveGame} />
+        {game && <Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
-          </div>)
-      }
-      {!game && <Button color="white" text={context.texts.NewGame} onClick={newGameClick} />}
       </div>
 
-    {game && (
+    </div>
-      <>
+    <InfoPanel game={game} crashMessage={crashMessage} userKey={userKey} />
-        {game.state == "ended" ? <h4>{context.texts.GameEnded + " " + game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost}</h4> :
+    {game && <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />}
-          <h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
-        }
-        <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />
-      </>
-    )}
   </div >
 }
 

src/components/InfoPanel.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { FunctionComponent } from "react"
+import { context } from '../context';
+import { Game } from '../mancala';
+
+const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string }> = ({ game, crashMessage, userKey }) => {
+    if (crashMessage) {
+        return (
+            <h4>{
+                context.texts.GameCrashed + " " + crashMessage
+            }</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>
+}
+
+export default InfoPanel

src/const/texts.ts

@@ -6,6 +6,7 @@ export type Texts = {
     YourTurn : string,
     OpponentTurn : string,
     GameEnded : string,
+    GameCrashed : string,
     YouWon : string,
     YouLost : string,
     Connecting : string,
@@ -24,6 +25,7 @@ export const EnUs : Texts = {
     YourTurn : "Your Turn",
     OpponentTurn : "Opponent Turn",
     GameEnded : "Game Ended",
+    GameCrashed : "Game Crashed",
     YouWon : "You Won",
     YouLost : "You Lost",
     Connecting : "Connecting",
@@ -42,6 +44,7 @@ export const TrTr : Texts = {
     YourTurn : "Sıra Sende",
     OpponentTurn : "Sıra Rakipte",
     GameEnded : "Oyun Bitti",
+    GameCrashed : "Oyunda Hata Oluştu",
     YouWon : "Kazandın",
     YouLost : "Kaybettin",
     Connecting : "Bağlanılıyor",

src/rtmt/rtmt_websocket.ts

@@ -1,7 +1,7 @@
 import { decode, encode } from "./encode_decode_message"
 import { Bytes, OnMessage, RTMT } from "./rtmt"
 import { context } from '../context';
-import { wsServerAdress } from "../service/http_service";
+import { server } from "../service/http_service";
 
 export class RTMTWS implements RTMT {
 
@@ -13,7 +13,7 @@ export class RTMTWS implements RTMT {
     }
 
     initWebSocket(userKey: string, onopen: () => any, onClose: () => any, onError: (event: Event) => any) {
-        const url = wsServerAdress + '?userKey=' + userKey
+        const url = server.wsServerAdress + '?userKey=' + userKey
         const ws = new WebSocket(url)
         ws.binaryType = "arraybuffer"; //for firefox
         ws.onopen = () => {

src/service/http_service.ts

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