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

Fixed chat to fill space then scroll

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-30 14:58:16 -08:00
parent 36677dc22c
commit e8f26a977a
3 changed files with 84 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/Board.css
View File

@ -1,9 +1,10 @@
.Board {
display: inline-block;
display: flex;
position: absolute;
width: 100%;
overflow: hidden;
height: 100%;
justify-content: right;
}
.Display {
@ -67,45 +68,64 @@
display: inline-flex;
flex-direction: column;
box-sizing: border-box;
width: 20em;
opacity: 0.7;
z-index: 100;
width: 40vw;
max-height: 100vh;
overflow: hidden;
min-width: 20em;
z-index: 100;
padding: 0.5em;
}
.lobby {
width: calc(100vw - 1em);
.Game > * {
/* for Firefox */
min-height: 0;
}
.Game > *:not(:last-child) {
margin-bottom: 0.5em;
}
.lobby {
width: calc(100vw - 1em);
}
.Chat {
display: flex;
flex-direction: column;
flex: 1;
padding: 0.5em;
}
.Chat > * {
width: 100%;
/* for Firefox */
min-height: 0;
}
.Chat > :first-child {
max-height: 30vh;
overflow-y: scroll;
.Chat #ChatList {
flex: 1;
overflow: auto;
scroll-behavior: smooth;
}
.Players {
padding: 0.5em;
user-select: none;
}
.Players .PlayerSelector {
border: 1px solid rgba(0,0,0,0);
border-radius: 0.5em;
}
.Players .PlayerSelector[data-selectable=true]:hover {
border-color: rgba(0,0,0,0.5);
cursor: pointer;
}
.PlayerName {
padding: 0.5em;
}
#ChatList {
scroll-behavior: smooth;
}
.Players > * {
width: 100%;
}
@ -166,13 +186,15 @@
.Action {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-evenly;
background-color: rgba(16, 16, 16, 0.25);
padding: 0.25em;
}
.Action Button {
button {
margin: 0.25em;
background-color: white;
border: 1px solid black !important;
}
.Error {
@ -191,12 +213,12 @@
.Message {
display: inline;
align-items: left;
justify-content: left;
background-color: rgba(224, 224, 224);
text-align: left;
font-size: 12pt;
padding: 1em;
user-select: none;
}
.Message div {

65
client/src/Board.js
View File

@ -315,13 +315,19 @@ const Chat = ({ board, promoteGameState }) => {
);
}
const Action = ({ board }) => {
const StartButton = ({ board }) => {
const startClick = (event) => {
board.setGameState("game-order").then((state) => {
board.game.state = state;
});
};
return (
<Button disabled={!board.game.color || board.game.active < 2} onClick={startClick}>Start game</Button>
);
};
const Action = ({ board }) => {
const newBoardClick = (event) => {
return board.shuffleBoard();
};
@ -336,7 +342,7 @@ const Action = ({ board }) => {
return (
<Paper className="Action">
{ board.game.state === 'lobby' && <>
<Button disabled={!board.game.color || board.game.active < 2} onClick={startClick}>Start game</Button>
<StartButton board={board}/>
<Button disabled={!board.game.color} onClick={newBoardClick}>New board</Button>
<Button disabled={board.game.color ? true : false} onClick={() => {board.setState({ pickName: true})}}>Change name</Button> </> }
{ board.game.state === 'game-order' &&
@ -410,10 +416,13 @@ const Players = ({ board }) => {
if (board.game.state !== "lobby" && item.status === 'Not active') {
continue;
}
const name = getPlayerName(board.game.sessions, color);
const name = getPlayerName(board.game.sessions, color),
selectable = item.status === 'Not active' || board.game.color === color;
item.lastActive = item.lastActive > Date.now() ? Date.now() : item.lastActive;
players.push((
<ListItem key={`player-${color}`}>
<ListItem
data-selectable={selectable}
onClick={() => { selectable && toggleSelected(color) }} className="PlayerSelector" key={`player-${color}`}>
<ListItemAvatar>
<Avatar className={classes[color]}>{color}</Avatar>
</ListItemAvatar>
@ -422,10 +431,8 @@ const Players = ({ board }) => {
{ item.status + ' ' }
{ item.status !== 'Not active' && <Moment fromNow date={item.lastActive}/>}
</>)} />
{ (item.status === 'Not active' || board.game.color === color) &&
<Switch edge="end"
checked={board.game.color === color}
onChange={() => toggleSelected(color)}/>
{ selectable &&
<Switch edge="end" checked={board.game.color === color}/>
}
</ListItem>
));
@ -1313,12 +1320,7 @@ class Board extends React.Component {
const player = (this.game && this.game.color) ? this.game.players[this.game.color] : undefined,
name = this.game ? this.game.name : "";
let message = [],
key = 0;
const color = 'B';
message=<></>;
//message=<>{message}<i>itallic</i></>;
// this.setState({ message: message})
let message = <></>;
if (this.state.pickName || !name) {
message = <>{message}Enter the name you would like to be known by, then press&nbsp;<b>ENTER</b>&nbsp;or select &nbsp;<b>SET</b>.</>;
} else {
@ -1332,9 +1334,9 @@ class Board extends React.Component {
}
message = <>{message}You can chat with other players below.</>;
if (this.game.active < 2) {
message = <>{message}Once there are two or more players, you can select&nbsp;<b>START GAME</b>.</>;
message = <>{message}Once there are two or more players, you can select <StartButton board={this}/>.</>;
} else {
message = <>{message}There are enough players to start the game. Select&nbsp;<b>START GAME</b>&nbsp;when ready.</>;
message = <>{message}There are enough players to start the game. Select <StartButton board={this}/> when ready.</>;
}
break;
case 'game-order':
@ -1465,24 +1467,21 @@ class Board extends React.Component {
return (
<div className="Board" ref={el => this.el = el}>
<canvas className="Display" ref={el => this.canvas = el}></canvas>
<div className="Cards" ref={el => this.cards = el}>
{ game &&
<div className={'Game ' + game.state}>
<Paper className="Message">{ this.state.message }</Paper>
{(this.state.pickName || !this.game.name) && <PlayerName board={this}/> }
{(!this.state.pickName && this.game.name) &&
<>
<Players board={this} promoteGameState={this.promoteGameState}/>
<Chat board={this} promoteGameState={this.promoteGameState}/>
<Action board={this}/>
</>
}
{ this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
</div>
}
{
{ game && <div className={'Game ' + game.state}>
<Paper className="Message">{ this.state.message }</Paper>
{(this.state.pickName || !this.game.name) && <PlayerName board={this}/> }
{(!this.state.pickName && this.game.name) && <>
<Players board={this} promoteGameState={this.promoteGameState}/>
<Chat board={this} promoteGameState={this.promoteGameState}/>
<Action board={this}/>
</> }
{ this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
</div> }
<div className="Cards" ref={el => this.cards = el}>
{
game && game.state === "active" &&
<>
<>
<div>In hand</div>
<div className="Hand">
<Resource type="wood" count={this.state.wood}/>

20
server/routes/games.js
View File

@ -97,34 +97,40 @@ for (let i = 0; i < 5; i++) {
const games = {};
const roll = (game, session) => {
let message;
let message, error;
const player = session.player,
name = session.name ? session.name : "Unnamed";
switch (game.state) {
case "lobby":
return `Rolling dice in the lobby is not allowed!`;
error = `Rolling dice in the lobby is not allowed!`;
case "game-order":
if (player.order) {
return `Player ${name} already rolled for order.`;
error = `Player ${name} already rolled for order.`;
break;
}
game.dice = [ Math.ceil(Math.random() * 6) ];
player.order = game.dice[0];
message = `${name} rolled ${game.dice[0]} for play order.`;
game.chat.push({ date: Date.now(), message: message });
break;
case "active":
game.dice = [ Math.ceil(Math.random() * 6), Math.ceil(Math.random() * 6) ];
message = `${name} rolled ${game.dice[0] + game.dice[1]}.`;
game.chat.push({ date: Date.now(), message: message });
return;
break;
default:
return `Invalid game state (${game.state}) in roll.`;
error = `Invalid game state (${game.state}) in roll.`;
break;
}
if (!error && message) {
game.chat.push({ from: session.color, date: Date.now(), message: message });
}
return error;
};
const getPlayer = (game, color) => {