chat

examples/src/main.ts

@@ -13,6 +13,7 @@ import enableXrController from "verseengine-modules/enableXrController";
 import enableMoveController from "verseengine-modules/enableMoveController";
 import nameLog from "verseengine-modules/nameLog";
 import adjustNameplatePosition from "verseengine-modules/adjustNameplatePosition";
+import chat from "verseengine-modules/chat";
 
 function main() {
   const domRoot = document.getElementById("app")!;
@@ -57,7 +58,8 @@ function main() {
       .initialize(joinSound, { audioSrc: "./asset/ui/join.m4a" })
       .initialize(enableXrController)
       .initialize(enableMoveController)
-      .initialize(nameLog, {});
+      .initialize(nameLog, {})
+      .initialize(chat, {});
   });
 
   if ("xr" in navigator && navigator.xr) {

src/chat.ts

@@ -0,0 +1,82 @@
+import { VerseModuleBase } from "./VerseModuleBase";
+import { getDefaultAddLog } from "./util/log";
+import { PlayerNameData } from "./nameplate";
+import { playerName } from "./util/playerName";
+
+const chatMessageMaxLength = 200;
+
+function createChatMessageInput(parent: HTMLElement) {
+  const $button = document.createElement("button");
+  $button.type = "submit";
+  $button.textContent = "送信";
+
+  const $input = document.createElement("input");
+  $input.maxLength = chatMessageMaxLength;
+  $input.placeholder = "チャット";
+
+  const $form = document.createElement("form");
+  $form.appendChild($input);
+  $form.appendChild($button);
+  $form.style.position = "absolute";
+  $form.style.bottom = "5px";
+  $form.style.right = "5px";
+  $form.style.width = "calc(100vw - 60px)";
+  $form.style.height = "25px";
+  $form.style.textAlign = "right";
+
+  $form.appendChild($input);
+  $form.appendChild($button);
+
+  parent.appendChild($form);
+  return (onChange: (chatMessage: string) => unknown) => {
+    const onChangeInner = (e?: SubmitEvent) => {
+      e?.preventDefault();
+      const chatMessage = $input.value
+        .trim()
+        .substring(0, chatMessageMaxLength);
+      onChange(chatMessage);
+    };
+    onChangeInner();
+
+    $form.addEventListener("submit", onChangeInner);
+  };
+}
+
+function makeLogMessage(data: PlayerNameData & ChatMessageData) {
+  return `[${playerName(data.name)}] ${data.chatMessage}`;
+}
+
+export type ChatMessageData = {
+  chatMessage?: string;
+};
+
+export default ({
+  addTextDataChangedListener,
+  domRoot,
+  getData,
+  putData,
+}: VerseModuleBase<ChatMessageData, PlayerNameData>) => ({
+  initialize(options?: {
+    handleChatMessage?: (
+      onChatMessage: (chatMessage: string) => unknown,
+    ) => unknown;
+    addLog?: (message: string) => unknown;
+  }) {
+    const addLog = options?.addLog || getDefaultAddLog(domRoot);
+
+    addTextDataChangedListener((_, data) => {
+      const message = makeLogMessage(data);
+      if (message) {
+        addLog(message);
+      }
+    });
+
+    (options?.handleChatMessage || createChatMessageInput(domRoot))(
+      (chatMessage) => {
+        putData({ chatMessage });
+        const message = makeLogMessage({ chatMessage, name: getData().name });
+        addLog(message);
+      },
+    );
+  },
+});

src/util/log.ts

@@ -3,7 +3,7 @@ import { timestampString } from "./timestampString";
 export function createLogContainer() {
   const $log = document.createElement("div");
   $log.style.position = "absolute";
-  $log.style.bottom = "5px";
+  $log.style.bottom = "35px";
   $log.style.right = "5px";
   $log.style.width = "calc(100vw - 60px)";
   $log.style.color = "#fff";