From fdf227bf194569709bed094f8481a8869621d4cc Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Sat, 14 Oct 2023 20:12:31 +0200
Subject: [PATCH] front: gp: better listItems

- show opponent stone and my stone in actial colors
---
 webapp/src/GameProposal.css | 11 ++++++++++-
 webapp/src/GameProposal.js  | 24 ++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/webapp/src/GameProposal.css b/webapp/src/GameProposal.css
index 87e0716..127c51d 100644
--- a/webapp/src/GameProposal.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/webapp/src/GameProposal.js b/webapp/src/GameProposal.js
index 0cf7338..3cd85a6 100644
--- a/webapp/src/GameProposal.js
+++ b/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;