make leaderboard translucent, increase font size

src/client/graphics/layers/Leaderboard.ts

@@ -90,10 +90,10 @@ export class Leaderboard extends LitElement implements Layer {
   }
   .leaderboard {
     position: fixed;
-      top: 20px;
-      left: 20px;
+    top: 10px;
+    left: 10px;
     z-index: 9999;
-      background-color: #1E1E1E;
+    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;
@@ -101,6 +101,7 @@ export class Leaderboard extends LitElement implements Layer {
     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%;
@@ -109,22 +110,25 @@ export class Leaderboard extends LitElement implements Layer {
   th, td {
     padding: 8px;
     text-align: left;
-      border-bottom: 1px solid #333;
+    border-bottom: 1px solid rgba(51, 51, 51, 0.2); /* Made border slightly transparent */
     color: white;
   }
   th {
-      background-color: #2C2C2C;
+    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: #2C2C2C;
+    background-color: rgba(44, 44, 44, 0.5); /* Made alternating rows slightly transparent */
   }
   tr:hover {
-      background-color: #3A3A3A;
+    background-color: rgba(58, 58, 58, 0.6); /* Made hover effect slightly transparent */
   }
   .hidden {
     display: none !important;
@@ -134,9 +138,8 @@ export class Leaderboard extends LitElement implements Layer {
       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>

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
         }
     }