jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

now printing message when user leaves the game

Browse Source
This commit is contained in:
jhalitaksoy 2021-07-04 01:04:59 +03:00
parent 5dc7d80d9a
commit b325e621be
4 changed files with 105 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/Home.tsx
View File

@ -7,7 +7,7 @@ import { Game } from './mancala';
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 { channel_game_move, channel_leave_game, channel_on_game_update, channel_on_game_user_leave } from './channel_names';
import Button from './components/Button';
import InfoPanel from './components/InfoPanel';
@ -26,12 +26,14 @@ 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<ConnectionState>("connecting")
const [game, setGame] = useState<Game>(undefined)
const [crashMessage, setCrashMessage] = useState<string>(undefined)
const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string>(undefined)
const onConnectionDone = () => {
setConnetionState("connected")
}
@ -85,6 +87,13 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
console.log(newCrashMessage);
setCrashMessage(newCrashMessage)
})
context.rtmt.listenMessage(channel_on_game_user_leave, (message) => {
const userKeyWhoLeave = decodeText(message)
console.log("on_game_user_leave");
console.log(channel_on_game_user_leave);
setUserKeyWhoLeave(userKeyWhoLeave)
})
}
React.useEffect(() => {
@ -92,7 +101,14 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
connectToServer("connecting")
}, [])
const resetGameState = () => {
setGame(undefined)
setCrashMessage(undefined)
setUserKeyWhoLeave(undefined)
}
const newGameClick = () => {
resetGameState()
context.rtmt.sendMessage("new_game", new Uint8Array())
}
@ -120,6 +136,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
const renderNewGameButton = () => {
const newGame = <Button text={context.texts.NewGame} color="white" onClick={newGameClick} />
if (userKeyWhoLeave) {
return newGame
}
if (crashMessage) {
return newGame
}
@ -163,13 +182,17 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
<h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
<div>
{renderNewGameButton()}
{game && <Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
{game && !userKeyWhoLeave && < Button color="white" text={context.texts.Leave} onClick={leaveGame} />}
</div>
</div>
<InfoPanel game={game} crashMessage={crashMessage} userKey={userKey} />
<InfoPanel game={game} crashMessage={crashMessage} userKey={userKey} userKeyWhoLeave={userKeyWhoLeave} />
{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.');
}

2
src/channel_names.ts
View File

@ -4,3 +4,5 @@ export const channel_game_move = "game_move"
export const channel_on_game_update = "on_game_update"
export const channel_leave_game = "leave_game"
export const channel_on_game_end = "on_game_end"
export const channel_on_game_crashed = "on_game_crashed"
export const channel_on_game_user_leave = "on_game_user_leave"

17
src/components/InfoPanel.tsx
View File

@ -3,7 +3,9 @@ import { FunctionComponent } from "react"
import { context } from '../context';
import { Game } from '../mancala';
const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string }> = ({ game, crashMessage, userKey }) => {
const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey: string, userKeyWhoLeave: string }> = ({
game, crashMessage, userKey, userKeyWhoLeave }) => {
if (crashMessage) {
return (
<h4>{
@ -12,6 +14,19 @@ const InfoPanel: FunctionComponent<{ game: Game, crashMessage: string, userKey:
)
}
if (userKeyWhoLeave) {
let message = context.texts.OpponentLeavesTheGame
if (userKeyWhoLeave == userKey) {
message = context.texts.YouLeftTheGame
}
return (
<h4>
{message}
</h4>
)
}
if (game) {
if (game.state == "ended") {
const whoWon = game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost

106
src/const/texts.ts
View File

@ -1,57 +1,63 @@
export type Texts = {
Mancala : string,
Leave : string,
NewGame : string,
YourTurn : string,
OpponentTurn : string,
GameEnded : string,
GameCrashed : string,
YouWon : string,
YouLost : string,
Connecting : string,
Connected : string,
CannotConnect : string,
ConnectionLost : string,
ConnectingAgain : string,
ServerError : string,
SearchingOpponet : string,
Mancala: string,
Leave: string,
NewGame: string,
YourTurn: string,
OpponentTurn: string,
GameEnded: string,
GameCrashed: string,
YouWon: string,
YouLost: string,
Connecting: string,
Connected: string,
CannotConnect: string,
ConnectionLost: string,
ConnectingAgain: string,
ServerError: string,
SearchingOpponet: string,
OpponentLeavesTheGame: string,
YouLeftTheGame: string,
}
export const EnUs : Texts = {
Mancala : "Mancala",
Leave : "Leave The Game",
NewGame : "New Game",
YourTurn : "Your Turn",
OpponentTurn : "Opponent Turn",
GameEnded : "Game Ended",
GameCrashed : "Game Crashed",
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 EnUs: Texts = {
Mancala: "Mancala",
Leave: "Leave The Game",
NewGame: "New Game",
YourTurn: "Your Turn",
OpponentTurn: "Opponent Turn",
GameEnded: "Game Ended",
GameCrashed: "Game Crashed",
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",
OpponentLeavesTheGame: "Opponent Leaves The Game",
YouLeftTheGame: "You Left The Game"
}
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",
GameCrashed : "Oyunda Hata Oluştu",
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",
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",
GameCrashed: "Oyunda Hata Oluştu",
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",
OpponentLeavesTheGame: "Rakip Oyundan Ayrıldı",
YouLeftTheGame: "Sen Oyundan Ayrıldın"
}