Add selection description
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
parent
a578132874
commit
81082ff460
@ -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;
|
||||
|
@ -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>
|
||||
));
|
||||
|
Loading…
x
Reference in New Issue
Block a user