Skip to content

Commit

Permalink
Fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@F1nnM
F1nnM committed May 3, 2021
1 parent c7f9af6 commit e148145
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 38 deletions.
2 changes: 1 addition & 1 deletion frontend/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class App extends React.Component {
fetch(`${env.REACT_APP_MASTER_BACKEND_USE_HTTPS ? 'https' : 'http'}://${env.REACT_APP_MASTER_BACKEND}/getServerList`)
.then(response => response.json())
.then(data => {
let client = new Colyseus.Client(data[0].url)
let client = new Colyseus.Client(`${data[0].ssl ? 'wss' : 'ws'}://${data[0].url}`)
this.setState({ ...this.state, serverList: data, client, selectedServer: data[0] })
});
}
Expand Down
77 changes: 40 additions & 37 deletions frontend/src/components/Game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ class Game extends React.Component {
super(props);
if (props.room) {
console.log("Room was supplied by props")
this.state = { game: null, sessionId: props.room.sessionId, room: props.room, roomId: props.room.id}
}else {
this.state = { game: null, sessionId: props.room.sessionId, room: props.room, roomId: props.room.id }
} else {
let sessionId;
let roomId;
if (this.props.location.search.length === 10)
Expand All @@ -20,12 +20,12 @@ class Game extends React.Component {
sessionId = localStorage.getItem('sessionId')
roomId = localStorage.getItem('roomId')
}
this.state = { game: null, sessionId: sessionId, room: null, roomId: roomId}
this.state = { game: null, sessionId: sessionId, room: null, roomId: roomId }
}

}

joinedGame(me, room){
joinedGame(me, room) {

localStorage.setItem('roomId', room.id)
localStorage.setItem('sessionId', room.sessionId)
Expand All @@ -37,15 +37,15 @@ class Game extends React.Component {
me.setState({ ...me.state, game: gameState })
console.log("________NEW STATE_____________")
console.log(gameState)
} );
});

room.onLeave((code) => {
console.log("client left the room, code: " + code);
this.joinGame()
});

