UI fixes

.prettierignore

@@ -4,6 +4,7 @@
 *.jpg
 *.jpeg
 *.gif
+*.svg
 *.webp
 *.txt
 .prettierignore

resources/icons/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 365.467"><path fill="#fff" d="M378.186 365.028s-15.794-18.865-28.956-35.099c57.473-16.232 79.41-51.77 79.41-51.77-17.989 11.846-35.099 20.182-50.454 25.885-21.938 9.213-42.997 14.917-63.617 18.866-42.118 7.898-80.726 5.703-113.631-.438-25.008-4.827-46.506-11.407-64.494-18.867-10.091-3.947-21.059-8.774-32.027-14.917-1.316-.877-2.633-1.316-3.948-2.193-.877-.438-1.316-.878-1.755-.878-7.898-4.388-12.285-7.458-12.285-7.458s21.06 34.659 76.779 51.331c-13.163 16.673-29.395 35.977-29.395 35.977C36.854 362.395 0 299.218 0 299.218 0 159.263 63.177 45.633 63.177 45.633 126.354-1.311 186.022.005 186.022.005l4.388 5.264C111.439 27.645 75.461 62.305 75.461 62.305s9.653-5.265 25.886-12.285c46.945-20.621 84.236-25.885 99.592-27.64 2.633-.439 4.827-.878 7.458-.878 26.763-3.51 57.036-4.387 88.624-.878 41.68 4.826 86.43 17.111 132.058 41.68 0 0-34.66-32.906-109.244-55.281l6.143-7.019s60.105-1.317 122.844 45.628c0 0 63.178 113.631 63.178 253.585 0-.438-36.854 62.739-133.813 65.81l-.001.001zm-43.874-203.133c-25.006 0-44.75 21.498-44.75 48.262 0 26.763 20.182 48.26 44.75 48.26 25.008 0 44.752-21.497 44.752-48.26 0-26.764-20.182-48.262-44.752-48.262zm-160.135 0c-25.008 0-44.751 21.498-44.751 48.262 0 26.763 20.182 48.26 44.751 48.26 25.007 0 44.75-21.497 44.75-48.26.439-26.763-19.742-48.262-44.75-48.262z"/></svg>

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

@@ -219,7 +219,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/",