diff --git a/src/client/ChatModal.ts b/src/client/ChatModal.ts new file mode 100644 index 000000000..f26d7d88e --- /dev/null +++ b/src/client/ChatModal.ts @@ -0,0 +1,180 @@ +import { LitElement, html } from "lit"; +import { customElement, query } from "lit/decorators.js"; + +const quickChatPhrases: Record< + string, + Array<{ text: string; requiresPlayer: boolean }> +> = { + help: [{ text: "Please give me troops!", requiresPlayer: false }], + attack: [{ text: "Attack [P1]!", requiresPlayer: true }], + defend: [{ text: "Defend [P1]!", requiresPlayer: true }], + greet: [{ text: "Hello!", requiresPlayer: false }], + misc: [{ text: "Let’s go!", requiresPlayer: false }], +}; + +@customElement("chat-modal") +export class ChatModal extends LitElement { + @query("o-modal") private modalEl!: HTMLElement & { + open: () => void; + close: () => void; + }; + + createRenderRoot() { + return this; + } + + private previewText: string | null = null; + private requiresPlayerSelection: boolean = false; + private players: string[] = ["Slovakia", "Germany", "Japan"]; + private selectedCategory: string | null = null; + + quickChatPhrases: Record< + string, + Array<{ text: string; requiresPlayer: boolean }> + > = { + help: [{ text: "Please give me troops!", requiresPlayer: false }], + attack: [{ text: "Attack [P1]!", requiresPlayer: true }], + defend: [{ text: "Defend [P1]!", requiresPlayer: true }], + greet: [{ text: "Hello!", requiresPlayer: false }], + misc: [{ text: "Let's go!", requiresPlayer: false }], + }; + + private categories = [ + { id: "help", name: "Help" }, + { id: "attack", name: "Attack" }, + { id: "defend", name: "Defend" }, + { id: "greet", name: "Greetings" }, + { id: "misc", name: "Miscellaneous" }, + ]; + + private getPhrasesForCategory(categoryId: string) { + return quickChatPhrases[categoryId] ?? []; + } + + render() { + return html` + +
+ +
+ ${this.previewText || "Select a phrase"} +
+ + +
+
Categories
+
+ ${this.categories.map( + (category) => html` + + `, + )} +
+
+ + + ${this.selectedCategory + ? html` +
+
Phrases
+
+ ${this.getPhrasesForCategory(this.selectedCategory).map( + (phrase) => html` + + `, + )} +
+
+ ` + : null} + + + ${this.requiresPlayerSelection + ? html` +
+
Select Player
+
+ ${this.players.map( + (player) => html` + + `, + )} +
+
+ ` + : null} + + +
+ +
+
+ + `; + } + + private selectCategory(categoryId: string) { + this.selectedCategory = categoryId; + this.previewText = null; + this.requiresPlayerSelection = false; + this.requestUpdate(); + } + + private selectPhrase(phrase: { text: string; requiresPlayer: boolean }) { + this.previewText = phrase.text; + this.requiresPlayerSelection = phrase.requiresPlayer; + this.requestUpdate(); + } + + private renderPhrasePreview(phrase: { text: string }) { + return phrase.text.replace("[P1]", "___"); // 仮表示 + } + + private selectPlayer(player: string) { + if (this.previewText) { + this.previewText = this.previewText.replace("[P1]", player); + this.requiresPlayerSelection = false; + this.requestUpdate(); + } + } + + private sendChatMessage() { + console.log("Sent message:", this.previewText); + this.previewText = null; + this.selectedCategory = null; + this.requiresPlayerSelection = false; + this.close(); // モーダルを閉じる + } + + public open() { + this.modalEl?.open(); + } + + public close() { + this.modalEl?.close(); + } +} diff --git a/src/client/Main.ts b/src/client/Main.ts index 70fb1af84..7b0fb8e08 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -28,6 +28,8 @@ import "./components/baseComponents/Modal"; import { GameStartingModal } from "./gameStartingModal"; import "./styles.css"; +import { ChatModal } from "./ChatModal"; + export interface JoinLobbyEvent { clientID: string; // Multiplayer games only have gameID, gameConfig is not known until game starts. @@ -105,6 +107,12 @@ class Client { } }); + const ctModal = document.querySelector("chat-modal") as ChatModal; + ctModal instanceof ChatModal; + document.getElementById("chat-button").addEventListener("click", () => { + ctModal.open(); + }); + const hlpModal = document.querySelector("help-modal") as HelpModal; hlpModal instanceof HelpModal; document.getElementById("help-button").addEventListener("click", () => { diff --git a/src/client/index.html b/src/client/index.html index 9c3b8c7f3..52552a820 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -243,6 +243,12 @@ block secondary > + +