make leaderboard & events box smaller

src/client/graphics/layers/EventsDisplay.ts

@@ -73,12 +73,12 @@ export class EventsDisplay extends LitElement implements Layer {
       background-color: rgba(0, 0, 0, 0.7);
       color: white;
       box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-      font-size: 1.2em;
+      font-size: 0.9em;
     }
 
     .events-table th,
     .events-table td {
-      padding: 15px;
+      padding: 8px 12px;
       text-align: left;
       border-bottom: 1px solid rgba(255, 255, 255, 0.0);
       z-index: 1000;
@@ -86,7 +86,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
     .events-table th {
       background-color: rgba(0, 0, 0, 0.0);
-      font-size: 1.2em;
+      font-size: 1em;
       text-transform: uppercase;
     }
 
@@ -96,8 +96,8 @@ export class EventsDisplay extends LitElement implements Layer {
 
     .btn {
       display: inline-block;
-      padding: 8px 16px;
-      margin: 5px 10px 5px 0;
+      padding: 4px 12px;
+      margin: 3px 8px 3px 0;
       background-color: #4CAF50;
       color: white;
       text-decoration: none;
@@ -105,6 +105,7 @@ export class EventsDisplay extends LitElement implements Layer {
       transition: background-color 0.3s;
       border: none;
       cursor: pointer;
+      font-size: 0.9em;
     }
 
     .btn:hover {
@@ -126,7 +127,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
     .button-container {
       display: flex;
-      gap: 8px;
+      gap: 6px;
       flex-wrap: wrap;
     }
 
@@ -141,12 +142,12 @@ export class EventsDisplay extends LitElement implements Layer {
 
       .events-table th,
       .events-table td {
-        padding: 10px;
+        padding: 6px 10px;
       }
       
       .btn {
         display: block;
-        margin: 5px 0;
+        margin: 3px 0;
         width: 100%;
       }
 
@@ -352,10 +353,10 @@ export class EventsDisplay extends LitElement implements Layer {
                       <button 
                         class="${btn.className}"
                         @click=${() => {
-        btn.action();
-        this.removeEvent(index);
-        this.requestUpdate()
-      }}
+                          btn.action();
+                          this.removeEvent(index);
+                          this.requestUpdate()
+                        }}
                       >
                         ${btn.text}
                       </button>

src/client/graphics/layers/Leaderboard.ts

@@ -122,7 +122,7 @@ export class Leaderboard extends LitElement implements Layer {
     border-collapse: collapse;
   }
   th, td {
-    padding: 8px;
+    padding: 5px;
     text-align: left;
     border-bottom: 1px solid rgba(51, 51, 51, 0.2);
     color: white;
@@ -133,10 +133,10 @@ export class Leaderboard extends LitElement implements Layer {
   }
   .myPlayer {
     font-weight: bold;
-    font-size: 1.5em;
+    font-size: 1.2em;
   }
   .otherPlayer {
-    font-size: 1.3em;
+    font-size: 1.0em;
   }
   tr:nth-child(even) {
     background-color: rgba(44, 44, 44, 0.5);

src/core/configuration/DevConfig.ts

@@ -4,10 +4,6 @@ import { ServerConfig } from "./Config";
 import { DefaultConfig, DefaultServerConfig } from "./DefaultConfig";
 
 export class DevServerConfig extends DefaultServerConfig {
-    numSpawnPhaseTurns(gameType: GameType): number {
-        return gameType == GameType.Singleplayer ? 40 : 200
-        // return 100
-    }
     gameCreationRate(): number {
         return 10 * 1000
     }
@@ -22,6 +18,11 @@ export class DevConfig extends DefaultConfig {
         super(sc, gc);
     }
 
+    numSpawnPhaseTurns(gameType: GameType): number {
+        return gameType == GameType.Singleplayer ? 40 : 200
+        // return 100
+    }
+
     unitInfo(type: UnitType): UnitInfo {
         const info = super.unitInfo(type)
         const oldCost = info.cost