From 9f0b255f32dfa81bffe75f89335a78a659b4ce6a Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Tue, 27 Nov 2018 12:16:33 +0100
Subject: Reworked the code, but currently unable to test, so bugs are bound to
 be in there

Will test it sometime later. There also might still be stuff, that has yet to be reworked.
---
 .../NodeJSServer/src/modules/ui/backdrop.js        |  69 --------
 .../NodeJSServer/src/modules/ui/login-modal.js     | 181 ---------------------
 WebInterface/NodeJSServer/src/modules/ui/modal.js  |  67 --------
 .../src/modules/ui/notification-banner.js          | 117 -------------
 .../NodeJSServer/src/modules/ui/server-listing.js  |  67 --------
 5 files changed, 501 deletions(-)
 delete mode 100644 WebInterface/NodeJSServer/src/modules/ui/backdrop.js
 delete mode 100644 WebInterface/NodeJSServer/src/modules/ui/login-modal.js
 delete mode 100644 WebInterface/NodeJSServer/src/modules/ui/modal.js
 delete mode 100644 WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
 delete mode 100644 WebInterface/NodeJSServer/src/modules/ui/server-listing.js

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

diff --git a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js
deleted file mode 100644
index f89a3c9..0000000
--- a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js
+++ /dev/null
@@ -1,69 +0,0 @@
-// Showing / Hiding the backdrop menu
-
-/**
- * Class for adding functionality to backdrop elements
- */
-export default class Backdrop {
-  /**
-   * Registers all important elements in the backdrop
-   * @param {string} backdropMenu ID of Backdrop Menu
-   * @param {string} frontLayer ID of Front Layer
-   * @param {string} menuButton ID of Show / Hide Menu Button
-   */
-  constructor(backdropMenu, frontLayer, menuButton) {
-    this.ids = {backdropMenu, frontLayer, menuButton};
-    this.backdrop = document.getElementById(backdropMenu);
-    this.frontLayer = document.getElementById(frontLayer);
-    this.menuButton = document.getElementById(menuButton);
-  }
-
-  /**
-   * Registers all neccessary events
-   */
-  register() {
-    this.registerButtonEvent();
-    this.registerFrontLayerEvent();
-  }
-
-  /**
-   * Reloads the object
-   */
-  refresh() {
-    this.backdrop = document.getElementById(this.ids.backdropMenu);
-    this.frontLayer = document.getElementById(this.ids.frontLayer);
-    this.menuButton = document.getElementById(this.ids.menuButton);
-    this.register();
-  }
-
-  /**
-   * Registers showing / hiding through menu button
-   */
-  registerButtonEvent() {
-    this.menuButton.addEventListener('click', () => {
-      // Hide / Unhide Backdrop Menu
-      if (this.backdrop.classList.contains('hidden')) {
-        this.backdrop.classList.remove('hidden');
-      } else {
-        this.backdrop.classList.add('hidden');
-      }
-
-      // Set open state for menu button
-      if (this.menuButton.classList.contains('open')) {
-        this.menuButton.classList.remove('open');
-      } else {
-        this.menuButton.classList.add('open');
-      }
-    });
-  }
-
-  /**
-   * Registers hiding, when clicking on the front layer
-   */
-  registerFrontLayerEvent() {
-    // Hide menu when interacting with front layer
-    this.frontLayer.addEventListener('click', () => {
-      this.backdrop.classList.add('hidden');
-      this.menuButton.classList.remove('open');
-    });
-  }
-}
diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
deleted file mode 100644
index 13de78e..0000000
--- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import Modal from './modal.js';
-import '../hash.js';
-
-/**
- * Class to implement a login modal from the parent modal class
- */
-export default class LoginModal extends Modal {
-  /**
-   * Creates necessary elements for login modal
-   * @param {string} serverName Name of the server, used for login and displayed
-   *  in title
-   * @param {ServerClient} serverClient Server client object used to send the
-   *  login
-   * @param {BannerController} notificationManager Object controlling the main
-   *  notification banners
-   * @param {array} ui UI elements to call refresh method on after login
-   */
-  constructor(serverName, serverClient, notificationManager, ui) {
-    super(serverName);
-    this.serverName = serverName;
-    this.serverClient = serverClient;
-    this.notificationManager = notificationManager;
-    this.pageUI = ui;
-
-    let passBox = document.createElement('div');
-    let nameBox = document.createElement('div');
-    let sendBox = document.createElement('div');
-
-    let passwordLabel = document.createElement('label');
-    let passwordInput = document.createElement('input');
-    let passwordInvalid = document.createElement('span');
-    passwordLabel.setAttribute('for', 'password-input');
-    passwordLabel.textContent = 'Passwort:';
-    passwordLabel.title = 'Das Passwort des Spiels';
-    passwordInput.id = 'password-input';
-    passwordInput.type = 'password';
-    passwordInput.placeholder = 'Passwort';
-    passwordInput.title = 'Das Passwort des Spiels';
-    passwordInvalid.className = 'invalid hidden';
-    passwordInvalid.textContent = 'Das eingegebene Passwort ist falsch.';
-
-    let nameLabel = document.createElement('label');
-    let nameInput = document.createElement('input');
-    let nameInvalid = document.createElement('span');
-    nameLabel.setAttribute('for', 'name-input');
-    nameLabel.textContent = 'Benutzername:';
-    nameLabel.title = 'Dein Anzeigename';
-    nameInput.id = 'name-input';
-    nameInput.type = 'text';
-    nameInput.autocomplete = 'on';
-    nameInput.placeholder = 'Name';
-    nameInput.title = 'Dein Anzeigename';
-    nameInvalid.className = 'invalid hidden';
-    nameInvalid.textContent =
-        'Der eingegebene Nutzername ist bereits vergeben.';
-
-    let sendButton = document.createElement('button');
-    sendButton.className = 'btn';
-    sendButton.textContent = 'Login';
-    sendButton.id = 'login-button';
-
-    passBox.appendChild(passwordLabel);
-    passBox.appendChild(passwordInput);
-    passBox.appendChild(passwordInvalid);
-    nameBox.appendChild(nameLabel);
-    nameBox.appendChild(nameInput);
-    nameBox.appendChild(nameInvalid);
-    sendBox.appendChild(sendButton);
-
-    this.body.appendChild(passBox);
-    this.body.appendChild(nameBox);
-    this.body.appendChild(sendBox);
-
-    this.nameInput = nameInput;
-    this.passwordInput = passwordInput;
-    this.loginButton = sendButton;
-
-    this.passwordInvalid = passwordInvalid;
-    this.nameInvalid = nameInvalid;
-
-    this.registerLoginBtn();
-  }
-
-  /**
-   * Registers event to send login, on button press
-   */
-  registerLoginBtn() {
-    let eventListener;
-    let loginCallBack = (result, connection) => {
-      console.log(result);
-      if (result == 0) {
-        this.redirectToPlay(connection);
-        this.close();
-      } else if (result == 1) {
-        this.invalid('Name');
-        this.loginButton.addEventListener('click', eventListener);
-      } else if (result == 2) {
-        this.invalid('Pass');
-        this.loginButton.addEventListener('click', eventListener);
-      } else {
-        this.notificationManager.show('unknownLoginErr',
-            'Ein unbekannter Fehler ist aufgetreten');
-        this.close();
-      }
-    };
-
-    eventListener = () => {
-      this.invalid(); // Remove 'invalid' messages
-      this.loginButton.removeEventListener('click', eventListener);
-      this.userName = this.nameInput.value;
-      this.passwordInput.value.getHash()
-          .then((result) => {
-            this.serverClient.sendLogin(this.serverName, result,
-                this.userName, loginCallBack);
-          });
-    };
-    this.loginButton.addEventListener('click', eventListener);
-  }
-
-  /**
-   * Displays text under invalid password / username
-   * @param {string} inv Which field to display under (Pass / Name)
-   *  Blank inv will hide both
-   */
-  invalid(inv) {
-    this.body.classList.remove('frst-warning');
-    this.body.classList.remove('scnd-warning');
-
-    this.passwordInvalid.classList.add('hidden');
-    this.nameInvalid.classList.add('hidden');
-
-    this.passwordInput.style.borderColor = 'none';
-    this.nameInput.style.borderColor = 'none';
-
-    if (inv == 'Pass') {
-      this.body.classList.add('frst-warning');
-      this.passwordInvalid.classList.remove('hidden');
-      this.passwordInput.style.borderColor = '#ef5350';
-    } else if (inv == 'Name') {
-      this.body.classList.add('scnd-warning');
-      this.nameInvalid.classList.remove('hidden');
-      this.nameInput.style.borderColor = '#ef5350';
-    }
-  }
-
-  /**
-   * Loads play site
-   * @param {HubConnection} connection Connection to the server
-   */
-  redirectToPlay(connection) {
-    window.history.pushState('object or string', 'Game Page',
-        'play#game=' + this.serverName);
-    fetch('play').then((response) => {
-      response.text().then((htmlString) => {
-        // Replace all references, since we're starting one level farther up
-        htmlString = htmlString.replace(/\.\.\//g, './');
-        htmlString = /<body>((.)|(\n))*<\/body>/g.exec(htmlString)[0];
-        htmlString = htmlString.replace(/<script src=".*"><\/script>/, '');
-        htmlString = htmlString.replace(
-            /<remove_if_redirected>((.)|\n)*?<\/remove_if_redirected>/g, '');
-        document.body.innerHTML = htmlString;
-
-        let stylesheet = document.createElement('link');
-        stylesheet.rel = 'stylesheet';
-        stylesheet.type = 'text/css';
-        stylesheet.href = './style/play.css';
-        document.head.appendChild(stylesheet);
-
-        for (let ui of this.pageUI) {
-          ui.refresh();
-        }
-
-        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/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js
deleted file mode 100644
index 10a1be5..0000000
--- a/WebInterface/NodeJSServer/src/modules/ui/modal.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Parent class to create Modals on the screen
- * Contains no content, as that is implemented by child classes
- */
-export default class Modal {
-  /**
-   * Creates a new modal with a title and empty content
-   * @param {string} titleString Title to show at the top of the modal
-   */
-  constructor(titleString) {
-    let modalBackground = document.createElement('div');
-    let modal = document.createElement('div');
-    let title = document.createElement('h1');
-    let body = document.createElement('div');
-
-    modalBackground.className = 'modal-container';
-    modal.className = 'modal';
-    title.className = 'modal-title';
-    body.className = 'modal-body';
-
-    title.textContent = titleString;
-
-    modal.appendChild(title);
-    modal.appendChild(body);
-    modalBackground.appendChild(modal);
-    document.body.appendChild(modalBackground);
-
-    this.bg = modalBackground;
-    this.modal = modal;
-    this.title = title;
-    this.body = body;
-
-    this.registerEvents();
-  }
-
-  /**
-   * Register event to close if clicked outside of modal
-   * Clicking on the modal itself should not close it though
-   */
-  registerEvents() {
-    this.modal.addEventListener('click', (e) => {
-      e.stopPropagation();
-    });
-
-    this.bg.addEventListener('click', () => {
-      this.close();
-    });
-  }
-
-  /**
-   * Fades modal out and removes it from the flow of the document
-   */
-  close() {
-    this.bg.classList.add('hidden');
-    this.bg.addEventListener('transitionend', () => {
-      document.body.removeChild(this.bg);
-    });
-  }
-
-  /**
-   * Puts text in the body
-   * @param {string} text Text to put into the body
-   */
-  setBodyText(text) {
-    this.body.textContent = text;
-  }
-}
diff --git a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
deleted file mode 100644
index 7e6b8cb..0000000
--- a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Class for controlling the Notification banner
- */
-export default class BannerController {
-  /**
-   * Creates references to objects and hides notification banner
-   * @param {string} bannerId ID of Notification Banner
-   * @param {string} textP ID of Notification Banner text field
-   * @param {string} dismissBtn ID of dismiss button
-   * @param {string} notificationBadge ID of badge (# of notifications)
-   */
-  constructor(bannerId, textP, dismissBtn, notificationBadge) {
-    this.ids = {bannerId, textP, dismissBtn, notificationBadge};
-    this.banner = document.getElementById(bannerId);
-    this.bannerText = document.getElementById(textP);
-    this.dismissBtn = document.getElementById(dismissBtn);
-    this.notificationBadge = document.getElementById(notificationBadge);
-    this.bannerMsgs = [];
-
-    // Hide Banner after JS loading finished
-    this.banner.classList.add('hidden');
-  }
-
-  /**
-   * Registers dismissing via the dismiss button
-   */
-  register() {
-    this.dismissBtn.addEventListener('click', () => {
-      this.dismissCurrent();
-    });
-  }
-
-  /**
-   * Reloads the object
-   */
-  refresh() {
-    this.banner = document.getElementById(this.ids.bannerId);
-    this.bannerText = document.getElementById(this.ids.textP);
-    this.dismissBtn = document.getElementById(this.ids.dismissBtn);
-    this.notificationBadge = document.getElementById(
-        this.ids.notificationBadge);
-    this.bannerMsgs = [];
-
-    // Hide Banner after JS loading finished
-    this.banner.classList.add('hidden');
-  }
-
-  /**
-   * Pushes a new message to the notification banner and shows it
-   * @param {string} name Name to register notification (referenced in hide)
-   * @param {string} text Notification text
-   */
-  show(name, text) {
-    let bannerItem = {name, text, 'html': false};
-    this.bannerMsgs.push(bannerItem);
-
-    this.update();
-  }
-
-  /**
-   * Removes notification from banner
-   * @param {string} name Name, that the notification was registered under
-   */
-  hide(name) {
-    if (!name) {
-      this.bannerMsgs = [];
-      this.banner.classList.add('hidden');
-    } else {
-      for (let i = 0; i < this.bannerMsgs.length; i++) {
-        if (this.bannerMsgs[i].name == name) {
-          this.bannerMsgs.splice(i, 1);
-        }
-      }
-
-      this.update();
-    }
-  }
-
-  /**
-   * Dismisses the currently shown message
-   */
-  dismissCurrent() {
-    this.hide(this.current);
-  }
-
-  /**
-   * Updates the notification banner with the most recent message
-   */
-  update() {
-    if (this.bannerMsgs.length === 0) {
-      this.banner.classList.add('hidden');
-      return;
-    }
-
-    const lastNotification = this.bannerMsgs[this.bannerMsgs.length - 1];
-    const name = lastNotification.name;
-    const text = lastNotification.text;
-    const html = lastNotification.html;
-    this.banner.classList.remove('hidden');
-
-    if (html) this.bannerText.innerHTML = text;
-    else this.bannerText.innerText = text;
-
-    this.current = name;
-
-    // Update notification badge
-    if (this.bannerMsgs.length < 2) {
-      this.notificationBadge.classList.add('hidden');
-    } else if (this.bannerMsgs.length > 9) {
-      this.notificationBadge.classList.remove('hidden');
-      this.notificationBadge.textContent = '∞';
-    } else {
-      this.notificationBadge.classList.remove('hidden');
-      this.notificationBadge.textContent = this.bannerMsgs.length.toString();
-    }
-  }
-}
diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
deleted file mode 100644
index 78ca323..0000000
--- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import LoginModal from './login-modal.js';
-
-/**
- * Class for handling the server list
- */
-export default class ServerListing {
-  /**
-   * Creates reference to container
-   * @param {string} serverListId ID of the server list div
-   * @param {BannerController} notifications Notification Manager
-   */
-  constructor(serverListId, notifications) {
-    this.serverListing = document.getElementById(serverListId);
-    this.notifications = notifications;
-  }
-
-  /**
-   * Removes all elements currently in the server listing
-   */
-  flushElements() {
-    this.serverListing.innerHTML = '';
-  }
-
-  /**
-   * Populates servers from a given array of games
-   * @param {array} array Array of available games
-   * @param {ServerClient} serverClient Server Client to handle login
-   * @param {array} ui UI Elements to reload after login
-   */
-  addElements(array, serverClient, ui) {
-    for (let server of array) {
-      const name = server['name'];
-      const playerAmount = server['userCount'];
-
-      let serverDiv = document.createElement('div');
-      let nameSpan = document.createElement('span');
-      let rightAlignDiv = document.createElement('div');
-      let onlineDot = document.createElement('div');
-      let playerCountSpan = document.createElement('span');
-      let playerCountStaticSpan = document.createElement('span');
-      let joinButton = document.createElement('button');
-      serverDiv.className = 'server';
-      nameSpan.className = 'server-name';
-      rightAlignDiv.className = 'right-aligned-items';
-      onlineDot.className = 'player-count-dot';
-      playerCountSpan.className = 'player-count';
-      playerCountStaticSpan.className = 'player-count-static';
-      joinButton.className = 'btn join-btn';
-      joinButton.id = 'join';
-      nameSpan.textContent = name;
-      playerCountSpan.textContent = playerAmount;
-      playerCountStaticSpan.textContent = 'Spieler online';
-      joinButton.textContent = 'Beitreten';
-      joinButton.addEventListener('click', () => {
-        new LoginModal(name, serverClient, this.notifications, ui);
-      });
-
-      rightAlignDiv.appendChild(onlineDot);
-      rightAlignDiv.appendChild(playerCountSpan);
-      rightAlignDiv.appendChild(playerCountStaticSpan);
-      rightAlignDiv.appendChild(joinButton);
-      serverDiv.appendChild(nameSpan);
-      serverDiv.appendChild(rightAlignDiv);
-      this.serverListing.appendChild(serverDiv);
-    }
-  }
-}
-- 
cgit v1.2.3-54-g00ecf