front: gp: better listItems

- show opponent stone and my stone in actial colors
This commit is contained in:
djmil 2023-10-14 20:12:31 +02:00
parent b3d7ab3e75
commit fdf227bf19
2 changed files with 32 additions and 3 deletions

View File

@ -19,6 +19,10 @@
color: gray;
}
.GameProposal .li p i {
font-size: 70%;
}
.GameProposal .li button.action {
display: none;
}
@ -32,7 +36,12 @@
/* height: 20px; */
border-bottom: 1px dotted black;
text-align: center;
font-size: 8px;
font-size: 50%;
padding-left: 50%;
margin-bottom: 7px;
}
.stone {
font-size: 160%;
vertical-align: -3px;
}

View File

@ -20,7 +20,7 @@ const GameProposal = ({games}) => {
.map(game => {
return <div class="li" key={game.uuid}>
<p>
from {game.opponentName}, opponentColor {game.opponentColor}
You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
<br/>
<q>{game.message}</q>
<br/>
@ -35,7 +35,7 @@ const GameProposal = ({games}) => {
.map(game => {
return <div class="li" key={game.uuid}>
<p>
to {game.opponentName}, opponentColor {game.opponentColor}
You {Stone(game.myColor)} <i>vs</i> {game.opponentName} {Stone(oppositeColor(game.myColor))}
<br/>
<q>{game.message}</q>
<br/>
@ -55,4 +55,24 @@ const GameProposal = ({games}) => {
</div>
};
function Stone(color) {
if (color === "WHITE")
return <span class="stone"></span>
if (color === "BLACK")
return <span class="stone"></span>
return <span class="stone">{color}</span>
}
function oppositeColor(color) {
if (color === "WHITE")
return "BLACK"
if (color === "BLACK")
return "WHITE"
return color
}
export default GameProposal;