Resizes lobby background
Fix empty name usage Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
32aedaa6ca
commit
302826b5e5
@ -1,148 +1,154 @@
|
||||
.Board {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Display {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.Cards {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
padding: 0.5em;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.Stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Stack:not(:first-child) {
|
||||
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;
|
||||
}
|
||||
|
||||
.Development:hover,
|
||||
.Placard:hover,
|
||||
.Resource:hover {
|
||||
filter: brightness(150%);
|
||||
}
|
||||
|
||||
.Game {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
width: 20em;
|
||||
opacity: 0.7;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Game > *:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.Chat {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.Chat > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Chat > :first-child {
|
||||
max-height: 30vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.Players {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.PlayerName {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#ChatList {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.Players > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Players .nameInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Stack > *:not(:first-child) {
|
||||
margin-left: -4.5em;
|
||||
}
|
||||
|
||||
.Hand {
|
||||
min-height: calc(7.2em + 0.5em);
|
||||
}
|
||||
|
||||
.Hand:hover .Stack:hover > *:not(:first-child) {
|
||||
margin-left: -2em;
|
||||
}
|
||||
|
||||
.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
|
||||
margin-right: 3em;
|
||||
}
|
||||
|
||||
.Placard {
|
||||
position: relative;
|
||||
width: 9.4em;
|
||||
height: 11.44em;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0.25em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Development {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 4.9em;
|
||||
height: 7.2em;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.Resource {
|
||||
position: relative;
|
||||
width: 4.9em;
|
||||
height: 7.2em;
|
||||
display: inline-block;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.Statistics > div:nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.Statistics div:nth-child(2) div {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
.Board {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Display {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.Cards {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
padding: 0.5em;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.Stack {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Stack:not(:first-child) {
|
||||
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;
|
||||
}
|
||||
|
||||
.Development:hover,
|
||||
.Placard:hover,
|
||||
.Resource:hover {
|
||||
filter: brightness(150%);
|
||||
}
|
||||
|
||||
.Game {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
width: 20em;
|
||||
opacity: 0.7;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lobby {
|
||||
width: calc(100vw - 1em);
|
||||
}
|
||||
|
||||
.Game > *:not(:last-child) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.Chat {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.Chat > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Chat > :first-child {
|
||||
max-height: 30vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.Players {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.PlayerName {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
#ChatList {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.Players > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.Players .nameInput {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Stack > *:not(:first-child) {
|
||||
margin-left: -4.5em;
|
||||
}
|
||||
|
||||
.Hand {
|
||||
min-height: calc(7.2em + 0.5em);
|
||||
}
|
||||
|
||||
.Hand:hover .Stack:hover > *:not(:first-child) {
|
||||
margin-left: -2em;
|
||||
}
|
||||
|
||||
.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
|
||||
margin-right: 3em;
|
||||
}
|
||||
|
||||
.Placard {
|
||||
position: relative;
|
||||
width: 9.4em;
|
||||
height: 11.44em;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0.25em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.Development {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 4.9em;
|
||||
height: 7.2em;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.Resource {
|
||||
position: relative;
|
||||
width: 4.9em;
|
||||
height: 7.2em;
|
||||
display: inline-block;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.Statistics > div:nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.Statistics div:nth-child(2) div {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
@ -209,7 +209,9 @@ const Chat = ({ board, promoteGameState }) => {
|
||||
console.log(`Send: ${event.target.value}`);
|
||||
promoteGameState({
|
||||
chat: {
|
||||
player: board.game.activePlayer ? board.game.activePlayer : undefined,
|
||||
player: board.game.activePlayer ?
|
||||
board.game.activePlayer :
|
||||
undefined,
|
||||
message: event.target.value
|
||||
}
|
||||
});
|
||||
@ -290,7 +292,7 @@ const PlayerName = ({board}) => {
|
||||
const nameKeyPress = (event) => {
|
||||
if (event.key === "Enter") {
|
||||
console.log(`Send: ${name}`);
|
||||
if (name && name != board.game.activePlayerName) {
|
||||
if (name != board.game.activePlayerName) {
|
||||
board.setPlayerName(name);
|
||||
}
|
||||
}
|
||||
@ -313,14 +315,9 @@ const PlayerName = ({board}) => {
|
||||
/* This needs to take in a mechanism to declare the
|
||||
* player's active item in the game */
|
||||
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) => {
|
||||
if (selected === key) {
|
||||
setSelected("");
|
||||
} else {
|
||||
setSelected(key);
|
||||
}
|
||||
board.setSelected(selected === key ? "" : key);
|
||||
}
|
||||
|
||||
@ -452,12 +449,16 @@ class Board extends React.Component {
|
||||
return res.json();
|
||||
}).then((game) => {
|
||||
let message;
|
||||
if (key) {
|
||||
message = `Player selected ${key}!`;
|
||||
if (game.status == 'success') {
|
||||
if (key) {
|
||||
message = `Player selected ${key}!`;
|
||||
} else {
|
||||
message = `Player deselected ${game.activePlayer}!`;
|
||||
}
|
||||
} else {
|
||||
message = `Player deselected ${game.activePlayer}!`;
|
||||
message = game.status;
|
||||
}
|
||||
console.log (message);
|
||||
|
||||
this.updateGame(game);
|
||||
this.setState({ game: game, message: message });
|
||||
}).catch((error) => {
|
||||
@ -488,9 +489,18 @@ class Board extends React.Component {
|
||||
}
|
||||
return res.json();
|
||||
}).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.setState({ game: game, message: `Player name set to ${name}!`});
|
||||
this.setState({ game: game, message: message});
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
this.setState({message: error.message});
|
||||
@ -587,7 +597,7 @@ class Board extends React.Component {
|
||||
}).then((res) => {
|
||||
if (res.status >= 400) {
|
||||
console.log(res);
|
||||
throw new Error(`Unable to load state`);
|
||||
throw new Error(`Unable to load game`);
|
||||
}
|
||||
return res.json();
|
||||
}).then((game) => {
|
||||
@ -1312,7 +1322,7 @@ class Board extends React.Component {
|
||||
<canvas className="Display" ref={el => this.canvas = el}></canvas>
|
||||
<div className="Cards" ref={el => this.cards = el}>
|
||||
{ game &&
|
||||
<div className="Game">
|
||||
<div className={'Game ' + game.state}>
|
||||
{game.activePlayer === "" && <PlayerName board={this}/> }
|
||||
<Players board={this} promoteGameState={this.promoteGameState}/>
|
||||
<Chat board={this} promoteGameState={this.promoteGameState}/>
|
||||
|
||||
@ -147,7 +147,12 @@ const loadGame = async (id) => {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
games[id] = JSON.parse(game);
|
||||
try {
|
||||
games[id] = JSON.parse(game);
|
||||
} catch (error) {
|
||||
console.error(error, game);
|
||||
return null;
|
||||
}
|
||||
|
||||
return games[id];
|
||||
};
|
||||
@ -172,6 +177,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
||||
if (req.headers['private-token'] !== req.app.get('admin')) {
|
||||
error = `Invalid admin credentials.`;
|
||||
}
|
||||
|
||||
switch (action) {
|
||||
case "kick":
|
||||
error = `Unable to find player ${value}`
|
||||
@ -179,7 +185,10 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
||||
player = game.players[color];
|
||||
if (player.name.toLowerCase() === value.toLowerCase()) {
|
||||
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.name = '';
|
||||
player.status = 'Not active';
|
||||
@ -195,25 +204,31 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
||||
}
|
||||
|
||||
if (action == "player-name") {
|
||||
const name = req.params.value;
|
||||
if (!name) {
|
||||
error = `No name provided`;
|
||||
const name = value ? value : "";
|
||||
if (color) {
|
||||
error = `You cannot change your name while you are in game.`;
|
||||
} else {
|
||||
if (color) {
|
||||
error = `You cannot change your name while you are in game.`;
|
||||
} else {
|
||||
if (game) for (let key in game.players) {
|
||||
if (game.players[key].name.toLowerCase() === name.toLowerCase()) {
|
||||
error = `${name} is already taken by ${key}`;
|
||||
}
|
||||
if (game) for (let key in game.players) {
|
||||
player = game.players[key];
|
||||
if (player.name && player.name.toLowerCase() === name.toLowerCase()) {
|
||||
error = `${name} is already taken by ${key}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
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);
|
||||
@ -228,7 +243,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
||||
const selected = req.params.value,
|
||||
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 */
|
||||
for (let key in game.players) {
|
||||
@ -239,14 +254,17 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
||||
player.name = '';
|
||||
player.status = 'Not active';
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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.`;
|
||||
}
|
||||
|
||||
@ -281,13 +299,17 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
||||
player.status = `Active`;
|
||||
player.lastActive = Date.now();
|
||||
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);
|
||||
}
|
||||
|
||||
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}`;
|
||||
return sendGame(res, req, game, error);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user