added tr trasnlation and reconnecting
This commit is contained in:
parent
c85041b78c
commit
428014e76f
121
src/Home.tsx
121
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")
|
||||
|
||||
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<ConnectionState>("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 <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>}
|
||||
<button onClick={leaveGame}>Leave</button>
|
||||
{game.state == "ended" && <button onClick={newGameClick}>{context.texts.NewGame}</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> :
|
||||
<h4>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h4>
|
||||
{game.state == "ended" ? <h4>{context.texts.GameEnded}</h4> :
|
||||
<h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
|
||||
}
|
||||
<BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />
|
||||
</>
|
||||
|
||||
21
src/components/Button.tsx
Normal file
21
src/components/Button.tsx
Normal file
@ -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
|
||||
54
src/const/texts.ts
Normal file
54
src/const/texts.ts
Normal file
@ -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",
|
||||
}
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user