diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src')
30 files changed, 955 insertions, 102 deletions
diff --git a/WebInterface/NodeJSServer/src/about.js b/WebInterface/NodeJSServer/src/about.js deleted file mode 100644 index 1561a2f..0000000 --- a/WebInterface/NodeJSServer/src/about.js +++ /dev/null @@ -1,4 +0,0 @@ -import Backdrop from './modules/ui/backdrop.js'; - -let backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); -backdrop.register(); diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js deleted file mode 100644 index 5b2e622..0000000 --- a/WebInterface/NodeJSServer/src/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import Backdrop from './modules/ui/backdrop.js'; -import BannerController from './modules/ui/notification-banner.js'; -import ServerClient from './modules/server-client.js'; - -let backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); -backdrop.register(); - -let notifications = new BannerController('notifications', - 'banner-info', 'dismiss-banner', 'notification-amount'); -notifications.register(); - -let client = new ServerClient('http://127.0.0.1:5000/chatHub', - 'server-list', notifications, [backdrop, notifications], true); -document.getElementById('refresh-button') - .addEventListener('click', - client.loadServers.bind(client)); - -window.client = client; // TODO: REMOVE, JUST FOR DEBUGGING diff --git a/WebInterface/NodeJSServer/src/js/about.js b/WebInterface/NodeJSServer/src/js/about.js new file mode 100644 index 0000000..23351cf --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/about.js @@ -0,0 +1,6 @@ +import Interface from './modules/interface'; +import UIManager from './modules/ui/uiManager'; + +let iface = new Interface(); +let uiMan = new UIManager(iface); +uiMan.initAbout(); diff --git a/WebInterface/NodeJSServer/src/js/index.js b/WebInterface/NodeJSServer/src/js/index.js new file mode 100644 index 0000000..6d84e7d --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/index.js @@ -0,0 +1,12 @@ +import Interface from './modules/interface'; +import UIManager from './modules/ui/uiManager'; +import Networker from './modules/networking/networker'; + +const SERVERURL = 'http://127.0.0.1:5000/chatHub'; + +let iface = new Interface(); +let uiMan = new UIManager(iface); +uiMan.initLogin(); + +let netMan = new Networker(iface, SERVERURL, true); // TODO: Remove debug flag +netMan.initLogin(); diff --git a/WebInterface/NodeJSServer/src/js/modules/interface.js b/WebInterface/NodeJSServer/src/js/modules/interface.js new file mode 100644 index 0000000..ac5ea93 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/interface.js @@ -0,0 +1,82 @@ +/** + * Stores an object and it's public methods + */ +class InterfaceAccessor { + /** + * Creates new accessor for object with publicMethods being exposed + * @param {object} object + * @param {array<String>} publicMethods + */ + constructor(object, publicMethods) { + this.object = object; + this.publicMethods = publicMethods; + } + + /** + * Executes method if it is a public method + * @param {string} method Name of method to call + * @return {number} 0 success, 1 method not public, 2 method not found + */ + execute(method, ...args) { + if (!this.publicMethods.includes(method)) return 1; + if (typeof this.object[method] != 'function') return 2; + + this.object[method](...args); + return 0; + } +} + +/** + * Implements communication between objects + */ +export default class Interface { + /** + * Initializes interface + */ + constructor() { + this.objects = {}; + } + + /** + * Adds a new object to array at objKey and assigns public methods + * @param {object} object Object to reference in Interface + * @param {String} objKey Key to reference the object under + * @param {Array} publicMethods Names of public methods + */ + addObject(object, objKey, publicMethods) { + if (!this.objects[objKey]) this.objects[objKey] = []; + this.objects[objKey].push(new InterfaceAccessor(object, publicMethods)); + } + + /** + * Unregisters object + * @param {Object} object + * @param {String} objKey + */ + removeObject(object, objKey) { + if (!this.objects[objKey]) return; + + // Remove all instances of object from objKey + objects[objKey] = objects[objKey].filter(elt => elt.object != object); + + // Remove reference, if none remain + if (objects[objKey].length == 0) objects[objKey] = undefined; + } + + /** + * Calls a method on all objects with the key objKey + * @param {String} objKey Object Key of objects to call method on + * @param {String} method Method name to call on the objects + * @param {...*} args Arguments to pass + * @return {number} 0 Success, 1 no objects with objKey, 2 method not public + */ + callMethod(objKey, method, ...args) { + if (!this.objects[objKey]) return 1; + + let returnCode = 0; + for (let obj of this.objects[objKey]) { + if (obj.execute(method, ...args) != 0) returnCode = 2; + } + return returnCode; + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/networking/commands/_command.js b/WebInterface/NodeJSServer/src/js/modules/networking/commands/_command.js new file mode 100644 index 0000000..46a1a14 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/networking/commands/_command.js @@ -0,0 +1,28 @@ +/** + * Parent Command class which all commands inherit from + */ +export default class Command { + /** + * Constructs basic command object + * @param {Interface} iface Interface to communicate over + */ + constructor(iface) { + this.iface = iface; + } + + /** + * Registers public command names to interface + * @param {String} name Name to register under + * @param {...String} commandNames Names of public commands + */ + registerPublic(name, ...commandNames) { + this.iface.addObject(this, name, ['destroy'].concat(commandNames)); + } + + /** + * Removes from iface + */ + destroy() { + this.iface.removeObject(this); + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/createServer.js b/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/createServer.js new file mode 100644 index 0000000..78b2a1b --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/createServer.js @@ -0,0 +1,23 @@ +import Command from '../_command'; + +/** + * Handles creation of Servers + */ +export default class CreateServer extends Command { + /** + * Registers interface for communication with other objects + * @param {Interface} iface + */ + constructor(iface) { + super(iface); + this.registerPublic('createServer', 'createServer'); + this.refreshing = false; + } + + /** + * TODO: + */ + createServer() { + + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/listServers.js b/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/listServers.js new file mode 100644 index 0000000..2c2bc11 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/listServers.js @@ -0,0 +1,43 @@ +import Command from '../_command'; + +/** + * Handles serverList commands + */ +export default class ListServers extends Command { + /** + * Registers interface for communication with other objects + * @param {Interface} iface + */ + constructor(iface) { + super(iface); + this.registerPublic('listServers', 'listServers'); + this.refreshing = false; + } + + /** + * Requests server list from the server + */ + listServers() { + if (this.refreshing) return; // If already refreshing, no new request + + let listFn = (groups) => { + // Populate server listing + this.iface.callMethod('serverListing', 'flushElements'); + this.iface.callMethod('serverListing', 'addElements', groups, this.iface); + // Unbind network function + this.iface.callMethod('networker', 'removeHandler', 'ListGroups'); + this.refreshing = false; + }; + let errorHandler = (err) => { + this.refreshing = false; + console.error(err.toString()); + }; + + this.iface.callMethod('networker', 'registerHandler', + 'ListGroups', listFn); + this.iface.callMethod('networker', 'sendRequest', + 'GetGroups', errorHandler); + + this.refreshing = true; + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/login.js b/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/login.js new file mode 100644 index 0000000..44a6c94 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/networking/commands/login/login.js @@ -0,0 +1,54 @@ +import Command from '../_command'; +import LoginModal from '../../../ui/components/modal/login-modal'; + +/** + * Handles login to server + */ +export default class Login extends Command { + /** + * Registers interface for communication with other objects + * @param {Interface} iface + */ + constructor(iface) { + super(iface); + this.registerPublic('login', 'sendLogin', 'showLogin'); + this.refreshing = false; + } + + /** + * Shows a login modal + * @param {String} name + */ + showLogin(name) { + new LoginModal(this.iface, name); + } + + /** + * Registers login response method + */ + registerLoginResponse() { + this.iface.callMethod('networker', 'registerHandler', 'LoginResponse', + (result) => { + if (result == 0) { + this.iface.callMethod('modal', 'close'); + this.iface.callMethod('router', 'routePlay'); + this.iface.callMethod('networker', 'removeHandler', + 'LoginResponse'); + } else { + this.iface.callMethod('modal', 'loginFailed', result); + } + }); + } + + /** + * Sends a login request + * @param {string} group Group name to join + * @param {string} password Password to send as SHA-256 Base64 String + * @param {string} username Display name to use + */ + sendLogin(group, password, username) { + this.registerLoginResponse(); + this.iface.callMethod('networker', 'sendRequest', 'Login', + (err) => console.error(err), group, username, password); + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/networking/commands/loginCmds.js b/WebInterface/NodeJSServer/src/js/modules/networking/commands/loginCmds.js new file mode 100644 index 0000000..bc5d8a7 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/networking/commands/loginCmds.js @@ -0,0 +1,36 @@ +import ListServers from './login/listServers'; +import CreateServer from './login/createServer'; +import Login from './login/login'; + +/** + * Manages commands related to the login page + */ +export default class LoginCommands { + /** + * Initializes the login commands + * @param {Interface} iface Interface for inter-object communication + */ + constructor(iface) { + this.iface = iface; + this.cmds = []; + this.registerCommands(); + } + + /** + * Registers all the available commands + */ + registerCommands() { + this.cmds.push(new ListServers(this.iface)); + this.cmds.push(new CreateServer(this.iface)); + this.cmds.push(new Login(this.iface)); + } + + /** + * Destroys all attached commands + */ + destroy() { + for (let cmd of this.cmds) { + cmd.destroy(); + } + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/networking/commands/playCmds.js b/WebInterface/NodeJSServer/src/js/modules/networking/commands/playCmds.js new file mode 100644 index 0000000..94cd6ba --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/networking/commands/playCmds.js @@ -0,0 +1,31 @@ +// import ListServers from './login/listServers'; + +/** + * Manages commands related to the login page + */ +export default class LoginCommands { + /** + * Initializes the login commands + * @param {Interface} iface Interface for inter-object communication + */ + constructor(iface) { + this.iface = iface; + this.cmds = []; + } + + /** + * Registers all the available commands + */ + registerCommands() { + // this.cmds.push(new ListServers(iface)); + } + + /** + * Destroys all attached commands + */ + destroy() { + for (let cmd of this.cmds) { + cmd.destroy(); + } + } +} diff --git a/WebInterface/NodeJSServer/src/modules/hash.js b/WebInterface/NodeJSServer/src/js/modules/networking/hash.js index 3abcc21..3abcc21 100644 --- a/WebInterface/NodeJSServer/src/modules/hash.js +++ b/WebInterface/NodeJSServer/src/js/modules/networking/hash.js diff --git a/WebInterface/NodeJSServer/src/js/modules/networking/networker.js b/WebInterface/NodeJSServer/src/js/modules/networking/networker.js new file mode 100644 index 0000000..7667895 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/networking/networker.js @@ -0,0 +1,89 @@ +import * as signalR from '@aspnet/signalr'; +import LoginCommands from './commands/loginCmds'; +import PlayCommands from './commands/playCmds'; + +/** + * Class for communication to server + */ +export default class Networker { + /** + * Creates new Networker and connects it to the Interface + * @param {Interface} iface Interface for communication between objects + * @param {String} url URL of the server backend + * @param {Boolean} [debug=false] Should there be debug output + */ + constructor(iface, url, debug = false) { + this.url = url; + + // Register in Interface + iface.addObject(this, 'networker', + ['sendRequest', 'registerHandler', 'removeHandler']); + this.iface = iface; + + const connectionBuilder = new signalR.HubConnectionBuilder() + .withUrl(url); + + if (debug) { + connectionBuilder.configureLogging(signalR.LogLevel.Debug); + } else { + connectionBuilder.configureLogging(signalR.LogLevel.Error); + } + + this.connection = connectionBuilder.build(); + this.connection.start() + .then(() => this.iface.callMethod('listServers', 'listServers')) + .catch((err) => console.error(err.toString())); + + // Initialize refreshing (blocks new refreshes if true) + this.refreshing = false; + } + + /** + * Sending a network request to the server + * @param {String} methodName Method to call on server + * @param {function} errorHandler Function to call on error + * @param {...*} args Arguments to pass to server + */ + sendRequest(methodName, errorHandler, ...args) { + this.connection.invoke(methodName, ...args).catch(errorHandler); + } + + /** + * Register a new function to be called upon receival of message from server + * @param {String} name Name of invoked method + * @param {function} fn function to call with received data + */ + registerHandler(name, fn) { + this.connection.on(name, fn); + } + + /** + * Removes handler for receiving messages from the server + * @param {String} name Name of the invoked method + */ + removeHandler(name) { + this.connection.off(name); + } + + /** + * Initializes Login Commands + */ + initLogin() { + this.loginCmd = new LoginCommands(this.iface); + } + + /** + * Initializes play commands + */ + initPlay() { + this.playCmd = new PlayCommands(this.iface); + } + + /** + * Clears all currently registered commands + */ + clearCommands() { + if (this.loginCmd) this.loginCmd.destroy(); + if (this.playCmd) this.playCmd.destroy(); + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/collections/about.js b/WebInterface/NodeJSServer/src/js/modules/ui/collections/about.js new file mode 100644 index 0000000..dac8f01 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/ui/collections/about.js @@ -0,0 +1,14 @@ +import Backdrop from '../components/backdrop'; + +/** + * UI Loader for about page + */ +export default class About { + /** + * Registers components for about page + */ + constructor() { + this.backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); + this.backdrop.initialize(); + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/collections/login.js b/WebInterface/NodeJSServer/src/js/modules/ui/collections/login.js new file mode 100644 index 0000000..98a6b30 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/ui/collections/login.js @@ -0,0 +1,24 @@ +import Backdrop from '../components/backdrop'; +import BannerController from '../components/notification-banner'; +import ServerListing from '../components/server-listing'; + +/** + * UI Loader for login page + */ +export default class Login { + /** + * Registers components for login page + * @param {Interface} iface Interface to enable comm. with notifications + */ + constructor(iface) { + this.backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); + this.bannerController = new BannerController(iface, 'notifications', + 'banner-info', 'dismiss-banner', 'notification-amount'); + this.serverListing = new ServerListing(iface, 'server-list', + 'refresh-button'); + + this.backdrop.initialize(); + this.bannerController.initialize(); + this.serverListing.initialize(); + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/collections/play.js b/WebInterface/NodeJSServer/src/js/modules/ui/collections/play.js new file mode 100644 index 0000000..cdea777 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/ui/collections/play.js @@ -0,0 +1,19 @@ +import Backdrop from '../components/backdrop'; +import BannerController from '../components/notification-banner'; + +/** + * UI Loader for play page + */ +export default class Play { + /** + * Registers components for play page + */ + constructor() { + this.backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); + this.bannerController = new BannerController(iface, 'notifications', + 'banner-info', 'dismiss-banner', 'notification-amount'); + + this.backdrop.initialize(); + this.bannerController.initialize(); + } +} diff --git a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/backdrop.js index f89a3c9..82ca64f 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js +++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/backdrop.js @@ -1,5 +1,3 @@ -// Showing / Hiding the backdrop menu - /** * Class for adding functionality to backdrop elements */ @@ -12,27 +10,26 @@ export default class Backdrop { */ 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 + * Initializes the components from the ids defined in the constructor */ - register() { - this.registerButtonEvent(); - this.registerFrontLayerEvent(); + initialize() { + this.open = false; + this.backdrop = document.getElementById(this.ids.backdropMenu); + this.frontLayer = document.getElementById(this.ids.frontLayer); + this.menuButton = document.getElementById(this.ids.menuButton); + + this.registerEvents(); } /** - * Reloads the object + * Registers all neccessary events */ - refresh() { - this.backdrop = document.getElementById(this.ids.backdropMenu); - this.frontLayer = document.getElementById(this.ids.frontLayer); - this.menuButton = document.getElementById(this.ids.menuButton); - this.register(); + registerEvents() { + this.registerButtonEvent(); + this.registerFrontLayerEvent(); } /** @@ -40,28 +37,27 @@ export default class Backdrop { */ registerButtonEvent() { this.menuButton.addEventListener('click', () => { + // Change open state + this.open = !this.open; + // Hide / Unhide Backdrop Menu - if (this.backdrop.classList.contains('hidden')) { - this.backdrop.classList.remove('hidden'); - } else { - this.backdrop.classList.add('hidden'); - } + this.open ? this.backdrop.classList.remove('hidden') : + 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'); - } + this.open ? this.menuButton.classList.add('open') : + this.menuButton.classList.remove('open'); }); } /** - * Registers hiding, when clicking on the front layer + * Registers hiding upon front layer interaction */ registerFrontLayerEvent() { - // Hide menu when interacting with front layer this.frontLayer.addEventListener('click', () => { + if (!this.open) return; // It's already closed + + this.open = false; this.backdrop.classList.add('hidden'); this.menuButton.classList.remove('open'); }); diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js new file mode 100644 index 0000000..941fd84 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/login-modal.js @@ -0,0 +1,139 @@ +import Modal from './modal'; +import '../../../networking/hash'; + +/** + * Class to implement a login modal from the parent modal class + */ +export default class LoginModal extends Modal { + /** + * Creates necessary elements for login modal + * @param {Interface} iface Interface for Interactions with other Objects + * @param {string} serverName Name of the server to connect to + */ + constructor(iface, serverName) { + super(serverName); + this.serverName = serverName; + + iface.addObject(this, 'modal', ['loginFailed', 'close']); + this.iface = iface; + + 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.registerLoginBtnEvent(); + } + + /** + * Method that gets called, if login fails + * @param {number} result Error Code + */ + loginFailed(result) { + if (result == 1) { + this.invalid('Name'); + this.loginButton.addEventListener('click', this.event); + } else if (result == 2) { + this.invalid('Pass'); + this.loginButton.addEventListener('click', this.event); + } else { + this.iface.callMethod('notifications', 'show', 'failed', + 'Ein unbekannter Fehler ist aufgetreten'); + this.close(); + } + } + + /** + * Registers event to send login, on button press + */ + registerLoginBtnEvent() { + this.event = () => { + this.invalid(); // Remove 'invalid' messages + this.loginButton.removeEventListener('click', this.event); + this.userName = this.nameInput.value; + this.passwordInput.value.getHash() + .then((result) => { + this.iface.callMethod('login', 'sendLogin', this.serverName, + result, this.userName); + }); + }; + this.loginButton.addEventListener('click', this.event); + } + + /** + * 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'; + } + } +} diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js index 10a1be5..10a1be5 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/modal.js +++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/modal/modal.js diff --git a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/notification-banner.js index 7e6b8cb..a527725 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js +++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/notification-banner.js @@ -1,48 +1,67 @@ /** + * Object containing a message for the notification banner + */ +class BannerItem { + /** + * Creates new Banner Message Items + * @param {String} name Name the message will be referenced under + * @param {String} content Content, either formatted as plain text or html + * @param {Boolean} html Is content formatted as html? + */ + constructor(name, content, html) { + this.name = name; + this.content = content; + this.html = html; + } +} + +/** * Class for controlling the Notification banner */ export default class BannerController { /** * Creates references to objects and hides notification banner + * @param {Interface} iface Interface to receive comm. from * @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) + * @param {string} badge 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 = []; + constructor(iface, bannerId, textP, dismissBtn, badge) { + iface.addObject(this, 'notifications', ['show', 'hide']); + this.iface = iface; - // Hide Banner after JS loading finished - this.banner.classList.add('hidden'); + this.ids = {bannerId, textP, dismissBtn, badge}; } /** - * Registers dismissing via the dismiss button + * Initializes the Banner in the DOM */ - register() { - this.dismissBtn.addEventListener('click', () => { - this.dismissCurrent(); - }); - } - - /** - * Reloads the object - */ - refresh() { + initialize() { 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.notificationBadge = document.getElementById(this.ids.badge); this.bannerMsgs = []; - // Hide Banner after JS loading finished - this.banner.classList.add('hidden'); + this.banner.classList.add('hidden'); // Hide banner by default + this.registerEvents(); + } + + /** + * Registers events for notification banner + */ + registerEvents() { + this.registerDismissEvent(); + } + + /** + * Registers dismissing via dismiss button + */ + registerDismissEvent() { + this.dismissBtn.addEventListener('click', () => { + this.dismissCurrent(); + }); } /** @@ -51,7 +70,7 @@ export default class BannerController { * @param {string} text Notification text */ show(name, text) { - let bannerItem = {name, text, 'html': false}; + let bannerItem = new BannerItem(name, text, false); this.bannerMsgs.push(bannerItem); this.update(); @@ -59,21 +78,13 @@ export default class BannerController { /** * Removes notification from banner - * @param {string} name Name, that the notification was registered under + * @param {string} name The name 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); - } - } + if (name) this.bannerMsgs = this.bannerMsgs.filter(elt => elt.name != name); + else this.bannerMsgs = []; - this.update(); - } + this.update(); } /** @@ -94,16 +105,21 @@ export default class BannerController { const lastNotification = this.bannerMsgs[this.bannerMsgs.length - 1]; const name = lastNotification.name; - const text = lastNotification.text; - const html = lastNotification.html; + const text = lastNotification.content; + const isHtml = lastNotification.html; this.banner.classList.remove('hidden'); - if (html) this.bannerText.innerHTML = text; + if (isHtml) this.bannerText.innerHTML = text; else this.bannerText.innerText = text; this.current = name; + this.updateNotificationBadge(); + } - // Update notification badge + /** + * Updates the notification badge number + */ + updateNotificationBadge() { if (this.bannerMsgs.length < 2) { this.notificationBadge.classList.add('hidden'); } else if (this.bannerMsgs.length > 9) { diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/router.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/router.js new file mode 100644 index 0000000..c01c21b --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/router.js @@ -0,0 +1,44 @@ +/** + * Class for routing between pages + */ +export default class Router { + /** + * @param {Interface} iface Interface for comm. with other objects + */ + constructor(iface) { + iface.addObject(this, 'serverListing', ['routePlay']); + this.iface = iface; + } + + /** + * Routes to the play page + * @param {HubConnection} connection Connection to the server + */ + routePlay(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); + + + this.iface.callMethod('uiMananger', 'initPlay'); + for (let ui of this.pageUI) { + ui.refresh(); + } + }); + }); + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/server-listing.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/server-listing.js new file mode 100644 index 0000000..2af56ac --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/server-listing.js @@ -0,0 +1,91 @@ +/** + * Class for handling the server list + */ +export default class ServerListing { + /** + * Creates reference to container + * @param {Interface} iface Interface for comm. with other objects + * @param {string} serverListId ID of the server list div + * @param {string} refreshBtnId ID of the refresh btn + */ + constructor(iface, serverListId, refreshBtnId) { + this.ids = {serverListId, refreshBtnId}; + + iface.addObject(this, 'serverListing', ['flushElements', 'addElements']); + this.iface = iface; + } + + /** + * Initializes Server List DOM Element + */ + initialize() { + this.serverListing = document.getElementById(this.ids.serverListId); + this.refreshBtn = document.getElementById(this.ids.refreshBtnId); + this.registerEvents(); + } + + /** + * Registers events associated with server list UI + */ + registerEvents() { + this.registerRefreshEvent(); + } + + /** + * Registers event for pushing the refresh button + */ + registerRefreshEvent() { + this.refreshBtn.addEventListener('click', () => { + this.iface.callMethod('listServers', 'listServers'); + }); + } + + /** + * 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 + */ + addElements(array) { + 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', () => { + this.iface.callMethod('login', 'showLogin', name); + }); + + rightAlignDiv.appendChild(onlineDot); + rightAlignDiv.appendChild(playerCountSpan); + rightAlignDiv.appendChild(playerCountStaticSpan); + rightAlignDiv.appendChild(joinButton); + serverDiv.appendChild(nameSpan); + serverDiv.appendChild(rightAlignDiv); + this.serverListing.appendChild(serverDiv); + } + } +} diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/uiManager.js b/WebInterface/NodeJSServer/src/js/modules/ui/uiManager.js new file mode 100644 index 0000000..ddbb152 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/modules/ui/uiManager.js @@ -0,0 +1,60 @@ +import About from './collections/about'; +import Login from './collections/login'; +import Play from './collections/play'; + +/** + * Controller class for Page UI + */ +export default class UIManager { + /** + * Initializes new UI Manager + * @param {Interface} iface Interface for inter-object communication + */ + constructor(iface) { + this.currentUI = null; + + iface.addObject(this, 'uiMananger', ['initAbout', 'initLogin', 'initPlay']); + this.iface = iface; + } + + /** + * Initializes UI Components of About Page + */ + initAbout() { + this.clearComponents(); + this.about = new About(this.iface); + this.currentUI = 'about'; + } + + /** + * Initializes UI Components of Login page + */ + initLogin() { + this.clearComponents(); + this.login = new Login(this.iface); + this.currentUI = 'login'; + } + + /** + * Initializes UI Components of Play page + */ + initPlay() { + this.clearComponents(); + this.play = new Play(this.iface); + this.currentUI = 'play'; + } + + /** + * Clears currently loaded components + */ + clearComponents() { + switch (this.currentUI) { + case null: return; + case 'about': this.about = null; break; + case 'login': this.login = null; break; + case 'play': this.play = null; break; + } + + this.currentUI = null; + } +} diff --git a/WebInterface/NodeJSServer/src/js/play.js b/WebInterface/NodeJSServer/src/js/play.js new file mode 100644 index 0000000..f7cb255 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/play.js @@ -0,0 +1,12 @@ +import Interface from './modules/interface'; +import UIManager from './modules/ui/uiManager'; +import Networker from './modules/networking/networker'; + +const SERVERURL = 'http://127.0.0.1:5000/chatHub'; + +let iface = new Interface(); +let uiMan = new UIManager(iface); +uiMan.initPlay(); +// Create Network Manager as well + +// TODO: Implement login from the play page diff --git a/WebInterface/NodeJSServer/src/modules/playModule.js b/WebInterface/NodeJSServer/src/js/src_old/modules/playModule.js index 931f598..931f598 100644 --- a/WebInterface/NodeJSServer/src/modules/playModule.js +++ b/WebInterface/NodeJSServer/src/js/src_old/modules/playModule.js diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/js/src_old/modules/server-client.js index 2f712b5..2f712b5 100644 --- a/WebInterface/NodeJSServer/src/modules/server-client.js +++ b/WebInterface/NodeJSServer/src/js/src_old/modules/server-client.js diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/js/src_old/modules/ui/login-modal.js index 13de78e..13de78e 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js +++ b/WebInterface/NodeJSServer/src/js/src_old/modules/ui/login-modal.js diff --git a/WebInterface/NodeJSServer/src/js/src_old/modules/ui/modal.js b/WebInterface/NodeJSServer/src/js/src_old/modules/ui/modal.js new file mode 100644 index 0000000..10a1be5 --- /dev/null +++ b/WebInterface/NodeJSServer/src/js/src_old/modules/ui/modal.js @@ -0,0 +1,67 @@ +/** + * 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/server-listing.js b/WebInterface/NodeJSServer/src/js/src_old/modules/ui/server-listing.js index 78ca323..78ca323 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js +++ b/WebInterface/NodeJSServer/src/js/src_old/modules/ui/server-listing.js diff --git a/WebInterface/NodeJSServer/src/play.js b/WebInterface/NodeJSServer/src/play.js deleted file mode 100644 index 1e13355..0000000 --- a/WebInterface/NodeJSServer/src/play.js +++ /dev/null @@ -1,11 +0,0 @@ -import Backdrop from './modules/ui/backdrop.js'; -import BannerController from './modules/ui/notification-banner.js'; - -// TODO: Implement login from the play page - -let backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); -backdrop.register(); - -let notifications = new BannerController('notifications', - 'banner-info', 'dismiss-banner', 'notification-amount'); -notifications.register(); |