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

302
client/src/Board.css
View File

@ -1,148 +1,154 @@
.Board { .Board {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
height: 100%; height: 100%;
} }
.Display { .Display {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
} }
.Cards { .Cards {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
text-align: right; text-align: right;
vertical-align: bottom; vertical-align: bottom;
padding: 0.5em; padding: 0.5em;
box-sizing: border-box; box-sizing: border-box;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} opacity: 0.7;
}
.Stack {
position: relative; .Stack {
display: inline-block; position: relative;
} display: inline-block;
}
.Stack:not(:first-child) {
margin-left: -3em; .Stack:not(:first-child) {
transition: margin-left 1s ease-in-out 0.25s; margin-left: -3em;
} transition: margin-left 1s ease-in-out 0.25s;
}
.Stack > * {
transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s; .Stack > * {
} transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s;
}
.Development:hover,
.Placard:hover, .Development:hover,
.Resource:hover { .Placard:hover,
filter: brightness(150%); .Resource:hover {
} filter: brightness(150%);
}
.Game {
display: inline-flex; .Game {
flex-direction: column; display: inline-flex;
width: 20em; flex-direction: column;
opacity: 0.7; box-sizing: border-box;
z-index: 100; width: 20em;
overflow: hidden; opacity: 0.7;
} z-index: 100;
overflow: hidden;
.Game > *:not(:last-child) { }
margin-bottom: 0.5em;
} .lobby {
width: calc(100vw - 1em);
.Chat { }
padding: 0.5em;
} .Game > *:not(:last-child) {
margin-bottom: 0.5em;
.Chat > * { }
width: 100%;
} .Chat {
padding: 0.5em;
.Chat > :first-child { }
max-height: 30vh;
overflow-y: scroll; .Chat > * {
} width: 100%;
}
.Players {
padding: 0.5em; .Chat > :first-child {
} max-height: 30vh;
overflow-y: scroll;
.PlayerName { }
padding: 0.5em;
} .Players {
padding: 0.5em;
#ChatList { }
scroll-behavior: smooth;
} .PlayerName {
padding: 0.5em;
.Players > * { }
width: 100%;
} #ChatList {
scroll-behavior: smooth;
.Players .nameInput { }
flex-grow: 1;
} .Players > * {
width: 100%;
.Stack > *:not(:first-child) { }
margin-left: -4.5em;
} .Players .nameInput {
flex-grow: 1;
.Hand { }
min-height: calc(7.2em + 0.5em);
} .Stack > *:not(:first-child) {
margin-left: -4.5em;
.Hand:hover .Stack:hover > *:not(:first-child) { }
margin-left: -2em;
} .Hand {
min-height: calc(7.2em + 0.5em);
.Hand:hover .Stack:hover:not(:last-child) > *:last-child { }
margin-right: 3em;
} .Hand:hover .Stack:hover > *:not(:first-child) {
margin-left: -2em;
.Placard { }
position: relative;
width: 9.4em; .Hand:hover .Stack:hover:not(:last-child) > *:last-child {
height: 11.44em; margin-right: 3em;
background-position: center; }
background-repeat: no-repeat;
background-size: cover; .Placard {
margin: 0.25em; position: relative;
display: inline-block; width: 9.4em;
} height: 11.44em;
background-position: center;
.Development { background-repeat: no-repeat;
position: relative; background-size: cover;
display: inline-block; margin: 0.25em;
width: 4.9em; display: inline-block;
height: 7.2em; }
background-position: center;
background-repeat: no-repeat; .Development {
background-size: cover; position: relative;
margin: 0.25em; display: inline-block;
} width: 4.9em;
height: 7.2em;
.Resource { background-position: center;
position: relative; background-repeat: no-repeat;
width: 4.9em; background-size: cover;
height: 7.2em; margin: 0.25em;
display: inline-block; }
background-position: center;
background-repeat: no-repeat; .Resource {
background-size: cover; position: relative;
margin: 0.25em; width: 4.9em;
} height: 7.2em;
display: inline-block;
.Statistics > div:nth-child(2) { background-position: center;
display: flex; background-repeat: no-repeat;
flex-direction: row; background-size: cover;
border: 1px solid black; margin: 0.25em;
} }
.Statistics div:nth-child(2) div { .Statistics > div:nth-child(2) {
padding: 0.25em 0.5em; display: flex;
} flex-direction: row;
border: 1px solid black;
}
.Statistics div:nth-child(2) div {
padding: 0.25em 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}/>

62
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);
} }