Converted and replaced all .png icons with .svg

src/client/Main.ts

@@ -1,5 +1,5 @@
 import { ClientGameRunner, joinLobby } from "./ClientGameRunner";
-import backgroundImage from "../../resources/images/EuropeBackground.png";
+import backgroundImage from "../../resources/images/EuropeBackground.svg";
 import favicon from "../../resources/images/Favicon.svg";
 
 import "./PublicLobby";
@@ -23,7 +23,7 @@ class Client {
 
   initialize(): void {
     this.usernameInput = document.querySelector(
-      "username-input",
+      "username-input"
     ) as UsernameInput;
     if (!this.usernameInput) {
       consolex.warn("Username input element not found");
@@ -40,11 +40,11 @@ class Client {
     document.addEventListener("leave-lobby", this.handleLeaveLobby.bind(this));
     document.addEventListener(
       "single-player",
-      this.handleSinglePlayer.bind(this),
+      this.handleSinglePlayer.bind(this)
     );
 
     const spModal = document.querySelector(
-      "single-player-modal",
+      "single-player-modal"
     ) as SinglePlayerModal;
     spModal instanceof SinglePlayerModal;
     document.getElementById("single-player").addEventListener("click", () => {
@@ -54,7 +54,7 @@ class Client {
     });
 
     const hostModal = document.querySelector(
-      "host-lobby-modal",
+      "host-lobby-modal"
     ) as HostPrivateLobbyModal;
     hostModal instanceof HostPrivateLobbyModal;
     document
@@ -66,7 +66,7 @@ class Client {
       });
 
     this.joinModal = document.querySelector(
-      "join-private-lobby-modal",
+      "join-private-lobby-modal"
     ) as JoinPrivateLobbyModal;
     this.joinModal instanceof JoinPrivateLobbyModal;
     document
@@ -96,7 +96,7 @@ class Client {
         map: event.detail.map,
         difficulty: event.detail.difficulty,
       },
-      () => this.joinModal.close(),
+      () => this.joinModal.close()
     );
   }
 

src/client/graphics/layers/NameLayer.ts

@@ -9,10 +9,10 @@ import { PseudoRandom } from "../../../core/PseudoRandom";
 import { Theme } from "../../../core/configuration/Config";
 import { Layer } from "./Layer";
 import { TransformHandler } from "../TransformHandler";
-import traitorIcon from "../../../../resources/images/TraitorIcon.png";
-import allianceIcon from "../../../../resources/images/AllianceIcon.png";
-import crownIcon from "../../../../resources/images/CrownIcon.png";
-import targetIcon from "../../../../resources/images/TargetIcon.png";
+import traitorIcon from "../../../../resources/images/TraitorIcon.svg";
+import allianceIcon from "../../../../resources/images/AllianceIcon.svg";
+import crownIcon from "../../../../resources/images/CrownIcon.svg";
+import targetIcon from "../../../../resources/images/TargetIcon.svg";
 import { ClientID } from "../../../core/Schemas";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { createCanvas, renderTroops } from "../../Utils";

src/client/graphics/layers/PlayerPanel.ts

@@ -7,11 +7,11 @@ import { MouseUpEvent } from "../../InputHandler";
 import { AllPlayers, Player, PlayerActions } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { renderNumber, renderTroops } from "../../Utils";
-import targetIcon from "../../../../resources/images/TargetIconWhite.png";
-import emojiIcon from "../../../../resources/images/EmojiIconWhite.png";
-import donateIcon from "../../../../resources/images/DonateIconWhite.png";
-import traitorIcon from "../../../../resources/images/TraitorIconWhite.png";
-import allianceIcon from "../../../../resources/images/AllianceIconWhite.png";
+import targetIcon from "../../../../resources/images/TargetIconWhite.svg";
+import emojiIcon from "../../../../resources/images/EmojiIconWhite.svg";
+import donateIcon from "../../../../resources/images/DonateIconWhite.svg";
+import traitorIcon from "../../../../resources/images/TraitorIconWhite.svg";
+import allianceIcon from "../../../../resources/images/AllianceIconWhite.svg";
 import {
   SendAllianceRequestIntentEvent,
   SendBreakAllianceIntentEvent,

src/client/graphics/layers/RadialMenu.ts

@@ -25,16 +25,16 @@ import {
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 import * as d3 from "d3";
-import traitorIcon from "../../../../resources/images/TraitorIconWhite.png";
-import allianceIcon from "../../../../resources/images/AllianceIconWhite.png";
-import boatIcon from "../../../../resources/images/BoatIconWhite.png";
-import swordIcon from "../../../../resources/images/SwordIconWhite.png";
+import traitorIcon from "../../../../resources/images/TraitorIconWhite.svg";
+import allianceIcon from "../../../../resources/images/AllianceIconWhite.svg";
+import boatIcon from "../../../../resources/images/BoatIconWhite.svg";
+import swordIcon from "../../../../resources/images/SwordIconWhite.svg";
 import infoIcon from "../../../../resources/images/InfoIcon.svg";
-import targetIcon from "../../../../resources/images/TargetIconWhite.png";
-import emojiIcon from "../../../../resources/images/EmojiIconWhite.png";
-import disabledIcon from "../../../../resources/images/DisabledIcon.png";
+import targetIcon from "../../../../resources/images/TargetIconWhite.svg";
+import emojiIcon from "../../../../resources/images/EmojiIconWhite.svg";
+import disabledIcon from "../../../../resources/images/DisabledIcon.svg";
 import xIcon from "../../../../resources/images/XIcon.svg";
-import donateIcon from "../../../../resources/images/DonateIconWhite.png";
+import donateIcon from "../../../../resources/images/DonateIconWhite.svg";
 import buildIcon from "../../../../resources/images/BuildIconWhite.svg";
 import { EmojiTable } from "./EmojiTable";
 import { UIState } from "../UIState";

src/client/graphics/layers/StructureLayer.ts

@@ -3,10 +3,10 @@ import { Theme } from "../../../core/configuration/Config";
 import { Layer } from "./Layer";
 import { EventBus } from "../../../core/EventBus";
 
-import anchorIcon from "../../../../resources/images/AnchorIcon.png";
-import missileSiloIcon from "../../../../resources/images/MissileSiloUnit.png";
-import shieldIcon from "../../../../resources/images/ShieldIcon.png";
-import cityIcon from "../../../../resources/images/CityIcon.png";
+import anchorIcon from "../../../../resources/images/AnchorIcon.svg";
+import missileSiloIcon from "../../../../resources/images/MissileSiloUnit.svg";
+import shieldIcon from "../../../../resources/images/ShieldIcon.svg";
+import cityIcon from "../../../../resources/images/CityIcon.svg";
 import { GameView, UnitView } from "../../../core/game/GameView";
 import { Cell, UnitType } from "../../../core/game/Game";
 import { GameUpdateType } from "../../../core/game/GameUpdates";

src/client/index.html

@@ -74,7 +74,7 @@
   <!-- Logo section remains the same -->
   <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
     <div class="flex justify-center">
-      <img src="../../resources/images/OpenFrontLogo.png" alt="OpenFront.io" />
+      <img src="../../resources/images/OpenFrontLogo.svg" alt="OpenFront.io" />
     </div>
     <div class="flex justify-center text-sm font-bold mt-[-10px] pb-6 md:pb-12">
       v0.15.0