From b4e0947455729667f5f86aae5bb426be0cc5a4d3 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Thu, 17 Oct 2024 16:26:25 -0700
Subject: [PATCH] make leaderboard translucent, increase font size

---
 src/client/graphics/layers/Leaderboard.ts | 101 +++++++++++-----------
 src/core/execution/FakeHumanExecution.ts  |   4 +-
 2 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/src/client/graphics/layers/Leaderboard.ts b/src/client/graphics/layers/Leaderboard.ts
index 4e2a68b1b..2f24c59b3 100644
--- a/src/client/graphics/layers/Leaderboard.ts
+++ b/src/client/graphics/layers/Leaderboard.ts
@@ -85,58 +85,61 @@ export class Leaderboard extends LitElement implements Layer {
   }
 
   static styles = css`
-    :host {
-      display: block;
-    }
+  :host {
+    display: block;
+  }
+  .leaderboard {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 9999;
+    background-color: rgba(30, 30, 30, 0.7); /* Added transparency */
+    padding: 15px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    max-width: 300px;
+    max-height: 80vh;
+    overflow-y: auto;
+    width: 300px;
+    backdrop-filter: blur(5px); /* Optional: adds a blur effect to content behind the leaderboard */
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  th, td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid rgba(51, 51, 51, 0.2); /* Made border slightly transparent */
+    color: white;
+  }
+  th {
+    background-color: rgba(44, 44, 44, 0.5); /* Made header slightly transparent */
+    color: white;
+  }
+  .myPlayer {
+    font-weight: bold;
+    font-size: 1.4em;
+  }
+  .otherPlayer {
+    font-size: 1.2em;
+  }
+  tr:nth-child(even) {
+    background-color: rgba(44, 44, 44, 0.5); /* Made alternating rows slightly transparent */
+  }
+  tr:hover {
+    background-color: rgba(58, 58, 58, 0.6); /* Made hover effect slightly transparent */
+  }
+  .hidden {
+    display: none !important;
+  }
+  @media (max-width: 1000px) {
     .leaderboard {
-      position: fixed;
-      top: 20px;
-      left: 20px;
-      z-index: 9999;
-      background-color: #1E1E1E;
-      padding: 15px;
-      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-      border-radius: 10px;
-      max-width: 300px;
-      max-height: 80vh;
-      overflow-y: auto;
-      width: 300px;
-    }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-    th, td {
-      padding: 8px;
-      text-align: left;
-      border-bottom: 1px solid #333;
-      color: white;
-    }
-    th {
-      background-color: #2C2C2C;
-      color: white;
-    }
-    .myPlayer {
-      font-weight: bold;
-      font-size: 1.2em;
-    }
-    tr:nth-child(even) {
-      background-color: #2C2C2C;
-    }
-    tr:hover {
-      background-color: #3A3A3A;
-    }
-    .hidden {
       display: none !important;
     }
-    @media (max-width: 1000px) {
-      .leaderboard {
-        display: none !important;
-      }
-    }
-  `;
+  }
+`;
 
-  @property({type: Array})
   players: Entry[] = [];
 
   @state()
@@ -156,7 +159,7 @@ export class Leaderboard extends LitElement implements Layer {
           <tbody>
             ${this.players
         .map((player, index) => html`
-                <tr class="${player.isMyPlayer ? 'myPlayer' : 'none'}">
+                <tr class="${player.isMyPlayer ? 'myPlayer' : 'otherPlayer'}">
                   <td>${player.position}</td>
                   <td>${player.name.slice(0, 12)}</td>
                   <td>${player.score}</td>
diff --git a/src/core/execution/FakeHumanExecution.ts b/src/core/execution/FakeHumanExecution.ts
index 1afafbb8d..5b5af3de4 100644
--- a/src/core/execution/FakeHumanExecution.ts
+++ b/src/core/execution/FakeHumanExecution.ts
@@ -1,4 +1,3 @@
-import {EventBus} from "../EventBus";
 import {Cell, Execution, MutableGame, MutablePlayer, Player, PlayerInfo, PlayerType, TerrainType, TerraNullius, Tile} from "../game/Game"
 import {PseudoRandom} from "../PseudoRandom"
 import {and, bfs, dist, simpleHash} from "../Util";
@@ -21,13 +20,14 @@ export class FakeHumanExecution implements Execution {
     private isTraitor = false
 
 
+
     constructor(private playerInfo: PlayerInfo, private cell: Cell, private strength: number) {
         this.random = new PseudoRandom(simpleHash(playerInfo.id))
     }
 
     init(mg: MutableGame, ticks: number) {
         this.mg = mg
-        if (this.random.chance(2)) {
+        if (this.random.chance(5)) {
             this.isTraitor = true
         }
     }