front: gp: better listItems

- show opponent stone and my stone in actial colors

webapp/src/GameProposal.css

@@ -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;
+}

webapp/src/GameProposal.js

@@ -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;