room.onError((code, message) => {
alert("ROOM ERROR ("+code+"):\n"+message)
alert("ROOM ERROR (" + code + "):\n" + message)
console.log(code)
console.log(message);
});
Expand All @@ -69,14 +69,14 @@ class Game extends React.Component {
console.log(room.sessionId, "joined", room.name);
me.joinedGame(me, room)
}).catch(e => {
if ( e.message.match(/room "[^"]*" not found/gi)){
if (e.message.match(/room "[^"]*" not found/gi)) {
alert("Couldn't find the selected room!")
me.clearGameAfterError()
} else if(e.message.match(/session expired:/gi)){
} else if (e.message.match(/session expired:/gi)) {
alert("Your game session for this room has expired!")
me.clearGameAfterError()
}
else{
else {
console.log(e.message)
alert("RECONNECT Error, see console for details. Retrying in 10 seconds.")
setTimeout(_ => me.joinGame(this), 10_000)
Expand All @@ -86,7 +86,7 @@ class Game extends React.Component {
} else {
console.log("new connection")

this.props.client.joinById(this.state.roomId, {name: localStorage.getItem("name")}).then(room => {
this.props.client.joinById(this.state.roomId, { name: localStorage.getItem("name") }).then(room => {
console.log(room.sessionId, "joined", room.name);
this.joinedGame(this, room)
}).catch(e => {
Expand All @@ -97,20 +97,23 @@ class Game extends React.Component {
}
}

componentDidUpdate(){
console.log("Updated Game")
componentDidUpdate() {
if ( this.props.client && !this.props.room)
this.joinGame()
}

componentDidMount() {
if(this.props.room)
this.joinedGame(this, this.props.room)
else
this.joinGame()
if (this.props.client) {
if (this.props.room)
this.joinedGame(this, this.props.room)
else
this.joinGame()
}
}

componentWillUnmount() {
console.log("Unmounting")
if (this.props.room){
if (this.props.room) {
this.props.room.removeAllListeners()
this.props.room.leave()
this.props.setRoom(null)
Expand All @@ -129,7 +132,7 @@ class Game extends React.Component {
me.props.room.send("czarVote", { index: index })
}

replaceHand(){
replaceHand() {
this.props.room.send("replaceHand")
}

Expand All @@ -142,38 +145,38 @@ class Game extends React.Component {
return <div></div>
let player = this.state.game.players[this.props.room.sessionId];

let blackcardText = this.state.game.winner? 'And the winner is [[BLANK]]' : this.state.game.blackCard.content || "Invite players with the code: "
let blackcardText = this.state.game.winner ? 'And the winner is [[BLANK]]' : this.state.game.blackCard.content || "Invite players with the code: "
let blackcardChildren = (
<div>
<input value={this.state.roomId} />
<button onClick={() => {navigator.clipboard.writeText(this.state.roomId)}}>Copy Code</button>
<button onClick={() => {navigator.clipboard.writeText(window.location.origin+"/#/game?"+this.state.roomId)}}>Copy Link</button>
</div>);
let blackcard = { content: blackcardText, children: blackcardChildren, mark: this.state.game.blackCard.mark}
<div>
<input value={this.state.roomId} />
<button onClick={() => { navigator.clipboard.writeText(this.state.roomId) }}>Copy Code</button>
{/*<button onClick={() => {navigator.clipboard.writeText(window.location.origin+"/#/game?"+this.state.roomId)}}>Copy Link</button> */}
</div>);
let blackcard = { content: blackcardText, children: blackcardChildren, mark: this.state.game.blackCard.mark }

let playedCards = this.state.game.winner ? [{cards: [{content: this.state.game.players[this.state.game.winner].name, mark: "WIN"}], chosenByCzar: true}] : this.state.game.cardsPlayed
let playedCards = this.state.game.winner ? [{ cards: [{ content: this.state.game.players[this.state.game.winner].name, mark: "WIN" }], chosenByCzar: true }] : this.state.game.cardsPlayed

let sidebar =
<div>
<Scoreboard players={Array.from(this.state.game.players.values())} gameRunning={this.state.game.gameRunning} winner={this.state.game.winner || this.state.game.roundWinner}/>
{!this.state.game.gameRunning && player.isOwner && !this.state.game.winner && <button onClick={_ => this.startGame()}>Start Game</button>}
{this.state.game.gameRunning && player.isOwner && <button onClick={_ => this.skipRound()}>Skip Round</button>}
</div>
<div>
<Scoreboard players={Array.from(this.state.game.players.values())} gameRunning={this.state.game.gameRunning} winner={this.state.game.winner || this.state.game.roundWinner} />
{!this.state.game.gameRunning && player.isOwner && !this.state.game.winner && <button onClick={_ => this.startGame()}>Start Game</button>}
{this.state.game.gameRunning && player.isOwner && <button onClick={_ => this.skipRound()}>Skip Round</button>}
</div>

return (

<CardArea
confirm={true}
blocker={this.state.game.winner?'Game over':player.isCzar?(this.state.game.czarsTurn?"It's you're turn to vote!":"You are the czar!"):this.state.game.czarsTurn?"It's the czars turn to vote":null}
confirm={true}
blocker={this.state.game.winner ? 'Game over' : player.isCzar ? (this.state.game.czarsTurn ? "It's you're turn to vote!" : "You are the czar!") : this.state.game.czarsTurn ? "It's the czars turn to vote" : null}
enablePlayedCards={player.isCzar && !this.state.game.czarDidVote}
blackCard={blackcard}
whiteCards={player.cards}
whiteCardClicked={ index => this.playCard(this, index)}
whiteCardClicked={index => this.playCard(this, index)}
playedCards={playedCards}
playedCardsClicked={index => this.czarVote(this, index)}
sidebar={sidebar}
trustPlayedCards={!this.state.game.winner}
additionalSpace={<button hidden={!this.state.game.gameRunning} className='replaceHandButton' onClick={_=>this.replaceHand()} disabled={this.state.game.czarsTurn || player.isCzar || player.cards.length === 0}>Replace hand instead of playing a card</button>}/>
additionalSpace={<button hidden={!this.state.game.gameRunning} className='replaceHandButton' onClick={_ => this.replaceHand()} disabled={this.state.game.czarsTurn || player.isCzar || player.cards.length === 0}>Replace hand instead of playing a card</button>} />
);
}
}
Expand Down

0 comments on commit e148145

Please sign in to comment.