Adding ability to listen to user types chat messages using WA.onChatMessage

front/src/Api/Events/ChatEvent.ts

@@ -5,4 +5,7 @@ export const isChatEvent =
         message: tg.isString,
         author: tg.isString,
     }).get();
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
 export type ChatEvent = tg.GuardedType<typeof isChatEvent>;

front/src/Api/Events/IframeEvent.ts

@@ -1,4 +1,4 @@
-interface IframeEvent {
+export interface IframeEvent {
     type: string;
     data: unknown;
 }

front/src/Api/Events/UserInputChatEvent.ts

@@ -0,0 +1,10 @@
+import * as tg from "generic-type-guard";
+
+export const isUserInputChatEvent =
+    new tg.IsInterface().withProperties({
+        message: tg.isString,
+    }).get();
+/**
+ * A message sent from the game to the iFrame when a user types a message in the chat.
+ */
+export type UserInputChatEvent = tg.GuardedType<typeof isUserInputChatEvent>;

front/src/Api/IframeListener.ts

@@ -1,6 +1,7 @@
 import {Subject} from "rxjs";
 import {ChatEvent, isChatEvent} from "./Events/ChatEvent";
-import {isIframeEventWrapper} from "./Events/IframeEvent";
+import {IframeEvent, isIframeEventWrapper} from "./Events/IframeEvent";
+import {UserInputChatEvent} from "./Events/UserInputChatEvent";
 
 
 
@@ -12,15 +13,15 @@ class IframeListener {
     public readonly chatStream = this._chatStream.asObservable();
 
     init() {
-        window.addEventListener("message", (event) => {
+        window.addEventListener("message", (message) => {
             // Do we trust the sender of this message?
-            //if (event.origin !== "http://example.com:8080")
+            //if (message.origin !== "http://example.com:8080")
             //    return;
 
-            // event.source is window.opener
-            // event.data is the data sent by the iframe
+            // message.source is window.opener
+            // message.data is the data sent by the iframe
 
-            const payload = event.data;
+            const payload = message.data;
             if (isIframeEventWrapper(payload)) {
                 if (payload.type === 'chat' && isChatEvent(payload.data)) {
                     this._chatStream.next(payload.data);
@@ -29,6 +30,27 @@ class IframeListener {
 
 
         }, false);
+
+
+    }
+
+    sendUserInputChat(message: string) {
+        this.postMessage({
+            'type': 'userInputChat',
+            'data': {
+                'message': message,
+            } as UserInputChatEvent
+        });
+    }
+
+    /**
+     * Sends the message... to absolutely all the iFrames that can be found in the current document.
+     */
+    private postMessage(message: IframeEvent) {
+        // TODO: not the most effecient implementation if there are many events sent!
+        for (const iframe of document.querySelectorAll<HTMLIFrameElement>('iframe')) {
+            iframe.contentWindow?.postMessage(message, '*');
+        }
     }
 }