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

Continued shrinking real estate to fit more on phones

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-31 16:52:46 -08:00
parent 01a1c215e8
commit c3e15b986b
2 changed files with 90 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/Board.css
View File

@ -71,7 +71,8 @@
width: 40vw; width: 40vw;
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow: hidden;
min-width: 20em; min-width: 100vw;
max-width: 40vw;
z-index: 100; z-index: 100;
padding: 0.5em; padding: 0.5em;
opacity: 0.7; opacity: 0.7;
@ -87,7 +88,7 @@
} }
.lobby { .lobby {
width: calc(100vw - 1em); width: 100vw;
} }
.Chat { .Chat {
@ -102,10 +103,11 @@
min-height: 0; min-height: 0;
} }
.Chat #ChatList { #ChatList {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
scroll-behavior: smooth; scroll-behavior: smooth;
align-items: flex-start;
} }
#ChatList .MuiListItem-gutters { #ChatList .MuiListItem-gutters {
@ -129,7 +131,8 @@
#ChatList .PlayerColor { #ChatList .PlayerColor {
width: 1em; width: 1em;
height: 1em; height: 1em;
padding: 0px; padding: 0;
margin-top: 4px;
} }
.Players { .Players {
@ -137,22 +140,44 @@
user-select: none; user-select: none;
} }
.PlayerSelector .PlayerColor {
width: 1em;
height: 1em;
}
.PlayerSelector { .PlayerSelector {
display: flex; display: inline-flex;
flex-wrap: wrap;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.PlayerSelector.MuiList-padding {
padding: 0;
}
.PlayerSelector .PlayerEntry { .PlayerSelector .PlayerEntry {
flex: 1 1 0px;
align-items: center; align-items: center;
display: flex; display: inline-flex;
flex-direction: row; flex-direction: row;
width: 50%; min-width: 10em;
}
.PlayerSelector .MuiTypography-body1 {
font-size: 0.8rem;
white-space: nowrap;
}
.PlayerSelector .MuiTypography-body2 {
font-size: 0.7rem;
white-space: nowrap;
} }
.Players .PlayerEntry { .Players .PlayerEntry {
border: 1px solid rgba(0,0,0,0); border: 1px solid rgba(0,0,0,0);
border-radius: 0.5em; border-radius: 0.5em;
min-width: 10em;
} }
.Players .PlayerEntry[data-selectable=true]:hover { .Players .PlayerEntry[data-selectable=true]:hover {
@ -258,6 +283,8 @@ button {
text-align: left; text-align: left;
font-size: 12pt; font-size: 12pt;
padding: 1em; padding: 1em;
margin: 1em;
z-index: 10000;
} }
.Message { .Message {
@ -266,7 +293,7 @@ button {
background-color: rgba(224, 224, 224); background-color: rgba(224, 224, 224);
text-align: left; text-align: left;
font-size: 12pt; font-size: 12pt;
padding: 1em; padding: 0.5em;
user-select: none; user-select: none;
} }

105
client/src/Board.js
View File

@ -9,7 +9,7 @@ import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import { deepOrange, lightBlue, red, grey } from '@material-ui/core/colors'; import { orange, deepOrange, lightBlue, red, grey } from '@material-ui/core/colors';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar';
import Moment from 'react-moment'; import Moment from 'react-moment';
//import moment from 'moment'; //import moment from 'moment';
@ -57,8 +57,8 @@ const useStyles = makeStyles((theme) => ({
backgroundColor: red[500], backgroundColor: red[500],
}, },
O: { O: {
color: theme.palette.getContrastText(deepOrange[500]), color: theme.palette.getContrastText(orange[500]),
backgroundColor: deepOrange[500], backgroundColor: orange[500],
}, },
W: { W: {
color: theme.palette.getContrastText(grey[500]), color: theme.palette.getContrastText(grey[500]),
@ -73,7 +73,7 @@ const useStyles = makeStyles((theme) => ({
const PlayerColor = ({ color }) => { const PlayerColor = ({ color }) => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<Avatar className={['PlayerColor', classes[color]]}/> <Avatar className={['PlayerColor', classes[color]].join(' ')}/>
); );
}; };
@ -425,13 +425,14 @@ const getPlayerName = (sessions, color) => {
* player's active item in the game */ * player's active item in the game */
const Players = ({ board }) => { const Players = ({ board }) => {
const toggleSelected = (key) => { const toggleSelected = (key) => {
console.log('toggle');
board.setSelected(board.game.color === key ? "" : key); board.setSelected(board.game.color === key ? "" : key);
} }
const players = []; const players = [];
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], inLobby = board.game.state === 'lobby';
if (board.game.state !== "lobby" && item.status === 'Not active') { if (!inLobby && item.status === 'Not active') {
continue; continue;
} }
const name = getPlayerName(board.game.sessions, color), const name = getPlayerName(board.game.sessions, color),
@ -442,15 +443,16 @@ const Players = ({ board }) => {
data-selectable={selectable} data-selectable={selectable}
data-selected={board.game.color === color} data-selected={board.game.color === color}
className="PlayerEntry" className="PlayerEntry"
onClick={() => { inLobby && selectable && toggleSelected(color) }}
key={`player-${color}`}> key={`player-${color}`}>
<PlayerColor onClick={() => { selectable && toggleSelected(color) }} color={color}/> <PlayerColor color={color}/>
<ListItemText onClick={() => { selectable && toggleSelected(color) }}primary={toggleText} secondary={( <ListItemText primary={toggleText} secondary={(
<> <>
{ item.status + ' ' } { item.status + ' ' }
{ item.status !== 'Not active' && <Moment fromNow date={item.lastActive > Date.now() ? Date.now() : item.lastActive}/>} { item.status !== 'Not active' && <Moment fromNow date={item.lastActive > Date.now() ? Date.now() : item.lastActive}/>}
</>)} /> </>)} />
{ board.game.state !== 'lobby' && board.game.color === color && { !inLobby && board.game.color === color &&
<Button onClick={() => toggleSelected(color)}>exit to lobby</Button> <Button onClick={() => toggleSelected(color)}>Quit</Button>
} }
</div> </div>
)); ));
@ -1487,54 +1489,55 @@ class Board extends React.Component {
<Chat board={this} promoteGameState={this.promoteGameState}/> <Chat board={this} promoteGameState={this.promoteGameState}/>
<Action board={this}/> <Action board={this}/>
</> } </> }
{ this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
</div> } </div> }
<div className="Cards" ref={el => this.cards = el}> <div className="Cards" ref={el => this.cards = el}>
{ { game && game.state === "active" && <>
game && game.state === "active" && <div>In hand</div>
<> <div className="Hand">
<div>In hand</div> <Resource type="wood" count={this.state.wood}/>
<div className="Hand"> <Resource type="wheat" count={this.state.wheat}/>
<Resource type="wood" count={this.state.wood}/> <Resource type="stone" count={this.state.stone}/>
<Resource type="wheat" count={this.state.wheat}/> <Resource type="brick" count={this.state.brick}/>
<Resource type="stone" count={this.state.stone}/> <Resource type="sheep" count={this.state.sheep}/>
<Resource type="brick" count={this.state.brick}/>
<Resource type="sheep" count={this.state.sheep}/>
</div>
<div>Available to play</div>
<div className="Hand">
<Development type="monopoly" count="1"/>
<Development type="army-" max="14" count="4"/>
<div className="Stack">
<Development type="vp-library" count="1"/>
<Development type="vp-market" count="1"/>
</div> </div>
</div> <div>Available to play</div>
<div>Points</div> <div className="Hand">
<div className="Hand"> <Development type="monopoly" count="1"/>
<div className="Stack"> <Development type="army-" max="14" count="4"/>
<Development type="vp-library" count="1"/> <div className="Stack">
<Development type="vp-palace" count="1"/> <Development type="vp-library" count="1"/>
<Development type="army-" max="14" count="6"/> <Development type="vp-market" count="1"/>
</div>
</div> </div>
</div> <div>Points</div>
<div className="Hand"> <div className="Hand">
<Placard type="largest-army" count="1"/> <div className="Stack">
<Placard type="longest-road" count="1"/> <Development type="vp-library" count="1"/>
</div> <Development type="vp-palace" count="1"/>
<div className="Statistics"> <Development type="army-" max="14" count="6"/>
<div>Stats</div> </div>
<div> </div>
<div>Points: 7</div> <div className="Hand">
<div>Cards: {this.state.total} </div> <Placard type="largest-army" count="1"/>
<div>Roads remaining: 4</div> <Placard type="longest-road" count="1"/>
<div>Longest road: 7</div> </div>
<div>Cities remaining: 4</div> <div className="Statistics">
<div>Settlements remaining: 5</div> <div>Stats</div>
<div>
<div>Points: 7</div>
<div>Cards: {this.state.total} </div>
<div>Roads remaining: 4</div>
<div>Longest road: 7</div>
<div>Cities remaining: 4</div>
<div>Settlements remaining: 5</div>
</div>
</div> </div>
</div>
</> } </> }
</div> </div>
{ this.state.error && <Paper className="Error"><div>{this.state.error}</div></Paper> }
</div> </div>
); );
} }