UI fixes

src/client/graphics/layers/ControlPanel.ts

@@ -190,7 +190,7 @@ export class ControlPanel extends LitElement implements Layer {
       </style>
       <div
         class="${this._isVisible
-          ? "w-full text-sm lg:text-m lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg rounded-lg backdrop-blur"
+          ? "w-full text-sm lg:text-m lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
           : "hidden"}"
         @contextmenu=${(e) => e.preventDefault()}
       >

src/client/graphics/layers/EventsDisplay.ts

@@ -405,7 +405,7 @@ export class EventsDisplay extends LitElement implements Layer {
       <div
         class="${this._hidden
           ? "w-fit px-[10px] py-[5px]"
-          : ""} rounded-md bg-black bg-opacity-60 relative max-h-[30vh] flex flex-col-reverse overflow-y-auto w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-3xl lg:w-full lg:w-auto"
+          : ""} rounded-md bg-black bg-opacity-60 relative max-h-[30vh] flex flex-col-reverse overflow-y-auto w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-[30vw] lg:w-full lg:w-auto"
       >
         <div>
           <div class="w-full bg-black/80 sticky top-0 px-[10px]">

src/client/graphics/layers/Leaderboard.ts

@@ -188,7 +188,8 @@ export class Leaderboard extends LitElement implements Layer {
 
     @media (max-width: 1000px) {
       .leaderboard {
-        top: 60px;
+        top: 70px;
+        left: 0px;
       }
 
       .leaderboard-button {

src/client/graphics/layers/OptionsMenu.ts

@@ -127,7 +127,7 @@ export class OptionsMenu extends LitElement implements Layer {
         @contextmenu=${(e) => e.preventDefault()}
       >
         <div
-          class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md"
+          class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-es-sm lg:rounded-lg backdrop-blur-md"
         >
           <div class="flex items-stretch gap-1 lg:gap-2">
             ${button({

src/client/graphics/layers/TopBar.ts

@@ -8,6 +8,9 @@ import { renderNumber, renderTroops } from "../../Utils";
 export class TopBar extends LitElement implements Layer {
   public game: GameView;
   private isVisible = false;
+  private _population = 0;
+  private _lastPopulationIncreaseRate = 0;
+  private _popRateIsIncreasing = false;
 
   createRenderRoot() {
     return this;
@@ -19,6 +22,15 @@ export class TopBar extends LitElement implements Layer {
   }
 
   tick() {
+    if (this.game?.myPlayer() !== null) {
+      const popIncreaseRate =
+        this.game.myPlayer().population() - this._population;
+      if (this.game.ticks() % 5 == 0) {
+        this._popRateIsIncreasing =
+          popIncreaseRate >= this._lastPopulationIncreaseRate;
+        this._lastPopulationIncreaseRate = popIncreaseRate;
+      }
+    }
     this.requestUpdate();
   }
 
@@ -38,7 +50,7 @@ export class TopBar extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed top-0 z-50 bg-gray-800/70 text-white text-sm p-1 rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden backdrop-blur"
+        class="fixed top-0 z-50 bg-gray-800/70 text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden backdrop-blur"
       >
         <!-- Pop section (takes 2 columns on desktop) -->
         <div
@@ -49,7 +61,12 @@ export class TopBar extends LitElement implements Layer {
             >${renderTroops(myPlayer.population())} /
             ${renderTroops(maxPop)}</span
           >
-          <span>(+${renderTroops(popRate)})</span>
+          <span
+            class="${this._popRateIsIncreasing
+              ? "text-green-500"
+              : "text-yellow-500"}"
+            >(+${renderTroops(popRate)})</span
+          >
         </div>
         <!-- Gold section (takes 1 column on desktop) -->
         <div

src/client/graphics/layers/WinModal.ts

@@ -166,7 +166,9 @@ export class WinModal extends LitElement implements Layer {
         <p>
           Like the game? Help make this my full-time project!
           <a
-            href="https://discord.com/channels/1284581928254701718/shop/1330243291366559744"
+            href="https://discord.gg/k22YrnAzGp"
+            target="_blank"
+            rel="noopener noreferrer"
             style="color: #0096ff; text-decoration: underline; display: block; margin-top: 5px;"
           >
             Support the game!

src/client/index.html

@@ -174,8 +174,13 @@
         <div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4">
           <a
             href="https://discord.gg/k22YrnAzGp"
-            class="w-full bg-[#5865F2] hover:bg-[#4752C4] text-white p-3 sm:p-4 lg:p-5 font-medium text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300 flex justify-center"
+            class="w-full bg-[#5865F2] hover:bg-[#4752C4] text-white p-3 sm:p-4 lg:p-5 font-medium text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300 flex justify-center items-center gap-5"
           >
+            <img
+              style="height: 50px; width: 50px"
+              alt="Discord"
+              src="../../resources/icons/discord.svg"
+            />
             Join the Discord!
           </a>
         </div>

src/core/Util.ts

@@ -208,13 +208,12 @@ export function getMode(list: Set<number>): number {
 export function sanitize(name: string): string {
   return Array.from(name)
     .join("")
-    .replace(/[^\p{L}\p{N}\s\p{Emoji}\p{Emoji_Component}\[\]]/gu, "");
+    .replace(/[^\p{L}\p{N}\s\p{Emoji}\p{Emoji_Component}\[\]_]/gu, "");
 }
 
 export function processName(name: string): string {
   // First sanitize the raw input - strip everything except text and emojis
   const sanitizedName = sanitize(name);
-
   // Process emojis with twemoji
   const withEmojis = twemoji.parse(sanitizedName, {
     base: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/",