From 6faba66bab5dcf81683412bb99ef630ee1145694 Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Wed, 2 Apr 2025 21:58:52 +0900
Subject: [PATCH] added icon in player panel

---
 resources/images/ChatIconWhite.svg            | 13 +++++++++++++
 src/client/Main.ts                            |  2 +-
 src/client/{ => graphics/layers}/ChatModal.ts | 11 +++++++++++
 src/client/graphics/layers/PlayerPanel.ts     | 14 ++++++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 resources/images/ChatIconWhite.svg
 rename src/client/{ => graphics/layers}/ChatModal.ts (96%)

diff --git a/resources/images/ChatIconWhite.svg b/resources/images/ChatIconWhite.svg
new file mode 100644
index 000000000..56c7d8e5b
--- /dev/null
+++ b/resources/images/ChatIconWhite.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="svg4" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" viewBox="0 0 800 800">
+  <!-- Generator: Adobe Illustrator 29.4.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 152)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <sodipodi:namedview id="namedview6" bordercolor="#000000" borderopacity="0.25" inkscape:current-layer="svg4" inkscape:cx="401.69492" inkscape:cy="400" inkscape:deskcolor="#d1d1d1" inkscape:pagecheckerboard="0" inkscape:pageopacity="0.0" inkscape:showpageshadow="2" inkscape:window-height="987" inkscape:window-maximized="1" inkscape:window-width="1536" inkscape:window-x="0" inkscape:window-y="0" inkscape:zoom="0.295" pagecolor="#ffffff" showgrid="false"/>
+  <path class="st0" d="M713.8,149.3v401c0,14.1-11.4,25.5-25.4,25.5h-432.2l-124.4,129.8v-129.8h-20.1c-14.1,0-25.5-11.4-25.5-25.5V149.3c0-14.1,11.3-25.5,25.4-25.5h576.7c14.1,0,25.5,11.4,25.5,25.5ZM400,317.5c-19.2,0-34.8,15.6-34.8,34.8s15.6,34.8,34.8,34.8,34.8-15.6,34.8-34.8-15.6-34.8-34.8-34.8ZM561.1,317.5c-19.2,0-34.8,15.6-34.8,34.8s15.6,34.8,34.8,34.8,34.8-15.6,34.8-34.8-15.6-34.8-34.8-34.8ZM238.9,317.5c-19.2,0-34.8,15.6-34.8,34.8s15.6,34.8,34.8,34.8,34.8-15.6,34.8-34.8-15.6-34.8-34.8-34.8h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/client/Main.ts b/src/client/Main.ts
index 7b0fb8e08..d43974be4 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -28,7 +28,7 @@ import "./components/baseComponents/Modal";
 import { GameStartingModal } from "./gameStartingModal";
 import "./styles.css";
 
-import { ChatModal } from "./ChatModal";
+import { ChatModal } from "./graphics/layers/ChatModal";
 
 export interface JoinLobbyEvent {
   clientID: string;
diff --git a/src/client/ChatModal.ts b/src/client/graphics/layers/ChatModal.ts
similarity index 96%
rename from src/client/ChatModal.ts
rename to src/client/graphics/layers/ChatModal.ts
index f6a29c985..2d4dc149a 100644
--- a/src/client/ChatModal.ts
+++ b/src/client/graphics/layers/ChatModal.ts
@@ -247,6 +247,17 @@ export class ChatModal extends LitElement {
   }
 
   public close() {
+    this.selectedCategory = null;
+    this.selectedPhraseText = null;
+    this.previewText = null;
+    this.requiresPlayerSelection = false;
+    this.selectedPlayer = null;
     this.modalEl?.close();
   }
+
+  static open() {
+    const modal = new ChatModal();
+    document.body.appendChild(modal);
+    modal.open();
+  }
 }
diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts
index 2ad88181f..763fdf570 100644
--- a/src/client/graphics/layers/PlayerPanel.ts
+++ b/src/client/graphics/layers/PlayerPanel.ts
@@ -1,6 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import allianceIcon from "../../../../resources/images/AllianceIconWhite.svg";
+import chatIcon from "../../../../resources/images/ChatIconWhite.svg";
 import donateGoldIcon from "../../../../resources/images/DonateGoldIconWhite.svg";
 import donateTroopIcon from "../../../../resources/images/DonateTroopIconWhite.svg";
 import emojiIcon from "../../../../resources/images/EmojiIconWhite.svg";
@@ -26,6 +27,7 @@ import {
   SendTargetPlayerIntentEvent,
 } from "../../Transport";
 import { renderNumber, renderTroops } from "../../Utils";
+import { ChatModal } from "./ChatModal";
 import { EmojiTable } from "./EmojiTable";
 import { Layer } from "./Layer";
 
@@ -141,8 +143,12 @@ export class PlayerPanel extends LitElement implements Layer {
     return this;
   }
 
+  private ctModal;
+
   init() {
     this.eventBus.on(MouseUpEvent, (e: MouseEvent) => this.hide());
+
+    this.ctModal = document.querySelector("chat-modal") as ChatModal;
   }
 
   tick() {
@@ -279,6 +285,14 @@ export class PlayerPanel extends LitElement implements Layer {
 
             <!-- Action buttons -->
             <div class="flex justify-center gap-2">
+              <button
+                @click=${(e) => this.ctModal.open()}
+                class="w-10 h-10 flex items-center justify-center
+                           bg-opacity-50 bg-gray-700 hover:bg-opacity-70
+                           text-white rounded-lg transition-colors"
+              >
+                <img src=${chatIcon} alt="Target" class="w-6 h-6" />
+              </button>
               ${canTarget
                 ? html`<button
                     @click=${(e) => this.handleTargetClick(e, other)}