From d24bc122966845bfc793c46aa268529f086af58f Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Mon, 1 Oct 2018 20:55:14 +0200
Subject: Added Game Page, currently with a chat

Redirects to the game page after login, keeping the connection intact
---
 .../NodeJSServer/src/modules/playModule.js         | 44 ++++++++++++++++++++++
 .../NodeJSServer/src/modules/server-client.js      | 19 +---------
 .../NodeJSServer/src/modules/ui/login-modal.js     | 21 +++++++----
 .../NodeJSServer/src/modules/ui/server-listing.js  |  3 +-
 4 files changed, 60 insertions(+), 27 deletions(-)
 create mode 100644 WebInterface/NodeJSServer/src/modules/playModule.js

(limited to 'WebInterface/NodeJSServer/src/modules')

diff --git a/WebInterface/NodeJSServer/src/modules/playModule.js b/WebInterface/NodeJSServer/src/modules/playModule.js
new file mode 100644
index 0000000..06304cc
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/modules/playModule.js
@@ -0,0 +1,44 @@
+/**
+ * Handles ingame networking;
+ */
+export default class GameClient {
+  /**
+   * Defines basic attributes
+   * @param {string} user The username of the player
+   * @param {HubConnection} connection Already established connection to the
+   *  server
+   */
+  constructor(user, connection) {
+    this.user = user;
+    this.connection = connection;
+  }
+
+  /**
+   * Registers chat html component
+   * @param {string} chatId Id of chat component
+   */
+  registerChat(chatId) {
+    this.chat = document.getElementById(chatId);
+    this.messageList = this.chat.querySelector('#message-list');
+    this.messageInput = this.chat.querySelector('#input-message');
+    this.messageSend = this.chat.querySelector('#send-message');
+
+    this.connection.on('ReceiveMessage', (user, message) => {
+      let msg = message.replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;');
+      let encodedMsg = user + ' sagt:  ' + msg;
+
+      let messageP = document.createElement('p');
+      messageP.class = 'message';
+      messageP.textContent = encodedMsg;
+
+      this.messageList.appendChild(messageP);
+    });
+
+    this.messageSend.addEventListener('click', () => {
+      let message = this.messageInput.value;
+      this.connection.invoke('SendMessage', this.user, message);
+    });
+  }
+}
diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js
index 1bc9822..2f712b5 100644
--- a/WebInterface/NodeJSServer/src/modules/server-client.js
+++ b/WebInterface/NodeJSServer/src/modules/server-client.js
@@ -34,8 +34,6 @@ export default class ServerClient {
     this.refreshing = false;
 
     this.serverListing = new ServerListing(serverListingId, notifications);
-
-    this.messageHandling();
   }
 
   /**
@@ -79,24 +77,11 @@ export default class ServerClient {
    */
   sendLogin(group, password, username, callback) {
     this.connection.on('LoginResponse', (result) => {
-      callback(result, this);
+      callback(result, this.connection);
       this.connection.off('LoginResponse');
     });
     this.connection.invoke('Login', group, username, password);
   }
-
-  /**
-   * Registers message handling
-   */
-  messageHandling() {
-    this.connection.on('ReceiveMessage', (user, message) => {
-      let msg = message.replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;');
-      let encodedMsg = user + ' sagt:  ' + msg;
-      console.log(encodedMsg); // TODO: REMOVE, JUST FOR DEBUGGING
-    });
-  }
 }
 
 /**
@@ -104,5 +89,5 @@ export default class ServerClient {
  * @callback ServerClient~loginCallback
  * @param {number} result 0: Success, 1: PasswordError, 2:UsernameTaken,
  *  3:Unknown Error
- * @param {ServerClient} client ServerClient object, that handled the login
+ * @param {ConnectionHub} connection Connection to the server
  */
diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
index d2a88c4..0bfd70d 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
@@ -86,10 +86,10 @@ export default class LoginModal extends Modal {
    */
   registerLoginBtn() {
     let eventListener;
-    let loginCallBack = (result, client) => {
+    let loginCallBack = (result, connection) => {
       console.log(result);
       if (result == 0) {
-        this.redirectToPlay(client);
+        this.redirectToPlay(connection);
         this.close();
       } else if (result == 1) {
         this.invalid('Name');
@@ -107,11 +107,11 @@ export default class LoginModal extends Modal {
     eventListener = () => {
       this.invalid(); // Remove 'invalid' messages
       this.loginButton.removeEventListener('click', eventListener);
-      let userName = this.nameInput.value;
+      this.userName = this.nameInput.value;
       this.passwordInput.value.getHash()
           .then((result) => {
             this.serverClient.sendLogin(this.serverName, result,
-                userName, loginCallBack);
+                this.userName, loginCallBack);
           });
     };
     this.loginButton.addEventListener('click', eventListener);
@@ -145,17 +145,18 @@ export default class LoginModal extends Modal {
 
   /**
    * Loads play site
-   * @param {ServerClient} serverClient Main server client
+   * @param {HubConnection} connection Connection to the server
    */
-  redirectToPlay(serverClient) {
+  redirectToPlay(connection) {
     window.history.pushState('object or string', 'Game Page',
         'play#game=' + this.serverName);
     fetch('play').then((response) => {
       response.text().then((htmlString) => {
         htmlString = htmlString.replace(/\.\.\//g, './');
         htmlString = htmlString.replace(/<script src=".*"><\/script>/, '');
+        console.log(htmlString);
         htmlString = htmlString.replace(
-            /<remove_if_redirected>.*?<\/remove_if_redirected>/g, '');
+            /<remove_if_redirected>((.)|\n)*?<\/remove_if_redirected>/g, '');
         document.open();
         document.write(htmlString);
         document.close();
@@ -164,7 +165,11 @@ export default class LoginModal extends Modal {
           ui.refresh();
         }
 
-        // import()
+        import(/* webpackChunkName: "/playModule" */ '../playModule')
+            .then(({default: GameClient}) => {
+              let gameClient = new GameClient(this.userName, connection);
+              gameClient.registerChat('chat');
+            });
       });
     });
   }
diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
index ace8a0e..78ca323 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
@@ -30,8 +30,7 @@ export default class ServerListing {
   addElements(array, serverClient, ui) {
     for (let server of array) {
       const name = server['name'];
-      const playerList = server['users'];
-      const playerAmount = playerList.length;
+      const playerAmount = server['userCount'];
 
       let serverDiv = document.createElement('div');
       let nameSpan = document.createElement('span');
-- 
cgit v1.2.3-54-g00ecf