A lot of changes

I shoud have written a better commit, I know!
author: TrueKuehli <rctcoaster2000@hotmail.de> 2018-10-01 18:10:37 +0200
committer: TrueKuehli <rctcoaster2000@hotmail.de> 2018-10-01 18:10:37 +0200
commit: 6f162dcf90a6aa671eb351dc25cb01e2d9cbd3cb (patch)
tree: ce9121463419cb27e6bd4e0c4215c037550f8ff7 /WebInterface
parent: e463bf3eb7115f1f141da2162b0624f90472ff9c (diff)
19 files changed, 272 insertions, 49 deletions
diff --git a/WebInterface/NodeJSServer/dist/play/index.html b/WebInterface/NodeJSServer/dist/play/index.html
index e69de29..9a8dc36 100644
--- a/WebInterface/NodeJSServer/dist/play/index.html
+++ b/WebInterface/NodeJSServer/dist/play/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="DSA-Bot Web Client">
+    <meta name="author" content="Timon Scholz">
+    <meta name="theme-color" content="#546e7a">
+    <title>Helden Online</title>
+    <link rel="icon" href="../ressources/DSALogo.png">
+    <link rel="stylesheet" href="../style/play.css">
+    <!-- <link rel="manifest" href="manifest.webmanifest"> -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
+  </head>
+  <body>
+    <div class="backdrop">
+      <div class="header-bar">
+        <div class="menu-icon" id="show-menu"></div>
+        <h1 class="header">Helden Online</h1>
+      </div>
+      <div class="menu-actions hidden" id="menu">
+        <a class="menu-option" id="listing-tab" href="../">Spiele-Liste</a>
+        <a class="menu-option" id="github-tab" href="https://github.com/TrueDoctor/DiscoBot" target="_blank">Projekt auf GitHub</a>
+        <a class="menu-option" id="about-tab" href="../about" target="_blank">About</a>
+      </div>
+    </div>
+    <div class="front-layer" id="front-layer">
+      <div class="banner" id="notifications">
+        <div class="notification-badge" id="notification-amount">1</div>
+        <p class="banner-text" id="banner-info">Loading javascript.</p>
+        <div class="btn-container">
+          <button class="btn text-btn banner-button" id="dismiss-banner">Okay</button>
+        </div>
+        <hr>
+      </div>
+      <remove_if_redirected>
+        <h1>Bitte über die Server-Liste aufrufen</h1>
+      </remove_if_redirected>
+      <div class="copyright-container">
+        <span>© 2018 Dennis Kobert & Timon Scholz</span>
+      </div>
+    </div>
+    <script src="../script/play.js"></script>
+  </body>
+</html>
diff --git a/WebInterface/NodeJSServer/dist/script/about.js b/WebInterface/NodeJSServer/dist/script/about.js
index 8924b95..a2ed3e5 100644
--- a/WebInterface/NodeJSServer/dist/script/about.js
+++ b/WebInterface/NodeJSServer/dist/script/about.js
@@ -1 +1 @@
-!function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e,n){"use strict";n.d(e,"a",function(){return r});class r{constructor(t,e,n){this.backdrop=document.getElementById(t),this.frontLayer=document.getElementById(e),this.menuButton=document.getElementById(n)}register(){this.registerButtonEvent(),this.registerFrontLayerEvent()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.backdrop.classList.contains("hidden")?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.menuButton.classList.contains("open")?this.menuButton.classList.remove("open"):this.menuButton.classList.add("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open")})}}},,function(t,e,n){"use strict";n.r(e),new(n(0).a)("menu","front-layer","show-menu").register()}]);
-\ No newline at end of file
+!function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=3)}([function(t,e,n){"use strict";n.d(e,"a",function(){return r});class r{constructor(t,e,n){this.ids={backdropMenu:t,frontLayer:e,menuButton:n},this.backdrop=document.getElementById(t),this.frontLayer=document.getElementById(e),this.menuButton=document.getElementById(n)}register(){this.registerButtonEvent(),this.registerFrontLayerEvent()}refresh(){this.backdrop=document.getElementById(this.ids.backdropMenu),this.frontLayer=document.getElementById(this.ids.frontLayer),this.menuButton=document.getElementById(this.ids.menuButton),this.register()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.backdrop.classList.contains("hidden")?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.menuButton.classList.contains("open")?this.menuButton.classList.remove("open"):this.menuButton.classList.add("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open")})}}},,,function(t,e,n){"use strict";n.r(e),new(n(0).a)("menu","front-layer","show-menu").register()}]);
+\ No newline at end of file
diff --git a/WebInterface/NodeJSServer/dist/script/index.js b/WebInterface/NodeJSServer/dist/script/index.js
index 8270c00..2ff34ea 100644
--- a/WebInterface/NodeJSServer/dist/script/index.js
+++ b/WebInterface/NodeJSServer/dist/script/index.js
@@ -1,16 +1 @@
-!function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=4)}([function(t,e,n){"use strict";n.d(e,"a",function(){return o});class o{constructor(t,e,n){this.backdrop=document.getElementById(t),this.frontLayer=document.getElementById(e),this.menuButton=document.getElementById(n)}register(){this.registerButtonEvent(),this.registerFrontLayerEvent()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.backdrop.classList.contains("hidden")?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.menuButton.classList.contains("open")?this.menuButton.classList.remove("open"):this.menuButton.classList.add("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open")})}}},function(t,e){String.prototype.getHash=async function(){let t=new ArrayBuffer(2*this.length),e=new Uint16Array(t);for(let t=0;t<this.length;t++)e[t]=this.charCodeAt(t);let n=await crypto.subtle.digest("SHA-256",e),o=new Uint8Array(n),r="";for(let t of o)r+=String.fromCharCode(t);return btoa(r)}},,,function(t,e,n){"use strict";n.r(e);var o=n(0);
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function s(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var i=function(){return(i=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function a(t,e,n,o){return new(n||(n=Promise))(function(r,s){function i(t){try{c(o.next(t))}catch(t){s(t)}}function a(t){try{c(o.throw(t))}catch(t){s(t)}}function c(t){t.done?r(t.value):new n(function(e){e(t.value)}).then(i,a)}c((o=o.apply(t,e||[])).next())})}function c(t,e){var n,o,r,s,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return s={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(s){return function(a){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,o&&(r=2&s[0]?o.return:s[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;switch(o=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,o=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(r=(r=i.trys).length>0&&r[r.length-1])&&(6===s[0]||2===s[0])){i=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){i.label=s[1];break}if(6===s[0]&&i.label<r[1]){i.label=r[1],r=s;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(s);break}r[2]&&i.ops.pop(),i.trys.pop();continue}s=e.call(t,i)}catch(t){s=[6,t],o=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}}var l,u=function(t){function e(e,n){var o=this,r=this.constructor.prototype;return(o=t.call(this,e)||this).statusCode=n,o.__proto__=r,o}return s(e,t),e}(Error),h=function(t){function e(e){var n=this.constructor;void 0===e&&(e="A timeout occurred.");var o=this,r=n.prototype;return(o=t.call(this,e)||this).__proto__=r,o}return s(e,t),e}(Error);!function(t){t[t.Trace=0]="Trace",t[t.Debug=1]="Debug",t[t.Information=2]="Information",t[t.Warning=3]="Warning",t[t.Error=4]="Error",t[t.Critical=5]="Critical",t[t.None=6]="None"}(l||(l={}));var p,d=function(){return function(t,e,n){this.statusCode=t,this.statusText=e,this.content=n}}(),g=function(t){function e(e){var n=t.call(this)||this;return n.logger=e,n}return s(e,t),e.prototype.send=function(t){var e=this;return new Promise(function(n,o){var r=new XMLHttpRequest;r.open(t.method,t.url,!0),r.withCredentials=!0,r.setRequestHeader("X-Requested-With","XMLHttpRequest"),r.setRequestHeader("Content-Type","text/plain;charset=UTF-8"),t.headers&&Object.keys(t.headers).forEach(function(e){return r.setRequestHeader(e,t.headers[e])}),t.responseType&&(r.responseType=t.responseType),t.abortSignal&&(t.abortSignal.onabort=function(){r.abort()}),t.timeout&&(r.timeout=t.timeout),r.onload=function(){t.abortSignal&&(t.abortSignal.onabort=null),r.status>=200&&r.status<300?n(new d(r.status,r.statusText,r.response||r.responseText)):o(new u(r.statusText,r.status))},r.onerror=function(){e.logger.log(l.Warning,"Error from HTTP request. "+r.status+": "+r.statusText),o(new u(r.statusText,r.status))},r.ontimeout=function(){e.logger.log(l.Warning,"Timeout from HTTP request."),o(new h)},r.send(t.content||"")})},e}(function(){function t(){}return t.prototype.get=function(t,e){return this.send(i({},e,{method:"GET",url:t}))},t.prototype.post=function(t,e){return this.send(i({},e,{method:"POST",url:t}))},t.prototype.delete=function(t,e){return this.send(i({},e,{method:"DELETE",url:t}))},t}()),f=function(){function t(){}return t.write=function(e){return""+e+t.RecordSeparator},t.parse=function(e){if(e[e.length-1]!==t.RecordSeparator)throw new Error("Message is incomplete.");var n=e.split(t.RecordSeparator);return n.pop(),n},t.RecordSeparatorCode=30,t.RecordSeparator=String.fromCharCode(t.RecordSeparatorCode),t}(),m=function(){function t(){}return t.prototype.writeHandshakeRequest=function(t){return f.write(JSON.stringify(t))},t.prototype.parseHandshakeResponse=function(t){var e,n;if(t instanceof ArrayBuffer){var o=new Uint8Array(t);if(-1===(s=o.indexOf(f.RecordSeparatorCode)))throw new Error("Message is incomplete.");var r=s+1;e=String.fromCharCode.apply(null,o.slice(0,r)),n=o.byteLength>r?o.slice(r).buffer:null}else{var s,i=t;if(-1===(s=i.indexOf(f.RecordSeparator)))throw new Error("Message is incomplete.");r=s+1;e=i.substring(0,r),n=i.length>r?i.substring(r):null}var a=f.parse(e);return[n,JSON.parse(a[0])]},t}();!function(t){t[t.Invocation=1]="Invocation",t[t.StreamItem=2]="StreamItem",t[t.Completion=3]="Completion",t[t.StreamInvocation=4]="StreamInvocation",t[t.CancelInvocation=5]="CancelInvocation",t[t.Ping=6]="Ping",t[t.Close=7]="Close"}(p||(p={}));var v=function(){function t(){}return t.prototype.log=function(t,e){},t.instance=new t,t}(),b=function(){function t(){}return t.isRequired=function(t,e){if(null===t||void 0===t)throw new Error("The '"+e+"' argument is required.")},t.isIn=function(t,e,n){if(!(t in e))throw new Error("Unknown "+n+" value: "+t+".")},t}();function y(t,e){var n=null;return t instanceof ArrayBuffer?(n="Binary data of length "+t.byteLength,e&&(n+=". Content: '"+function(t){var e="";return new Uint8Array(t).forEach(function(t){e+="0x"+(t<16?"0":"")+t.toString(16)+" "}),e.substr(0,e.length-1)}(t)+"'")):"string"==typeof t&&(n="String data of length "+t.length,e&&(n+=". Content: '"+t+"'.")),n}function w(t,e,n,o,r,s,i){return a(this,void 0,void 0,function(){var a,u,h,p;return c(this,function(c){switch(c.label){case 0:return[4,r()];case 1:return(u=c.sent())&&((p={}).Authorization="Bearer "+u,a=p),t.log(l.Trace,"("+e+" transport) sending data. "+y(s,i)+"."),[4,n.post(o,{content:s,headers:a})];case 2:return h=c.sent(),t.log(l.Trace,"("+e+" transport) request complete. Response status: "+h.statusCode+"."),[2]}})})}var C,S,E=function(){function t(t){this.observers=[],this.cancelCallback=t}return t.prototype.next=function(t){for(var e=0,n=this.observers;e<n.length;e++){n[e].next(t)}},t.prototype.error=function(t){for(var e=0,n=this.observers;e<n.length;e++){var o=n[e];o.error&&o.error(t)}},t.prototype.complete=function(){for(var t=0,e=this.observers;t<e.length;t++){var n=e[t];n.complete&&n.complete()}},t.prototype.subscribe=function(t){return this.observers.push(t),new k(this,t)},t}(),k=function(){function t(t,e){this.subject=t,this.observer=e}return t.prototype.dispose=function(){var t=this.subject.observers.indexOf(this.observer);t>-1&&this.subject.observers.splice(t,1),0===this.subject.observers.length&&this.subject.cancelCallback().catch(function(t){})},t}(),T=function(){function t(t){this.minimumLogLevel=t}return t.prototype.log=function(t,e){if(t>=this.minimumLogLevel)switch(t){case l.Critical:case l.Error:console.error(l[t]+": "+e);break;case l.Warning:console.warn(l[t]+": "+e);break;case l.Information:console.info(l[t]+": "+e);break;default:console.log(l[t]+": "+e)}},t}(),I=3e4,L=function(){function t(t,e,n){var o=this;b.isRequired(t,"connection"),b.isRequired(e,"logger"),b.isRequired(n,"protocol"),this.serverTimeoutInMilliseconds=I,this.logger=e,this.protocol=n,this.connection=t,this.handshakeProtocol=new m,this.connection.onreceive=function(t){return o.processIncomingData(t)},this.connection.onclose=function(t){return o.connectionClosed(t)},this.callbacks={},this.methods={},this.closedCallbacks=[],this.id=0}return t.create=function(e,n,o){return new t(e,n,o)},t.prototype.start=function(){return a(this,void 0,void 0,function(){var t;return c(this,function(e){switch(e.label){case 0:return t={protocol:this.protocol.name,version:this.protocol.version},this.logger.log(l.Debug,"Starting HubConnection."),this.receivedHandshakeResponse=!1,[4,this.connection.start(this.protocol.transferFormat)];case 1:return e.sent(),this.logger.log(l.Debug,"Sending handshake request."),[4,this.connection.send(this.handshakeProtocol.writeHandshakeRequest(t))];case 2:return e.sent(),this.logger.log(l.Information,"Using HubProtocol '"+this.protocol.name+"'."),this.cleanupTimeout(),this.configureTimeout(),[2]}})})},t.prototype.stop=function(){return this.logger.log(l.Debug,"Stopping HubConnection."),this.cleanupTimeout(),this.connection.stop()},t.prototype.stream=function(t){for(var e=this,n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];var r=this.createStreamInvocation(t,n),s=new E(function(){var t=e.createCancelInvocation(r.invocationId),n=e.protocol.writeMessage(t);return delete e.callbacks[r.invocationId],e.connection.send(n)});this.callbacks[r.invocationId]=function(t,e){e?s.error(e):t.type===p.Completion?t.error?s.error(new Error(t.error)):s.complete():s.next(t.item)};var i=this.protocol.writeMessage(r);return this.connection.send(i).catch(function(t){s.error(t),delete e.callbacks[r.invocationId]}),s},t.prototype.send=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];var o=this.createInvocation(t,e,!0),r=this.protocol.writeMessage(o);return this.connection.send(r)},t.prototype.invoke=function(t){for(var e=this,n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];var r=this.createInvocation(t,n,!1);return new Promise(function(t,n){e.callbacks[r.invocationId]=function(e,o){if(o)n(o);else if(e.type===p.Completion){var r=e;r.error?n(new Error(r.error)):t(r.result)}else n(new Error("Unexpected message type: "+e.type))};var o=e.protocol.writeMessage(r);e.connection.send(o).catch(function(t){n(t),delete e.callbacks[r.invocationId]})})},t.prototype.on=function(t,e){t&&e&&(t=t.toLowerCase(),this.methods[t]||(this.methods[t]=[]),-1===this.methods[t].indexOf(e)&&this.methods[t].push(e))},t.prototype.off=function(t,e){if(t){t=t.toLowerCase();var n=this.methods[t];if(n)if(e){var o=n.indexOf(e);-1!==o&&(n.splice(o,1),0===n.length&&delete this.methods[t])}else delete this.methods[t]}},t.prototype.onclose=function(t){t&&this.closedCallbacks.push(t)},t.prototype.processIncomingData=function(t){if(this.cleanupTimeout(),this.receivedHandshakeResponse||(t=this.processHandshakeResponse(t),this.receivedHandshakeResponse=!0),t)for(var e=0,n=this.protocol.parseMessages(t,this.logger);e<n.length;e++){var o=n[e];switch(o.type){case p.Invocation:this.invokeClientMethod(o);break;case p.StreamItem:case p.Completion:var r=this.callbacks[o.invocationId];null!=r&&(o.type===p.Completion&&delete this.callbacks[o.invocationId],r(o));break;case p.Ping:break;case p.Close:this.logger.log(l.Information,"Close message received from server."),this.connection.stop(o.error?new Error("Server returned an error on close: "+o.error):null);break;default:this.logger.log(l.Warning,"Invalid message type: "+o.type)}}this.configureTimeout()},t.prototype.processHandshakeResponse=function(t){var e,n,o;try{n=(o=this.handshakeProtocol.parseHandshakeResponse(t))[0],e=o[1]}catch(t){var r="Error parsing handshake response: "+t;this.logger.log(l.Error,r);var s=new Error(r);throw this.connection.stop(s),s}if(e.error){r="Server returned handshake error: "+e.error;this.logger.log(l.Error,r),this.connection.stop(new Error(r))}else this.logger.log(l.Debug,"Server handshake complete.");return n},t.prototype.configureTimeout=function(){var t=this;this.connection.features&&this.connection.features.inherentKeepAlive||(this.timeoutHandle=setTimeout(function(){return t.serverTimeout()},this.serverTimeoutInMilliseconds))},t.prototype.serverTimeout=function(){this.connection.stop(new Error("Server timeout elapsed without receiving a message from the server."))},t.prototype.invokeClientMethod=function(t){var e=this,n=this.methods[t.target.toLowerCase()];if(n){if(n.forEach(function(n){return n.apply(e,t.arguments)}),t.invocationId){var o="Server requested a response, which is not supported in this version of the client.";this.logger.log(l.Error,o),this.connection.stop(new Error(o))}}else this.logger.log(l.Warning,"No client method with the name '"+t.target+"' found.")},t.prototype.connectionClosed=function(t){var e=this,n=this.callbacks;this.callbacks={},Object.keys(n).forEach(function(e){(0,n[e])(void 0,t||new Error("Invocation canceled due to connection being closed."))}),this.cleanupTimeout(),this.closedCallbacks.forEach(function(n){return n.apply(e,[t])})},t.prototype.cleanupTimeout=function(){this.timeoutHandle&&clearTimeout(this.timeoutHandle)},t.prototype.createInvocation=function(t,e,n){if(n)return{arguments:e,target:t,type:p.Invocation};var o=this.id;return this.id++,{arguments:e,invocationId:o.toString(),target:t,type:p.Invocation}},t.prototype.createStreamInvocation=function(t,e){var n=this.id;return this.id++,{arguments:e,invocationId:n.toString(),target:t,type:p.StreamInvocation}},t.prototype.createCancelInvocation=function(t){return{invocationId:t,type:p.CancelInvocation}},t}();!function(t){t[t.None=0]="None",t[t.WebSockets=1]="WebSockets",t[t.ServerSentEvents=2]="ServerSentEvents",t[t.LongPolling=4]="LongPolling"}(C||(C={})),function(t){t[t.Text=1]="Text",t[t.Binary=2]="Binary"}(S||(S={}));var P=function(){function t(){this.isAborted=!1}return t.prototype.abort=function(){this.isAborted||(this.isAborted=!0,this.onabort&&this.onabort())},Object.defineProperty(t.prototype,"signal",{get:function(){return this},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"aborted",{get:function(){return this.isAborted},enumerable:!0,configurable:!0}),t}(),x=5e3,M=function(){function t(t,e,n,o,r){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.pollAbort=new P,this.logMessageContent=o,this.shutdownTimeout=r||x}return Object.defineProperty(t.prototype,"pollAborted",{get:function(){return this.pollAbort.aborted},enumerable:!0,configurable:!0}),t.prototype.connect=function(t,e){return a(this,void 0,void 0,function(){var n,o,r,s,i;return c(this,function(a){switch(a.label){case 0:if(b.isRequired(t,"url"),b.isRequired(e,"transferFormat"),b.isIn(e,S,"transferFormat"),this.url=t,this.logger.log(l.Trace,"(LongPolling transport) Connecting"),e===S.Binary&&"string"!=typeof(new XMLHttpRequest).responseType)throw new Error("Binary protocols over XmlHttpRequest not implementing advanced features are not supported.");return n={abortSignal:this.pollAbort.signal,headers:{},timeout:9e4},e===S.Binary&&(n.responseType="arraybuffer"),[4,this.accessTokenFactory()];case 1:return o=a.sent(),this.updateHeaderToken(n,o),s=t+"&_="+Date.now(),this.logger.log(l.Trace,"(LongPolling transport) polling: "+s),[4,this.httpClient.get(s,n)];case 2:return 200!==(i=a.sent()).statusCode?(this.logger.log(l.Error,"(LongPolling transport) Unexpected response code: "+i.statusCode),r=new u(i.statusText,i.statusCode),this.running=!1):this.running=!0,this.poll(this.url,n,r),[2,Promise.resolve()]}})})},t.prototype.updateHeaderToken=function(t,e){e?t.headers.Authorization="Bearer "+e:t.headers.Authorization&&delete t.headers.Authorization},t.prototype.poll=function(t,e,n){return a(this,void 0,void 0,function(){var o,r,s,i;return c(this,function(a){switch(a.label){case 0:a.trys.push([0,,8,9]),a.label=1;case 1:return this.running?[4,this.accessTokenFactory()]:[3,7];case 2:o=a.sent(),this.updateHeaderToken(e,o),a.label=3;case 3:return a.trys.push([3,5,,6]),r=t+"&_="+Date.now(),this.logger.log(l.Trace,"(LongPolling transport) polling: "+r),[4,this.httpClient.get(r,e)];case 4:return 204===(s=a.sent()).statusCode?(this.logger.log(l.Information,"(LongPolling transport) Poll terminated by server"),this.running=!1):200!==s.statusCode?(this.logger.log(l.Error,"(LongPolling transport) Unexpected response code: "+s.statusCode),n=new u(s.statusText,s.statusCode),this.running=!1):s.content?(this.logger.log(l.Trace,"(LongPolling transport) data received. "+y(s.content,this.logMessageContent)),this.onreceive&&this.onreceive(s.content)):this.logger.log(l.Trace,"(LongPolling transport) Poll timed out, reissuing."),[3,6];case 5:return i=a.sent(),this.running?i instanceof h?this.logger.log(l.Trace,"(LongPolling transport) Poll timed out, reissuing."):(n=i,this.running=!1):this.logger.log(l.Trace,"(LongPolling transport) Poll errored after shutdown: "+i.message),[3,6];case 6:return[3,1];case 7:return[3,9];case 8:return this.stopped=!0,this.shutdownTimer&&clearTimeout(this.shutdownTimer),this.onclose&&(this.logger.log(l.Trace,"(LongPolling transport) Firing onclose event. Error: "+(n||"<undefined>")),this.onclose(n)),this.logger.log(l.Trace,"(LongPolling transport) Transport finished."),[7];case 9:return[2]}})})},t.prototype.send=function(t){return a(this,void 0,void 0,function(){return c(this,function(e){return this.running?[2,w(this.logger,"LongPolling",this.httpClient,this.url,this.accessTokenFactory,t,this.logMessageContent)]:[2,Promise.reject(new Error("Cannot send until the transport is connected"))]})})},t.prototype.stop=function(){return a(this,void 0,void 0,function(){var t,e,n=this;return c(this,function(o){switch(o.label){case 0:return o.trys.push([0,,3,4]),this.running=!1,this.logger.log(l.Trace,"(LongPolling transport) sending DELETE request to "+this.url+"."),t={headers:{}},[4,this.accessTokenFactory()];case 1:return e=o.sent(),this.updateHeaderToken(t,e),[4,this.httpClient.delete(this.url,t)];case 2:return o.sent(),this.logger.log(l.Trace,"(LongPolling transport) DELETE request accepted."),[3,4];case 3:return this.stopped||(this.shutdownTimer=setTimeout(function(){n.logger.log(l.Warning,"(LongPolling transport) server did not terminate after DELETE request, canceling poll."),n.pollAbort.abort()},this.shutdownTimeout)),[7];case 4:return[2]}})})},t}(),B=function(){function t(t,e,n,o){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.logMessageContent=o}return t.prototype.connect=function(t,e){return a(this,void 0,void 0,function(){var n,o=this;return c(this,function(r){switch(r.label){case 0:if(b.isRequired(t,"url"),b.isRequired(e,"transferFormat"),b.isIn(e,S,"transferFormat"),"undefined"==typeof EventSource)throw new Error("'EventSource' is not supported in your environment.");return this.logger.log(l.Trace,"(SSE transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),this.url=t,[2,new Promise(function(n,r){var s=!1;e!==S.Text&&r(new Error("The Server-Sent Events transport only supports the 'Text' transfer format"));var i=new EventSource(t,{withCredentials:!0});try{i.onmessage=function(t){if(o.onreceive)try{o.logger.log(l.Trace,"(SSE transport) data received. "+y(t.data,o.logMessageContent)+"."),o.onreceive(t.data)}catch(t){return void(o.onclose&&o.onclose(t))}},i.onerror=function(t){var e=new Error(t.message||"Error occurred");s?o.close(e):r(e)},i.onopen=function(){o.logger.log(l.Information,"SSE connected to "+o.url),o.eventSource=i,s=!0,n()}}catch(t){return Promise.reject(t)}})]}})})},t.prototype.send=function(t){return a(this,void 0,void 0,function(){return c(this,function(e){return this.eventSource?[2,w(this.logger,"SSE",this.httpClient,this.url,this.accessTokenFactory,t,this.logMessageContent)]:[2,Promise.reject(new Error("Cannot send until the transport is connected"))]})})},t.prototype.stop=function(){return this.close(),Promise.resolve()},t.prototype.close=function(t){this.eventSource&&(this.eventSource.close(),this.eventSource=null,this.onclose&&this.onclose(t))},t}(),R=function(){function t(t,e,n){this.logger=e,this.accessTokenFactory=t||function(){return null},this.logMessageContent=n}return t.prototype.connect=function(t,e){return a(this,void 0,void 0,function(){var n,o=this;return c(this,function(r){switch(r.label){case 0:if(b.isRequired(t,"url"),b.isRequired(e,"transferFormat"),b.isIn(e,S,"transferFormat"),"undefined"==typeof WebSocket)throw new Error("'WebSocket' is not supported in your environment.");return this.logger.log(l.Trace,"(WebSockets transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),[2,new Promise(function(n,r){t=t.replace(/^http/,"ws");var s=new WebSocket(t);e===S.Binary&&(s.binaryType="arraybuffer"),s.onopen=function(e){o.logger.log(l.Information,"WebSocket connected to "+t),o.webSocket=s,n()},s.onerror=function(t){r(t.error)},s.onmessage=function(t){o.logger.log(l.Trace,"(WebSockets transport) data received. "+y(t.data,o.logMessageContent)+"."),o.onreceive&&o.onreceive(t.data)},s.onclose=function(t){o.logger.log(l.Trace,"(WebSockets transport) socket closed."),o.onclose&&(!1===t.wasClean||1e3!==t.code?o.onclose(new Error("Websocket closed with status code: "+t.code+" ("+t.reason+")")):o.onclose())}})]}})})},t.prototype.send=function(t){return this.webSocket&&this.webSocket.readyState===WebSocket.OPEN?(this.logger.log(l.Trace,"(WebSockets transport) sending data. "+y(t,this.logMessageContent)+"."),this.webSocket.send(t),Promise.resolve()):Promise.reject("WebSocket is not in the OPEN state")},t.prototype.stop=function(){return this.webSocket&&(this.webSocket.close(),this.webSocket=null),Promise.resolve()},t}(),N=function(){function t(t,e){void 0===e&&(e={}),this.features={},b.isRequired(t,"url"),this.logger=function(t){return void 0===t?new T(l.Information):null===t?v.instance:t.log?t:new T(t)}(e.logger),this.baseUrl=this.resolveUrl(t),(e=e||{}).accessTokenFactory=e.accessTokenFactory||function(){return null},e.logMessageContent=e.logMessageContent||!1,this.httpClient=e.httpClient||new g(this.logger),this.connectionState=2,this.options=e}return t.prototype.start=function(t){return t=t||S.Binary,b.isIn(t,S,"transferFormat"),this.logger.log(l.Debug,"Starting connection with transfer format '"+S[t]+"'."),2!==this.connectionState?Promise.reject(new Error("Cannot start a connection that is not in the 'Disconnected' state.")):(this.connectionState=0,this.startPromise=this.startInternal(t),this.startPromise)},t.prototype.send=function(t){if(1!==this.connectionState)throw new Error("Cannot send data if the connection is not in the 'Connected' State.");return this.transport.send(t)},t.prototype.stop=function(t){return a(this,void 0,void 0,function(){return c(this,function(e){switch(e.label){case 0:this.connectionState=2,e.label=1;case 1:return e.trys.push([1,3,,4]),[4,this.startPromise];case 2:return e.sent(),[3,4];case 3:return e.sent(),[3,4];case 4:return this.transport?(this.stopError=t,[4,this.transport.stop()]):[3,6];case 5:e.sent(),this.transport=null,e.label=6;case 6:return[2]}})})},t.prototype.startInternal=function(t){return a(this,void 0,void 0,function(){var e,n,o,r,s,i,a,u=this;return c(this,function(h){switch(h.label){case 0:e=this.baseUrl,this.accessTokenFactory=this.options.accessTokenFactory,h.label=1;case 1:return h.trys.push([1,12,,13]),this.options.skipNegotiation?this.options.transport!==C.WebSockets?[3,3]:(this.transport=this.constructTransport(C.WebSockets),[4,this.transport.connect(e,t)]):[3,5];case 2:return h.sent(),[3,4];case 3:throw Error("Negotiation can only be skipped when using the WebSocket transport directly.");case 4:return[3,11];case 5:n=null,o=0,r=function(){var t;return c(this,function(r){switch(r.label){case 0:return[4,s.getNegotiationResponse(e)];case 1:return n=r.sent(),2===s.connectionState?[2,{value:void 0}]:(n.url&&(e=n.url),n.accessToken&&(t=n.accessToken,s.accessTokenFactory=function(){return t}),o++,[2])}})},s=this,h.label=6;case 6:return[5,r()];case 7:if("object"==typeof(i=h.sent()))return[2,i.value];h.label=8;case 8:if(n.url&&o<100)return[3,6];h.label=9;case 9:if(100===o&&n.url)throw Error("Negotiate redirection limit exceeded.");return[4,this.createTransport(e,this.options.transport,n,t)];case 10:h.sent(),h.label=11;case 11:return this.transport instanceof M&&(this.features.inherentKeepAlive=!0),this.transport.onreceive=this.onreceive,this.transport.onclose=function(t){return u.stopConnection(t)},this.changeState(0,1),[3,13];case 12:throw a=h.sent(),this.logger.log(l.Error,"Failed to start the connection: "+a),this.connectionState=2,this.transport=null,a;case 13:return[2]}})})},t.prototype.getNegotiationResponse=function(t){return a(this,void 0,void 0,function(){var e,n,o,r,s,i;return c(this,function(a){switch(a.label){case 0:return[4,this.accessTokenFactory()];case 1:(e=a.sent())&&((i={}).Authorization="Bearer "+e,n=i),o=this.resolveNegotiateUrl(t),this.logger.log(l.Debug,"Sending negotiation request: "+o),a.label=2;case 2:return a.trys.push([2,4,,5]),[4,this.httpClient.post(o,{content:"",headers:n})];case 3:if(200!==(r=a.sent()).statusCode)throw Error("Unexpected status code returned from negotiate "+r.statusCode);return[2,JSON.parse(r.content)];case 4:throw s=a.sent(),this.logger.log(l.Error,"Failed to complete negotiation with the server: "+s),s;case 5:return[2]}})})},t.prototype.createConnectUrl=function(t,e){return t+(-1===t.indexOf("?")?"?":"&")+"id="+e},t.prototype.createTransport=function(t,e,n,o){return a(this,void 0,void 0,function(){var r,s,i,a,u,h,p;return c(this,function(c){switch(c.label){case 0:return r=this.createConnectUrl(t,n.connectionId),this.isITransport(e)?(this.logger.log(l.Debug,"Connection was provided an instance of ITransport, using that directly."),this.transport=e,[4,this.transport.connect(r,o)]):[3,2];case 1:return c.sent(),this.changeState(0,1),[2];case 2:s=n.availableTransports,i=0,a=s,c.label=3;case 3:return i<a.length?(u=a[i],this.connectionState=0,"number"!=typeof(h=this.resolveTransport(u,e,o))?[3,8]:(this.transport=this.constructTransport(h),null!==n.connectionId?[3,5]:[4,this.getNegotiationResponse(t)])):[3,9];case 4:n=c.sent(),r=this.createConnectUrl(t,n.connectionId),c.label=5;case 5:return c.trys.push([5,7,,8]),[4,this.transport.connect(r,o)];case 6:return c.sent(),this.changeState(0,1),[2];case 7:return p=c.sent(),this.logger.log(l.Error,"Failed to start the transport '"+C[h]+"': "+p),this.connectionState=2,n.connectionId=null,[3,8];case 8:return i++,[3,3];case 9:throw new Error("Unable to initialize any of the available transports.")}})})},t.prototype.constructTransport=function(t){switch(t){case C.WebSockets:return new R(this.accessTokenFactory,this.logger,this.options.logMessageContent);case C.ServerSentEvents:return new B(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);case C.LongPolling:return new M(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);default:throw new Error("Unknown transport: "+t+".")}},t.prototype.resolveTransport=function(t,e,n){var o=C[t.transport];if(null===o||void 0===o)this.logger.log(l.Debug,"Skipping transport '"+t.transport+"' because it is not supported by this client.");else{var r=t.transferFormats.map(function(t){return S[t]});if(function(t,e){return!t||0!=(e&t)}(e,o))if(r.indexOf(n)>=0){if(!(o===C.WebSockets&&"undefined"==typeof WebSocket||o===C.ServerSentEvents&&"undefined"==typeof EventSource))return this.logger.log(l.Debug,"Selecting transport '"+C[o]+"'"),o;this.logger.log(l.Debug,"Skipping transport '"+C[o]+"' because it is not supported in your environment.'")}else this.logger.log(l.Debug,"Skipping transport '"+C[o]+"' because it does not support the requested transfer format '"+S[n]+"'.");else this.logger.log(l.Debug,"Skipping transport '"+C[o]+"' because it was disabled by the client.")}return null},t.prototype.isITransport=function(t){return t&&"object"==typeof t&&"connect"in t},t.prototype.changeState=function(t,e){return this.connectionState===t&&(this.connectionState=e,!0)},t.prototype.stopConnection=function(t){return a(this,void 0,void 0,function(){return c(this,function(e){return this.transport=null,(t=this.stopError||t)?this.logger.log(l.Error,"Connection disconnected with error '"+t+"'."):this.logger.log(l.Information,"Connection disconnected."),this.connectionState=2,this.onclose&&this.onclose(t),[2]})})},t.prototype.resolveUrl=function(t){if(0===t.lastIndexOf("https://",0)||0===t.lastIndexOf("http://",0))return t;if("undefined"==typeof window||!window||!window.document)throw new Error("Cannot resolve '"+t+"'.");var e=window.document.createElement("a");return e.href=t,this.logger.log(l.Information,"Normalizing '"+t+"' to '"+e.href+"'."),e.href},t.prototype.resolveNegotiateUrl=function(t){var e=t.indexOf("?"),n=t.substring(0,-1===e?t.length:e);return"/"!==n[n.length-1]&&(n+="/"),n+="negotiate",n+=-1===e?"":t.substring(e)},t}();var O="json",H=function(){function t(){this.name=O,this.version=1,this.transferFormat=S.Text}return t.prototype.parseMessages=function(t,e){if("string"!=typeof t)throw new Error("Invalid input for JSON hub protocol. Expected a string.");if(!t)return[];null===e&&(e=v.instance);for(var n=[],o=0,r=f.parse(t);o<r.length;o++){var s=r[o],i=JSON.parse(s);if("number"!=typeof i.type)throw new Error("Invalid payload.");switch(i.type){case p.Invocation:this.isInvocationMessage(i);break;case p.StreamItem:this.isStreamItemMessage(i);break;case p.Completion:this.isCompletionMessage(i);break;case p.Ping:case p.Close:break;default:e.log(l.Information,"Unknown message type '"+i.type+"' ignored.");continue}n.push(i)}return n},t.prototype.writeMessage=function(t){return f.write(JSON.stringify(t))},t.prototype.isInvocationMessage=function(t){this.assertNotEmptyString(t.target,"Invalid payload for Invocation message."),void 0!==t.invocationId&&this.assertNotEmptyString(t.invocationId,"Invalid payload for Invocation message.")},t.prototype.isStreamItemMessage=function(t){if(this.assertNotEmptyString(t.invocationId,"Invalid payload for StreamItem message."),void 0===t.item)throw new Error("Invalid payload for StreamItem message.")},t.prototype.isCompletionMessage=function(t){if(t.result&&t.error)throw new Error("Invalid payload for Completion message.");!t.result&&t.error&&this.assertNotEmptyString(t.error,"Invalid payload for Completion message."),this.assertNotEmptyString(t.invocationId,"Invalid payload for Completion message.")},t.prototype.assertNotEmptyString=function(t,e){if("string"!=typeof t||""===t)throw new Error(e)},t}(),F=function(){function t(){}return t.prototype.configureLogging=function(t){return b.isRequired(t,"logging"),!function(t){return void 0!==t.log}(t)?this.logger=new T(t):this.logger=t,this},t.prototype.withUrl=function(t,e){return b.isRequired(t,"url"),this.url=t,this.httpConnectionOptions="object"==typeof e?e:{transport:e},this},t.prototype.withHubProtocol=function(t){return b.isRequired(t,"protocol"),this.protocol=t,this},t.prototype.build=function(){var t=this.httpConnectionOptions||{};if(void 0===t.logger&&(t.logger=this.logger),!this.url)throw new Error("The 'HubConnectionBuilder.withUrl' method must be called before building the connection.");var e=new N(this.url,t);return L.create(e,this.logger||v.instance,this.protocol||new H)},t}();class q{constructor(t){this.serverListing=document.getElementById(t)}flushElements(){this.serverListing.innerHTML=""}addElements(t){for(let e of t){const t=e.name,n=e.users.length;let o=document.createElement("div"),r=document.createElement("span"),s=document.createElement("div"),i=document.createElement("div"),a=document.createElement("span"),c=document.createElement("span"),l=document.createElement("button");o.className="server",r.className="server-name",s.className="right-aligned-items",i.className="player-count-dot",a.className="player-count",c.className="player-count-static",l.className="btn join-btn",l.id="join",r.textContent=t,a.textContent=n,c.textContent="Spieler online",l.textContent="Beitreten",s.appendChild(i),s.appendChild(a),s.appendChild(c),s.appendChild(l),o.appendChild(r),o.appendChild(s),this.serverListing.appendChild(o)}}}class j{constructor(t){let e=document.createElement("div"),n=document.createElement("div"),o=document.createElement("h1"),r=document.createElement("div");e.className="modal-container",n.className="modal",o.className="modal-title",r.className="modal-body",o.textContent=t,n.appendChild(o),n.appendChild(r),e.appendChild(n),document.body.appendChild(e),this.bg=e,this.modal=n,this.title=o,this.body=r,this.registerEvents()}registerEvents(){this.modal.addEventListener("click",t=>{t.stopPropagation()}),this.bg.addEventListener("click",()=>{this.close()})}close(){this.bg.classList.add("hidden"),this.bg.addEventListener("transitionend",()=>{document.body.removeChild(this.bg)})}setBodyText(t){this.body.textContent=t}}n(1);new o.a("menu","front-layer","show-menu").register(),window.notifications=new class{constructor(t,e,n,o){this.banner=document.getElementById(t),this.bannerText=document.getElementById(e),this.dismissBtn=document.getElementById(n),this.notificationBadge=document.getElementById(o),this.bannerMsgs=[],this.banner.classList.add("hidden")}register(){this.dismissBtn.addEventListener("click",()=>{this.dismissCurrent()})}show(t,e){let n={name:t,text:e,html:!1};this.bannerMsgs.push(n),this.update()}hide(t){if(t){for(let e=0;e<this.bannerMsgs.length;e++)this.bannerMsgs[e].name==t&&this.bannerMsgs.splice(e,1);this.update()}else this.bannerMsgs=[],this.banner.classList.add("hidden")}dismissCurrent(){this.hide(this.current)}update(){if(0===this.bannerMsgs.length)return void this.banner.classList.add("hidden");const t=this.bannerMsgs[this.bannerMsgs.length-1],e=t.name,n=t.text,o=t.html;this.banner.classList.remove("hidden"),o?this.bannerText.innerHTML=n:this.bannerText.innerText=n,this.current=e,this.bannerMsgs.length<2?this.notificationBadge.classList.add("hidden"):this.bannerMsgs.length>9?(this.notificationBadge.classList.remove("hidden"),this.notificationBadge.textContent="∞"):(this.notificationBadge.classList.remove("hidden"),this.notificationBadge.textContent=this.bannerMsgs.length.toString())}}("notifications","banner-info","dismiss-banner","notification-amount"),notifications.register();let A=new class{constructor(t,e,n=!1){const o=(new F).withUrl(t);n?o.configureLogging(l.Debug):o.configureLogging(l.Error),this.connection=o.build(),this.connection.start().then(()=>this.loadServers()).catch(t=>console.error(t.toString())),this.refreshing=!1,this.serverListing=new q(e),this.messageHandling()}loadServers(){this.refreshing||(this.connection.on("ListGroups",t=>{this.serverListing.flushElements(),this.serverListing.addElements(t),this.connection.off("ListGroups"),this.refreshing=!1}),this.connection.invoke("GetGroups").catch(t=>{this.refreshing=!1,console.error(t.toString())}),this.refreshing=!0)}createServer(t,e){}sendLogin(t,e,n,o){this.connection.on("LoginResponse",t=>{o(t),this.connection.off("LoginResponse")}),this.connection.invoke("Login",t,n,e)}messageHandling(){this.connection.on("ReceiveMessage",(t,e)=>{let n=t+" sagt:  "+e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");console.log(n)})}}("http://89.183.8.51:5000/chatHub","server-list",!0);document.getElementById("refresh-button").addEventListener("click",A.loadServers.bind(A)),new class extends j{constructor(t,e){super(t),this.serverName=t,this.serverClient=e;let n=document.createElement("div"),o=document.createElement("div"),r=document.createElement("div"),s=document.createElement("label"),i=document.createElement("input");s.setAttribute("for","password-input"),s.textContent="Passwort:",s.title="Das Passwort des Spiels",i.id="password-input",i.type="password",i.placeholder="Passwort";let a=document.createElement("label"),c=document.createElement("input");a.setAttribute("for","name-input"),a.textContent="Benutzername:",a.title="Dein Anzeigename",c.id="name-input",c.type="text",c.autocomplete="on",c.placeholder="Name";let l=document.createElement("button");l.className="btn",l.textContent="Login",l.id="login-button",n.appendChild(s),n.appendChild(i),o.appendChild(a),o.appendChild(c),r.appendChild(l),this.body.appendChild(n),this.body.appendChild(o),this.body.appendChild(r),this.nameInput=c,this.passwordInput=i,this.loginButton=l,this.registerLoginBtn()}registerLoginBtn(){let t=()=>{this.loginButton.removeEventListener("click",t);let e=this.nameInput.value;this.passwordInput.value.getHash().then(t=>{this.serverClient.sendLogin(this.serverName,t,e),this.close()})};this.loginButton.addEventListener("click",t)}}("The Crew",A),window.client=A}]);
-\ No newline at end of file
+!function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=6)}([function(t,e,n){"use strict";n.d(e,"a",function(){return o});class o{constructor(t,e,n){this.ids={backdropMenu:t,frontLayer:e,menuButton:n},this.backdrop=document.getElementById(t),this.frontLayer=document.getElementById(e),this.menuButton=document.getElementById(n)}register(){this.registerButtonEvent(),this.registerFrontLayerEvent()}refresh(){this.backdrop=document.getElementById(this.ids.backdropMenu),this.frontLayer=document.getElementById(this.ids.frontLayer),this.menuButton=document.getElementById(this.ids.menuButton),this.register()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.backdrop.classList.contains("hidden")?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.menuButton.classList.contains("open")?this.menuButton.classList.remove("open"):this.menuButton.classList.add("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open")})}}},function(t,e,n){"use strict";n.d(e,"a",function(){return o});class o{constructor(t,e,n,o){this.ids={bannerId:t,textP:e,dismissBtn:n,notificationBadge:o},this.banner=document.getElementById(t),this.bannerText=document.getElementById(e),this.dismissBtn=document.getElementById(n),this.notificationBadge=document.getElementById(o),this.bannerMsgs=[],this.banner.classList.add("hidden")}register(){this.dismissBtn.addEventListener("click",()=>{this.dismissCurrent()})}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=[],this.banner.classList.add("hidden")}show(t,e){let n={name:t,text:e,html:!1};this.bannerMsgs.push(n),this.update()}hide(t){if(t){for(let e=0;e<this.bannerMsgs.length;e++)this.bannerMsgs[e].name==t&&this.bannerMsgs.splice(e,1);this.update()}else this.bannerMsgs=[],this.banner.classList.add("hidden")}dismissCurrent(){this.hide(this.current)}update(){if(0===this.bannerMsgs.length)return void this.banner.classList.add("hidden");const t=this.bannerMsgs[this.bannerMsgs.length-1],e=t.name,n=t.text,o=t.html;this.banner.classList.remove("hidden"),o?this.bannerText.innerHTML=n:this.bannerText.innerText=n,this.current=e,this.bannerMsgs.length<2?this.notificationBadge.classList.add("hidden"):this.bannerMsgs.length>9?(this.notificationBadge.classList.remove("hidden"),this.notificationBadge.textContent="∞"):(this.notificationBadge.classList.remove("hidden"),this.notificationBadge.textContent=this.bannerMsgs.length.toString())}}},function(t,e){String.prototype.getHash=async function(){let t=new ArrayBuffer(2*this.length),e=new Uint16Array(t);for(let t=0;t<this.length;t++)e[t]=this.charCodeAt(t);let n=await crypto.subtle.digest("SHA-256",e),o=new Uint8Array(n),r="";for(let t of o)r+=String.fromCharCode(t);return btoa(r)}},,,,function(t,e,n){"use strict";n.r(e);var o=n(0),r=n(1),s=function(t,e){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function i(t,e){function n(){this.constructor=t}s(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var a=function(){return(a=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function c(t,e,n,o){return new(n||(n=Promise))(function(r,s){function i(t){try{c(o.next(t))}catch(t){s(t)}}function a(t){try{c(o.throw(t))}catch(t){s(t)}}function c(t){t.done?r(t.value):new n(function(e){e(t.value)}).then(i,a)}c((o=o.apply(t,e||[])).next())})}function l(t,e){var n,o,r,s,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return s={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(s){return function(a){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,o&&(r=2&s[0]?o.return:s[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,s[1])).done)return r;switch(o=0,r&&(s=[2&s[0],r.value]),s[0]){case 0:case 1:r=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,o=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(r=(r=i.trys).length>0&&r[r.length-1])&&(6===s[0]||2===s[0])){i=0;continue}if(3===s[0]&&(!r||s[1]>r[0]&&s[1]<r[3])){i.label=s[1];break}if(6===s[0]&&i.label<r[1]){i.label=r[1],r=s;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(s);break}r[2]&&i.ops.pop(),i.trys.pop();continue}s=e.call(t,i)}catch(t){s=[6,t],o=0}finally{n=r=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}}var u,h=function(t){function e(e,n){var o=this,r=this.constructor.prototype;return(o=t.call(this,e)||this).statusCode=n,o.__proto__=r,o}return i(e,t),e}(Error),d=function(t){function e(e){var n=this.constructor;void 0===e&&(e="A timeout occurred.");var o=this,r=n.prototype;return(o=t.call(this,e)||this).__proto__=r,o}return i(e,t),e}(Error);!function(t){t[t.Trace=0]="Trace",t[t.Debug=1]="Debug",t[t.Information=2]="Information",t[t.Warning=3]="Warning",t[t.Error=4]="Error",t[t.Critical=5]="Critical",t[t.None=6]="None"}(u||(u={}));var p,g=function(){return function(t,e,n){this.statusCode=t,this.statusText=e,this.content=n}}(),f=function(t){function e(e){var n=t.call(this)||this;return n.logger=e,n}return i(e,t),e.prototype.send=function(t){var e=this;return new Promise(function(n,o){var r=new XMLHttpRequest;r.open(t.method,t.url,!0),r.withCredentials=!0,r.setRequestHeader("X-Requested-With","XMLHttpRequest"),r.setRequestHeader("Content-Type","text/plain;charset=UTF-8"),t.headers&&Object.keys(t.headers).forEach(function(e){return r.setRequestHeader(e,t.headers[e])}),t.responseType&&(r.responseType=t.responseType),t.abortSignal&&(t.abortSignal.onabort=function(){r.abort()}),t.timeout&&(r.timeout=t.timeout),r.onload=function(){t.abortSignal&&(t.abortSignal.onabort=null),r.status>=200&&r.status<300?n(new g(r.status,r.statusText,r.response||r.responseText)):o(new h(r.statusText,r.status))},r.onerror=function(){e.logger.log(u.Warning,"Error from HTTP request. "+r.status+": "+r.statusText),o(new h(r.statusText,r.status))},r.ontimeout=function(){e.logger.log(u.Warning,"Timeout from HTTP request."),o(new d)},r.send(t.content||"")})},e}(function(){function t(){}return t.prototype.get=function(t,e){return this.send(a({},e,{method:"GET",url:t}))},t.prototype.post=function(t,e){return this.send(a({},e,{method:"POST",url:t}))},t.prototype.delete=function(t,e){return this.send(a({},e,{method:"DELETE",url:t}))},t}()),m=function(){function t(){}return t.write=function(e){return""+e+t.RecordSeparator},t.parse=function(e){if(e[e.length-1]!==t.RecordSeparator)throw new Error("Message is incomplete.");var n=e.split(t.RecordSeparator);return n.pop(),n},t.RecordSeparatorCode=30,t.RecordSeparator=String.fromCharCode(t.RecordSeparatorCode),t}(),v=function(){function t(){}return t.prototype.writeHandshakeRequest=function(t){return m.write(JSON.stringify(t))},t.prototype.parseHandshakeResponse=function(t){var e,n;if(t instanceof ArrayBuffer){var o=new Uint8Array(t);if(-1===(s=o.indexOf(m.RecordSeparatorCode)))throw new Error("Message is incomplete.");var r=s+1;e=String.fromCharCode.apply(null,o.slice(0,r)),n=o.byteLength>r?o.slice(r).buffer:null}else{var s,i=t;if(-1===(s=i.indexOf(m.RecordSeparator)))throw new Error("Message is incomplete.");r=s+1;e=i.substring(0,r),n=i.length>r?i.substring(r):null}var a=m.parse(e);return[n,JSON.parse(a[0])]},t}();!function(t){t[t.Invocation=1]="Invocation",t[t.StreamItem=2]="StreamItem",t[t.Completion=3]="Completion",t[t.StreamInvocation=4]="StreamInvocation",t[t.CancelInvocation=5]="CancelInvocation",t[t.Ping=6]="Ping",t[t.Close=7]="Close"}(p||(p={}));var b=function(){function t(){}return t.prototype.log=function(t,e){},t.instance=new t,t}(),y=function(){function t(){}return t.isRequired=function(t,e){if(null===t||void 0===t)throw new Error("The '"+e+"' argument is required.")},t.isIn=function(t,e,n){if(!(t in e))throw new Error("Unknown "+n+" value: "+t+".")},t}();function w(t,e){var n=null;return t instanceof ArrayBuffer?(n="Binary data of length "+t.byteLength,e&&(n+=". Content: '"+function(t){var e="";return new Uint8Array(t).forEach(function(t){e+="0x"+(t<16?"0":"")+t.toString(16)+" "}),e.substr(0,e.length-1)}(t)+"'")):"string"==typeof t&&(n="String data of length "+t.length,e&&(n+=". Content: '"+t+"'.")),n}function E(t,e,n,o,r,s,i){return c(this,void 0,void 0,function(){var a,c,h,d;return l(this,function(l){switch(l.label){case 0:return[4,r()];case 1:return(c=l.sent())&&((d={}).Authorization="Bearer "+c,a=d),t.log(u.Trace,"("+e+" transport) sending data. "+w(s,i)+"."),[4,n.post(o,{content:s,headers:a})];case 2:return h=l.sent(),t.log(u.Trace,"("+e+" transport) request complete. Response status: "+h.statusCode+"."),[2]}})})}var C,S,k=function(){function t(t){this.observers=[],this.cancelCallback=t}return t.prototype.next=function(t){for(var e=0,n=this.observers;e<n.length;e++){n[e].next(t)}},t.prototype.error=function(t){for(var e=0,n=this.observers;e<n.length;e++){var o=n[e];o.error&&o.error(t)}},t.prototype.complete=function(){for(var t=0,e=this.observers;t<e.length;t++){var n=e[t];n.complete&&n.complete()}},t.prototype.subscribe=function(t){return this.observers.push(t),new T(this,t)},t}(),T=function(){function t(t,e){this.subject=t,this.observer=e}return t.prototype.dispose=function(){var t=this.subject.observers.indexOf(this.observer);t>-1&&this.subject.observers.splice(t,1),0===this.subject.observers.length&&this.subject.cancelCallback().catch(function(t){})},t}(),I=function(){function t(t){this.minimumLogLevel=t}return t.prototype.log=function(t,e){if(t>=this.minimumLogLevel)switch(t){case u.Critical:case u.Error:console.error(u[t]+": "+e);break;case u.Warning:console.warn(u[t]+": "+e);break;case u.Information:console.info(u[t]+": "+e);break;default:console.log(u[t]+": "+e)}},t}(),L=3e4,P=function(){function t(t,e,n){var o=this;y.isRequired(t,"connection"),y.isRequired(e,"logger"),y.isRequired(n,"protocol"),this.serverTimeoutInMilliseconds=L,this.logger=e,this.protocol=n,this.connection=t,this.handshakeProtocol=new v,this.connection.onreceive=function(t){return o.processIncomingData(t)},this.connection.onclose=function(t){return o.connectionClosed(t)},this.callbacks={},this.methods={},this.closedCallbacks=[],this.id=0}return t.create=function(e,n,o){return new t(e,n,o)},t.prototype.start=function(){return c(this,void 0,void 0,function(){var t;return l(this,function(e){switch(e.label){case 0:return t={protocol:this.protocol.name,version:this.protocol.version},this.logger.log(u.Debug,"Starting HubConnection."),this.receivedHandshakeResponse=!1,[4,this.connection.start(this.protocol.transferFormat)];case 1:return e.sent(),this.logger.log(u.Debug,"Sending handshake request."),[4,this.connection.send(this.handshakeProtocol.writeHandshakeRequest(t))];case 2:return e.sent(),this.logger.log(u.Information,"Using HubProtocol '"+this.protocol.name+"'."),this.cleanupTimeout(),this.configureTimeout(),[2]}})})},t.prototype.stop=function(){return this.logger.log(u.Debug,"Stopping HubConnection."),this.cleanupTimeout(),this.connection.stop()},t.prototype.stream=function(t){for(var e=this,n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];var r=this.createStreamInvocation(t,n),s=new k(function(){var t=e.createCancelInvocation(r.invocationId),n=e.protocol.writeMessage(t);return delete e.callbacks[r.invocationId],e.connection.send(n)});this.callbacks[r.invocationId]=function(t,e){e?s.error(e):t.type===p.Completion?t.error?s.error(new Error(t.error)):s.complete():s.next(t.item)};var i=this.protocol.writeMessage(r);return this.connection.send(i).catch(function(t){s.error(t),delete e.callbacks[r.invocationId]}),s},t.prototype.send=function(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];var o=this.createInvocation(t,e,!0),r=this.protocol.writeMessage(o);return this.connection.send(r)},t.prototype.invoke=function(t){for(var e=this,n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];var r=this.createInvocation(t,n,!1);return new Promise(function(t,n){e.callbacks[r.invocationId]=function(e,o){if(o)n(o);else if(e.type===p.Completion){var r=e;r.error?n(new Error(r.error)):t(r.result)}else n(new Error("Unexpected message type: "+e.type))};var o=e.protocol.writeMessage(r);e.connection.send(o).catch(function(t){n(t),delete e.callbacks[r.invocationId]})})},t.prototype.on=function(t,e){t&&e&&(t=t.toLowerCase(),this.methods[t]||(this.methods[t]=[]),-1===this.methods[t].indexOf(e)&&this.methods[t].push(e))},t.prototype.off=function(t,e){if(t){t=t.toLowerCase();var n=this.methods[t];if(n)if(e){var o=n.indexOf(e);-1!==o&&(n.splice(o,1),0===n.length&&delete this.methods[t])}else delete this.methods[t]}},t.prototype.onclose=function(t){t&&this.closedCallbacks.push(t)},t.prototype.processIncomingData=function(t){if(this.cleanupTimeout(),this.receivedHandshakeResponse||(t=this.processHandshakeResponse(t),this.receivedHandshakeResponse=!0),t)for(var e=0,n=this.protocol.parseMessages(t,this.logger);e<n.length;e++){var o=n[e];switch(o.type){case p.Invocation:this.invokeClientMethod(o);break;case p.StreamItem:case p.Completion:var r=this.callbacks[o.invocationId];null!=r&&(o.type===p.Completion&&delete this.callbacks[o.invocationId],r(o));break;case p.Ping:break;case p.Close:this.logger.log(u.Information,"Close message received from server."),this.connection.stop(o.error?new Error("Server returned an error on close: "+o.error):null);break;default:this.logger.log(u.Warning,"Invalid message type: "+o.type)}}this.configureTimeout()},t.prototype.processHandshakeResponse=function(t){var e,n,o;try{n=(o=this.handshakeProtocol.parseHandshakeResponse(t))[0],e=o[1]}catch(t){var r="Error parsing handshake response: "+t;this.logger.log(u.Error,r);var s=new Error(r);throw this.connection.stop(s),s}if(e.error){r="Server returned handshake error: "+e.error;this.logger.log(u.Error,r),this.connection.stop(new Error(r))}else this.logger.log(u.Debug,"Server handshake complete.");return n},t.prototype.configureTimeout=function(){var t=this;this.connection.features&&this.connection.features.inherentKeepAlive||(this.timeoutHandle=setTimeout(function(){return t.serverTimeout()},this.serverTimeoutInMilliseconds))},t.prototype.serverTimeout=function(){this.connection.stop(new Error("Server timeout elapsed without receiving a message from the server."))},t.prototype.invokeClientMethod=function(t){var e=this,n=this.methods[t.target.toLowerCase()];if(n){if(n.forEach(function(n){return n.apply(e,t.arguments)}),t.invocationId){var o="Server requested a response, which is not supported in this version of the client.";this.logger.log(u.Error,o),this.connection.stop(new Error(o))}}else this.logger.log(u.Warning,"No client method with the name '"+t.target+"' found.")},t.prototype.connectionClosed=function(t){var e=this,n=this.callbacks;this.callbacks={},Object.keys(n).forEach(function(e){(0,n[e])(void 0,t||new Error("Invocation canceled due to connection being closed."))}),this.cleanupTimeout(),this.closedCallbacks.forEach(function(n){return n.apply(e,[t])})},t.prototype.cleanupTimeout=function(){this.timeoutHandle&&clearTimeout(this.timeoutHandle)},t.prototype.createInvocation=function(t,e,n){if(n)return{arguments:e,target:t,type:p.Invocation};var o=this.id;return this.id++,{arguments:e,invocationId:o.toString(),target:t,type:p.Invocation}},t.prototype.createStreamInvocation=function(t,e){var n=this.id;return this.id++,{arguments:e,invocationId:n.toString(),target:t,type:p.StreamInvocation}},t.prototype.createCancelInvocation=function(t){return{invocationId:t,type:p.CancelInvocation}},t}();!function(t){t[t.None=0]="None",t[t.WebSockets=1]="WebSockets",t[t.ServerSentEvents=2]="ServerSentEvents",t[t.LongPolling=4]="LongPolling"}(C||(C={})),function(t){t[t.Text=1]="Text",t[t.Binary=2]="Binary"}(S||(S={}));var x=function(){function t(){this.isAborted=!1}return t.prototype.abort=function(){this.isAborted||(this.isAborted=!0,this.onabort&&this.onabort())},Object.defineProperty(t.prototype,"signal",{get:function(){return this},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"aborted",{get:function(){return this.isAborted},enumerable:!0,configurable:!0}),t}(),B=5e3,M=function(){function t(t,e,n,o,r){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.pollAbort=new x,this.logMessageContent=o,this.shutdownTimeout=r||B}return Object.defineProperty(t.prototype,"pollAborted",{get:function(){return this.pollAbort.aborted},enumerable:!0,configurable:!0}),t.prototype.connect=function(t,e){return c(this,void 0,void 0,function(){var n,o,r,s,i;return l(this,function(a){switch(a.label){case 0:if(y.isRequired(t,"url"),y.isRequired(e,"transferFormat"),y.isIn(e,S,"transferFormat"),this.url=t,this.logger.log(u.Trace,"(LongPolling transport) Connecting"),e===S.Binary&&"string"!=typeof(new XMLHttpRequest).responseType)throw new Error("Binary protocols over XmlHttpRequest not implementing advanced features are not supported.");return n={abortSignal:this.pollAbort.signal,headers:{},timeout:9e4},e===S.Binary&&(n.responseType="arraybuffer"),[4,this.accessTokenFactory()];case 1:return o=a.sent(),this.updateHeaderToken(n,o),s=t+"&_="+Date.now(),this.logger.log(u.Trace,"(LongPolling transport) polling: "+s),[4,this.httpClient.get(s,n)];case 2:return 200!==(i=a.sent()).statusCode?(this.logger.log(u.Error,"(LongPolling transport) Unexpected response code: "+i.statusCode),r=new h(i.statusText,i.statusCode),this.running=!1):this.running=!0,this.poll(this.url,n,r),[2,Promise.resolve()]}})})},t.prototype.updateHeaderToken=function(t,e){e?t.headers.Authorization="Bearer "+e:t.headers.Authorization&&delete t.headers.Authorization},t.prototype.poll=function(t,e,n){return c(this,void 0,void 0,function(){var o,r,s,i;return l(this,function(a){switch(a.label){case 0:a.trys.push([0,,8,9]),a.label=1;case 1:return this.running?[4,this.accessTokenFactory()]:[3,7];case 2:o=a.sent(),this.updateHeaderToken(e,o),a.label=3;case 3:return a.trys.push([3,5,,6]),r=t+"&_="+Date.now(),this.logger.log(u.Trace,"(LongPolling transport) polling: "+r),[4,this.httpClient.get(r,e)];case 4:return 204===(s=a.sent()).statusCode?(this.logger.log(u.Information,"(LongPolling transport) Poll terminated by server"),this.running=!1):200!==s.statusCode?(this.logger.log(u.Error,"(LongPolling transport) Unexpected response code: "+s.statusCode),n=new h(s.statusText,s.statusCode),this.running=!1):s.content?(this.logger.log(u.Trace,"(LongPolling transport) data received. "+w(s.content,this.logMessageContent)),this.onreceive&&this.onreceive(s.content)):this.logger.log(u.Trace,"(LongPolling transport) Poll timed out, reissuing."),[3,6];case 5:return i=a.sent(),this.running?i instanceof d?this.logger.log(u.Trace,"(LongPolling transport) Poll timed out, reissuing."):(n=i,this.running=!1):this.logger.log(u.Trace,"(LongPolling transport) Poll errored after shutdown: "+i.message),[3,6];case 6:return[3,1];case 7:return[3,9];case 8:return this.stopped=!0,this.shutdownTimer&&clearTimeout(this.shutdownTimer),this.onclose&&(this.logger.log(u.Trace,"(LongPolling transport) Firing onclose event. Error: "+(n||"<undefined>")),this.onclose(n)),this.logger.log(u.Trace,"(LongPolling transport) Transport finished."),[7];case 9:return[2]}})})},t.prototype.send=function(t){return c(this,void 0,void 0,function(){return l(this,function(e){return this.running?[2,E(this.logger,"LongPolling",this.httpClient,this.url,this.accessTokenFactory,t,this.logMessageContent)]:[2,Promise.reject(new Error("Cannot send until the transport is connected"))]})})},t.prototype.stop=function(){return c(this,void 0,void 0,function(){var t,e,n=this;return l(this,function(o){switch(o.label){case 0:return o.trys.push([0,,3,4]),this.running=!1,this.logger.log(u.Trace,"(LongPolling transport) sending DELETE request to "+this.url+"."),t={headers:{}},[4,this.accessTokenFactory()];case 1:return e=o.sent(),this.updateHeaderToken(t,e),[4,this.httpClient.delete(this.url,t)];case 2:return o.sent(),this.logger.log(u.Trace,"(LongPolling transport) DELETE request accepted."),[3,4];case 3:return this.stopped||(this.shutdownTimer=setTimeout(function(){n.logger.log(u.Warning,"(LongPolling transport) server did not terminate after DELETE request, canceling poll."),n.pollAbort.abort()},this.shutdownTimeout)),[7];case 4:return[2]}})})},t}(),N=function(){function t(t,e,n,o){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.logMessageContent=o}return t.prototype.connect=function(t,e){return c(this,void 0,void 0,function(){var n,o=this;return l(this,function(r){switch(r.label){case 0:if(y.isRequired(t,"url"),y.isRequired(e,"transferFormat"),y.isIn(e,S,"transferFormat"),"undefined"==typeof EventSource)throw new Error("'EventSource' is not supported in your environment.");return this.logger.log(u.Trace,"(SSE transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),this.url=t,[2,new Promise(function(n,r){var s=!1;e!==S.Text&&r(new Error("The Server-Sent Events transport only supports the 'Text' transfer format"));var i=new EventSource(t,{withCredentials:!0});try{i.onmessage=function(t){if(o.onreceive)try{o.logger.log(u.Trace,"(SSE transport) data received. "+w(t.data,o.logMessageContent)+"."),o.onreceive(t.data)}catch(t){return void(o.onclose&&o.onclose(t))}},i.onerror=function(t){var e=new Error(t.message||"Error occurred");s?o.close(e):r(e)},i.onopen=function(){o.logger.log(u.Information,"SSE connected to "+o.url),o.eventSource=i,s=!0,n()}}catch(t){return Promise.reject(t)}})]}})})},t.prototype.send=function(t){return c(this,void 0,void 0,function(){return l(this,function(e){return this.eventSource?[2,E(this.logger,"SSE",this.httpClient,this.url,this.accessTokenFactory,t,this.logMessageContent)]:[2,Promise.reject(new Error("Cannot send until the transport is connected"))]})})},t.prototype.stop=function(){return this.close(),Promise.resolve()},t.prototype.close=function(t){this.eventSource&&(this.eventSource.close(),this.eventSource=null,this.onclose&&this.onclose(t))},t}(),R=function(){function t(t,e,n){this.logger=e,this.accessTokenFactory=t||function(){return null},this.logMessageContent=n}return t.prototype.connect=function(t,e){return c(this,void 0,void 0,function(){var n,o=this;return l(this,function(r){switch(r.label){case 0:if(y.isRequired(t,"url"),y.isRequired(e,"transferFormat"),y.isIn(e,S,"transferFormat"),"undefined"==typeof WebSocket)throw new Error("'WebSocket' is not supported in your environment.");return this.logger.log(u.Trace,"(WebSockets transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),[2,new Promise(function(n,r){t=t.replace(/^http/,"ws");var s=new WebSocket(t);e===S.Binary&&(s.binaryType="arraybuffer"),s.onopen=function(e){o.logger.log(u.Information,"WebSocket connected to "+t),o.webSocket=s,n()},s.onerror=function(t){r(t.error)},s.onmessage=function(t){o.logger.log(u.Trace,"(WebSockets transport) data received. "+w(t.data,o.logMessageContent)+"."),o.onreceive&&o.onreceive(t.data)},s.onclose=function(t){o.logger.log(u.Trace,"(WebSockets transport) socket closed."),o.onclose&&(!1===t.wasClean||1e3!==t.code?o.onclose(new Error("Websocket closed with status code: "+t.code+" ("+t.reason+")")):o.onclose())}})]}})})},t.prototype.send=function(t){return this.webSocket&&this.webSocket.readyState===WebSocket.OPEN?(this.logger.log(u.Trace,"(WebSockets transport) sending data. "+w(t,this.logMessageContent)+"."),this.webSocket.send(t),Promise.resolve()):Promise.reject("WebSocket is not in the OPEN state")},t.prototype.stop=function(){return this.webSocket&&(this.webSocket.close(),this.webSocket=null),Promise.resolve()},t}(),O=function(){function t(t,e){void 0===e&&(e={}),this.features={},y.isRequired(t,"url"),this.logger=function(t){return void 0===t?new I(u.Information):null===t?b.instance:t.log?t:new I(t)}(e.logger),this.baseUrl=this.resolveUrl(t),(e=e||{}).accessTokenFactory=e.accessTokenFactory||function(){return null},e.logMessageContent=e.logMessageContent||!1,this.httpClient=e.httpClient||new f(this.logger),this.connectionState=2,this.options=e}return t.prototype.start=function(t){return t=t||S.Binary,y.isIn(t,S,"transferFormat"),this.logger.log(u.Debug,"Starting connection with transfer format '"+S[t]+"'."),2!==this.connectionState?Promise.reject(new Error("Cannot start a connection that is not in the 'Disconnected' state.")):(this.connectionState=0,this.startPromise=this.startInternal(t),this.startPromise)},t.prototype.send=function(t){if(1!==this.connectionState)throw new Error("Cannot send data if the connection is not in the 'Connected' State.");return this.transport.send(t)},t.prototype.stop=function(t){return c(this,void 0,void 0,function(){return l(this,function(e){switch(e.label){case 0:this.connectionState=2,e.label=1;case 1:return e.trys.push([1,3,,4]),[4,this.startPromise];case 2:return e.sent(),[3,4];case 3:return e.sent(),[3,4];case 4:return this.transport?(this.stopError=t,[4,this.transport.stop()]):[3,6];case 5:e.sent(),this.transport=null,e.label=6;case 6:return[2]}})})},t.prototype.startInternal=function(t){return c(this,void 0,void 0,function(){var e,n,o,r,s,i,a,c=this;return l(this,function(h){switch(h.label){case 0:e=this.baseUrl,this.accessTokenFactory=this.options.accessTokenFactory,h.label=1;case 1:return h.trys.push([1,12,,13]),this.options.skipNegotiation?this.options.transport!==C.WebSockets?[3,3]:(this.transport=this.constructTransport(C.WebSockets),[4,this.transport.connect(e,t)]):[3,5];case 2:return h.sent(),[3,4];case 3:throw Error("Negotiation can only be skipped when using the WebSocket transport directly.");case 4:return[3,11];case 5:n=null,o=0,r=function(){var t;return l(this,function(r){switch(r.label){case 0:return[4,s.getNegotiationResponse(e)];case 1:return n=r.sent(),2===s.connectionState?[2,{value:void 0}]:(n.url&&(e=n.url),n.accessToken&&(t=n.accessToken,s.accessTokenFactory=function(){return t}),o++,[2])}})},s=this,h.label=6;case 6:return[5,r()];case 7:if("object"==typeof(i=h.sent()))return[2,i.value];h.label=8;case 8:if(n.url&&o<100)return[3,6];h.label=9;case 9:if(100===o&&n.url)throw Error("Negotiate redirection limit exceeded.");return[4,this.createTransport(e,this.options.transport,n,t)];case 10:h.sent(),h.label=11;case 11:return this.transport instanceof M&&(this.features.inherentKeepAlive=!0),this.transport.onreceive=this.onreceive,this.transport.onclose=function(t){return c.stopConnection(t)},this.changeState(0,1),[3,13];case 12:throw a=h.sent(),this.logger.log(u.Error,"Failed to start the connection: "+a),this.connectionState=2,this.transport=null,a;case 13:return[2]}})})},t.prototype.getNegotiationResponse=function(t){return c(this,void 0,void 0,function(){var e,n,o,r,s,i;return l(this,function(a){switch(a.label){case 0:return[4,this.accessTokenFactory()];case 1:(e=a.sent())&&((i={}).Authorization="Bearer "+e,n=i),o=this.resolveNegotiateUrl(t),this.logger.log(u.Debug,"Sending negotiation request: "+o),a.label=2;case 2:return a.trys.push([2,4,,5]),[4,this.httpClient.post(o,{content:"",headers:n})];case 3:if(200!==(r=a.sent()).statusCode)throw Error("Unexpected status code returned from negotiate "+r.statusCode);return[2,JSON.parse(r.content)];case 4:throw s=a.sent(),this.logger.log(u.Error,"Failed to complete negotiation with the server: "+s),s;case 5:return[2]}})})},t.prototype.createConnectUrl=function(t,e){return t+(-1===t.indexOf("?")?"?":"&")+"id="+e},t.prototype.createTransport=function(t,e,n,o){return c(this,void 0,void 0,function(){var r,s,i,a,c,h,d;return l(this,function(l){switch(l.label){case 0:return r=this.createConnectUrl(t,n.connectionId),this.isITransport(e)?(this.logger.log(u.Debug,"Connection was provided an instance of ITransport, using that directly."),this.transport=e,[4,this.transport.connect(r,o)]):[3,2];case 1:return l.sent(),this.changeState(0,1),[2];case 2:s=n.availableTransports,i=0,a=s,l.label=3;case 3:return i<a.length?(c=a[i],this.connectionState=0,"number"!=typeof(h=this.resolveTransport(c,e,o))?[3,8]:(this.transport=this.constructTransport(h),null!==n.connectionId?[3,5]:[4,this.getNegotiationResponse(t)])):[3,9];case 4:n=l.sent(),r=this.createConnectUrl(t,n.connectionId),l.label=5;case 5:return l.trys.push([5,7,,8]),[4,this.transport.connect(r,o)];case 6:return l.sent(),this.changeState(0,1),[2];case 7:return d=l.sent(),this.logger.log(u.Error,"Failed to start the transport '"+C[h]+"': "+d),this.connectionState=2,n.connectionId=null,[3,8];case 8:return i++,[3,3];case 9:throw new Error("Unable to initialize any of the available transports.")}})})},t.prototype.constructTransport=function(t){switch(t){case C.WebSockets:return new R(this.accessTokenFactory,this.logger,this.options.logMessageContent);case C.ServerSentEvents:return new N(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);case C.LongPolling:return new M(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);default:throw new Error("Unknown transport: "+t+".")}},t.prototype.resolveTransport=function(t,e,n){var o=C[t.transport];if(null===o||void 0===o)this.logger.log(u.Debug,"Skipping transport '"+t.transport+"' because it is not supported by this client.");else{var r=t.transferFormats.map(function(t){return S[t]});if(function(t,e){return!t||0!=(e&t)}(e,o))if(r.indexOf(n)>=0){if(!(o===C.WebSockets&&"undefined"==typeof WebSocket||o===C.ServerSentEvents&&"undefined"==typeof EventSource))return this.logger.log(u.Debug,"Selecting transport '"+C[o]+"'"),o;this.logger.log(u.Debug,"Skipping transport '"+C[o]+"' because it is not supported in your environment.'")}else this.logger.log(u.Debug,"Skipping transport '"+C[o]+"' because it does not support the requested transfer format '"+S[n]+"'.");else this.logger.log(u.Debug,"Skipping transport '"+C[o]+"' because it was disabled by the client.")}return null},t.prototype.isITransport=function(t){return t&&"object"==typeof t&&"connect"in t},t.prototype.changeState=function(t,e){return this.connectionState===t&&(this.connectionState=e,!0)},t.prototype.stopConnection=function(t){return c(this,void 0,void 0,function(){return l(this,function(e){return this.transport=null,(t=this.stopError||t)?this.logger.log(u.Error,"Connection disconnected with error '"+t+"'."):this.logger.log(u.Information,"Connection disconnected."),this.connectionState=2,this.onclose&&this.onclose(t),[2]})})},t.prototype.resolveUrl=function(t){if(0===t.lastIndexOf("https://",0)||0===t.lastIndexOf("http://",0))return t;if("undefined"==typeof window||!window||!window.document)throw new Error("Cannot resolve '"+t+"'.");var e=window.document.createElement("a");return e.href=t,this.logger.log(u.Information,"Normalizing '"+t+"' to '"+e.href+"'."),e.href},t.prototype.resolveNegotiateUrl=function(t){var e=t.indexOf("?"),n=t.substring(0,-1===e?t.length:e);return"/"!==n[n.length-1]&&(n+="/"),n+="negotiate",n+=-1===e?"":t.substring(e)},t}();var H="json",F=function(){function t(){this.name=H,this.version=1,this.transferFormat=S.Text}return t.prototype.parseMessages=function(t,e){if("string"!=typeof t)throw new Error("Invalid input for JSON hub protocol. Expected a string.");if(!t)return[];null===e&&(e=b.instance);for(var n=[],o=0,r=m.parse(t);o<r.length;o++){var s=r[o],i=JSON.parse(s);if("number"!=typeof i.type)throw new Error("Invalid payload.");switch(i.type){case p.Invocation:this.isInvocationMessage(i);break;case p.StreamItem:this.isStreamItemMessage(i);break;case p.Completion:this.isCompletionMessage(i);break;case p.Ping:case p.Close:break;default:e.log(u.Information,"Unknown message type '"+i.type+"' ignored.");continue}n.push(i)}return n},t.prototype.writeMessage=function(t){return m.write(JSON.stringify(t))},t.prototype.isInvocationMessage=function(t){this.assertNotEmptyString(t.target,"Invalid payload for Invocation message."),void 0!==t.invocationId&&this.assertNotEmptyString(t.invocationId,"Invalid payload for Invocation message.")},t.prototype.isStreamItemMessage=function(t){if(this.assertNotEmptyString(t.invocationId,"Invalid payload for StreamItem message."),void 0===t.item)throw new Error("Invalid payload for StreamItem message.")},t.prototype.isCompletionMessage=function(t){if(t.result&&t.error)throw new Error("Invalid payload for Completion message.");!t.result&&t.error&&this.assertNotEmptyString(t.error,"Invalid payload for Completion message."),this.assertNotEmptyString(t.invocationId,"Invalid payload for Completion message.")},t.prototype.assertNotEmptyString=function(t,e){if("string"!=typeof t||""===t)throw new Error(e)},t}(),q=function(){function t(){}return t.prototype.configureLogging=function(t){return y.isRequired(t,"logging"),!function(t){return void 0!==t.log}(t)?this.logger=new I(t):this.logger=t,this},t.prototype.withUrl=function(t,e){return y.isRequired(t,"url"),this.url=t,this.httpConnectionOptions="object"==typeof e?e:{transport:e},this},t.prototype.withHubProtocol=function(t){return y.isRequired(t,"protocol"),this.protocol=t,this},t.prototype.build=function(){var t=this.httpConnectionOptions||{};if(void 0===t.logger&&(t.logger=this.logger),!this.url)throw new Error("The 'HubConnectionBuilder.withUrl' method must be called before building the connection.");var e=new O(this.url,t);return P.create(e,this.logger||b.instance,this.protocol||new F)},t}();class j{constructor(t){let e=document.createElement("div"),n=document.createElement("div"),o=document.createElement("h1"),r=document.createElement("div");e.className="modal-container",n.className="modal",o.className="modal-title",r.className="modal-body",o.textContent=t,n.appendChild(o),n.appendChild(r),e.appendChild(n),document.body.appendChild(e),this.bg=e,this.modal=n,this.title=o,this.body=r,this.registerEvents()}registerEvents(){this.modal.addEventListener("click",t=>{t.stopPropagation()}),this.bg.addEventListener("click",()=>{this.close()})}close(){this.bg.classList.add("hidden"),this.bg.addEventListener("transitionend",()=>{document.body.removeChild(this.bg)})}setBodyText(t){this.body.textContent=t}}n(2);class A extends j{constructor(t,e,n,o){super(t),this.serverName=t,this.serverClient=e,this.notificationManager=n,this.pageUI=o;let r=document.createElement("div"),s=document.createElement("div"),i=document.createElement("div"),a=document.createElement("label"),c=document.createElement("input"),l=document.createElement("span");a.setAttribute("for","password-input"),a.textContent="Passwort:",a.title="Das Passwort des Spiels",c.id="password-input",c.type="password",c.placeholder="Passwort",c.title="Das Passwort des Spiels",l.className="invalid hidden",l.textContent="Das eingegebene Passwort ist falsch.";let u=document.createElement("label"),h=document.createElement("input"),d=document.createElement("span");u.setAttribute("for","name-input"),u.textContent="Benutzername:",u.title="Dein Anzeigename",h.id="name-input",h.type="text",h.autocomplete="on",h.placeholder="Name",h.title="Dein Anzeigename",d.className="invalid hidden",d.textContent="Der eingegebene Nutzername ist bereits vergeben.";let p=document.createElement("button");p.className="btn",p.textContent="Login",p.id="login-button",r.appendChild(a),r.appendChild(c),r.appendChild(l),s.appendChild(u),s.appendChild(h),s.appendChild(d),i.appendChild(p),this.body.appendChild(r),this.body.appendChild(s),this.body.appendChild(i),this.nameInput=h,this.passwordInput=c,this.loginButton=p,this.passwordInvalid=l,this.nameInvalid=d,this.registerLoginBtn()}registerLoginBtn(){let t,e=(e,n)=>{console.log(e),0==e?(this.redirectToPlay(n),this.close()):1==e?(this.invalid("Name"),this.loginButton.addEventListener("click",t)):2==e?(this.invalid("Pass"),this.loginButton.addEventListener("click",t)):(this.notificationManager.show("unknownLoginErr","Ein unbekannter Fehler ist aufgetreten"),this.close())};t=(()=>{this.invalid(),this.loginButton.removeEventListener("click",t);let n=this.nameInput.value;this.passwordInput.value.getHash().then(t=>{this.serverClient.sendLogin(this.serverName,t,n,e)})}),this.loginButton.addEventListener("click",t)}invalid(t){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","Pass"==t?(this.body.classList.add("frst-warning"),this.passwordInvalid.classList.remove("hidden"),this.passwordInput.style.borderColor="#ef5350"):"Name"==t&&(this.body.classList.add("scnd-warning"),this.nameInvalid.classList.remove("hidden"),this.nameInput.style.borderColor="#ef5350")}redirectToPlay(t){window.history.pushState("object or string","Game Page","play#game="+this.serverName),fetch("play").then(t=>{t.text().then(t=>{t=(t=(t=t.replace(/\.\.\//g,"./")).replace(/<script src=".*"><\/script>/,"")).replace(/<remove_if_redirected>.*?<\/remove_if_redirected>/g,""),document.open(),document.write(t),document.close();for(let t of this.pageUI)t.refresh()})})}}class D{constructor(t,e){this.serverListing=document.getElementById(t),this.notifications=e}flushElements(){this.serverListing.innerHTML=""}addElements(t,e,n){for(let o of t){const t=o.name,r=o.users.length;let s=document.createElement("div"),i=document.createElement("span"),a=document.createElement("div"),c=document.createElement("div"),l=document.createElement("span"),u=document.createElement("span"),h=document.createElement("button");s.className="server",i.className="server-name",a.className="right-aligned-items",c.className="player-count-dot",l.className="player-count",u.className="player-count-static",h.className="btn join-btn",h.id="join",i.textContent=t,l.textContent=r,u.textContent="Spieler online",h.textContent="Beitreten",h.addEventListener("click",()=>{new A(t,e,this.notifications,n)}),a.appendChild(c),a.appendChild(l),a.appendChild(u),a.appendChild(h),s.appendChild(i),s.appendChild(a),this.serverListing.appendChild(s)}}}let U=new o.a("menu","front-layer","show-menu");U.register();let _=new r.a("notifications","banner-info","dismiss-banner","notification-amount");_.register();let W=new class{constructor(t,e,n,o,r=!1){this.ui=o;const s=(new q).withUrl(t);r?s.configureLogging(u.Debug):s.configureLogging(u.Error),this.connection=s.build(),this.connection.start().then(()=>this.loadServers()).catch(t=>console.error(t.toString())),this.refreshing=!1,this.serverListing=new D(e,n),this.messageHandling()}loadServers(){this.refreshing||(this.connection.on("ListGroups",t=>{this.serverListing.flushElements(),this.serverListing.addElements(t,this,this.ui),this.connection.off("ListGroups"),this.refreshing=!1}),this.connection.invoke("GetGroups").catch(t=>{this.refreshing=!1,console.error(t.toString())}),this.refreshing=!0)}createServer(t,e){}sendLogin(t,e,n,o){this.connection.on("LoginResponse",t=>{o(t,this),this.connection.off("LoginResponse")}),this.connection.invoke("Login",t,n,e)}messageHandling(){this.connection.on("ReceiveMessage",(t,e)=>{let n=t+" sagt:  "+e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");console.log(n)})}}("http://89.183.101.117:5000/chatHub","server-list",_,[U,_],!0);document.getElementById("refresh-button").addEventListener("click",W.loadServers.bind(W)),window.client=W}]);
+\ No newline at end of file
diff --git a/WebInterface/NodeJSServer/dist/script/play.js b/WebInterface/NodeJSServer/dist/script/play.js
index f6ff154..cceb4ff 100644
--- a/WebInterface/NodeJSServer/dist/script/play.js
+++ b/WebInterface/NodeJSServer/dist/script/play.js
@@ -1 +1 @@
-!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}({3:function(e,t){}});
-\ No newline at end of file
+!function(t){var e={};function n(s){if(e[s])return e[s].exports;var i=e[s]={i:s,l:!1,exports:{}};return t[s].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,s){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(s,i,function(e){return t[e]}.bind(null,i));return s},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=4)}([function(t,e,n){"use strict";n.d(e,"a",function(){return s});class s{constructor(t,e,n){this.ids={backdropMenu:t,frontLayer:e,menuButton:n},this.backdrop=document.getElementById(t),this.frontLayer=document.getElementById(e),this.menuButton=document.getElementById(n)}register(){this.registerButtonEvent(),this.registerFrontLayerEvent()}refresh(){this.backdrop=document.getElementById(this.ids.backdropMenu),this.frontLayer=document.getElementById(this.ids.frontLayer),this.menuButton=document.getElementById(this.ids.menuButton),this.register()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.backdrop.classList.contains("hidden")?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.menuButton.classList.contains("open")?this.menuButton.classList.remove("open"):this.menuButton.classList.add("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open")})}}},function(t,e,n){"use strict";n.d(e,"a",function(){return s});class s{constructor(t,e,n,s){this.ids={bannerId:t,textP:e,dismissBtn:n,notificationBadge:s},this.banner=document.getElementById(t),this.bannerText=document.getElementById(e),this.dismissBtn=document.getElementById(n),this.notificationBadge=document.getElementById(s),this.bannerMsgs=[],this.banner.classList.add("hidden")}register(){this.dismissBtn.addEventListener("click",()=>{this.dismissCurrent()})}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=[],this.banner.classList.add("hidden")}show(t,e){let n={name:t,text:e,html:!1};this.bannerMsgs.push(n),this.update()}hide(t){if(t){for(let e=0;e<this.bannerMsgs.length;e++)this.bannerMsgs[e].name==t&&this.bannerMsgs.splice(e,1);this.update()}else this.bannerMsgs=[],this.banner.classList.add("hidden")}dismissCurrent(){this.hide(this.current)}update(){if(0===this.bannerMsgs.length)return void this.banner.classList.add("hidden");const t=this.bannerMsgs[this.bannerMsgs.length-1],e=t.name,n=t.text,s=t.html;this.banner.classList.remove("hidden"),s?this.bannerText.innerHTML=n:this.bannerText.innerText=n,this.current=e,this.bannerMsgs.length<2?this.notificationBadge.classList.add("hidden"):this.bannerMsgs.length>9?(this.notificationBadge.classList.remove("hidden"),this.notificationBadge.textContent="∞"):(this.notificationBadge.classList.remove("hidden"),this.notificationBadge.textContent=this.bannerMsgs.length.toString())}}},,,function(t,e,n){"use strict";n.r(e);var s=n(0),i=n(1);new s.a("menu","front-layer","show-menu").register(),new i.a("notifications","banner-info","dismiss-banner","notification-amount").register()}]);
+\ No newline at end of file
diff --git a/WebInterface/NodeJSServer/dist/script/playModule.js b/WebInterface/NodeJSServer/dist/script/playModule.js
new file mode 100644
index 0000000..2cd7a04
--- /dev/null
+++ b/WebInterface/NodeJSServer/dist/script/playModule.js
@@ -0,0 +1 @@
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}({5:function(e,t,n){"use strict";n.r(t),n.d(t,"default",function(){return r});class r{constructor(e){this.connection=e}}}});
+\ No newline at end of file
diff --git a/WebInterface/NodeJSServer/dist/style/index.css b/WebInterface/NodeJSServer/dist/style/index.css
index 736fb5b..1004808 100644
--- a/WebInterface/NodeJSServer/dist/style/index.css
+++ b/WebInterface/NodeJSServer/dist/style/index.css
@@ -1 +1 @@
-html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.btn{border:none;border-radius:4px;padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;background-color:#546e7a;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);cursor:pointer;letter-spacing:0.25rem;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.btn:hover{background:#29434e radial-gradient(circle, transparent 1%, #29434e 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);box-shadow:0 1px 3px rgba(0,0,0,0.12);-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.btn:disabled{color:#ffffff61;background:#546e7a61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.text-btn{padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;color:#fff;background-color:rgba(0,0,0,0);text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.text-btn:hover{background:#29434e61 radial-gradient(circle, transparent 1%, #29434e61 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.text-btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.text-btn:disabled{background:rgba(0,0,0,0);color:#ffffff61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-height: 550px){.backdrop .header-bar{margin-top:0.125rem}}.backdrop .header-bar .menu-icon{background-image:url("../ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}@media (max-height: 550px){.backdrop .header-bar .menu-icon{padding:0;margin:0.125rem}}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("../ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}@media (max-height: 550px){.backdrop .header-bar .header{padding:0}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.front-layer{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.front-layer .banner{background-color:white;border:none;border-radius:16px 16px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;margin-bottom:1rem;padding-top:1rem;max-height:10rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-transform-origin:top;transform-origin:top;-webkit-transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;min-height:3.5rem;justify-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-height: 550px){.front-layer .banner{position:absolute;width:100%;-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}}.front-layer .banner.hidden{-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;max-height:0;-webkit-transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;min-height:0;margin-bottom:0}.front-layer .banner .notification-badge{height:1rem;min-width:1rem;font-weight:bold;color:#fff;font-size:1rem;padding:0.5rem;margin:0.5rem 0 0.5rem 1rem;text-align:center;line-height:1rem;background-color:#546e7a;border:none;border-radius:50%}.front-layer .banner .notification-badge.hidden{display:none}.front-layer .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:100;-ms-flex-positive:100;flex-grow:100}.front-layer .banner .btn-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.front-layer .banner .btn-container .banner-button{color:#29434e;padding:8px 16px;margin:0;margin-right:1rem;letter-spacing:0.125rem}.front-layer .banner hr{width:100%}@media (max-height: 550px){.front-layer .banner hr{margin-bottom:0}}.front-layer .server-listing{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#212121;color:#fff;min-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-style:none;border-radius:8px;margin:1rem;margin-bottom:2rem;padding:0.5rem;padding-top:0.25rem;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}.front-layer .server-listing h1{text-align:center}@media (max-height: 550px){.front-layer .server-listing h1{display:none}}.front-layer .server-listing hr{width:100%}@media (max-height: 550px){.front-layer .server-listing hr{display:none}}@media (max-height: 450px){.front-layer .server-listing{padding-bottom:0.125rem}}.front-layer .server-listing .server-entries{overflow-y:auto;min-height:0}.front-layer .server-listing .server-entries .server{font-size:1.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#484848;padding:0.5rem;margin-bottom:0.25rem;border-style:none;border-radius:8px}@media (max-width: 1000px){.front-layer .server-listing .server-entries .server{-ms-flex-wrap:wrap;flex-wrap:wrap}}.front-layer .server-listing .server-entries .server .server-name{font-weight:bold;letter-spacing:0.125rem;white-space:nowrap;overflow:hidden;margin:0.5rem 0}.front-layer .server-listing .server-entries .server .right-aligned-items{margin-left:auto;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.front-layer .server-listing .server-entries .server .right-aligned-items .player-count-dot{background-color:#393;border-radius:50%;min-width:1rem;min-height:1rem;width:1rem;height:1rem;margin-right:0.25rem}.front-layer .server-listing .server-entries .server .right-aligned-items .player-count{font-family:'Roboto Condensed', sans-serif}.front-layer .server-listing .server-entries .server .right-aligned-items .player-count-static{white-space:nowrap;margin-left:0.25rem;letter-spacing:0;font-family:'Roboto Condensed', sans-serif}@media (max-width: 1000px){.front-layer .server-listing .server-entries .server .right-aligned-items .player-count-static{display:none}}.front-layer .server-listing .server-entries .server .right-aligned-items .join-btn{margin-left:0.5rem;min-width:12rem}.front-layer .server-listing .button-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-top:1rem;margin-right:0.25rem;min-height:2.5rem}@media (max-height: 450px){.front-layer .server-listing .button-container{margin-top:0.125rem;min-height:2rem}}@media (max-width: 450px){.front-layer .server-listing .button-container .btn{letter-spacing:0}}.front-layer .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}.modal-container{position:absolute;top:0;width:100vw;height:100vh;background-color:#000000AA;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease}.modal-container.hidden{opacity:0}.modal-container .modal{background-color:#212121;margin:auto;padding:1rem;border-style:none;border-radius:8px;-webkit-box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22);box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)}.modal-container .modal-title{max-width:85vw;margin:1rem;text-align:center}.modal-container .modal-body{margin:0.25rem}.modal .modal-title{white-space:nowrap;overflow:hidden}.modal .modal-body{display:-ms-grid;display:grid;-ms-grid-columns:10em 1fr;grid-template-columns:10em 1fr;-ms-grid-rows:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-row-gap:0.5rem}.modal .modal-body div{display:contents;font-size:1.25rem}.modal .modal-body div label{-ms-flex-preferred-size:30%;flex-basis:30%;margin-right:2rem;grid-column:1 2}.modal .modal-body div input{-ms-flex-preferred-size:calc(70% - 2rem);flex-basis:calc(70% - 2rem);grid-column:2 3}.modal .modal-body div button{-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3}
+html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.btn{border:none;border-radius:4px;padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;background-color:#546e7a;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);cursor:pointer;letter-spacing:0.25rem;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.btn:hover{background:#29434e radial-gradient(circle, transparent 1%, #29434e 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);box-shadow:0 1px 3px rgba(0,0,0,0.12);-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.btn:disabled{color:#ffffff61;background:#546e7a61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.text-btn{padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;color:#fff;background-color:rgba(0,0,0,0);text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.text-btn:hover{background:#29434e61 radial-gradient(circle, transparent 1%, #29434e61 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.text-btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.text-btn:disabled{background:rgba(0,0,0,0);color:#ffffff61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-height: 550px){.backdrop .header-bar{margin-top:0.125rem}}.backdrop .header-bar .menu-icon{background-image:url("../ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}@media (max-height: 550px){.backdrop .header-bar .menu-icon{padding:0;margin:0.125rem}}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("../ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}@media (max-height: 550px){.backdrop .header-bar .header{padding:0}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.front-layer{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.front-layer .banner{background-color:white;border:none;border-radius:16px 16px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;margin-bottom:1rem;padding-top:1rem;max-height:10rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-transform-origin:top;transform-origin:top;-webkit-transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;min-height:3.5rem;justify-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-height: 550px){.front-layer .banner{position:absolute;width:100%;-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}}.front-layer .banner.hidden{-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;max-height:0;-webkit-transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;min-height:0;margin-bottom:0}.front-layer .banner .notification-badge{height:1rem;min-width:1rem;font-weight:bold;color:#fff;font-size:1rem;padding:0.5rem;margin:0.5rem 0 0.5rem 1rem;text-align:center;line-height:1rem;background-color:#546e7a;border:none;border-radius:50%}.front-layer .banner .notification-badge.hidden{display:none}.front-layer .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:100;-ms-flex-positive:100;flex-grow:100}.front-layer .banner .btn-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.front-layer .banner .btn-container .banner-button{color:#29434e;padding:8px 16px;margin:0;margin-right:1rem;letter-spacing:0.125rem}.front-layer .banner hr{width:100%}@media (max-height: 550px){.front-layer .banner hr{margin-bottom:0}}.front-layer .server-listing{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#212121;color:#fff;min-height:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-style:none;border-radius:8px;margin:1rem;margin-bottom:2rem;padding:0.5rem;padding-top:0.25rem;-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}.front-layer .server-listing h1{text-align:center}@media (max-height: 550px){.front-layer .server-listing h1{display:none}}.front-layer .server-listing hr{width:100%}@media (max-height: 550px){.front-layer .server-listing hr{display:none}}@media (max-height: 450px){.front-layer .server-listing{padding-bottom:0.125rem}}.front-layer .server-listing .server-entries{overflow-y:auto;min-height:0}.front-layer .server-listing .server-entries .server{font-size:1.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#484848;padding:0.5rem;margin-bottom:0.25rem;border-style:none;border-radius:8px}@media (max-width: 1000px){.front-layer .server-listing .server-entries .server{-ms-flex-wrap:wrap;flex-wrap:wrap}}.front-layer .server-listing .server-entries .server .server-name{font-weight:bold;letter-spacing:0.125rem;white-space:nowrap;overflow:hidden;margin:0.5rem 0}.front-layer .server-listing .server-entries .server .right-aligned-items{margin-left:auto;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.front-layer .server-listing .server-entries .server .right-aligned-items .player-count-dot{background-color:#393;border-radius:50%;min-width:1rem;min-height:1rem;width:1rem;height:1rem;margin-right:0.25rem}.front-layer .server-listing .server-entries .server .right-aligned-items .player-count{font-family:'Roboto Condensed', sans-serif}.front-layer .server-listing .server-entries .server .right-aligned-items .player-count-static{white-space:nowrap;margin-left:0.25rem;letter-spacing:0;font-family:'Roboto Condensed', sans-serif}@media (max-width: 1000px){.front-layer .server-listing .server-entries .server .right-aligned-items .player-count-static{display:none}}.front-layer .server-listing .server-entries .server .right-aligned-items .join-btn{margin-left:0.5rem;min-width:12rem}.front-layer .server-listing .button-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-top:1rem;margin-right:0.25rem;min-height:2.5rem}@media (max-height: 450px){.front-layer .server-listing .button-container{margin-top:0.125rem;min-height:2rem}}@media (max-width: 450px){.front-layer .server-listing .button-container .btn{letter-spacing:0}}.front-layer .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}.modal-container{position:absolute;top:0;width:100vw;height:100vh;background-color:#000000AA;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease}.modal-container.hidden{opacity:0}.modal-container .modal{background-color:#212121;margin:auto;padding:1rem;border-style:none;border-radius:8px;-webkit-box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22);box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)}.modal-container .modal-title{max-width:85vw;margin:1rem;text-align:center}.modal-container .modal-body{margin:0.25rem}.modal .modal-title{white-space:nowrap;overflow:hidden}.modal .modal-body{display:-ms-grid;display:grid;-ms-grid-columns:10em 1fr;grid-template-columns:10em 1fr;-ms-grid-rows:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-row-gap:0.5rem}.modal .modal-body.frst-warning{-ms-grid-rows:1fr 1rem 1fr 1fr;grid-template-rows:1fr 1rem 1fr 1fr}.modal .modal-body.scnd-warning{-ms-grid-rows:1fr 1fr 1rem 1fr;grid-template-rows:1fr 1fr 1rem 1fr}.modal .modal-body div{display:contents;font-size:1.25rem}.modal .modal-body div label{margin-right:2rem;-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1 / 2;line-height:1.25em}.modal .modal-body div input{-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2 / 3;border-color:none}.modal .modal-body div span{margin-top:-0.5rem;-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3;color:#ef5350;background-color:#212121;font-size:0.9rem;line-height:1.2rem;padding:0.25rem}.modal .modal-body div span.hidden{display:none}.modal .modal-body div button{-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3}
diff --git a/WebInterface/NodeJSServer/dist/style/play.css b/WebInterface/NodeJSServer/dist/style/play.css
new file mode 100644
index 0000000..adf2475
--- /dev/null
+++ b/WebInterface/NodeJSServer/dist/style/play.css
@@ -0,0 +1 @@
+html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.btn{border:none;border-radius:4px;padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;background-color:#546e7a;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);cursor:pointer;letter-spacing:0.25rem;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.btn:hover{background:#29434e radial-gradient(circle, transparent 1%, #29434e 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12);box-shadow:0 1px 3px rgba(0,0,0,0.12);-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.btn:disabled{color:#ffffff61;background:#546e7a61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.text-btn{padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;color:#fff;background-color:rgba(0,0,0,0);text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none;background-position:center;-webkit-transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, color 200ms ease, -webkit-box-shadow 100ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease;transition:background 800ms ease, box-shadow 100ms ease, color 200ms ease, -webkit-box-shadow 100ms ease}.text-btn:hover{background:#29434e61 radial-gradient(circle, transparent 1%, #29434e61 1%) center/15000%;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.text-btn:active{background-color:#819ca9;background-size:100%;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, -webkit-box-shadow 0s;transition:background 0s, box-shadow 0s;transition:background 0s, box-shadow 0s, -webkit-box-shadow 0s}.text-btn:disabled{background:rgba(0,0,0,0);color:#ffffff61;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease;transition:background 200ms ease, box-shadow 200ms ease, color 200ms ease, -webkit-box-shadow 200ms ease}.backdrop{background-color:#546e7a;color:#fff;font-size:1rem}.backdrop .header-bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-height: 550px){.backdrop .header-bar{margin-top:0.125rem}}.backdrop .header-bar .menu-icon{background-image:url("../ressources/menu.png");background-position:center;background-repeat:no-repeat;width:36px;height:36px;padding:4px;margin:1rem;display:inline-block;border:none;border-radius:32px;-webkit-transition:background-color 100ms ease;transition:background-color 100ms ease}@media (max-height: 550px){.backdrop .header-bar .menu-icon{padding:0;margin:0.125rem}}.backdrop .header-bar .menu-icon:hover{background-color:#29434e}.backdrop .header-bar .menu-icon.open{background-image:url("../ressources/menu_close.png")}.backdrop .header-bar .header{margin:0;padding:16px;text-align:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}@media (max-height: 550px){.backdrop .header-bar .header{padding:0}}.backdrop .menu-actions{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;transition:max-height 200ms ease, color 200ms ease, background-color 100ms ease;position:relative;max-height:16rem;margin:0 1rem}.backdrop .menu-actions .menu-option{color:#fff;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;font-size:1.5rem;width:100%;text-align:center;padding:1rem;border:none;border-radius:8px;cursor:pointer}.backdrop .menu-actions .menu-option:hover{background-color:#3e5864}.backdrop .menu-actions .menu-option.active{background-color:#29434e}.backdrop .menu-actions.hidden{max-height:0;color:rgba(0,0,0,0)}.backdrop .menu-actions.hidden .menu-option{color:rgba(0,0,0,0);background-color:rgba(0,0,0,0) !important}.front-layer{position:relative;border:none;border-radius:16px 16px 0 0;min-height:0;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;margin-top:8px;-webkit-animation-name:start;animation-name:start;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;color:black;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@-webkit-keyframes start{from{top:100vh}to{top:0}}@keyframes start{from{top:100vh}to{top:0}}.front-layer .banner{background-color:white;border:none;border-radius:16px 16px 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;margin-bottom:1rem;padding-top:1rem;max-height:10rem;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-transform-origin:top;transform-origin:top;-webkit-transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-start, -webkit-transform 200ms ease;min-height:3.5rem;justify-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media (max-height: 550px){.front-layer .banner{position:absolute;width:100%;-webkit-box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}}.front-layer .banner.hidden{-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;max-height:0;-webkit-transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;transition:max-height 200ms ease, transform 200ms ease, visibility 200ms step-end, -webkit-transform 200ms ease;min-height:0;margin-bottom:0}.front-layer .banner .notification-badge{height:1rem;min-width:1rem;font-weight:bold;color:#fff;font-size:1rem;padding:0.5rem;margin:0.5rem 0 0.5rem 1rem;text-align:center;line-height:1rem;background-color:#546e7a;border:none;border-radius:50%}.front-layer .banner .notification-badge.hidden{display:none}.front-layer .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:100;-ms-flex-positive:100;flex-grow:100}.front-layer .banner .btn-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.front-layer .banner .btn-container .banner-button{color:#29434e;padding:8px 16px;margin:0;margin-right:1rem;letter-spacing:0.125rem}.front-layer .banner hr{width:100%}@media (max-height: 550px){.front-layer .banner hr{margin-bottom:0}}.front-layer .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}.modal-container{position:absolute;top:0;width:100vw;height:100vh;background-color:#000000AA;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease}.modal-container.hidden{opacity:0}.modal-container .modal{background-color:#212121;margin:auto;padding:1rem;border-style:none;border-radius:8px;-webkit-box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22);box-shadow:0 19px 38px rgba(0,0,0,0.3),0 15px 12px rgba(0,0,0,0.22)}.modal-container .modal-title{max-width:85vw;margin:1rem;text-align:center}.modal-container .modal-body{margin:0.25rem}.modal .modal-title{white-space:nowrap;overflow:hidden}.modal .modal-body{display:-ms-grid;display:grid;-ms-grid-columns:10em 1fr;grid-template-columns:10em 1fr;-ms-grid-rows:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-row-gap:0.5rem}.modal .modal-body.frst-warning{-ms-grid-rows:1fr 1rem 1fr 1fr;grid-template-rows:1fr 1rem 1fr 1fr}.modal .modal-body.scnd-warning{-ms-grid-rows:1fr 1fr 1rem 1fr;grid-template-rows:1fr 1fr 1rem 1fr}.modal .modal-body div{display:contents;font-size:1.25rem}.modal .modal-body div label{margin-right:2rem;-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1 / 2;line-height:1.25em}.modal .modal-body div input{-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2 / 3;border-color:none}.modal .modal-body div span{margin-top:-0.5rem;-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3;color:#ef5350;background-color:#212121;font-size:0.9rem;line-height:1.2rem;padding:0.25rem}.modal .modal-body div span.hidden{display:none}.modal .modal-body div button{-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3}remove_if_redirected{width:100vw;height:100vh;text-align:center}
diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js
index 35ea63e..702ed19 100644
--- a/WebInterface/NodeJSServer/src/index.js
+++ b/WebInterface/NodeJSServer/src/index.js
@@ -1,7 +1,6 @@
 import Backdrop from './modules/ui/backdrop.js';
 import BannerController from './modules/ui/notification-banner.js';
 import ServerClient from './modules/server-client.js';
-import LoginModal from './modules/ui/login-modal.js'; // TODO: JUST DEBUG
 
 let backdrop = new Backdrop('menu', 'front-layer', 'show-menu');
 backdrop.register();
@@ -10,10 +9,10 @@ let notifications = new BannerController('notifications',
     'banner-info', 'dismiss-banner', 'notification-amount');
 notifications.register();
 
-let client = new ServerClient('http://89.183.8.51:5000/chatHub', 'server-list', true);
+let client = new ServerClient('http://89.183.101.117:5000/chatHub',
+    'server-list', notifications, [backdrop, notifications], true);
 document.getElementById('refresh-button')
-    .addEventListener('click', client.loadServers.bind(client));
-
-new LoginModal('The Crew', client);
+    .addEventListener('click',
+        client.loadServers.bind(client));
 
 window.client = client; // TODO: REMOVE, JUST FOR DEBUGGING
diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js
index ea37e1e..1bc9822 100644
--- a/WebInterface/NodeJSServer/src/modules/server-client.js
+++ b/WebInterface/NodeJSServer/src/modules/server-client.js
@@ -10,9 +10,12 @@ export default class ServerClient {
    * @param {string} url URL of server running signalR
    * @param {string} serverListingId HTML ID of server-listing element,
    *    to populate with available games
+   * @param {BannerController} notifications Notification Manager
+   * @param {array} ui UI Elements to reload on login
    * @param {boolean} [debug=false] Enable debug output?
    */
-  constructor(url, serverListingId, debug = false) {
+  constructor(url, serverListingId, notifications, ui, debug = false) {
+    this.ui = ui;
     const connectionBuilder = new signalR.HubConnectionBuilder()
         .withUrl(url);
 
@@ -30,7 +33,7 @@ export default class ServerClient {
     // Initialize refreshing (blocks new refreshes if true)
     this.refreshing = false;
 
-    this.serverListing = new ServerListing(serverListingId);
+    this.serverListing = new ServerListing(serverListingId, notifications);
 
     this.messageHandling();
   }
@@ -44,7 +47,7 @@ export default class ServerClient {
     this.connection.on('ListGroups', (groups) => {
       // Populate server listing
       this.serverListing.flushElements();
-      this.serverListing.addElements(groups);
+      this.serverListing.addElements(groups, this, this.ui);
       this.connection.off('ListGroups');
 
       this.refreshing = false;
@@ -76,7 +79,7 @@ export default class ServerClient {
    */
   sendLogin(group, password, username, callback) {
     this.connection.on('LoginResponse', (result) => {
-      callback(result);
+      callback(result, this);
       this.connection.off('LoginResponse');
     });
     this.connection.invoke('Login', group, username, password);
@@ -99,6 +102,7 @@ export default class ServerClient {
 /**
  * Callback to call with response to login request
  * @callback ServerClient~loginCallback
- * @param {number} result 0: Success, 1: PasswordError, 2:UsernameTaken
- *    , 3:Unknown Error
+ * @param {number} result 0: Success, 1: PasswordError, 2:UsernameTaken,
+ *  3:Unknown Error
+ * @param {ServerClient} client ServerClient object, that handled the login
  */
diff --git a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js
index 1a24bd2..f89a3c9 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js
@@ -11,6 +11,7 @@ export default class Backdrop {
    * @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);
@@ -25,6 +26,16 @@ export default class Backdrop {
   }
 
   /**
+   * 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() {
diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
index 4c7b872..d2a88c4 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js
@@ -11,11 +11,16 @@ export default class LoginModal extends Modal {
    *  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) {
+  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');
@@ -23,15 +28,20 @@ export default class LoginModal extends Modal {
 
     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';
@@ -39,17 +49,22 @@ export default class LoginModal extends Modal {
     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);
@@ -60,6 +75,9 @@ export default class LoginModal extends Modal {
     this.passwordInput = passwordInput;
     this.loginButton = sendButton;
 
+    this.passwordInvalid = passwordInvalid;
+    this.nameInvalid = nameInvalid;
+
     this.registerLoginBtn();
   }
 
@@ -67,18 +85,87 @@ export default class LoginModal extends Modal {
    * Registers event to send login, on button press
    */
   registerLoginBtn() {
-    let eventListener = () => {
+    let eventListener;
+    let loginCallBack = (result, client) => {
+      console.log(result);
+      if (result == 0) {
+        this.redirectToPlay(client);
+        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);
       let userName = this.nameInput.value;
       this.passwordInput.value.getHash()
           .then((result) => {
-            this.serverClient.sendLogin(this.serverName, result, userName);
-
-            // TODO: Wait for response, if error keep window intact,
-            // and reenable event listener
-            this.close();
+            this.serverClient.sendLogin(this.serverName, result,
+                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 {ServerClient} serverClient Main server client
+   */
+  redirectToPlay(serverClient) {
+    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>/, '');
+        htmlString = htmlString.replace(
+            /<remove_if_redirected>.*?<\/remove_if_redirected>/g, '');
+        document.open();
+        document.write(htmlString);
+        document.close();
+
+        for (let ui of this.pageUI) {
+          ui.refresh();
+        }
+
+        // import()
+      });
+    });
+  }
 }
diff --git a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
index 12461fa..7e6b8cb 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
@@ -10,6 +10,7 @@ export default class BannerController {
    * @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);
@@ -30,6 +31,21 @@ export default class BannerController {
   }
 
   /**
+   * 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
diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
index 0069ac6..ace8a0e 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
@@ -1,3 +1,5 @@
+import LoginModal from './login-modal.js';
+
 /**
  * Class for handling the server list
  */
@@ -5,9 +7,11 @@ export default class ServerListing {
   /**
    * Creates reference to container
    * @param {string} serverListId ID of the server list div
+   * @param {BannerController} notifications Notification Manager
    */
-  constructor(serverListId) {
+  constructor(serverListId, notifications) {
     this.serverListing = document.getElementById(serverListId);
+    this.notifications = notifications;
   }
 
   /**
@@ -20,8 +24,10 @@ export default class ServerListing {
   /**
    * 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) {
+  addElements(array, serverClient, ui) {
     for (let server of array) {
       const name = server['name'];
       const playerList = server['users'];
@@ -46,13 +52,16 @@ export default class ServerListing {
       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)
+      serverDiv.appendChild(rightAlignDiv);
       this.serverListing.appendChild(serverDiv);
     }
   }
diff --git a/WebInterface/NodeJSServer/src/play-module.js b/WebInterface/NodeJSServer/src/play-module.js
new file mode 100644
index 0000000..3781329
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/play-module.js
@@ -0,0 +1,15 @@
+
+
+/**
+ * Handles ingame networking;
+ */
+export default class GameClient {
+  /**
+   * Defines basic attributes
+   * @param {HubConnection} connection Already established connection to the
+   *  server
+   */
+  constructor(connection) {
+    this.connection = connection;
+  }
+}
diff --git a/WebInterface/NodeJSServer/src/play.js b/WebInterface/NodeJSServer/src/play.js
index e69de29..1e13355 100644
--- a/WebInterface/NodeJSServer/src/play.js
+++ b/WebInterface/NodeJSServer/src/play.js
@@ -0,0 +1,11 @@
+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();
diff --git a/WebInterface/NodeJSServer/src/style/partials/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
index 2c954fa..4683325 100644
--- a/WebInterface/NodeJSServer/src/style/partials/_colors.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
@@ -4,6 +4,7 @@ $primary-light: #484848;
 $primary-dark: #000000;
 $primary-text: #ffffff;
 $primary-text-disabled: #ffffff61;
+$primary-warning-text: #ef5350;
 $secondary: #546e7a;
 $secondary-disabled: #546e7a61;
 $secondary-half-dark: #3e5864;
diff --git a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
index eed978f..71adf61 100644
--- a/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/modal/_login.scss
@@ -10,20 +10,41 @@
     grid-template-rows: 1fr 1fr 1fr;
     grid-row-gap: 0.5rem;
 
+    &.frst-warning {
+      grid-template-rows: 1fr 1rem 1fr 1fr;
+    }
+
+    &.scnd-warning {
+      grid-template-rows: 1fr 1fr 1rem 1fr;
+    }
+
     div {
       display: contents;
       font-size: 1.25rem;
 
       label {
-        flex-basis: 30%;
         margin-right: 2rem;
-
-        grid-column: 1 2;
+        grid-column: 1 / 2;
+        line-height: 1.25em;
       }
 
       input {
-        flex-basis: calc(70% - 2rem);
-        grid-column: 2 3;
+        grid-column: 2 / 3;
+        border-color: none;
+      }
+
+      span {
+        margin-top: -0.5rem;
+        grid-column: 1 / 3;
+        color: $primary-warning-text;
+        background-color: $primary;
+        font-size: 0.9rem;
+        line-height: 1.2rem;
+        padding: 0.25rem;
+
+        &.hidden {
+          display: none;
+        }
       }
 
       button {
diff --git a/WebInterface/NodeJSServer/src/style/play.scss b/WebInterface/NodeJSServer/src/style/play.scss
new file mode 100644
index 0000000..bfeec6d
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/style/play.scss
@@ -0,0 +1,15 @@
+@import 'partials/base';
+@import 'partials/btn';
+@import 'partials/backdrop/base';
+@import 'partials/backdrop/menu';
+@import 'partials/front-layer/base';
+@import 'partials/front-layer/notifications';
+@import 'partials/front-layer/copyright';
+@import 'partials/modal/base';
+@import 'partials/modal/login';
+
+remove_if_redirected {
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+}
diff --git a/WebInterface/NodeJSServer/webpack.config.js b/WebInterface/NodeJSServer/webpack.config.js
index f3635f7..6bfeb79 100644
--- a/WebInterface/NodeJSServer/webpack.config.js
+++ b/WebInterface/NodeJSServer/webpack.config.js
@@ -6,10 +6,11 @@ module.exports = {
   entry: {
     index: './src/index.js',
     about: './src/about.js',
-    play: './src/play.js'
+    play: './src/play.js',
+    playModule: './src/play-module.js',
   },
   output: {
     filename: '[name].js',
-    path: path.resolve(__dirname, './dist/script')
-  }
+    path: path.resolve(__dirname, './dist/script'),
+  },
 };
author	TrueKuehli <rctcoaster2000@hotmail.de>	2018-10-01 18:10:37 +0200
committer	TrueKuehli <rctcoaster2000@hotmail.de>	2018-10-01 18:10:37 +0200
commit	6f162dcf90a6aa671eb351dc25cb01e2d9cbd3cb (patch)
tree	ce9121463419cb27e6bd4e0c4215c037550f8ff7 /WebInterface
parent	e463bf3eb7115f1f141da2162b0624f90472ff9c (diff)