Main/resources/[cfx-default]/[gameplay]/chat/html/App.ts

import { post } from './utils';
import CONFIG from './config';
import Vue from 'vue';

import Suggestions from './Suggestions.vue';
import MessageV from './Message.vue';
import { Suggestion } from './Suggestions';

export interface Message {
  args: string[];
  template: string;
  params?: { [key: string]: string };
  multiline?: boolean;
  color?: [ number, number, number ];
  templateId?: number;
  mode?: string;
  modeData?: Mode;

  id?: string;
}

export interface ThemeData {
  style: string;
  styleSheet: string;
  baseUrl: string;
  script: string;
  templates: { [id: string]: string }; // not supported rn
  msgTemplates: { [id: string]: string };

}

export interface Mode {
  name: string;
  displayName: string;
  color: string;
  hidden?: boolean;
  isChannel?: boolean;
  isGlobal?: boolean;
}

enum ChatHideStates {
  ShowWhenActive = 0,
  AlwaysShow = 1,
  AlwaysHide = 2,
}

const defaultMode: Mode = {
  name: 'all',
  displayName: 'All',
  color: '#fff'
};

const globalMode: Mode = {
  name: '_global',
  displayName: 'All',
  color: '#fff',
  isGlobal: true,
  hidden: true
};

export default Vue.extend({
  template: "#app_template",
  name: "app",
  components: {
    Suggestions,
    MessageV
  },
  data() {
    return {
      style: CONFIG.style,
      showInput: false,
      showWindow: false,
      showHideState: false,
      hideState: ChatHideStates.ShowWhenActive,
      backingSuggestions: [] as Suggestion[],
      removedSuggestions: [] as string[],
      templates: { ...CONFIG.templates } as { [ key: string ]: string },
      message: "",
      messages: [] as Message[],
      oldMessages: [] as string[],
      oldMessagesIndex: -1,
      tplBackups: [] as unknown as [ HTMLElement, string ][],
      msgTplBackups: [] as unknown as [ string, string ][],
      focusTimer: 0,
      showWindowTimer: 0,
      showHideStateTimer: 0,
      listener: (event: MessageEvent) => {},
      modes: [defaultMode, globalMode] as Mode[],
      modeIdx: 0,
    };
  },
  destroyed() {
    clearInterval(this.focusTimer);
    window.removeEventListener("message", this.listener);
  },
  mounted() {
    post("http://chat/loaded", JSON.stringify({}));

    this.listener = (event: MessageEvent) => {
      const item: any = event.data || (<any>event).detail; //'detail' is for debugging via browsers

      if (!item || !item.type) {
        return;
      }

      const typeRef = item.type as
        'ON_OPEN' | 'ON_SCREEN_STATE_CHANGE' | 'ON_MESSAGE' | 'ON_CLEAR' | 'ON_SUGGESTION_ADD' |
        'ON_SUGGESTION_REMOVE' | 'ON_TEMPLATE_ADD' | 'ON_UPDATE_THEMES' | 'ON_MODE_ADD' | 'ON_MODE_REMOVE';

      if (this[typeRef]) {
        this[typeRef](item);
      }
    };

    window.addEventListener("message", this.listener);
  },
  watch: {
    messages() {
      if (this.hideState !== ChatHideStates.AlwaysHide) {
        if (this.showWindowTimer) {
          clearTimeout(this.showWindowTimer);
        }
        this.showWindow = true;
        this.resetShowWindowTimer();
      }

      const messagesObj = this.$refs.messages as HTMLDivElement;
      this.$nextTick(() => {
        messagesObj.scrollTop = messagesObj.scrollHeight;
      });
    }
  },
  computed: {
    filteredMessages(): Message[] {
      return this.messages.filter(
        // show messages that are
        // - (if the current mode is a channel) global, or in the current mode
        // - (if the message is a channel) in the current mode
        el => (el.modeData?.isChannel || this.modes[this.modeIdx].isChannel) ?
          (el.mode === this.modes[this.modeIdx].name || el.modeData?.isGlobal) :
          true
      );
    },

    suggestions(): Suggestion[] {
      return this.backingSuggestions.filter(
        el => this.removedSuggestions.indexOf(el.name) <= -1
      );
    },

    hideAnimated(): boolean {
      return this.hideState !== ChatHideStates.AlwaysHide;
    },

    modeIdxGet(): number {
      return (this.modeIdx >= this.modes.length) ? (this.modes.length - 1) : this.modeIdx;
    },

    modePrefix(): string {
      if (this.modes.length === 2) {
        return `➤`;
      }

      return this.modes[this.modeIdxGet].displayName;
    },

    modeColor(): string {
      return this.modes[this.modeIdxGet].color;
    },

    hideStateString(): string {
      // TODO: localization
      switch (this.hideState) {
        case ChatHideStates.AlwaysShow:
          return 'Visible';
        case ChatHideStates.AlwaysHide:
          return 'Hidden';
        case ChatHideStates.ShowWhenActive:
          return 'When active';
      }
    }
  },
  methods: {
    ON_SCREEN_STATE_CHANGE({ hideState, fromUserInteraction }: { hideState: ChatHideStates, fromUserInteraction: boolean }) {
      this.hideState = hideState;

      if (this.hideState === ChatHideStates.AlwaysHide) {
        if (!this.showInput) {
          this.showWindow = false;
        }
      } else if (this.hideState === ChatHideStates.AlwaysShow) {
        this.showWindow = true;
        if (this.showWindowTimer) {
          clearTimeout(this.showWindowTimer);
        }
      } else {
        this.resetShowWindowTimer();
      }

      if (fromUserInteraction) {
        this.showHideState = true;

        if (this.showHideStateTimer) {
          clearTimeout(this.showHideStateTimer);
        }

        this.showHideStateTimer = window.setTimeout(() => {
          this.showHideState = false;
        }, 1500);
      }
    },
    ON_OPEN() {
      this.showInput = true;
      this.showWindow = true;
      if (this.showWindowTimer) {
        clearTimeout(this.showWindowTimer);
      }
      this.focusTimer = window.setInterval(() => {
        if (this.$refs.input) {
          (this.$refs.input as HTMLInputElement).focus();
        } else {
          clearInterval(this.focusTimer);
        }
      }, 100);
    },
    ON_MESSAGE({ message }: { message: Message }) {
      message.id = `${new Date().getTime()}${Math.random()}`;
      message.modeData = this.modes.find(mode => mode.name === message.mode);
      this.messages.push(message);
    },
    ON_CLEAR() {
      this.messages = [];
      this.oldMessages = [];
      this.oldMessagesIndex = -1;
    },
    ON_SUGGESTION_ADD({ suggestion }: { suggestion: Suggestion }) {
      this.removedSuggestions = this.removedSuggestions.filter(a => a !== suggestion.name);
      const duplicateSuggestion = this.backingSuggestions.find(
        a => a.name == suggestion.name
      );
      if (duplicateSuggestion) {
        if (suggestion.help || suggestion.params) {
          duplicateSuggestion.help = suggestion.help || "";
          duplicateSuggestion.params = suggestion.params || [];
        }
        return;
      }
      if (!suggestion.params) {
        suggestion.params = []; //TODO Move somewhere else
      }
      this.backingSuggestions.push(suggestion);
    },
    ON_SUGGESTION_REMOVE({ name }: { name: string }) {
      if (this.removedSuggestions.indexOf(name) <= -1) {
        this.removedSuggestions.push(name);
      }
    },
    ON_MODE_ADD({ mode }: { mode: Mode }) {
      this.modes = [
        ...this.modes.filter(a => a.name !== mode.name),
        mode
      ];
    },
    ON_MODE_REMOVE({ name }: { name: string }) {
      this.modes = this.modes.filter(a => a.name !== name);

      if (this.modes.length === 0) {
        this.modes = [defaultMode];
      }
    },
    ON_TEMPLATE_ADD({ template }: { template: { id: string, html: string }}) {
      if (this.templates[template.id]) {
        this.warn(`Tried to add duplicate template '${template.id}'`);
      } else {
        this.templates[template.id] = template.html;
      }
    },
    ON_UPDATE_THEMES({ themes }: { themes: { [key: string]: ThemeData } }) {
      this.removeThemes();

      this.setThemes(themes);
    },
    removeThemes() {
      for (let i = 0; i < document.styleSheets.length; i++) {
        const styleSheet = document.styleSheets[i];
        const node = styleSheet.ownerNode as Element;

        if (node.getAttribute("data-theme")) {
          node.parentNode?.removeChild(node);
        }
      }

      this.tplBackups.reverse();

      for (const [elem, oldData] of this.tplBackups) {
        elem.innerText = oldData;
      }

      this.tplBackups = [];

      this.msgTplBackups.reverse();

      for (const [id, oldData] of this.msgTplBackups) {
        this.templates[id] = oldData;
      }

      this.msgTplBackups = [];
    },
    setThemes(themes: { [key: string]: ThemeData }) {
      for (const [id, data] of Object.entries(themes)) {
        if (data.style) {
          const style = document.createElement("style");
          style.type = "text/css";
          style.setAttribute("data-theme", id);
          style.appendChild(document.createTextNode(data.style));

          document.head.appendChild(style);
        }

        if (data.styleSheet) {
          const link = document.createElement("link");
          link.rel = "stylesheet";
          link.type = "text/css";
          link.href = data.baseUrl + data.styleSheet;
          link.setAttribute("data-theme", id);

          document.head.appendChild(link);
        }

        if (data.templates) {
          for (const [tplId, tpl] of Object.entries(data.templates)) {
            const elem = document.getElementById(tplId);

            if (elem) {
              this.tplBackups.push([elem, elem.innerText]);
              elem.innerText = tpl;
            }
          }
        }

        if (data.script) {
          const script = document.createElement("script");
          script.type = "text/javascript";
          script.src = data.baseUrl + data.script;

          document.head.appendChild(script);
        }

        if (data.msgTemplates) {
          for (const [tplId, tpl] of Object.entries(data.msgTemplates)) {
            this.msgTplBackups.push([tplId, this.templates[tplId]]);
            this.templates[tplId] = tpl;
          }
        }
      }
    },
    warn(msg: string) {
      this.messages.push({
        args: [msg],
        template: "^3<b>CHAT-WARN</b>: ^0{0}"
      });
    },
    clearShowWindowTimer() {
      clearTimeout(this.showWindowTimer);
    },
    resetShowWindowTimer() {
      this.clearShowWindowTimer();
      this.showWindowTimer = window.setTimeout(() => {
        if (this.hideState !== ChatHideStates.AlwaysShow && !this.showInput) {
          this.showWindow = false;
        }
      }, CONFIG.fadeTimeout);
    },
    keyUp() {
      this.resize();
    },
    keyDown(e: KeyboardEvent) {
      if (e.which === 38 || e.which === 40) {
        e.preventDefault();
        this.moveOldMessageIndex(e.which === 38);
      } else if (e.which == 33) {
        var buf = document.getElementsByClassName("chat-messages")[0];
        buf.scrollTop = buf.scrollTop - 100;
      } else if (e.which == 34) {
        var buf = document.getElementsByClassName("chat-messages")[0];
        buf.scrollTop = buf.scrollTop + 100;
      } else if (e.which === 9) { // tab
        if (e.shiftKey || e.altKey) {
          do {
            --this.modeIdx;

            if (this.modeIdx < 0) {
              this.modeIdx = this.modes.length - 1;
            }
          } while (this.modes[this.modeIdx].hidden);
        } else {
          do {
            this.modeIdx = (this.modeIdx + 1) % this.modes.length;
          } while (this.modes[this.modeIdx].hidden);
        }

        const buf = document.getElementsByClassName('chat-messages')[0];
        setTimeout(() => buf.scrollTop = buf.scrollHeight, 0);
      }

      this.resize();
    },
    moveOldMessageIndex(up: boolean) {
      if (up && this.oldMessages.length > this.oldMessagesIndex + 1) {
        this.oldMessagesIndex += 1;
        this.message = this.oldMessages[this.oldMessagesIndex];
      } else if (!up && this.oldMessagesIndex - 1 >= 0) {
        this.oldMessagesIndex -= 1;
        this.message = this.oldMessages[this.oldMessagesIndex];
      } else if (!up && this.oldMessagesIndex - 1 === -1) {
        this.oldMessagesIndex = -1;
        this.message = "";
      }
    },
    resize() {
      const input = this.$refs.input as HTMLInputElement;

      // scrollHeight includes padding, but content-box excludes padding
      // remove padding before setting height on the element
      const style = getComputedStyle(input);
      const paddingRemove = parseFloat(style.paddingBottom) + parseFloat(style.paddingTop);

      input.style.height = "5px";
      input.style.height = `${input.scrollHeight - paddingRemove}px`;
    },
    send() {
      if (this.message !== "") {
        post(
          "http://chat/chatResult",
          JSON.stringify({
            message: this.message,
            mode: this.modes[this.modeIdxGet].name
          })
        );
        this.oldMessages.unshift(this.message);
        this.oldMessagesIndex = -1;
        this.hideInput();
      } else {
        this.hideInput(true);
      }
    },
    hideInput(canceled = false) {
      setTimeout(() => {
        const input = this.$refs.input as HTMLInputElement;
        delete input.style.height;
      }, 50);

      if (canceled) {
        post("http://chat/chatResult", JSON.stringify({ canceled }));
      }
      this.message = "";
      this.showInput = false;
      clearInterval(this.focusTimer);

      if (this.hideState !== ChatHideStates.AlwaysHide) {
        this.resetShowWindowTimer();
      } else {
        this.showWindow = false;
      }
    }
  }
});