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

Add "key" to trade window

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-03-06 17:35:29 -08:00
parent 1e3d086b57
commit 1a334721a4
2 changed files with 54 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
client/src/Trade.css
View File

@ -120,15 +120,55 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-items: flex-start; justify-items: flex-start;
margin: 0.25rem 0;
} }
.Trade .Transfers .GiveGet { .Trade .Transfers .GiveGet {
display: flex; display: flex;
position: relative;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
font-size: 1.5rem; font-size: 1.25rem;
margin: 0 0.5rem;
min-width: 3rem;
}
.Trade .Transfers .GiveGet div:nth-child(1) {
position: absolute;
top: 0;
border: 1px solid white;
background-color: rgb(36, 148, 46);
color: white;
border-radius: 0.25rem;
min-width: 2.5rem;
text-align: center;
padding: 0.25rem;
}
.Trade .Transfers .GiveGet div:nth-child(2) {
position: absolute;
top: 7.5rem;
border: 1px solid white;
background-color: rgb(36, 148, 46);
color: white;
border-radius: 0.25rem;
min-width: 2.5rem;
text-align: center;
padding: 0.25rem;
}
.Trade .Transfers .GiveGet div:last-child {
position: absolute;
border: 1px solid #f0f0f0;
background-color: #444;
color: white;
font-size: 1rem;
border-radius: 0.25rem;
padding: 0.25rem;
bottom: 0.125rem;
} }
.Trade .TradeLine { .Trade .TradeLine {

22
client/src/Trade.js
View File

@ -338,14 +338,18 @@ const Trade = ({table}) => {
} else { } else {
source = item; source = item;
} }
const _gets = source.gets.length ? source.gets.map((get, index) => <> const _gets = source.gets.length ? source.gets.map((get, index) => {
{ get.type === 'bank' && <span key={`get-bank-${index}`}><b>4</b> of any resource </span>} if (get.type === 'bank') {
{ get.type !== 'bank' && <Resource key={`get-${get.type}-${index}`} disabled label type={get.type} count={get.count}/> } return <span key={`get-bank-${index}`}><b>4</b> of any resource </span>;
</>) : 'nothing', }
_gives = source.gives.length ? source.gives.map((give, index) => <> return <Resource key={`get-${get.type}-${index}`} disabled label type={get.type} count={get.count}/>;
{ give.type === '*' && <span key={`give-bank-${index}`}><b>1</b> of any resource </span>} }) : 'nothing';
{ give.type !== '*' && <Resource key={`give-${give.type}-${index}`} disabled label type={give.type} count={give.count}/> } const _gives = source.gives.length ? source.gives.map((give, index) => {
</>) : 'nothing'; if (give.type === '*') {
return <span key={`give-bank-${index}`}><b>1</b> of any resource </span>;
}
return <Resource key={`give-${give.type}-${index}`} disabled label type={give.type} count={give.count}/>;
}) : 'nothing';
return ( return (
<div className="TradeLine" key={`player-${item.name}-${index}`}> <div className="TradeLine" key={`player-${item.name}-${index}`}>
@ -441,7 +445,7 @@ const Trade = ({table}) => {
{ player.haveResources && { player.haveResources &&
<div className="Transfers"> <div className="Transfers">
<div className="GiveGet"><div>Give</div><div>Get</div></div> <div className="GiveGet"><div>Give</div><div>Get</div><div>Have</div></div>
{ transfers } { transfers }
</div> </div>
} }