diff --git a/src/Home.tsx b/src/Home.tsx index 2ef6238..9fe794c 100644 --- a/src/Home.tsx +++ b/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(undefined) - const [connectionState, setConnetionState] = useState<"connecting" | "error" | "connected">("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 [connectionState, setConnetionState] = useState("connecting") const onConnectionDone = () => { setConnetionState("connected") } - const newGameClick = () => { - context.rtmt.sendMessage("new_game", new Uint8Array()) + const onConnectionLost = () => { + 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
= ({ initial = 0 }) => { background: "#EEEEEE", flex: "1", }}> + { + showConnectionState &&
+ {connectionStateText()} +
}
= ({ initial = 0 }) => { justifyContent: "space-between", alignSelf: "stretch" }}> -

Mancala

+

{context.texts.Mancala}

{ game && (
- {game.state == "ended" && } - + {game.state == "ended" && } +
) } - {!game && } + {!game &&
{game && ( <> - {game.state == "ended" ?

Game ended

: -

{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}

+ {game.state == "ended" ?

{context.texts.GameEnded}

: +

{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}

} diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..1eb29ad --- /dev/null +++ b/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 ( + + ) +} + +export default Button \ No newline at end of file diff --git a/src/const/texts.ts b/src/const/texts.ts new file mode 100644 index 0000000..19c99a0 --- /dev/null +++ b/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", +} \ No newline at end of file diff --git a/src/context.tsx b/src/context.tsx index 481fc26..3a51286 100644 --- a/src/context.tsx +++ b/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, } } diff --git a/src/rtmt/rtmt_websocket.ts b/src/rtmt/rtmt_websocket.ts index 9f06887..9b92dcf 100644 --- a/src/rtmt/rtmt_websocket.ts +++ b/src/rtmt/rtmt_websocket.ts @@ -12,7 +12,7 @@ export class RTMTWS implements RTMT { this.messageChannels = new Map() } - 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) }) } diff --git a/src/service/http_service.ts b/src/service/http_service.ts index 106f3ad..3d06988 100644 --- a/src/service/http_service.ts +++ b/src/service/http_service.ts @@ -1,8 +1,8 @@ -//export const serverAdress = "http://localhost:5000" -//export const wsServerAdress = "ws://localhost:5000" +export const serverAdress = "http://localhost:5000" +export const wsServerAdress = "ws://localhost:5000" -export const serverAdress = "https://halitaksoy.com/mancala" -export const wsServerAdress = "wss://halitaksoy.com/mancala/" +//export const serverAdress = "https://halitaksoy.com/mancala" +//export const wsServerAdress = "wss://halitaksoy.com/mancala/" interface HttpService { get: (route: string, succes: () => any, error: () => any) => any