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

Resizes lobby background

Browse Source 
Fix empty name usage

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-28 17:29:19 -08:00
parent 32aedaa6ca
commit 302826b5e5
3 changed files with 222 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/Board.css
View File

@ -20,6 +20,7 @@
box-sizing: border-box; box-sizing: border-box;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
opacity: 0.7;
} }
.Stack { .Stack {
@ -45,12 +46,17 @@
.Game { .Game {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box;
width: 20em; width: 20em;
opacity: 0.7; opacity: 0.7;
z-index: 100; z-index: 100;
overflow: hidden; overflow: hidden;
} }
.lobby {
width: calc(100vw - 1em);
}
.Game > *:not(:last-child) { .Game > *:not(:last-child) {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }

42
client/src/Board.js
View File

@ -209,7 +209,9 @@ const Chat = ({ board, promoteGameState }) => {
console.log(`Send: ${event.target.value}`); console.log(`Send: ${event.target.value}`);
promoteGameState({ promoteGameState({
chat: { chat: {
player: board.game.activePlayer ? board.game.activePlayer : undefined, player: board.game.activePlayer ?
board.game.activePlayer :
undefined,
message: event.target.value message: event.target.value
} }
}); });
@ -290,7 +292,7 @@ const PlayerName = ({board}) => {
const nameKeyPress = (event) => { const nameKeyPress = (event) => {
if (event.key === "Enter") { if (event.key === "Enter") {
console.log(`Send: ${name}`); console.log(`Send: ${name}`);
if (name && name != board.game.activePlayerName) { if (name != board.game.activePlayerName) {
board.setPlayerName(name); board.setPlayerName(name);
} }
} }
@ -313,14 +315,9 @@ const PlayerName = ({board}) => {
/* This needs to take in a mechanism to declare the /* This needs to take in a mechanism to declare the
* player's active item in the game */ * player's active item in the game */
const Players = ({ board }) => { const Players = ({ board }) => {
const [selected, setSelected] = useState(board.game && board.game.activePlayer ? board.game.activePlayer : ""); const selected = board.game && board.game.activePlayer ? board.game.activePlayer : "";
const toggleSelected = (key) => { const toggleSelected = (key) => {
if (selected === key) {
setSelected("");
} else {
setSelected(key);
}
board.setSelected(selected === key ? "" : key); board.setSelected(selected === key ? "" : key);
} }
@ -452,12 +449,16 @@ class Board extends React.Component {
return res.json(); return res.json();
}).then((game) => { }).then((game) => {
let message; let message;
if (key) { if (game.status == 'success') {
message = `Player selected ${key}!`; if (key) {
message = `Player selected ${key}!`;
} else {
message = `Player deselected ${game.activePlayer}!`;
}
} else { } else {
message = `Player deselected ${game.activePlayer}!`; message = game.status;
} }
console.log (message);
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: message }); this.setState({ game: game, message: message });
}).catch((error) => { }).catch((error) => {
@ -488,9 +489,18 @@ class Board extends React.Component {
} }
return res.json(); return res.json();
}).then((game) => { }).then((game) => {
console.log (`Player name set to ${name}!`); let message;
if (game.status == 'success') {
if (name) {
message = `Player name set to ${name}`;
} else {
message = `Player name cleared.`;
}
} else {
message = game.status;
}
this.updateGame(game); this.updateGame(game);
this.setState({ game: game, message: `Player name set to ${name}!`}); this.setState({ game: game, message: message});
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
this.setState({message: error.message}); this.setState({message: error.message});
@ -587,7 +597,7 @@ class Board extends React.Component {
}).then((res) => { }).then((res) => {
if (res.status >= 400) { if (res.status >= 400) {
console.log(res); console.log(res);
throw new Error(`Unable to load state`); throw new Error(`Unable to load game`);
} }
return res.json(); return res.json();
}).then((game) => { }).then((game) => {
@ -1312,7 +1322,7 @@ 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"> <div className={'Game ' + game.state}>
{game.activePlayer === "" && <PlayerName board={this}/> } {game.activePlayer === "" && <PlayerName board={this}/> }
<Players board={this} promoteGameState={this.promoteGameState}/> <Players board={this} promoteGameState={this.promoteGameState}/>
<Chat board={this} promoteGameState={this.promoteGameState}/> <Chat board={this} promoteGameState={this.promoteGameState}/>

60
server/routes/games.js
View File

@ -147,7 +147,12 @@ const loadGame = async (id) => {
return undefined; return undefined;
} }
games[id] = JSON.parse(game); try {
games[id] = JSON.parse(game);
} catch (error) {
console.error(error, game);
return null;
}
return games[id]; return games[id];
}; };
@ -172,6 +177,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
if (req.headers['private-token'] !== req.app.get('admin')) { if (req.headers['private-token'] !== req.app.get('admin')) {
error = `Invalid admin credentials.`; error = `Invalid admin credentials.`;
} }
switch (action) { switch (action) {
case "kick": case "kick":
error = `Unable to find player ${value}` error = `Unable to find player ${value}`
@ -179,7 +185,10 @@ router.put("/:id/:action/:value?", async (req, res) => {
player = game.players[color]; player = game.players[color];
if (player.name.toLowerCase() === value.toLowerCase()) { if (player.name.toLowerCase() === value.toLowerCase()) {
console.log(`Kicking ${value} from ${id}.`); console.log(`Kicking ${value} from ${id}.`);
game.chat.push({ date: Date.now(), message: `${player.name} has been kicked from game.` }); game.chat.push({
date: Date.now(),
message: `${player.name} has been kicked from game.`
});
player.session = ''; player.session = '';
player.name = ''; player.name = '';
player.status = 'Not active'; player.status = 'Not active';
@ -195,25 +204,31 @@ router.put("/:id/:action/:value?", async (req, res) => {
} }
if (action == "player-name") { if (action == "player-name") {
const name = req.params.value; const name = value ? value : "";
if (!name) { if (color) {
error = `No name provided`; error = `You cannot change your name while you are in game.`;
} else { } else {
if (color) { if (game) for (let key in game.players) {
error = `You cannot change your name while you are in game.`; player = game.players[key];
} else { if (player.name && player.name.toLowerCase() === name.toLowerCase()) {
if (game) for (let key in game.players) { error = `${name} is already taken by ${key}`;
if (game.players[key].name.toLowerCase() === name.toLowerCase()) {
error = `${name} is already taken by ${key}`;
}
} }
} }
} }
if (!error) { if (!error) {
const old = req.session.playerName ? req.session.PlayerName : "Unnamed"; const old = req.session.playerName ? req.session.PlayerName : "";
let message;
req.session.playerName = name; req.session.playerName = name;
game.chat.push({ date: Date.now(), message: `${old} is no known as ${name}.` }); if (name) {
message = `${old} is no known as ${name}.`;
} else {
message = `${old} no longer has a name.`;
}
game.chat.push({
date: Date.now(),
message: message
});
} }
return sendGame(res, req, game, error); return sendGame(res, req, game, error);
@ -228,7 +243,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
const selected = req.params.value, const selected = req.params.value,
name = req.session.playerName; name = req.session.playerName;
console.log(`player-selected: ${selected}`); console.log(`player-selected requested for ${selected} by ${name}`);
/* Deselect currently active player for this session */ /* Deselect currently active player for this session */
for (let key in game.players) { for (let key in game.players) {
@ -239,14 +254,17 @@ router.put("/:id/:action/:value?", async (req, res) => {
player.name = ''; player.name = '';
player.status = 'Not active'; player.status = 'Not active';
req.session.playerColor = ''; req.session.playerColor = '';
game.chat.push({ date: Date.now(), message: `${key} is no longer claimed.` }); game.chat.push({
date: Date.now(),
message: `${key} is no longer claimed.`
});
break; break;
} }
} }
} }
/* Verify the player has a name set */ /* Verify the player has a name set */
if (!req.session.playerName) { if (!name) {
error = `You may only select a player when you have set your name.`; error = `You may only select a player when you have set your name.`;
} }
@ -281,13 +299,17 @@ router.put("/:id/:action/:value?", async (req, res) => {
player.status = `Active`; player.status = `Active`;
player.lastActive = Date.now(); player.lastActive = Date.now();
req.session.playerColor = selected; req.session.playerColor = selected;
game.chat.push({ date: Date.now(), message: `${selected} is now '${player.name}'.` }); game.chat.push({
date: Date.now(),
message: `${selected} is now '${player.name}'.`
});
} }
return sendGame(res, req, game, error); return sendGame(res, req, game, error);
} }
if (!req.session.playerColor || !(req.session.playerColor in game.players)) { if (!req.session.playerColor ||
!(req.session.playerColor in game.players)) {
error = `Invalid player: ${req.session.playerColor}`; error = `Invalid player: ${req.session.playerColor}`;
return sendGame(res, req, game, error); return sendGame(res, req, game, error);
} }