Client: add UI class (#6)

public_html/js/ui.js

@@ -1,27 +1,67 @@
 "use strict";
 
-// Global object for debugging purposes
+// Global objects for debugging purposes
 let client;
+let ui;
 
-// Execute this on start (wrapped in an anonymous function)
+/**
-(function() {
+ * Class for handling the UI.
+ */
+class UI {
+    constructor() {
+        this.client = null;
+
+        // Initialize the UI
+        this.initUI();
+
+        // TODO start client only after the user entered their nickname
+        this.initClient();
+    }
+
+    /**
+     * Initialize the web UI.
+     */
+    initUI() {
+        // TODO stub
+    }
+
+    /**
+     * Create instance of Client and initialize connection.
+     */
+    initClient() {
         const wsUri = AppSettings.serverWsUri;
-	client = new Client(wsUri);
+        this.client = new Client(wsUri);
 
-    // Test events
+        // Subscribe to Client events
-    client.on("initialized", () => {
+        this.client.on("initialized", this._onClientInit.bind(this));
+        this.client.on("disconnected", this._onClientDisconnect.bind(this));
+        this.client.on("connectionError", this._onClientError.bind(this));
+        this.client.on("receivedMessage", this._onClientReceivedMessage.bind(this));
+    }
+
+    _onClientInit() {
         console.log("UI: Connection initialized!");
 
         // Send a test message
-        client.sendChatMessage("Meow meow! :3");
+        this.client.sendChatMessage("Meow meow! :3");
-    });
+    }
-    client.on("disconnected", () => {
+
+    _onClientDisconnect() {
         console.log("UI: Connection closed!");
-    });
+    }
-    client.on("connectionError", () => {
+
-        console.log("UI: Connection error! :()");
+    _onClientError() {
-    });
+        console.log("UI: Connection error! :(");
-    client.on("receivedMessage", (msg) => {
+    }
+
+    _onClientReceivedMessage(msg) {
         console.log("UI: Message from '" + msg.from + "', text: '" + msg.text + "'");
-    });
+    }
+}
+
+// Execute this on start (wrapped in an anonymous function)
+(function() {
+    // TODO
+    ui = new UI();
+    client = ui.client;
 })();