diff --git a/public_html/js/ui.js b/public_html/js/ui.js
index 5411255..63558ca 100644
--- a/public_html/js/ui.js
+++ b/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() {
- const wsUri = AppSettings.serverWsUri;
- client = new Client(wsUri);
+/**
+ * Class for handling the UI.
+ */
+class UI {
+ constructor() {
+ this.client = null;
- // Test events
- client.on("initialized", () => {
+ // 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;
+ this.client = new Client(wsUri);
+
+ // Subscribe to Client events
+ 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");
- });
- client.on("disconnected", () => {
+ this.client.sendChatMessage("Meow meow! :3");
+ }
+
+ _onClientDisconnect() {
console.log("UI: Connection closed!");
- });
- client.on("connectionError", () => {
- console.log("UI: Connection error! :()");
- });
- client.on("receivedMessage", (msg) => {
+ }
+
+ _onClientError() {
+ console.log("UI: Connection error! :(");
+ }
+
+ _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;
})();