jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Lobby, Game-Order, Active states starting to work

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-29 16:03:20 -08:00
parent 30c7979871
commit 395fb5558d
3 changed files with 197 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/Board.css
View File

@ -143,6 +143,60 @@
margin: 0.25em; margin: 0.25em;
} }
.Action {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(16, 16, 16, 0.25);
}
.Action Button {
margin: 0.25em;
background-color: white;
}
.Error {
display: flex;
position: absolute;
top: calc(50vh - 1.5em);
left: 0px;
right: 0px;
align-items: center;
justify-content: center;
background-color: yellow;
text-align: left;
font-size: 12pt;
padding: 1em;
}
.Message {
display: inline-block;
align-items: left;
justify-content: left;
background-color: rgba(224, 224, 224);
text-align: left;
font-size: 12pt;
padding: 1em;
}
.PlayerName {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.PlayerName > .nameInput {
margin-right: 1em;
flex: 1;
max-width: 30em;
}
.PlayerName > Button {
background: lightblue;
}
.Statistics > div:nth-child(2) { .Statistics > div:nth-child(2) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

189
client/src/Board.js
View File

@ -254,7 +254,7 @@ const Chat = ({ board, promoteGameState }) => {
const Action = ({ board }) => { const Action = ({ board }) => {
const startClick = (event) => { const startClick = (event) => {
board.setGameState("active").then((state) => { board.setGameState("game-order").then((state) => {
board.game.state = state; board.game.state = state;
}); });
}; };
@ -267,14 +267,21 @@ const Action = ({ board }) => {
board.throwDice(); board.throwDice();
} }
const passClick = (event) => {
}
return ( return (
<Paper className="Action"> <Paper class="Action">
{ board.game.state == 'lobby' && <> { board.game.state == 'lobby' && <>
<Button fullWidth onClick={startClick}>Start game</Button> <Button disabled={!board.game.color || board.game.active < 2} onClick={startClick}>Start game</Button>
<Button fullWidth onClick={newBoardClick}>New board</Button> <Button disabled={!board.game.color} onClick={newBoardClick}>New board</Button>
<Button disabled={board.game.color} onClick={() => {board.setState({ pickName: true})}}>Change name</Button>
</> } </> }
{ board.game.state !== 'lobby' && <> { board.game.state === 'game-order' &&
<Button fullWidth onClick={rollClick}>Roll</Button> <Button disabled={board.game.order !== 0} onClick={rollClick}>Roll Dice</Button> }
{ board.game.state === 'active' && <>
<Button onClick={rollClick}>Roll Dice</Button>
<Button disabled onClick={passClick}>Pass Turn</Button>
</> } </> }
</Paper> </Paper>
); );
@ -287,25 +294,31 @@ const PlayerName = ({board}) => {
setName(event.target.value); setName(event.target.value);
} }
const sendName = () => {
console.log(`Send: ${name}`);
if (name != board.game.name) {
board.setPlayerName(name);
} else {
board.setState({ pickName: false, error: "" });
}
}
const nameKeyPress = (event) => { const nameKeyPress = (event) => {
if (event.key === "Enter") { if (event.key === "Enter") {
console.log(`Send: ${name}`); sendName();
if (name != board.game.name) {
board.setPlayerName(name);
}
} }
} }
return ( return (
<Paper className="PlayerName"> <Paper className="PlayerName">
<TextField className="nameInput" <TextField className="nameInput"
fullWidth
onChange={nameChange} onChange={nameChange}
onKeyPress={nameKeyPress} onKeyPress={nameKeyPress}
label="Name" label="Enter your name"
variant="outlined" variant="outlined"
value={name} value={name}
/> />
<Button onClick={() => sendName()}>Set</Button>
</Paper> </Paper>
); );
}; };
@ -330,7 +343,6 @@ const Players = ({ board }) => {
const classes = useStyles(); const classes = useStyles();
const players = []; const players = [];
console.log(`Player ${board.game.name} is ${board.game.color}`);
for (let color in board.game.players) { for (let color in board.game.players) {
const item = board.game.players[color]; const item = board.game.players[color];
if (board.game.state !== "lobby" && item.status === 'Not active') { if (board.game.state !== "lobby" && item.status === 'Not active') {
@ -377,7 +389,8 @@ class Board extends React.Component {
stone: 0, stone: 0,
wheat: 0, wheat: 0,
game: null, game: null,
message: "" message: "",
error: ""
}; };
this.componentDidMount = this.componentDidMount.bind(this); this.componentDidMount = this.componentDidMount.bind(this);
this.updateDimensions = this.updateDimensions.bind(this); this.updateDimensions = this.updateDimensions.bind(this);
@ -399,6 +412,7 @@ class Board extends React.Component {
this.imageLoaded = this.imageLoaded.bind(this); this.imageLoaded = this.imageLoaded.bind(this);
this.setPlayerName = this.setPlayerName.bind(this); this.setPlayerName = this.setPlayerName.bind(this);
this.setSelected = this.setSelected.bind(this); this.setSelected = this.setSelected.bind(this);
this.updateMessage = this.updateMessage.bind(this);
this.mouse = { x: 0, y: 0 }; this.mouse = { x: 0, y: 0 };
this.radius = 0.317; this.radius = 0.317;
@ -456,16 +470,13 @@ class Board extends React.Component {
} }
return res.json(); return res.json();
}).then((game) => { }).then((game) => {
let message; const error = (game.status !== 'success') ? game.status : undefined;
if (game.status !== 'success') {
message = game.status;
}
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: message }); this.updateMessage();
this.setState({ game: game, error: error });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
window.requestAnimationFrame(this.drawFrame); window.requestAnimationFrame(this.drawFrame);
@ -494,12 +505,16 @@ class Board extends React.Component {
let message; let message;
if (game.status !== 'success') { if (game.status !== 'success') {
message = game.status; message = game.status;
} else {
this.setState({ pickName: false });
} }
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: message}); this.updateMessage();
this.setState({ game: game, error: message});
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
window.requestAnimationFrame(this.drawFrame); window.requestAnimationFrame(this.drawFrame);
@ -527,10 +542,11 @@ class Board extends React.Component {
}).then((game) => { }).then((game) => {
console.log (`Board shuffled!`); console.log (`Board shuffled!`);
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: "Board shuffled!" }); this.updateMessage();
this.setState({ game: game, error: "Board shuffled!" });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
window.requestAnimationFrame(this.drawFrame); window.requestAnimationFrame(this.drawFrame);
@ -557,16 +573,16 @@ class Board extends React.Component {
} }
return res.json(); return res.json();
}).then((game) => { }).then((game) => {
let message; const error = (game.status !== 'success') ? game.status : undefined;
if (game.status !== "success") { if (error) {
game.dice = []; game.dice = [ game.order ];
message = game.status;
} }
this.updateGame(game); this.updateGame(game);
this.setState({ game: { ...this.state.game, dice: game.dice }, message: message } ); this.updateMessage();
this.setState({ game: { ...this.state.game, dice: game.dice }, error: error } );
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
return this.game.dice; return this.game.dice;
@ -598,12 +614,16 @@ class Board extends React.Component {
} }
return res.json(); return res.json();
}).then((game) => { }).then((game) => {
const error = (game.status !== 'success') ? game.status : undefined;
console.log (`Game ${game.id} loaded ${moment().format()}.`); console.log (`Game ${game.id} loaded ${moment().format()}.`);
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: "" }); this.updateMessage();
this.setState({ game: game, error: error });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
}); });
@ -642,10 +662,10 @@ class Board extends React.Component {
}).then((game) => { }).then((game) => {
console.log (`Game state changed.`); console.log (`Game state changed.`);
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: "" }); this.setState({ game: game, error: "" });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
}); });
@ -676,10 +696,11 @@ class Board extends React.Component {
}).then((game) => { }).then((game) => {
console.log (`Game state set to ${game.state}!`); console.log (`Game state set to ${game.state}!`);
this.updateGame(game); this.updateGame(game);
this.setState({ game: { ...this.state.game, state: game.state }, message: `Game state now ${game.state}.` }); this.updateMessage();
this.setState({ game: { ...this.state.game, state: game.state }, error: `Game state now ${game.state}.` });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
return this.game.state; return this.game.state;
@ -700,7 +721,7 @@ class Board extends React.Component {
window.requestAnimationFrame(this.drawFrame); window.requestAnimationFrame(this.drawFrame);
if (this.game.state == 'lobby') { if (this.game.state !== 'active') {
return; return;
} }
@ -1254,6 +1275,65 @@ class Board extends React.Component {
window.requestAnimationFrame(this.drawFrame); window.requestAnimationFrame(this.drawFrame);
} }
updateMessage() {
const player = (this.game && this.game.color) ? this.game.players[this.game.color] : undefined;
let message = [];
if (this.state.pickName) {
message.push((<>Enter the name you would like to be known by, then press&nbsp;<b>ENTER</b>&nbsp;or select &nbsp;<b>SET</b>.</>));
} else {
switch (this.game && this.game.state) {
case 'lobby':
message.push((<>You are in the lobby as&nbsp;<b>{this.game.name}</b>.</>));
if (!this.game.color) {
message.push((<>You need to pick your color.</>));
} else {
message.push((<>You have selected&nbsp;<b>{this.game.color}</b>.</>));
}
message.push((<>You can chat with other players below.</>));
if (this.game.active < 2) {
message.push((<>Once there are two or more players, you can select&nbsp;<b>START GAME</b>.</>));
} else {
message.push((<>There are enough players to start the game. Select&nbsp;<b>START GAME</b>&nbsp;when ready.</>));
}
break;
case 'game-order':
if (!player) {
message.push((<>This game is already active.</>));
if (!this.game.name) {
message.push((<>Enter the name you would like to be known by, then press&nbsp;<b>ENTER</b>&nbsp;or select &nbsp;<b>SET</b>.</>));
} else {
message.push((<>You can chat with other players below as&nbsp;<b>{this.game.name}</b>, but cannot play unless players go back to the Lobby.</>));
}
} else {
if (!player.order) {
message.push((<>You need to roll for game order. Click&nbsp;<b>Roll Dice</b>&nbsp;below.</>));
} else {
message.push((<>You rolled&nbsp;<b>{player.order}</b>&nbsp;for game order. Waiting for all players.</>));
message.push((<><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>));
}
}
break;
case 'active':
if (!player) {
message.push((<>This game is no longer in the lobby.<br/><b>TODO: Override game state to allow Lobby mode while in-game</b></>));
} else {
message.push((<><br/><b>THIS IS THE END OF THE FUNCTIONALITY SO FAR</b></>));
}
break;
case null:
case undefined:
case '':
message.push((<>The game is in a wonky state. Sorry :(</>));
break;
default:
message.push((<>Game state is: {this.game.state}</>));
break;
}
}
this.setState({ message: message });
}
componentDidMount() { componentDidMount() {
this.start = new Date(); this.start = new Date();
@ -1285,15 +1365,15 @@ class Board extends React.Component {
if (res.status < 400) { if (res.status < 400) {
return res; return res;
} }
let message; let error;
if (!this.id) { if (!this.id) {
message = `Unable to create new game.`; error = `Unable to create new game.`;
throw new Error(message); throw new Error(error);
} }
message = `Unable to find game ${this.id}. Starting new game.` error = `Unable to find game ${this.id}. Starting new game.`
console.log(message); console.log(error);
this.setState({ message: message }); this.setState({ error: error });
params.url = `${base}/api/v1/games/${this.id}`; params.url = `${base}/api/v1/games/${this.id}`;
params.method = "POST"; params.method = "POST";
@ -1316,10 +1396,12 @@ class Board extends React.Component {
} }
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: "" }); this.updateMessage();
this.setState({ game: game, error: "" });
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({error: error.message});
}).then(() => { }).then(() => {
this.resetGameLoad(); this.resetGameLoad();
}); });
@ -1349,14 +1431,17 @@ class Board extends React.Component {
<canvas className="Display" ref={el => this.canvas = el}></canvas> <canvas className="Display" ref={el => this.canvas = el}></canvas>
<div className="Cards" ref={el => this.cards = el}> <div className="Cards" ref={el => this.cards = el}>
{ game && { game &&
<div className={'Game ' + game.state}> <div className={'Game ' + game.state}>
{!game.color && <PlayerName board={this}/> } <Paper class="Message">{ this.state.message }</Paper>
<Players board={this} promoteGameState={this.promoteGameState}/> {(this.state.pickName || !this.game.name) && <PlayerName board={this}/> }
<Chat board={this} promoteGameState={this.promoteGameState}/> {(!this.state.pickName && this.game.name) &&
{ game.color && <>
<Players board={this} promoteGameState={this.promoteGameState}/>
<Chat board={this} promoteGameState={this.promoteGameState}/>
<Action board={this}/> <Action board={this}/>
</>
} }
{ this.state.message != "" && <Paper><div style={{align:"left",fontSize:"8pt"}}>{this.state.message}</div></Paper> } { this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
</div> </div>
} }
{ {

9
server/routes/games.js
View File

@ -108,14 +108,15 @@ const roll = (game, session) => {
case "game-order": case "game-order":
if (player.order) { if (player.order) {
retrun = `Player ${name} already rolled for order.`; return `Player ${name} already rolled for order.`;
} }
game.dice = [ Math.ceil(Math.random() * 6) ];
player.order = game.dice[0]; player.order = game.dice[0];
message = `${name} rolled ${game.dice[0]} for play order.`; message = `${name} rolled ${game.dice[0]} for play order.`;
game.chat.push({ date: Date.now(), message: message }); game.chat.push({ date: Date.now(), message: message });
break; break;
case "in-game": case "active":
game.dice = [ Math.ceil(Math.random() * 6), Math.ceil(Math.random() * 6) ]; game.dice = [ Math.ceil(Math.random() * 6), Math.ceil(Math.random() * 6) ];
message = `${name} rolled ${game.dice[0] + game.dice[1]}.`; message = `${name} rolled ${game.dice[0] + game.dice[1]}.`;
game.chat.push({ date: Date.now(), message: message }); game.chat.push({ date: Date.now(), message: message });
@ -460,6 +461,7 @@ const sendGame = async (req, res, game, error) => {
console.log(message); console.log(message);
game.state = 'lobby'; game.state = 'lobby';
} }
game.active = active;
let session; let session;
if (req.session) { if (req.session) {
@ -498,6 +500,7 @@ const sendGame = async (req, res, game, error) => {
status: error ? error : "success", status: error ? error : "success",
name: session.name, name: session.name,
color: session.color, color: session.color,
order: (session.color in game.players) ? game.players[session.color].order : 0,
sessions: reducedSessions sessions: reducedSessions
}); });
@ -509,7 +512,7 @@ const createGame = (id) => {
const game = { const game = {
startTime: Date.now(), startTime: Date.now(),
turns: 0, turns: 0,
state: "lobby", /* lobby, in-game, finished */ state: "lobby", /* lobby, active, finished */
tiles: [], tiles: [],
pips: [], pips: [],
borders: [], borders: [],