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; })();