Merge pull request #551 from Kaggle/poker-styling-17

[Poker] Make all player icons consistent (round + white background)

Author: chris-dmello

kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/src/repeated_poker_renderer.ts

@@ -588,44 +588,28 @@ export function renderer(options: LegacyRendererOptions): void {
     // --- Container Styles ---
     const container = document.createElement('div');
     container.className = 'final-screen-container';
-    // Using inline styles here to ensure it looks acceptable immediately without CSS file updates.
-    // You can move these to your style.css later, but as this is just a placeholder screen making it easy to clean up for now.
-    container.style.cssText = `
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-        background: rgba(15, 23, 42, 0.95); /* Dark blue-gray background */
-        color: white;
-        font-family: sans-serif;
-        padding: 40px;
-        box-sizing: border-box;
-    `;
 
     // --- Winner Section ---
     const winnerSection = document.createElement('div');
     winnerSection.className = 'final-winner-section';
-    winnerSection.style.cssText = 'text-align: center; margin-bottom: 60px; flex-shrink: 0;';
+    winnerSection.classList.add('winner-section');
 
     if (winner) {
       if (winner.thumbnail) {
         const thumb = document.createElement('img');
         thumb.src = winner.thumbnail;
-        thumb.style.cssText =
-          'width: 180px; height: 180px; border-radius: 50%; border: 6px solid #eab308; box-shadow: 0 0 30px rgba(234, 179, 8, 0.4); margin-bottom: 20px;';
+        thumb.classList.add('winner-thumbnail');
         winnerSection.appendChild(thumb);
       }
 
       const winnerName = document.createElement('div');
       winnerName.textContent = `${winner.name} Wins!`;
-      winnerName.style.cssText = 'font-size: 3.5em; color: #eab308; font-weight: bold;';
+      winnerName.classList.add('winner-name');
       winnerSection.appendChild(winnerName);
 
       const finalStack = document.createElement('div');
       finalStack.textContent = `Final Rewards: ${winner.chipStack}`;
-      finalStack.style.cssText = 'font-size: 2em; color: #9ca3af; margin-top: 10px;';
+      finalStack.classList.add('winner-final-rewards');
       winnerSection.appendChild(finalStack);
     }
 

kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/src/style.css

@@ -167,7 +167,7 @@
 }
 
 .player-info-area.split-pot {
-  border-color: #FF5C19;
+  border-color: #ff5c19;
 }
 
 .player-container-0 .player-info-area {
@@ -461,12 +461,12 @@
 
 .bet-display.split-pot {
   opacity: 1;
-  background-color: #FF5C19;
+  background-color: #ff5c19;
 }
 
 .bet-display.all-in {
   color: white;
-  background-color: #B3261E;
+  background-color: #b3261e;
 }
 
 .blind-indicator {
@@ -590,6 +590,8 @@
   white-space: nowrap;
 }
 
+/* LEGEND */
+
 .legend {
   position: absolute;
   top: 20px;
@@ -619,10 +621,12 @@
 }
 
 .legend-title-avatar {
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
   margin-right: 8px;
+  background-color: white;
+  padding: 3px;
 }
 
 .legend-body {
@@ -670,8 +674,55 @@
 }
 
 .legend-avatar {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
   margin-right: 5px;
+  background-color: white;
+  padding: 2px;
+}
+
+/* FINAL WINNER SECTION */
+
+.final-screen-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background: rgba(15, 23, 42, 0.95); /* Dark blue-gray background */
+  color: white;
+  font-family: sans-serif;
+  padding: 40px;
+  box-sizing: border-box;
+}
+
+.winner-section {
+  text-align: center;
+  margin-bottom: 60px;
+  flex-shrink: 0;
+}
+
+.winner-thumbnail {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  border: 6px solid #eab308;
+  box-shadow: 0 0 30px rgba(234, 179, 8, 0.4);
+  margin-bottom: 20px;
+  background-color: white;
+  padding: 10px;
+}
+
+.winner-name {
+  font-size: 3.5em;
+  color: #eab308;
+  font-weight: bold;
+}
+
+.winner-final-rewards {
+  font-size: 2em;
+  color: #9ca3af;
+  margin-top: 10px;
 }