Resized trading
Sort players in player list Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
6f8dc0bf75
commit
4fda7afe53
@ -5,7 +5,7 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
margin: 0.25rem 0.25rem 0.25rem 0;
|
||||
margin: 0 0.25rem 0.25rem 0;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
|
||||
@ -113,10 +113,9 @@ body {
|
||||
}
|
||||
|
||||
.Table .Trade {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 25000;
|
||||
transform-origin: right center;
|
||||
transform: scale(0.75);
|
||||
right: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
|
||||
@ -289,7 +289,7 @@ const Table = () => {
|
||||
{ /* <PingPong/> */ }
|
||||
<div className="Table">
|
||||
<Activities/>
|
||||
<Trade/>
|
||||
|
||||
<div className="Game">
|
||||
<div className="Dialogs">
|
||||
{ error && <div className="Dialog ErrorDialog">
|
||||
@ -324,6 +324,7 @@ const Table = () => {
|
||||
</div>
|
||||
<div className="Sidebar">
|
||||
{ name !== "" && <PlayerList/> }
|
||||
<Trade/>
|
||||
{ name !== "" && <Chat/> }
|
||||
{ /* name !== "" && <VideoFeeds/> */ }
|
||||
{ loaded && <Actions {...{buildActive, setBuildActive}}/> }
|
||||
|
||||
@ -83,27 +83,41 @@ const PlayerList = () => {
|
||||
const playerElements = [];
|
||||
|
||||
const inLobby = state === 'lobby';
|
||||
const sortedPlayers = [];
|
||||
|
||||
for (let key in players) {
|
||||
const item = players[key];
|
||||
sortedPlayers.push(players[key]);
|
||||
}
|
||||
sortedPlayers.sort((A, B) => {
|
||||
if (A.color === color) {
|
||||
return -1;
|
||||
}
|
||||
if (B.color === color) {
|
||||
return +1;
|
||||
}
|
||||
return A.name.localeCompare(B.name);
|
||||
});
|
||||
|
||||
sortedPlayers.forEach(item => {
|
||||
const name = item.name;
|
||||
const selectable = inLobby && (item.status === 'Not active' || color === key);
|
||||
const selectable = inLobby && (item.status === 'Not active' || color === item.color);
|
||||
playerElements.push(
|
||||
<div
|
||||
data-selectable={selectable}
|
||||
data-selected={key === color}
|
||||
data-selected={item.color === color}
|
||||
className="PlayerEntry"
|
||||
onClick={() => { inLobby && selectable && toggleSelected(key) }}
|
||||
key={`player-${key}`}>
|
||||
onClick={() => { inLobby && selectable && toggleSelected(item.color) }}
|
||||
key={`player-${item.color}`}>
|
||||
<div>
|
||||
<PlayerColor color={key}/>
|
||||
<PlayerColor color={item.color}/>
|
||||
<div className="Name">{name ? name : 'Available' }</div>
|
||||
{ name && !item.live && <div className="NoNetwork"></div> }
|
||||
</div>
|
||||
{ name && item.live && <MediaControl peer={name} isSelf={key === color}/> }
|
||||
{ name && item.live && <MediaControl peer={name} isSelf={item.color === color}/> }
|
||||
{ !name && <div></div> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const waiting = unselected.map((player) => {
|
||||
return <div className={player === name ? 'Self' : ''} key={player}>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
.Trade {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.Trade > * {
|
||||
max-height: calc(100vh - 2rem);
|
||||
overflow: auto;
|
||||
width: 32rem;
|
||||
width: 32em;
|
||||
display: inline-flex;
|
||||
padding: 0.5rem;
|
||||
padding: 0.5em;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
.Trade .PlayerList {
|
||||
padding: 0.5rem;
|
||||
padding: 0.5em;
|
||||
background-color:rgba(224, 224, 224);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
@ -31,20 +31,20 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 3.75rem; /* 5x7 aspect ratio */
|
||||
height: 3.75rem;
|
||||
min-width: 3.75rem; /* 5x7 aspect ratio */
|
||||
min-height: 3.75rem;
|
||||
margin: 0 0.125rem;
|
||||
width: 3.75em; /* 5x7 aspect ratio */
|
||||
height: 3.75em;
|
||||
min-width: 3.75em; /* 5x7 aspect ratio */
|
||||
min-height: 3.75em;
|
||||
margin: 0 0.5em;
|
||||
background-size: 130%;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 0.25rem;
|
||||
margin: 0.75rem;
|
||||
border-radius: 0.25em;
|
||||
|
||||
}
|
||||
|
||||
.Trade b {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-left: 0.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.Trade .Direction {
|
||||
@ -52,9 +52,9 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
line-height: 2rem;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.Trade .Resource:hover {
|
||||
@ -72,31 +72,31 @@
|
||||
.Trade .Resource > div.Right {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: -0.75rem;
|
||||
right: -0.75rem;
|
||||
top: -0.75em;
|
||||
right: -0.75em;
|
||||
border-radius: 50%;
|
||||
border: 1px solid white;
|
||||
background-color: rgb(36, 148, 46);
|
||||
font-size: 1rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.Trade .Resource > div.Left {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
left: -0.75rem;
|
||||
bottom: -0.75em;
|
||||
left: -0.75em;
|
||||
border-radius: 50%;
|
||||
border: 1px solid white;
|
||||
background-color: #444;
|
||||
font-size: 1rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: 1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
text-align: center;
|
||||
line-height: 1.5rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.Trade .Resource.None {
|
||||
@ -105,8 +105,8 @@
|
||||
|
||||
.Trade .PlayerColor {
|
||||
align-self: flex-start;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
margin: 1rem 0.25rem 0 0;
|
||||
}
|
||||
|
||||
@ -131,34 +131,37 @@
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0.5rem;
|
||||
min-width: 3rem;
|
||||
font-size: 1em;
|
||||
margin: 0 0.5em;
|
||||
min-width: 3em;
|
||||
}
|
||||
|
||||
.Trade .OfferButton {
|
||||
margin: 0 0 0.75em 0;
|
||||
}
|
||||
|
||||
.Trade .Transfers .GiveGet div:nth-child(1) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: -0.5em;
|
||||
border: 1px solid #888;
|
||||
background-color: rgb(36, 148, 46);
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
min-width: 2.5rem;
|
||||
border-radius: 0.25em;
|
||||
min-width: 2.5em;
|
||||
text-align: center;
|
||||
padding: 0.25rem;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.Trade .Transfers .GiveGet div:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 7.5rem;
|
||||
top: 5.5em;
|
||||
border: 1px solid #888;
|
||||
background-color: rgb(36, 148, 46);
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
min-width: 2.5rem;
|
||||
border-radius: 0.25em;
|
||||
min-width: 2.5em;
|
||||
text-align: center;
|
||||
padding: 0.25rem;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.Trade .Transfers .GiveGet div:last-child {
|
||||
@ -166,10 +169,10 @@
|
||||
border: 1px solid #888;
|
||||
background-color: #444;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
bottom: 0.125rem;
|
||||
font-size: 1em;
|
||||
border-radius: 0.25em;
|
||||
padding: 0.25em;
|
||||
bottom: 0.125em;
|
||||
}
|
||||
|
||||
.Trade .TradeLine {
|
||||
@ -192,27 +195,27 @@
|
||||
.Trade .TradeText > span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 0.25rem;
|
||||
margin-right: 0.25em;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.Trade .TradeText > span:first-of-type {
|
||||
min-height: 3.5rem;
|
||||
min-height: 3.5em;
|
||||
}
|
||||
|
||||
.Trade .TradeLine .Resource {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
min-width: 1.5rem;
|
||||
min-height: 1.5rem;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
min-width: 1.5em;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
.Trade .TradeLine .Resource > div {
|
||||
font-size: 0.75rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: 0.75em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.Trade .TradeLine .TradeActions {
|
||||
@ -222,5 +225,6 @@
|
||||
}
|
||||
|
||||
.Trade .TradeLine .TradeActions > * {
|
||||
margin-left: 0.5rem;
|
||||
margin-left: 0.5em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
@ -524,7 +524,7 @@ const Trade = () => {
|
||||
{ tradeElements }
|
||||
</div>
|
||||
{ priv.resources === 0 && <b>You have no resources to participate in this trade.</b> }
|
||||
<Button disabled={isOfferSubmitted || !isOfferValid}
|
||||
<Button className="OfferButton" disabled={isOfferSubmitted || !isOfferValid}
|
||||
onClick={offerClicked}>Offer</Button>
|
||||
|
||||
{ priv.resources !== 0 &&
|
||||
@ -533,7 +533,7 @@ const Trade = () => {
|
||||
{ transfers }
|
||||
</div>
|
||||
}
|
||||
{ isTurn && <Button onClick={cancelClicked}>cancel</Button> }
|
||||
{ isTurn && <Button className="CancelButton"onClick={cancelClicked}>cancel</Button> }
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user