[WIP] Added chat tab

src/App.tsx

@@ -14,6 +14,8 @@ import {ServerAddressInput} from "./ServerAddressInput";
 import {TabModel} from "./tabs/TabModel";
 import {WaitOverlay} from "./WaitOverlay";
 
+import {ChatTabModel} from "./tabs/chat/ChatTabModel";
+import {ChatTabView} from "./tabs/chat/ChatTabView";
 import {ConsoleTabModel} from "./tabs/console/ConsoleTabModel";
 import {ConsoleTabView} from "./tabs/console/ConsoleTabView";
 import {GamesTabModel} from "./tabs/games/GamesTabModel";
@@ -46,6 +48,7 @@ class App extends RX.Component<{}, AppState> {
   private tabs: Array<TabModel<any>> = [
     new HomeTabModel(),
     new ConsoleTabModel(),
+    new ChatTabModel(),
     new GamesTabModel(),
     new ModulesTabModel(),
     new SettingsTabModel(),
@@ -56,12 +59,13 @@ class App extends RX.Component<{}, AppState> {
   private tabViews = [
     <HomeTabView model={this.tabs[0]} />,
     <ConsoleTabView model={this.tabs[1]} />,
-    <GamesTabView model={this.tabs[2]} />,
-    <ModulesTabView model={this.tabs[3]} />,
-    <SettingsTabView model={this.tabs[4]} />,
-    <ServerAdminsTabView model={this.tabs[5]} />,
-    <UserManagementTabView model={this.tabs[6]} />,
-    <WorldMapTabView model={this.tabs[7]} />,
+    <ChatTabView model={this.tabs[2]} />,
+    <GamesTabView model={this.tabs[3]} />,
+    <ModulesTabView model={this.tabs[4]} />,
+    <SettingsTabView model={this.tabs[5]} />,
+    <ServerAdminsTabView model={this.tabs[6]} />,
+    <UserManagementTabView model={this.tabs[7]} />,
+    <WorldMapTabView model={this.tabs[8]} />,
   ];
 
   constructor(props: {}) {

src/tabs/chat/ChatTabController.tsx

@@ -0,0 +1,29 @@
+import { TabController } from "../TabController";
+import { ChatTabState, Message } from "./ChatTabState";
+
+export class ChatTabController extends TabController<ChatTabState> {
+    public static Commands = ["say", "whisper"];
+
+    public execute = () => {
+        const command: string = this.model.getState().commandToSend;
+        const m = this.model.getState();
+        const recipient: string = m.selectedRecipient;
+        if (!recipient || recipient === "ALL") {
+            this.model.requestResource({
+                data: "say " + command,
+                method: "POST",
+                resourcePath: ["console"],
+            });
+        } else {
+            const recipientName = recipient.replace("PLAYER_", "");
+            this.model.requestResource({
+                data: `whisper ${recipientName} ${command}`,
+                method: "POST",
+                resourcePath: ["console"],
+            });
+        }
+        this.model.update({
+            commandToSend: "",
+        });
+    }
+}

src/tabs/chat/ChatTabModel.tsx

@@ -0,0 +1,65 @@
+import { ActionResult } from "../../io/ActionResult";
+import { IncomingMessage } from "../../io/IncomingMessage";
+import { OnlinePlayerMetadata } from "../../io/OnlinePlayerMetadata";
+import { ResourcePath } from "../../io/ResourcePath";
+import { ResourcePathUtil } from "../../io/ResourcePath";
+import { ResourceSubscriberTabModel } from "../ResourceSubscriberTabModel";
+import { TabController } from "../TabController";
+import { ChatTabController } from "./ChatTabController";
+import { ChatTabState, Message } from "./ChatTabState";
+
+export class ChatTabModel extends ResourceSubscriberTabModel<ChatTabState> {
+
+  public getName(): string {
+    return "Chat";
+  }
+
+  public getSubscribedResourcePaths(): ResourcePath[] {
+    return [
+      ["onlinePlayers"],
+    ];
+  }
+
+  public getDefaultState(): ChatTabState {
+    return { messages: [], commandToSend: "Type a chat command here...", commands: [] };
+  }
+
+  public initController(): TabController<ChatTabState> {
+    return new ChatTabController();
+  }
+
+  public onResourceUpdated(resourcePath: ResourcePath, data: any): void {
+    if (ResourcePathUtil.equals(resourcePath, ["onlinePlayers"])) {
+      this.update({ onlinePlayers: data as OnlinePlayerMetadata[] });
+    }
+  }
+
+  public onMessage(message: IncomingMessage) {
+    super.onMessage(message);
+    if (message.messageType === "ACTION_RESULT") {
+      const innerMessage: ActionResult = message.data as ActionResult;
+      if (innerMessage.status !== "OK") {
+          // TODO: Maybe show error message here
+      }
+    }
+    if (message.messageType === "RESOURCE_EVENT" && ResourcePathUtil.equals(message.resourcePath, ["console"])) {
+      const oldState: ChatTabState = this.getState();
+      const msg: Message = (message.data) as Message;
+      if (msg.type === "CHAT" || msg.type === "CLIENT") {
+        this.update({ messages: oldState.messages.concat(msg) });
+      }
+      if (msg.type === "CONSOLE") {
+        if (msg.message === "Message sent") {
+          this.update({
+            messageSendStatus: "SENT",
+          });
+        } else if (msg.message === "User with name '[a-zA-Z0-9]+' not found.") {
+          this.update({
+            errorMessage: msg.message,
+            messageSendStatus: "ERROR",
+          });
+        }
+      }
+    }
+  }
+}

src/tabs/chat/ChatTabState.tsx

@@ -0,0 +1,16 @@
+import { OnlinePlayerMetadata } from "../../io/OnlinePlayerMetadata";
+
+export interface Message {
+  type: "CONSOLE" | "CHAT" | "ERROR" | "NOTIFICATION" | "CLIENT";
+  message: string;
+}
+
+export interface ChatTabState {
+  messages?: Message[];
+  commandToSend?: string;
+  commands?: string[];
+  messageSendStatus?: "SENDING" | "SENT" | "ERROR" | "NONE";
+  errorMessage?: string;
+  selectedRecipient?: string;
+  onlinePlayers?: OnlinePlayerMetadata[];
+}

src/tabs/chat/ChatTabView.tsx

@@ -0,0 +1,128 @@
+/* tslint:disable:prefer-for-of */
+/* tslint:disable:no-bitwise */
+
+import RX = require("reactxp");
+import Styles = require("../../styles/main");
+import { TabView } from "../TabView";
+import { ConsoleAutocomplete } from "./../console/ConsoleAutocomplete";
+import { ChatTabController } from "./ChatTabController";
+import { ChatTabState, Message } from "./ChatTabState";
+
+interface MessagePart {
+  text: string;
+  color: number;
+}
+
+export class ChatTabView extends TabView<ChatTabState> {
+
+  private firstColor: number = 0xE000;
+  private lastColor: number = 0xEFFF;
+  private resetColor: number = 0xF000;
+  private colorStyles: any = {};
+
+  public render() {
+    const controller: ChatTabController = this.props.model.getController() as ChatTabController;
+    return (
+      <RX.ScrollView>
+        <RX.View style={[Styles.flex.column, Styles.flex.fill, Styles.justifyFlexEnd]}>
+          <RX.View>
+            {this.renderMessages()}
+          </RX.View>
+        </RX.View>
+        <RX.Text>
+          {this.renderStatusText()}</RX.Text>
+        <RX.View style={Styles.flex.row}>
+          <RX.TextInput
+            style={[Styles.whiteBox, Styles.commandTextInput]}
+            value={this.state.commandToSend}
+            onChangeText={this.onChangeValue}
+            autoFocus={true}
+            onKeyPress={(event) => { this.handleKeypress(event, controller); }} />
+          {this.renderRecipientList()}
+          <RX.Button style={Styles.okButton} onPress={controller.execute}><RX.Text>Send</RX.Text></RX.Button>
+        </RX.View>
+      </RX.ScrollView>
+    );
+  }
+
+  private onChangeValue = (newValue: string) => {
+    this.props.model.update({ commandToSend: newValue });
+    ConsoleAutocomplete.clear();
+  }
+
+  private renderRecipientList() {
+    const allItem = { label: "all", value: "ALL" };
+    return (
+      <RX.Picker
+        items={[allItem].concat(this.state.onlinePlayers.map((player) => ({ label: player.name, value: "PLAYER_" + player.name })))}
+        selectedValue={this.state.selectedRecipient}
+        onValueChange={(value, position) => { this.props.model.update({ selectedRecipient: value }); }} />
+    );
+  }
+
+  private renderMessages() {
+    return this.state.messages.map((msg: Message, index: number) =>
+      <RX.Text selectable={true} key={index}>{this.renderMessage(msg.message)}</RX.Text>);
+  }
+
+  private renderStatusText() {
+    switch (this.state.messageSendStatus) {
+      case "SENDING":
+        return "Sending...";
+      case "ERROR":
+        return this.state.errorMessage;
+      case "SENT":
+        return "Sent";
+    }
+    return "";
+  }
+
+  private renderMessage(message: string): JSX.Element {
+    const parts: MessagePart[] = [];
+    let currentPart: MessagePart = { text: "", color: 0 };
+    for (let i: number = 0; i < message.length; i++) {
+      const charCode: number = message.charCodeAt(i);
+      if (charCode === this.resetColor) {
+        parts.push(currentPart);
+        currentPart = { text: "", color: 0 };
+      } else if (charCode >= this.firstColor && charCode <= this.lastColor) {
+        if (currentPart.text !== "") {
+          parts.push(currentPart);
+        }
+        currentPart = { text: "", color: charCode };
+      } else {
+        currentPart.text += message[i];
+      }
+    }
+    parts.push(currentPart);
+    const renderedParts = parts.map((part: MessagePart, index: number) => {
+      const colorId: string = part.color.toString();
+      let colorStyle: RX.Types.TextStyle;
+      if (this.colorStyles.hasOwnProperty(colorId)) {
+        colorStyle = this.colorStyles[colorId];
+      } else {
+        colorStyle = RX.Styles.createTextStyle({ color: this.colorIdToRgbString(part.color) }) as RX.Types.TextStyle;
+        this.colorStyles[colorId] = colorStyle;
+      }
+      return <RX.Text key={index} style={colorStyle}>{part.text}</RX.Text>;
+    });
+    return (
+      <RX.Text>{renderedParts}</RX.Text>
+    );
+  }
+
+  private colorIdToRgbString(colorId: number): string {
+    const rgb: number = colorId - this.firstColor;
+    const r: number = ((rgb >> 8) & 0xF) << 4;
+    const g: number = ((rgb >> 4) & 0xF) << 4;
+    const b: number = ((rgb >> 0) & 0xF) << 4;
+    return "rgb(" + r.toString() + "," + g.toString() + "," + b.toString() + ")";
+  }
+
+  private handleKeypress(event: any, controller: ChatTabController) {
+    if (event.keyCode === 13) {
+      controller.execute();
+    }
+  }
+
+}