Improve player panel

resources/lang/en.json

@@ -565,6 +565,11 @@
     "upgrade": "Upgrade",
     "level": "Level"
   },
+  "player_type": {
+    "player": "Player",
+    "nation": "Nation",
+    "bot": "Bot"
+  },
   "relation": {
     "hostile": "Hostile",
     "distrustful": "Distrustful",
@@ -580,23 +585,37 @@
   "player_panel": {
     "gold": "Gold",
     "troops": "Troops",
-    "betrayals": "Number of betrayals",
+    "betrayals": "Betrayals",
     "traitor": "Traitor",
+    "stable": "Stable",
+    "trust": "Trust",
+    "trading": "Trading",
+    "active": "Active",
+    "stopped": "Stopped",
     "alliance_time_remaining": "Alliance Expires In",
     "embargo": "Stopped trading with you",
     "nuke": "Nukes sent by them to you",
-    "start_trade": "Start trading",
-    "stop_trade": "Stop trading",
+    "start_trade": "Start Trading",
+    "stop_trade": "Stop Trading",
     "yes": "Yes",
     "no": "No",
     "none": "None",
     "alliances": "Alliances",
-    "flag": "Flag"
+    "flag": "Flag",
+    "chat": "Chat",
+    "target": "Target",
+    "break": "Break",
+    "break_alliance": "Break Alliance",
+    "alliance": "Alliance",
+    "send_alliance": "Send Alliance",
+    "send_troops": "Send Troops",
+    "send_gold": "Send Gold",
+    "emotes": "Emojis"
   },
   "replay_panel": {
     "replay_speed": "Replay speed",
     "game_speed": "Game speed",
-    "fastest_game_speed": "max"
+    "fastest_game_speed": "Max"
   },
   "error_modal": {
     "crashed": "Game crashed!",

src/client/components/ui/ActionButton.ts

@@ -0,0 +1,69 @@
+import { html, TemplateResult } from "lit";
+
+export type ButtonVariant =
+  | "normal"
+  | "red"
+  | "green"
+  | "indigo"
+  | "yellow"
+  | "sky";
+export interface ActionButtonProps {
+  onClick: (e: MouseEvent) => void;
+  type?: ButtonVariant;
+  icon: string;
+  iconAlt: string;
+  title: string;
+  label: string;
+  disabled?: boolean;
+}
+
+const ICON_SIZE =
+  "h-5 w-5 shrink-0 transition-transform group-hover:scale-110 text-zinc-400";
+const TEXT_SIZE =
+  "text-base sm:text-[14px] leading-5 font-semibold tracking-tight";
+
+const getButtonStyles = () => {
+  const btnBase =
+    "group w-full min-w-[50px] select-none flex flex-col items-center justify-center " +
+    "gap-1 rounded-lg py-1.5 border border-white/10 bg-white/[0.04] shadow-sm " +
+    "transition-all duration-150 " +
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 " +
+    "active:translate-y-[1px]";
+
+  return {
+    normal: `${btnBase} text-white/90 hover:bg-white/10 hover:text-white`,
+    red: `${btnBase} text-red-400 hover:bg-red-500/10 hover:text-red-300 focus-visible:ring-red-400/30`,
+    green: `${btnBase} text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-300 focus-visible:ring-emerald-400/30`,
+    yellow: `${btnBase} text-[#f59e0b] hover:bg-[#f59e0b]/10 hover:text-[#fbbf24] focus-visible:ring-[#f59e0b]/30`,
+    indigo: `${btnBase} text-indigo-400 hover:bg-indigo-500/10 hover:text-indigo-300 focus-visible:ring-indigo-400/30`,
+    sky: `${btnBase} text-[#38bdf8] hover:bg-[#38bdf8]/10 hover:text-[#0ea5e9] focus-visible:ring-[#38bdf8]/30`,
+  };
+};
+
+export const actionButton = (props: ActionButtonProps): TemplateResult => {
+  const {
+    onClick,
+    type = "normal",
+    icon,
+    iconAlt,
+    title,
+    label,
+    disabled = false,
+  } = props;
+  const buttonStyles = getButtonStyles();
+  const buttonClass = buttonStyles[type];
+
+  return html`
+    <button
+      @click=${onClick}
+      class="${buttonClass}"
+      title="${title}"
+      type="button"
+      aria-label="${title}"
+      ?disabled=${disabled}
+    >
+      <img src=${icon} alt=${iconAlt} aria-hidden="true" class="${ICON_SIZE}" />
+      <span class="${TEXT_SIZE}">${label}</span>
+    </button>
+  `;
+};

src/client/components/ui/Divider.ts

@@ -0,0 +1,33 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type DividerSpacing = "sm" | "md" | "lg";
+@customElement("ui-divider")
+export class Divider extends LitElement {
+  @property({ type: String })
+  spacing: DividerSpacing = "md";
+
+  @property({ type: String })
+  color: string = "bg-zinc-700/80";
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    const spacingClasses: Record<DividerSpacing, string> = {
+      sm: "my-0.5",
+      md: "my-1",
+      lg: "my-2",
+    } as const;
+    const spacing = spacingClasses[this.spacing] ?? spacingClasses.md;
+
+    const colorClass = this.color || "bg-zinc-700/80";
+
+    return html`<div
+      role="separator"
+      aria-hidden="true"
+      class="${spacing} h-px ${colorClass}"
+    ></div>`;
+  }
+}

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -268,13 +268,13 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     let playerType = "";
     switch (player.type()) {
       case PlayerType.Bot:
-        playerType = translateText("player_info_overlay.bot");
+        playerType = translateText("player_type.bot");
         break;
       case PlayerType.FakeHuman:
-        playerType = translateText("player_info_overlay.nation");
+        playerType = translateText("player_type.nation");
         break;
       case PlayerType.Human:
-        playerType = translateText("player_info_overlay.player");
+        playerType = translateText("player_type.player");
         break;
     }