1
0

Add selection description

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-01-30 16:17:41 -08:00
parent a578132874
commit 81082ff460
2 changed files with 28 additions and 3 deletions

View File

@ -13,8 +13,7 @@
}
.PlayerColor {
position: relative;
top: -0.25em;
display: inline-flex;
justify-content: center;
align-items: center;
width: 1em;
@ -24,6 +23,7 @@
border-radius: 0.625em;
border-width: 1px;
border-style: solid;
text-align: center;
}
.PlayerColor > div {
@ -123,6 +123,13 @@
cursor: pointer;
}
.Players .PlayerToggle {
min-width: 5em;
display: inline-flex;
align-items: end;
flex-direction: column;
}
.PlayerName {
padding: 0.5em;
}
@ -226,6 +233,11 @@ button {
display: inline-flex;
}
.Message .PlayerColor {
position: relative;
top: -0.25em;
}
.PlayerName {
display: flex;
align-items: center;

View File

@ -447,6 +447,16 @@ const Players = ({ board }) => {
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;
let toggleText;
if (selectable) {
if (board.game.state !== 'lobby') {
toggleText = 'Exit to lobby.';
} else {
toggleText = item.status === 'Not active'
? <span>Play as <PlayerColor color={color}/>{board.game.color ? ' instead' : ''}.</span>
: <span>Stop playing as <PlayerColor color={color}/>.</span>;
}
}
players.push((
<ListItem
data-selectable={selectable}
@ -460,7 +470,10 @@ const Players = ({ board }) => {
{ item.status !== 'Not active' && <Moment fromNow date={item.lastActive}/>}
</>)} />
{ selectable &&
<Switch edge="end" checked={board.game.color === color}/>
<div className='PlayerToggle'>
<Switch edge="end" checked={board.game.color === color}/>
{toggleText}
</div>
}
</ListItem>
));