Improved options panel (#328)

Minor improvements to options-panel and player info panel.

- Improved time display
- Added margin to align with leaderboard
- Better option button layout
- Added flag to player info


![image](https://github.com/user-attachments/assets/b51c8239-caf5-4526-97ac-a33a9d22eff2)

src/client/graphics/layers/OptionsMenu.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
 import { EventBus } from "../../../core/EventBus";
 import { PauseGameEvent } from "../../Transport";
 import { GameType } from "../../../core/game/Game";
@@ -30,6 +30,16 @@ const button = ({
   </button>
 `;
 
+const secondsToHms = (d: number): string => {
+  const h = Math.floor(d / 3600);
+  const m = Math.floor((d % 3600) / 60);
+  const s = Math.floor((d % 3600) % 60);
+  let time = d === 0 ? "-" : `${s}s`;
+  if (m > 0) time = `${m}m` + time;
+  if (h > 0) time = `${h}h` + time;
+  return time;
+};
+
 @customElement("options-menu")
 export class OptionsMenu extends LitElement implements Layer {
   public game: GameView;
@@ -141,11 +151,11 @@ export class OptionsMenu extends LitElement implements Layer {
               children: this.isPaused ? "▶️" : "⏸",
             })}
             <div
-              class="w-14 h-8 lg:w-20 lg:h-10 flex items-center justify-center
+              class="w-15 h-8 lg:w-24 lg:h-10 flex items-center justify-center
                               bg-opacity-50 bg-gray-700 text-opacity-90 text-white
                               rounded text-sm lg:text-xl"
             >
-              ${this.timer}
+              ${secondsToHms(this.timer)}
             </div>
             ${button({
               onClick: this.onExitButtonClick,
@@ -161,7 +171,7 @@ export class OptionsMenu extends LitElement implements Layer {
         </div>
 
         <div
-          class="options-menu flex flex-wrap justify-around gap-y-3 mt-2 bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md ${!this
+          class="options-menu flex flex-col justify-around gap-y-3 mt-2 bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md ${!this
             .showSettings
             ? "hidden"
             : ""}"

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { Layer } from "./Layer";
 import {
@@ -198,10 +198,16 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     return html`
       <div class="p-2">
         <div
-          class="text-bold text-sm lg:text-lg font-bold mb-1 ${isAlly
+          class="text-bold text-sm lg:text-lg font-bold mb-1 inline-flex ${isAlly
             ? "text-green-500"
             : "text-white"}"
         >
+          ${player.flag()
+            ? html`<img
+                class="h-8 mr-1 aspect-[3/4]"
+                src=${"/flags/" + player.flag() + ".svg"}
+              />`
+            : ""}
           ${player.name()}
         </div>
         <div class="text-sm opacity-80">Type: ${playerType}</div>
@@ -269,11 +275,11 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     return html`
       <div
-        class="flex w-full  z-50 flex flex-col"
+        class="flex w-full z-50 flex-col"
         @contextmenu=${(e) => e.preventDefault()}
       >
         <div
-          class="bg-opacity-70 bg-gray-900 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
+          class="bg-opacity-60 bg-gray-900 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
         >
           ${this.player != null ? this.renderPlayerInfo(this.player) : ""}
           ${this.unit != null ? this.renderUnitInfo(this.unit) : ""}

src/client/graphics/layers/StructureLayer.ts

@@ -91,7 +91,7 @@ export class StructureLayer implements Layer {
       );
       this.unitIcons.set(unitType, iconData);
       console.log(
-        `icond data width height: ${iconData.width}, ${iconData.height}`,
+        `icon data width height: ${iconData.width}, ${iconData.height}`,
       );
     };
   }

src/client/index.html

@@ -331,7 +331,7 @@
     <help-modal></help-modal>
 
     <div
-      class="flex flex-column gap-2 fixed right-0 top-0 z-50 flex flex-col w-32 sm:w-32 lg:w-48"
+      class="flex flex-column gap-2 fixed right-[10px] top-[10px] z-50 flex flex-col w-32 sm:w-32 lg:w-48"
     >
       <options-menu></options-menu>
       <player-info-overlay></player-info-overlay>