summaryrefslogtreecommitdiff
path: root/WebInterface/dist
diff options
context:
space:
mode:
Diffstat (limited to 'WebInterface/dist')
-rw-r--r--WebInterface/dist/404.html33
-rw-r--r--WebInterface/dist/Web.config15
-rw-r--r--WebInterface/dist/about/index.html50
-rw-r--r--WebInterface/dist/index.html60
-rw-r--r--WebInterface/dist/play/index.html57
-rw-r--r--WebInterface/dist/ressources/DSALogo.pngbin0 -> 35184 bytes
-rw-r--r--WebInterface/dist/ressources/menu.pngbin0 -> 99 bytes
-rw-r--r--WebInterface/dist/ressources/menu_close.pngbin0 -> 218 bytes
-rw-r--r--WebInterface/dist/script/about.js1
-rw-r--r--WebInterface/dist/script/index.js16
-rw-r--r--WebInterface/dist/script/play.js16
-rw-r--r--WebInterface/dist/script/playModule.js1
-rw-r--r--WebInterface/dist/style/about.css1
-rw-r--r--WebInterface/dist/style/index.css1
-rw-r--r--WebInterface/dist/style/play.css1
15 files changed, 252 insertions, 0 deletions
diff --git a/WebInterface/dist/404.html b/WebInterface/dist/404.html
new file mode 100644
index 0000000..829eda8
--- /dev/null
+++ b/WebInterface/dist/404.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Page Not Found</title>
+
+ <style media="screen">
+ body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+ #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+ #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+ #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+ #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+ #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+ #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+ #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+ #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+ @media (max-width: 600px) {
+ body, #message { margin-top: 0; background: white; box-shadow: none; }
+ body { border-top: 16px solid #ffa100; }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="message">
+ <h2>404</h2>
+ <h1>Page Not Found</h1>
+ <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+ <h3>Why am I seeing this?</h3>
+ <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+ </div>
+ </body>
+</html>
diff --git a/WebInterface/dist/Web.config b/WebInterface/dist/Web.config
new file mode 100644
index 0000000..741b7d8
--- /dev/null
+++ b/WebInterface/dist/Web.config
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<configuration>
+ <!--
+ Eine Beschreibung der Änderungen von 'web.config' finden Sie unter 'http://go.microsoft.com/fwlink/?LinkId=235367'.
+
+ Die folgenden Attribute können für die <httpRuntime>-Kennung festgelegt werden.
+ <system.Web>
+ <httpRuntime targetFramework="4.5" />
+ </system.Web>
+ -->
+ <system.web>
+ <compilation debug="false" targetFramework="4.5"/>
+ <pages controlRenderingCompatibilityVersion="4.0"/>
+ </system.web>
+</configuration> \ No newline at end of file
diff --git a/WebInterface/dist/about/index.html b/WebInterface/dist/about/index.html
new file mode 100644
index 0000000..d7294b7
--- /dev/null
+++ b/WebInterface/dist/about/index.html
@@ -0,0 +1,50 @@
+<!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/about.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 active" id="about-tab" href="." target="_blank">About</a>
+ </div>
+ </div>
+ <div class="front-layer" id="front-layer">
+ <div class="about-container">
+ <h1>Über uns</h1>
+
+ <div class="about">
+ <p>Wir sind Dennis Kobert und Timon Scholz, zwei ehemalige Josephiner, die jetzt Informatik studieren. Unter anderem umfassen unsere Hobbies aber auch Pen and Paper Rollenspiele. Da es nicht immer möglich ist, sich zu in Person zu treffen, muss man manchmal auch auf online Alternativen ausweichen; die vorhandenen Alternativen haben uns aber aus verschiedenen Gründen nicht zugesagt. Zum einen wäre da die Menge der Werte, die in einem Heldendokument verzeichnet sind. Es wäre also praktisch, die Werte maschinell einzulesen, statt sie per Hand für jeden Mitspieler eintragen zu müssen. Weitere Mängel sahen wir in der Handhabung vieler Alternativen; diese waren spezifisch für DnD designed, und Alternativen wie DSA wirken eher wie ein Nachsatz. Zur Lösung dieser Probleme entwickelte Dennis Kobert zunächst eine Implementation als Discord-Bot - ein automatisierter Nutzer für das populäre Instant-Messenger- / Voice-Chat-Programm Discord. Dies erlaubte bereits, Charakterinformationen aus den Dateien der Helden-Software zu extrahieren. Mit Hilfe seines Cousins erreichte Dennis Kobert letztendlich eine zum Spielen bereite Version. Da aber die meisten Nutzer lieber eine grafische Oberfläche verwenden, statt ein glorifiziertes „Multiplayer-Command-Line-Interface”, entwickelten Dennis Kobert und Timon Scholz ein Web-Modul, über welches Befehle aus dem Browser ausgeführt werden können, mit dem Ziel viele der häufig verwendeten Funktionen grafisch abrufbar zu machen, und später auch für ein Grafik- und Soundinterface zu sorgen.</p>
+ </div>
+ <div class="contact">
+ <h2>Kontakt</h2>
+ <span>Email1:</span><a>[hier ganz tolle Emails einfügen!]</a>
+ <span>Email2:</span><a>[hier eine weitere toll Email einfügen!]</a>
+ <span>GitHub:</span><a>[hier den GitHub Link nochmal hinpfeffern]</a>
+ <span>Twitter:</span><a>[hier meinen Twitter verlinken, ich brauch mehr Follower!]</a>
+ </div>
+ </div>
+ <div class="copyright-container">
+ <p>Front-End © 2018 Timon Scholz</p>
+ <p>Back-End © 2018 Dennis Kobert</p>
+ </div>
+ </div>
+ <script src="../script/about.js"></script>
+ </body>
+</html>
diff --git a/WebInterface/dist/index.html b/WebInterface/dist/index.html
new file mode 100644
index 0000000..7ea33b7
--- /dev/null
+++ b/WebInterface/dist/index.html
@@ -0,0 +1,60 @@
+<!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/index.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 active" 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>
+ <div class="server-listing">
+ <h1>Aktive Spiele</h1>
+ <hr>
+ <div class="server-entries" id="server-list">
+
+ </div>
+ <div class="button-container">
+ <button id="new-game-button" class="btn">
+ Spiel beginnen
+ </button>
+ <button id="refresh-button" class="btn text-btn refresh-btn">
+ Aktualisieren
+ </button>
+ </div>
+
+ </div>
+
+ <div class="copyright-container">
+ <span>© 2018 Dennis Kobert & Timon Scholz</span>
+ </div>
+ </div>
+ <script src="script/index.js"></script>
+ </body>
+</html>
diff --git a/WebInterface/dist/play/index.html b/WebInterface/dist/play/index.html
new file mode 100644
index 0000000..e03401a
--- /dev/null
+++ b/WebInterface/dist/play/index.html
@@ -0,0 +1,57 @@
+<!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="game-window">
+ <div class="chat" id="chat">
+ <div class="messages" id="message-list">
+
+ </div>
+ <div class="input-message">
+ <input type="text" id="input-message">
+ <button class="btn" id="send-message">Senden</button>
+ </div>
+ </div>
+ </div>
+ <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/dist/ressources/DSALogo.png b/WebInterface/dist/ressources/DSALogo.png
new file mode 100644
index 0000000..98f9982
--- /dev/null
+++ b/WebInterface/dist/ressources/DSALogo.png
Binary files differ
diff --git a/WebInterface/dist/ressources/menu.png b/WebInterface/dist/ressources/menu.png
new file mode 100644
index 0000000..7f40f4b
--- /dev/null
+++ b/WebInterface/dist/ressources/menu.png
Binary files differ
diff --git a/WebInterface/dist/ressources/menu_close.png b/WebInterface/dist/ressources/menu_close.png
new file mode 100644
index 0000000..b045f43
--- /dev/null
+++ b/WebInterface/dist/ressources/menu_close.png
Binary files differ
diff --git a/WebInterface/dist/script/about.js b/WebInterface/dist/script/about.js
new file mode 100644
index 0000000..dea88f8
--- /dev/null
+++ b/WebInterface/dist/script/about.js
@@ -0,0 +1 @@
+!function(t){var e={};function n(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},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 i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)n.d(i,s,function(e){return t[e]}.bind(null,s));return i},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="../script/",n(n.s=0)}([function(t,e,n){"use strict";n.r(e);class i{constructor(t,e){this.object=t,this.publicMethods=e}execute(t,...e){return this.publicMethods.includes(t)?"function"!=typeof this.object[t]?2:(this.object[t](...e),0):1}}class s{constructor(t,e,n){this.ids={backdropMenu:t,frontLayer:e,menuButton:n}}initialize(){this.open=!1,this.backdrop=document.getElementById(this.ids.backdropMenu),this.frontLayer=document.getElementById(this.ids.frontLayer),this.menuButton=document.getElementById(this.ids.menuButton),this.registerEvents()}registerEvents(){this.registerButtonEvent(),this.registerFrontLayerEvent()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.open=!this.open,this.open?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.open?this.menuButton.classList.add("open"):this.menuButton.classList.remove("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.open&&(this.open=!1,this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open"))})}}class r{constructor(){this.backdrop=new s("menu","front-layer","show-menu"),this.backdrop.initialize()}}class o{constructor(t,e,n){this.name=t,this.content=e,this.html=n}}class a{constructor(t,e,n,i,s){t.addObject(this,"notifications",["show","hide"]),this.iface=t,this.ids={bannerId:e,textP:n,dismissBtn:i,badge:s}}initialize(){this.banner=document.getElementById(this.ids.bannerId),this.bannerText=document.getElementById(this.ids.textP),this.dismissBtn=document.getElementById(this.ids.dismissBtn),this.notificationBadge=document.getElementById(this.ids.badge),this.bannerMsgs=[],this.banner.classList.add("hidden"),this.registerEvents()}registerEvents(){this.registerDismissEvent()}registerDismissEvent(){this.dismissBtn.addEventListener("click",()=>{this.dismissCurrent()})}show(t,e){let n=new o(t,e,!1);this.bannerMsgs.push(n),this.update()}hide(t){this.bannerMsgs=t?this.bannerMsgs.filter(e=>e.name!=t):[],this.update()}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.content,i=t.html;this.banner.classList.remove("hidden"),i?this.bannerText.innerHTML=n:this.bannerText.innerText=n,this.current=e,this.updateNotificationBadge()}updateNotificationBadge(){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())}}class c{constructor(t,e,n){this.ids={serverListId:e,refreshBtnId:n},t.addObject(this,"serverListing",["flushElements","addElements"]),this.iface=t}initialize(){this.serverListing=document.getElementById(this.ids.serverListId),this.refreshBtn=document.getElementById(this.ids.refreshBtnId),this.registerEvents()}registerEvents(){this.registerRefreshEvent()}registerRefreshEvent(){this.refreshBtn.addEventListener("click",()=>{this.iface.callMethod("listServers","listServers")})}flushElements(){this.serverListing.innerHTML=""}addElements(t){for(let e of t){const t=e.name,n=e.userCount;let i=document.createElement("div"),s=document.createElement("span"),r=document.createElement("div"),o=document.createElement("div"),a=document.createElement("span"),c=document.createElement("span"),h=document.createElement("button");i.className="server",s.className="server-name",r.className="right-aligned-items",o.className="player-count-dot",a.className="player-count",c.className="player-count-static",h.className="btn join-btn",h.id="join",s.textContent=t,a.textContent=n,c.textContent="Spieler online",h.textContent="Beitreten",h.addEventListener("click",()=>{this.iface.callMethod("login","showLogin",t)}),r.appendChild(o),r.appendChild(a),r.appendChild(c),r.appendChild(h),i.appendChild(s),i.appendChild(r),this.serverListing.appendChild(i)}}}class h{constructor(t){this.backdrop=new s("menu","front-layer","show-menu"),this.bannerController=new a(t,"notifications","banner-info","dismiss-banner","notification-amount"),this.serverListing=new c(t,"server-list","refresh-button"),this.backdrop.initialize(),this.bannerController.initialize(),this.serverListing.initialize()}}class d{constructor(){this.backdrop=new s("menu","front-layer","show-menu"),this.bannerController=new a(iface,"notifications","banner-info","dismiss-banner","notification-amount"),this.backdrop.initialize(),this.bannerController.initialize()}}new class{constructor(t){this.currentUI=null,t.addObject(this,"uiMananger",["initAbout","initLogin","initPlay"]),this.iface=t}initAbout(){this.clearComponents(),this.about=new r(this.iface),this.currentUI="about"}initLogin(){this.clearComponents(),this.login=new h(this.iface),this.currentUI="login"}initPlay(){this.clearComponents(),this.play=new d(this.iface),this.currentUI="play"}clearComponents(){switch(this.currentUI){case null:return;case"about":this.about=null;break;case"login":this.login=null;break;case"play":this.play=null}this.currentUI=null}}(new class{constructor(){this.objects={}}addObject(t,e,n){this.objects[e]||(this.objects[e]=[]),this.objects[e].push(new i(t,n))}removeObject(t,e){this.objects[e]&&(objects[e]=objects[e].filter(e=>e.object!=t),0==objects[e].length&&(objects[e]=void 0))}callMethod(t,e,...n){if(!this.objects[t])return 1;let i=0;for(let s of this.objects[t])0!=s.execute(e,...n)&&(i=2);return i}}).initAbout()}]); \ No newline at end of file
diff --git a/WebInterface/dist/script/index.js b/WebInterface/dist/script/index.js
new file mode 100644
index 0000000..70c1d0a
--- /dev/null
+++ b/WebInterface/dist/script/index.js
@@ -0,0 +1,16 @@
+!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="./script/",n(n.s=1)}([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);class o{constructor(t,e){this.object=t,this.publicMethods=e}execute(t,...e){return this.publicMethods.includes(t)?"function"!=typeof this.object[t]?2:(this.object[t](...e),0):1}}class r{constructor(t,e,n){this.ids={backdropMenu:t,frontLayer:e,menuButton:n}}initialize(){this.open=!1,this.backdrop=document.getElementById(this.ids.backdropMenu),this.frontLayer=document.getElementById(this.ids.frontLayer),this.menuButton=document.getElementById(this.ids.menuButton),this.registerEvents()}registerEvents(){this.registerButtonEvent(),this.registerFrontLayerEvent()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.open=!this.open,this.open?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.open?this.menuButton.classList.add("open"):this.menuButton.classList.remove("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.open&&(this.open=!1,this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open"))})}}class s{constructor(){this.backdrop=new r("menu","front-layer","show-menu"),this.backdrop.initialize()}}class i{constructor(t,e,n){this.name=t,this.content=e,this.html=n}}class a{constructor(t,e,n,o,r){t.addObject(this,"notifications",["show","hide"]),this.iface=t,this.ids={bannerId:e,textP:n,dismissBtn:o,badge:r}}initialize(){this.banner=document.getElementById(this.ids.bannerId),this.bannerText=document.getElementById(this.ids.textP),this.dismissBtn=document.getElementById(this.ids.dismissBtn),this.notificationBadge=document.getElementById(this.ids.badge),this.bannerMsgs=[],this.banner.classList.add("hidden"),this.registerEvents()}registerEvents(){this.registerDismissEvent()}registerDismissEvent(){this.dismissBtn.addEventListener("click",()=>{this.dismissCurrent()})}show(t,e){let n=new i(t,e,!1);this.bannerMsgs.push(n),this.update()}hide(t){this.bannerMsgs=t?this.bannerMsgs.filter(e=>e.name!=t):[],this.update()}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.content,o=t.html;this.banner.classList.remove("hidden"),o?this.bannerText.innerHTML=n:this.bannerText.innerText=n,this.current=e,this.updateNotificationBadge()}updateNotificationBadge(){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())}}class c{constructor(t,e,n){this.ids={serverListId:e,refreshBtnId:n},t.addObject(this,"serverListing",["flushElements","addElements"]),this.iface=t}initialize(){this.serverListing=document.getElementById(this.ids.serverListId),this.refreshBtn=document.getElementById(this.ids.refreshBtnId),this.registerEvents()}registerEvents(){this.registerRefreshEvent()}registerRefreshEvent(){this.refreshBtn.addEventListener("click",()=>{this.iface.callMethod("listServers","listServers")})}flushElements(){this.serverListing.innerHTML=""}addElements(t){for(let e of t){const t=e.name,n=e.userCount;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",l.addEventListener("click",()=>{this.iface.callMethod("login","showLogin",t)}),s.appendChild(i),s.appendChild(a),s.appendChild(c),s.appendChild(l),o.appendChild(r),o.appendChild(s),this.serverListing.appendChild(o)}}}class l{constructor(t){this.backdrop=new r("menu","front-layer","show-menu"),this.bannerController=new a(t,"notifications","banner-info","dismiss-banner","notification-amount"),this.serverListing=new c(t,"server-list","refresh-button"),this.backdrop.initialize(),this.bannerController.initialize(),this.serverListing.initialize()}}class h{constructor(){this.backdrop=new r("menu","front-layer","show-menu"),this.bannerController=new a(iface,"notifications","banner-info","dismiss-banner","notification-amount"),this.backdrop.initialize(),this.bannerController.initialize()}}
+/*! *****************************************************************************
+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 u=function(t,e){return(u=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 d(t,e){function n(){this.constructor=t}u(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var p=function(){return(p=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 g(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 f(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 m,v=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 d(e,t),e}(Error),b=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 d(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"}(m||(m={}));var y,w=function(){return function(t,e,n){this.statusCode=t,this.statusText=e,this.content=n}}(),C=function(t){function e(e){var n=t.call(this)||this;return n.logger=e,n}return d(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 w(r.status,r.statusText,r.response||r.responseText)):o(new v(r.statusText,r.status))},r.onerror=function(){e.logger.log(m.Warning,"Error from HTTP request. "+r.status+": "+r.statusText),o(new v(r.statusText,r.status))},r.ontimeout=function(){e.logger.log(m.Warning,"Timeout from HTTP request."),o(new b)},r.send(t.content||"")})},e}(function(){function t(){}return t.prototype.get=function(t,e){return this.send(p({},e,{method:"GET",url:t}))},t.prototype.post=function(t,e){return this.send(p({},e,{method:"POST",url:t}))},t.prototype.delete=function(t,e){return this.send(p({},e,{method:"DELETE",url:t}))},t}()),E=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}(),S=function(){function t(){}return t.prototype.writeHandshakeRequest=function(t){return E.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(E.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(E.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=E.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"}(y||(y={}));var k=function(){function t(){}return t.prototype.log=function(t,e){},t.instance=new t,t}(),I=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 T(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 L(t,e,n,o,r,s,i){return g(this,void 0,void 0,function(){var a,c,l,h;return f(this,function(u){switch(u.label){case 0:return[4,r()];case 1:return(c=u.sent())&&((h={}).Authorization="Bearer "+c,a=h),t.log(m.Trace,"("+e+" transport) sending data. "+T(s,i)+"."),[4,n.post(o,{content:s,headers:a})];case 2:return l=u.sent(),t.log(m.Trace,"("+e+" transport) request complete. Response status: "+l.statusCode+"."),[2]}})})}var P,M,x=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 B(this,t)},t}(),B=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}(),j=function(){function t(t){this.minimumLogLevel=t}return t.prototype.log=function(t,e){if(t>=this.minimumLogLevel)switch(t){case m.Critical:case m.Error:console.error(m[t]+": "+e);break;case m.Warning:console.warn(m[t]+": "+e);break;case m.Information:console.info(m[t]+": "+e);break;default:console.log(m[t]+": "+e)}},t}(),R=3e4,N=function(){function t(t,e,n){var o=this;I.isRequired(t,"connection"),I.isRequired(e,"logger"),I.isRequired(n,"protocol"),this.serverTimeoutInMilliseconds=R,this.logger=e,this.protocol=n,this.connection=t,this.handshakeProtocol=new S,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 g(this,void 0,void 0,function(){var t;return f(this,function(e){switch(e.label){case 0:return t={protocol:this.protocol.name,version:this.protocol.version},this.logger.log(m.Debug,"Starting HubConnection."),this.receivedHandshakeResponse=!1,[4,this.connection.start(this.protocol.transferFormat)];case 1:return e.sent(),this.logger.log(m.Debug,"Sending handshake request."),[4,this.connection.send(this.handshakeProtocol.writeHandshakeRequest(t))];case 2:return e.sent(),this.logger.log(m.Information,"Using HubProtocol '"+this.protocol.name+"'."),this.cleanupTimeout(),this.configureTimeout(),[2]}})})},t.prototype.stop=function(){return this.logger.log(m.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 x(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===y.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===y.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 y.Invocation:this.invokeClientMethod(o);break;case y.StreamItem:case y.Completion:var r=this.callbacks[o.invocationId];null!=r&&(o.type===y.Completion&&delete this.callbacks[o.invocationId],r(o));break;case y.Ping:break;case y.Close:this.logger.log(m.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(m.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(m.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(m.Error,r),this.connection.stop(new Error(r))}else this.logger.log(m.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(m.Error,o),this.connection.stop(new Error(o))}}else this.logger.log(m.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:y.Invocation};var o=this.id;return this.id++,{arguments:e,invocationId:o.toString(),target:t,type:y.Invocation}},t.prototype.createStreamInvocation=function(t,e){var n=this.id;return this.id++,{arguments:e,invocationId:n.toString(),target:t,type:y.StreamInvocation}},t.prototype.createCancelInvocation=function(t){return{invocationId:t,type:y.CancelInvocation}},t}();!function(t){t[t.None=0]="None",t[t.WebSockets=1]="WebSockets",t[t.ServerSentEvents=2]="ServerSentEvents",t[t.LongPolling=4]="LongPolling"}(P||(P={})),function(t){t[t.Text=1]="Text",t[t.Binary=2]="Binary"}(M||(M={}));var O=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}(),H=5e3,F=function(){function t(t,e,n,o,r){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.pollAbort=new O,this.logMessageContent=o,this.shutdownTimeout=r||H}return Object.defineProperty(t.prototype,"pollAborted",{get:function(){return this.pollAbort.aborted},enumerable:!0,configurable:!0}),t.prototype.connect=function(t,e){return g(this,void 0,void 0,function(){var n,o,r,s,i;return f(this,function(a){switch(a.label){case 0:if(I.isRequired(t,"url"),I.isRequired(e,"transferFormat"),I.isIn(e,M,"transferFormat"),this.url=t,this.logger.log(m.Trace,"(LongPolling transport) Connecting"),e===M.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===M.Binary&&(n.responseType="arraybuffer"),[4,this.accessTokenFactory()];case 1:return o=a.sent(),this.updateHeaderToken(n,o),s=t+"&_="+Date.now(),this.logger.log(m.Trace,"(LongPolling transport) polling: "+s),[4,this.httpClient.get(s,n)];case 2:return 200!==(i=a.sent()).statusCode?(this.logger.log(m.Error,"(LongPolling transport) Unexpected response code: "+i.statusCode),r=new v(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 g(this,void 0,void 0,function(){var o,r,s,i;return f(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(m.Trace,"(LongPolling transport) polling: "+r),[4,this.httpClient.get(r,e)];case 4:return 204===(s=a.sent()).statusCode?(this.logger.log(m.Information,"(LongPolling transport) Poll terminated by server"),this.running=!1):200!==s.statusCode?(this.logger.log(m.Error,"(LongPolling transport) Unexpected response code: "+s.statusCode),n=new v(s.statusText,s.statusCode),this.running=!1):s.content?(this.logger.log(m.Trace,"(LongPolling transport) data received. "+T(s.content,this.logMessageContent)),this.onreceive&&this.onreceive(s.content)):this.logger.log(m.Trace,"(LongPolling transport) Poll timed out, reissuing."),[3,6];case 5:return i=a.sent(),this.running?i instanceof b?this.logger.log(m.Trace,"(LongPolling transport) Poll timed out, reissuing."):(n=i,this.running=!1):this.logger.log(m.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(m.Trace,"(LongPolling transport) Firing onclose event. Error: "+(n||"<undefined>")),this.onclose(n)),this.logger.log(m.Trace,"(LongPolling transport) Transport finished."),[7];case 9:return[2]}})})},t.prototype.send=function(t){return g(this,void 0,void 0,function(){return f(this,function(e){return this.running?[2,L(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 g(this,void 0,void 0,function(){var t,e,n=this;return f(this,function(o){switch(o.label){case 0:return o.trys.push([0,,3,4]),this.running=!1,this.logger.log(m.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(m.Trace,"(LongPolling transport) DELETE request accepted."),[3,4];case 3:return this.stopped||(this.shutdownTimer=setTimeout(function(){n.logger.log(m.Warning,"(LongPolling transport) server did not terminate after DELETE request, canceling poll."),n.pollAbort.abort()},this.shutdownTimeout)),[7];case 4:return[2]}})})},t}(),q=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 g(this,void 0,void 0,function(){var n,o=this;return f(this,function(r){switch(r.label){case 0:if(I.isRequired(t,"url"),I.isRequired(e,"transferFormat"),I.isIn(e,M,"transferFormat"),"undefined"==typeof EventSource)throw new Error("'EventSource' is not supported in your environment.");return this.logger.log(m.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!==M.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(m.Trace,"(SSE transport) data received. "+T(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(m.Information,"SSE connected to "+o.url),o.eventSource=i,s=!0,n()}}catch(t){return Promise.reject(t)}})]}})})},t.prototype.send=function(t){return g(this,void 0,void 0,function(){return f(this,function(e){return this.eventSource?[2,L(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}(),U=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 g(this,void 0,void 0,function(){var n,o=this;return f(this,function(r){switch(r.label){case 0:if(I.isRequired(t,"url"),I.isRequired(e,"transferFormat"),I.isIn(e,M,"transferFormat"),"undefined"==typeof WebSocket)throw new Error("'WebSocket' is not supported in your environment.");return this.logger.log(m.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===M.Binary&&(s.binaryType="arraybuffer"),s.onopen=function(e){o.logger.log(m.Information,"WebSocket connected to "+t),o.webSocket=s,n()},s.onerror=function(t){r(t.error)},s.onmessage=function(t){o.logger.log(m.Trace,"(WebSockets transport) data received. "+T(t.data,o.logMessageContent)+"."),o.onreceive&&o.onreceive(t.data)},s.onclose=function(t){o.logger.log(m.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(m.Trace,"(WebSockets transport) sending data. "+T(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}(),A=function(){function t(t,e){void 0===e&&(e={}),this.features={},I.isRequired(t,"url"),this.logger=function(t){return void 0===t?new j(m.Information):null===t?k.instance:t.log?t:new j(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 C(this.logger),this.connectionState=2,this.options=e}return t.prototype.start=function(t){return t=t||M.Binary,I.isIn(t,M,"transferFormat"),this.logger.log(m.Debug,"Starting connection with transfer format '"+M[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 g(this,void 0,void 0,function(){return f(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 g(this,void 0,void 0,function(){var e,n,o,r,s,i,a,c=this;return f(this,function(l){switch(l.label){case 0:e=this.baseUrl,this.accessTokenFactory=this.options.accessTokenFactory,l.label=1;case 1:return l.trys.push([1,12,,13]),this.options.skipNegotiation?this.options.transport!==P.WebSockets?[3,3]:(this.transport=this.constructTransport(P.WebSockets),[4,this.transport.connect(e,t)]):[3,5];case 2:return l.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 f(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,l.label=6;case 6:return[5,r()];case 7:if("object"==typeof(i=l.sent()))return[2,i.value];l.label=8;case 8:if(n.url&&o<100)return[3,6];l.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:l.sent(),l.label=11;case 11:return this.transport instanceof F&&(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=l.sent(),this.logger.log(m.Error,"Failed to start the connection: "+a),this.connectionState=2,this.transport=null,a;case 13:return[2]}})})},t.prototype.getNegotiationResponse=function(t){return g(this,void 0,void 0,function(){var e,n,o,r,s,i;return f(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(m.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(m.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 g(this,void 0,void 0,function(){var r,s,i,a,c,l,h;return f(this,function(u){switch(u.label){case 0:return r=this.createConnectUrl(t,n.connectionId),this.isITransport(e)?(this.logger.log(m.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 u.sent(),this.changeState(0,1),[2];case 2:s=n.availableTransports,i=0,a=s,u.label=3;case 3:return i<a.length?(c=a[i],this.connectionState=0,"number"!=typeof(l=this.resolveTransport(c,e,o))?[3,8]:(this.transport=this.constructTransport(l),null!==n.connectionId?[3,5]:[4,this.getNegotiationResponse(t)])):[3,9];case 4:n=u.sent(),r=this.createConnectUrl(t,n.connectionId),u.label=5;case 5:return u.trys.push([5,7,,8]),[4,this.transport.connect(r,o)];case 6:return u.sent(),this.changeState(0,1),[2];case 7:return h=u.sent(),this.logger.log(m.Error,"Failed to start the transport '"+P[l]+"': "+h),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 P.WebSockets:return new U(this.accessTokenFactory,this.logger,this.options.logMessageContent);case P.ServerSentEvents:return new q(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);case P.LongPolling:return new F(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=P[t.transport];if(null===o||void 0===o)this.logger.log(m.Debug,"Skipping transport '"+t.transport+"' because it is not supported by this client.");else{var r=t.transferFormats.map(function(t){return M[t]});if(function(t,e){return!t||0!=(e&t)}(e,o))if(r.indexOf(n)>=0){if(!(o===P.WebSockets&&"undefined"==typeof WebSocket||o===P.ServerSentEvents&&"undefined"==typeof EventSource))return this.logger.log(m.Debug,"Selecting transport '"+P[o]+"'"),o;this.logger.log(m.Debug,"Skipping transport '"+P[o]+"' because it is not supported in your environment.'")}else this.logger.log(m.Debug,"Skipping transport '"+P[o]+"' because it does not support the requested transfer format '"+M[n]+"'.");else this.logger.log(m.Debug,"Skipping transport '"+P[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 g(this,void 0,void 0,function(){return f(this,function(e){return this.transport=null,(t=this.stopError||t)?this.logger.log(m.Error,"Connection disconnected with error '"+t+"'."):this.logger.log(m.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(m.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 D="json",W=function(){function t(){this.name=D,this.version=1,this.transferFormat=M.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=k.instance);for(var n=[],o=0,r=E.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 y.Invocation:this.isInvocationMessage(i);break;case y.StreamItem:this.isStreamItemMessage(i);break;case y.Completion:this.isCompletionMessage(i);break;case y.Ping:case y.Close:break;default:e.log(m.Information,"Unknown message type '"+i.type+"' ignored.");continue}n.push(i)}return n},t.prototype.writeMessage=function(t){return E.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}(),_=function(){function t(){}return t.prototype.configureLogging=function(t){return I.isRequired(t,"logging"),!function(t){return void 0!==t.log}(t)?this.logger=new j(t):this.logger=t,this},t.prototype.withUrl=function(t,e){return I.isRequired(t,"url"),this.url=t,this.httpConnectionOptions="object"==typeof e?e:{transport:e},this},t.prototype.withHubProtocol=function(t){return I.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 A(this.url,t);return N.create(e,this.logger||k.instance,this.protocol||new W)},t}();class z{constructor(t){this.iface=t}registerPublic(t,...e){this.iface.addObject(this,t,["destroy"].concat(e))}destroy(){this.iface.removeObject(this)}}class G extends z{constructor(t){super(t),this.registerPublic("listServers","listServers"),this.refreshing=!1}listServers(){if(this.refreshing)return;this.iface.callMethod("networker","registerHandler","ListGroups",t=>{this.iface.callMethod("serverListing","flushElements"),this.iface.callMethod("serverListing","addElements",t,this.iface),this.iface.callMethod("networker","removeHandler","ListGroups"),this.refreshing=!1}),this.iface.callMethod("networker","sendRequest","GetGroups",t=>{this.refreshing=!1,console.error(t.toString())}),this.refreshing=!0}}class J extends z{constructor(t){super(t),this.registerPublic("createServer","createServer"),this.refreshing=!1}createServer(){}}class X{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(0);class K extends X{constructor(t,e){super(e),this.serverName=e,t.addObject(this,"modal",["loginFailed","close"]),this.iface=t;let n=document.createElement("div"),o=document.createElement("div"),r=document.createElement("div"),s=document.createElement("label"),i=document.createElement("input"),a=document.createElement("span");s.setAttribute("for","password-input"),s.textContent="Passwort:",s.title="Das Passwort des Spiels",i.id="password-input",i.type="password",i.placeholder="Passwort",i.title="Das Passwort des Spiels",a.className="invalid hidden",a.textContent="Das eingegebene Passwort ist falsch.";let c=document.createElement("label"),l=document.createElement("input"),h=document.createElement("span");c.setAttribute("for","name-input"),c.textContent="Benutzername:",c.title="Dein Anzeigename",l.id="name-input",l.type="text",l.autocomplete="on",l.placeholder="Name",l.title="Dein Anzeigename",h.className="invalid hidden",h.textContent="Der eingegebene Nutzername ist bereits vergeben.";let u=document.createElement("button");u.className="btn",u.textContent="Login",u.id="login-button",n.appendChild(s),n.appendChild(i),n.appendChild(a),o.appendChild(c),o.appendChild(l),o.appendChild(h),r.appendChild(u),this.body.appendChild(n),this.body.appendChild(o),this.body.appendChild(r),this.nameInput=l,this.passwordInput=i,this.loginButton=u,this.passwordInvalid=a,this.nameInvalid=h,this.registerLoginBtnEvent()}loginFailed(t){1==t?(this.invalid("Name"),this.loginButton.addEventListener("click",this.event)):2==t?(this.invalid("Pass"),this.loginButton.addEventListener("click",this.event)):(this.iface.callMethod("notifications","show","failed","Ein unbekannter Fehler ist aufgetreten"),this.close())}registerLoginBtnEvent(){this.event=(()=>{this.invalid(),this.loginButton.removeEventListener("click",this.event),this.userName=this.nameInput.value,this.passwordInput.value.getHash().then(t=>{this.iface.callMethod("login","sendLogin",this.serverName,t,this.userName)})}),this.loginButton.addEventListener("click",this.event)}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")}}class Q extends z{constructor(t){super(t),this.registerPublic("login","sendLogin","showLogin"),this.refreshing=!1}showLogin(t){new K(this.iface,t)}registerLoginResponse(){this.iface.callMethod("networker","registerHandler","LoginResponse",t=>{0==t?(this.iface.callMethod("modal","close"),this.iface.callMethod("router","routePlay"),this.iface.callMethod("networker","removeHandler","LoginResponse")):this.iface.callMethod("modal","loginFailed",t)})}sendLogin(t,e,n){this.registerLoginResponse(),this.iface.callMethod("networker","sendRequest","Login",t=>console.error(t),t,n,e)}}class V{constructor(t){this.iface=t,this.cmds=[],this.registerCommands()}registerCommands(){this.cmds.push(new G(this.iface)),this.cmds.push(new J(this.iface)),this.cmds.push(new Q(this.iface))}destroy(){for(let t of this.cmds)t.destroy()}}class Y{constructor(t){this.iface=t,this.cmds=[]}registerCommands(){}destroy(){for(let t of this.cmds)t.destroy()}}let Z=new class{constructor(){this.objects={}}addObject(t,e,n){this.objects[e]||(this.objects[e]=[]),this.objects[e].push(new o(t,n))}removeObject(t,e){this.objects[e]&&(objects[e]=objects[e].filter(e=>e.object!=t),0==objects[e].length&&(objects[e]=void 0))}callMethod(t,e,...n){if(!this.objects[t])return 1;let o=0;for(let r of this.objects[t])0!=r.execute(e,...n)&&(o=2);return o}};new class{constructor(t){this.currentUI=null,t.addObject(this,"uiMananger",["initAbout","initLogin","initPlay"]),this.iface=t}initAbout(){this.clearComponents(),this.about=new s(this.iface),this.currentUI="about"}initLogin(){this.clearComponents(),this.login=new l(this.iface),this.currentUI="login"}initPlay(){this.clearComponents(),this.play=new h(this.iface),this.currentUI="play"}clearComponents(){switch(this.currentUI){case null:return;case"about":this.about=null;break;case"login":this.login=null;break;case"play":this.play=null}this.currentUI=null}}(Z).initLogin(),new class{constructor(t,e,n=!1){this.url=e,t.addObject(this,"networker",["sendRequest","registerHandler","removeHandler"]),this.iface=t;const o=(new _).withUrl(e);n?o.configureLogging(m.Debug):o.configureLogging(m.Error),this.connection=o.build(),this.connection.start().then(()=>this.iface.callMethod("listServers","listServers")).catch(t=>console.error(t.toString())),this.refreshing=!1}sendRequest(t,e,...n){this.connection.invoke(t,...n).catch(e)}registerHandler(t,e){this.connection.on(t,e)}removeHandler(t){this.connection.off(t)}initLogin(){this.loginCmd=new V(this.iface)}initPlay(){this.playCmd=new Y(this.iface)}clearCommands(){this.loginCmd&&this.loginCmd.destroy(),this.playCmd&&this.playCmd.destroy()}}(Z,"https://127.0.0.0:5000/chatHub",!0).initLogin()}]); \ No newline at end of file
diff --git a/WebInterface/dist/script/play.js b/WebInterface/dist/script/play.js
new file mode 100644
index 0000000..7e78fb6
--- /dev/null
+++ b/WebInterface/dist/script/play.js
@@ -0,0 +1,16 @@
+!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="../script/",n(n.s=1)}([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);class o{constructor(t,e){this.object=t,this.publicMethods=e}execute(t,...e){return this.publicMethods.includes(t)?"function"!=typeof this.object[t]?2:(this.object[t](...e),0):1}}class r{constructor(t,e,n){this.ids={backdropMenu:t,frontLayer:e,menuButton:n}}initialize(){this.open=!1,this.backdrop=document.getElementById(this.ids.backdropMenu),this.frontLayer=document.getElementById(this.ids.frontLayer),this.menuButton=document.getElementById(this.ids.menuButton),this.registerEvents()}registerEvents(){this.registerButtonEvent(),this.registerFrontLayerEvent()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.open=!this.open,this.open?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.open?this.menuButton.classList.add("open"):this.menuButton.classList.remove("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.open&&(this.open=!1,this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open"))})}}class i{constructor(){this.backdrop=new r("menu","front-layer","show-menu"),this.backdrop.initialize()}}class s{constructor(t,e,n){this.name=t,this.content=e,this.html=n}}class a{constructor(t,e,n,o,r){t.addObject(this,"notifications",["show","hide"]),this.iface=t,this.ids={bannerId:e,textP:n,dismissBtn:o,badge:r}}initialize(){this.banner=document.getElementById(this.ids.bannerId),this.bannerText=document.getElementById(this.ids.textP),this.dismissBtn=document.getElementById(this.ids.dismissBtn),this.notificationBadge=document.getElementById(this.ids.badge),this.bannerMsgs=[],this.banner.classList.add("hidden"),this.registerEvents()}registerEvents(){this.registerDismissEvent()}registerDismissEvent(){this.dismissBtn.addEventListener("click",()=>{this.dismissCurrent()})}show(t,e){let n=new s(t,e,!1);this.bannerMsgs.push(n),this.update()}hide(t){this.bannerMsgs=t?this.bannerMsgs.filter(e=>e.name!=t):[],this.update()}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.content,o=t.html;this.banner.classList.remove("hidden"),o?this.bannerText.innerHTML=n:this.bannerText.innerText=n,this.current=e,this.updateNotificationBadge()}updateNotificationBadge(){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())}}class c{constructor(t,e,n){this.ids={serverListId:e,refreshBtnId:n},t.addObject(this,"serverListing",["flushElements","addElements"]),this.iface=t}initialize(){this.serverListing=document.getElementById(this.ids.serverListId),this.refreshBtn=document.getElementById(this.ids.refreshBtnId),this.registerEvents()}registerEvents(){this.registerRefreshEvent()}registerRefreshEvent(){this.refreshBtn.addEventListener("click",()=>{this.iface.callMethod("listServers","listServers")})}flushElements(){this.serverListing.innerHTML=""}addElements(t){for(let e of t){const t=e.name,n=e.userCount;let o=document.createElement("div"),r=document.createElement("span"),i=document.createElement("div"),s=document.createElement("div"),a=document.createElement("span"),c=document.createElement("span"),u=document.createElement("button");o.className="server",r.className="server-name",i.className="right-aligned-items",s.className="player-count-dot",a.className="player-count",c.className="player-count-static",u.className="btn join-btn",u.id="join",r.textContent=t,a.textContent=n,c.textContent="Spieler online",u.textContent="Beitreten",u.addEventListener("click",()=>{this.iface.callMethod("login","showLogin",t)}),i.appendChild(s),i.appendChild(a),i.appendChild(c),i.appendChild(u),o.appendChild(r),o.appendChild(i),this.serverListing.appendChild(o)}}}class u{constructor(t){this.backdrop=new r("menu","front-layer","show-menu"),this.bannerController=new a(t,"notifications","banner-info","dismiss-banner","notification-amount"),this.serverListing=new c(t,"server-list","refresh-button"),this.backdrop.initialize(),this.bannerController.initialize(),this.serverListing.initialize()}}class l{constructor(){this.backdrop=new r("menu","front-layer","show-menu"),this.bannerController=new a(iface,"notifications","banner-info","dismiss-banner","notification-amount"),this.backdrop.initialize(),this.bannerController.initialize()}}
+/*! *****************************************************************************
+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 h=function(t,e){return(h=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 p(t,e){function n(){this.constructor=t}h(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var d=function(){return(d=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 g(t,e,n,o){return new(n||(n=Promise))(function(r,i){function s(t){try{c(o.next(t))}catch(t){i(t)}}function a(t){try{c(o.throw(t))}catch(t){i(t)}}function c(t){t.done?r(t.value):new n(function(e){e(t.value)}).then(s,a)}c((o=o.apply(t,e||[])).next())})}function f(t,e){var n,o,r,i,s={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(i){return function(a){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;s;)try{if(n=1,o&&(r=2&i[0]?o.return:i[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,i[1])).done)return r;switch(o=0,r&&(i=[2&i[0],r.value]),i[0]){case 0:case 1:r=i;break;case 4:return s.label++,{value:i[1],done:!1};case 5:s.label++,o=i[1],i=[0];continue;case 7:i=s.ops.pop(),s.trys.pop();continue;default:if(!(r=(r=s.trys).length>0&&r[r.length-1])&&(6===i[0]||2===i[0])){s=0;continue}if(3===i[0]&&(!r||i[1]>r[0]&&i[1]<r[3])){s.label=i[1];break}if(6===i[0]&&s.label<r[1]){s.label=r[1],r=i;break}if(r&&s.label<r[2]){s.label=r[2],s.ops.push(i);break}r[2]&&s.ops.pop(),s.trys.pop();continue}i=e.call(t,s)}catch(t){i=[6,t],o=0}finally{n=r=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,a])}}}var v,m=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 p(e,t),e}(Error),b=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 p(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"}(v||(v={}));var y,w=function(){return function(t,e,n){this.statusCode=t,this.statusText=e,this.content=n}}(),S=function(t){function e(e){var n=t.call(this)||this;return n.logger=e,n}return p(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 w(r.status,r.statusText,r.response||r.responseText)):o(new m(r.statusText,r.status))},r.onerror=function(){e.logger.log(v.Warning,"Error from HTTP request. "+r.status+": "+r.statusText),o(new m(r.statusText,r.status))},r.ontimeout=function(){e.logger.log(v.Warning,"Timeout from HTTP request."),o(new b)},r.send(t.content||"")})},e}(function(){function t(){}return t.prototype.get=function(t,e){return this.send(d({},e,{method:"GET",url:t}))},t.prototype.post=function(t,e){return this.send(d({},e,{method:"POST",url:t}))},t.prototype.delete=function(t,e){return this.send(d({},e,{method:"DELETE",url:t}))},t}()),C=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}(),E=function(){function t(){}return t.prototype.writeHandshakeRequest=function(t){return C.write(JSON.stringify(t))},t.prototype.parseHandshakeResponse=function(t){var e,n;if(t instanceof ArrayBuffer){var o=new Uint8Array(t);if(-1===(i=o.indexOf(C.RecordSeparatorCode)))throw new Error("Message is incomplete.");var r=i+1;e=String.fromCharCode.apply(null,o.slice(0,r)),n=o.byteLength>r?o.slice(r).buffer:null}else{var i,s=t;if(-1===(i=s.indexOf(C.RecordSeparator)))throw new Error("Message is incomplete.");r=i+1;e=s.substring(0,r),n=s.length>r?s.substring(r):null}var a=C.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"}(y||(y={}));var k=function(){function t(){}return t.prototype.log=function(t,e){},t.instance=new t,t}(),T=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 I(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 L(t,e,n,o,r,i,s){return g(this,void 0,void 0,function(){var a,c,u,l;return f(this,function(h){switch(h.label){case 0:return[4,r()];case 1:return(c=h.sent())&&((l={}).Authorization="Bearer "+c,a=l),t.log(v.Trace,"("+e+" transport) sending data. "+I(i,s)+"."),[4,n.post(o,{content:i,headers:a})];case 2:return u=h.sent(),t.log(v.Trace,"("+e+" transport) request complete. Response status: "+u.statusCode+"."),[2]}})})}var P,M,x=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 j(this,t)},t}(),j=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}(),B=function(){function t(t){this.minimumLogLevel=t}return t.prototype.log=function(t,e){if(t>=this.minimumLogLevel)switch(t){case v.Critical:case v.Error:console.error(v[t]+": "+e);break;case v.Warning:console.warn(v[t]+": "+e);break;case v.Information:console.info(v[t]+": "+e);break;default:console.log(v[t]+": "+e)}},t}(),O=3e4,R=function(){function t(t,e,n){var o=this;T.isRequired(t,"connection"),T.isRequired(e,"logger"),T.isRequired(n,"protocol"),this.serverTimeoutInMilliseconds=O,this.logger=e,this.protocol=n,this.connection=t,this.handshakeProtocol=new E,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 g(this,void 0,void 0,function(){var t;return f(this,function(e){switch(e.label){case 0:return t={protocol:this.protocol.name,version:this.protocol.version},this.logger.log(v.Debug,"Starting HubConnection."),this.receivedHandshakeResponse=!1,[4,this.connection.start(this.protocol.transferFormat)];case 1:return e.sent(),this.logger.log(v.Debug,"Sending handshake request."),[4,this.connection.send(this.handshakeProtocol.writeHandshakeRequest(t))];case 2:return e.sent(),this.logger.log(v.Information,"Using HubProtocol '"+this.protocol.name+"'."),this.cleanupTimeout(),this.configureTimeout(),[2]}})})},t.prototype.stop=function(){return this.logger.log(v.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),i=new x(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?i.error(e):t.type===y.Completion?t.error?i.error(new Error(t.error)):i.complete():i.next(t.item)};var s=this.protocol.writeMessage(r);return this.connection.send(s).catch(function(t){i.error(t),delete e.callbacks[r.invocationId]}),i},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===y.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 y.Invocation:this.invokeClientMethod(o);break;case y.StreamItem:case y.Completion:var r=this.callbacks[o.invocationId];null!=r&&(o.type===y.Completion&&delete this.callbacks[o.invocationId],r(o));break;case y.Ping:break;case y.Close:this.logger.log(v.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(v.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(v.Error,r);var i=new Error(r);throw this.connection.stop(i),i}if(e.error){r="Server returned handshake error: "+e.error;this.logger.log(v.Error,r),this.connection.stop(new Error(r))}else this.logger.log(v.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(v.Error,o),this.connection.stop(new Error(o))}}else this.logger.log(v.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:y.Invocation};var o=this.id;return this.id++,{arguments:e,invocationId:o.toString(),target:t,type:y.Invocation}},t.prototype.createStreamInvocation=function(t,e){var n=this.id;return this.id++,{arguments:e,invocationId:n.toString(),target:t,type:y.StreamInvocation}},t.prototype.createCancelInvocation=function(t){return{invocationId:t,type:y.CancelInvocation}},t}();!function(t){t[t.None=0]="None",t[t.WebSockets=1]="WebSockets",t[t.ServerSentEvents=2]="ServerSentEvents",t[t.LongPolling=4]="LongPolling"}(P||(P={})),function(t){t[t.Text=1]="Text",t[t.Binary=2]="Binary"}(M||(M={}));var N=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}(),F=5e3,q=function(){function t(t,e,n,o,r){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.pollAbort=new N,this.logMessageContent=o,this.shutdownTimeout=r||F}return Object.defineProperty(t.prototype,"pollAborted",{get:function(){return this.pollAbort.aborted},enumerable:!0,configurable:!0}),t.prototype.connect=function(t,e){return g(this,void 0,void 0,function(){var n,o,r,i,s;return f(this,function(a){switch(a.label){case 0:if(T.isRequired(t,"url"),T.isRequired(e,"transferFormat"),T.isIn(e,M,"transferFormat"),this.url=t,this.logger.log(v.Trace,"(LongPolling transport) Connecting"),e===M.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===M.Binary&&(n.responseType="arraybuffer"),[4,this.accessTokenFactory()];case 1:return o=a.sent(),this.updateHeaderToken(n,o),i=t+"&_="+Date.now(),this.logger.log(v.Trace,"(LongPolling transport) polling: "+i),[4,this.httpClient.get(i,n)];case 2:return 200!==(s=a.sent()).statusCode?(this.logger.log(v.Error,"(LongPolling transport) Unexpected response code: "+s.statusCode),r=new m(s.statusText,s.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 g(this,void 0,void 0,function(){var o,r,i,s;return f(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(v.Trace,"(LongPolling transport) polling: "+r),[4,this.httpClient.get(r,e)];case 4:return 204===(i=a.sent()).statusCode?(this.logger.log(v.Information,"(LongPolling transport) Poll terminated by server"),this.running=!1):200!==i.statusCode?(this.logger.log(v.Error,"(LongPolling transport) Unexpected response code: "+i.statusCode),n=new m(i.statusText,i.statusCode),this.running=!1):i.content?(this.logger.log(v.Trace,"(LongPolling transport) data received. "+I(i.content,this.logMessageContent)),this.onreceive&&this.onreceive(i.content)):this.logger.log(v.Trace,"(LongPolling transport) Poll timed out, reissuing."),[3,6];case 5:return s=a.sent(),this.running?s instanceof b?this.logger.log(v.Trace,"(LongPolling transport) Poll timed out, reissuing."):(n=s,this.running=!1):this.logger.log(v.Trace,"(LongPolling transport) Poll errored after shutdown: "+s.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(v.Trace,"(LongPolling transport) Firing onclose event. Error: "+(n||"<undefined>")),this.onclose(n)),this.logger.log(v.Trace,"(LongPolling transport) Transport finished."),[7];case 9:return[2]}})})},t.prototype.send=function(t){return g(this,void 0,void 0,function(){return f(this,function(e){return this.running?[2,L(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 g(this,void 0,void 0,function(){var t,e,n=this;return f(this,function(o){switch(o.label){case 0:return o.trys.push([0,,3,4]),this.running=!1,this.logger.log(v.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(v.Trace,"(LongPolling transport) DELETE request accepted."),[3,4];case 3:return this.stopped||(this.shutdownTimer=setTimeout(function(){n.logger.log(v.Warning,"(LongPolling transport) server did not terminate after DELETE request, canceling poll."),n.pollAbort.abort()},this.shutdownTimeout)),[7];case 4:return[2]}})})},t}(),H=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 g(this,void 0,void 0,function(){var n,o=this;return f(this,function(r){switch(r.label){case 0:if(T.isRequired(t,"url"),T.isRequired(e,"transferFormat"),T.isIn(e,M,"transferFormat"),"undefined"==typeof EventSource)throw new Error("'EventSource' is not supported in your environment.");return this.logger.log(v.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 i=!1;e!==M.Text&&r(new Error("The Server-Sent Events transport only supports the 'Text' transfer format"));var s=new EventSource(t,{withCredentials:!0});try{s.onmessage=function(t){if(o.onreceive)try{o.logger.log(v.Trace,"(SSE transport) data received. "+I(t.data,o.logMessageContent)+"."),o.onreceive(t.data)}catch(t){return void(o.onclose&&o.onclose(t))}},s.onerror=function(t){var e=new Error(t.message||"Error occurred");i?o.close(e):r(e)},s.onopen=function(){o.logger.log(v.Information,"SSE connected to "+o.url),o.eventSource=s,i=!0,n()}}catch(t){return Promise.reject(t)}})]}})})},t.prototype.send=function(t){return g(this,void 0,void 0,function(){return f(this,function(e){return this.eventSource?[2,L(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}(),U=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 g(this,void 0,void 0,function(){var n,o=this;return f(this,function(r){switch(r.label){case 0:if(T.isRequired(t,"url"),T.isRequired(e,"transferFormat"),T.isIn(e,M,"transferFormat"),"undefined"==typeof WebSocket)throw new Error("'WebSocket' is not supported in your environment.");return this.logger.log(v.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 i=new WebSocket(t);e===M.Binary&&(i.binaryType="arraybuffer"),i.onopen=function(e){o.logger.log(v.Information,"WebSocket connected to "+t),o.webSocket=i,n()},i.onerror=function(t){r(t.error)},i.onmessage=function(t){o.logger.log(v.Trace,"(WebSockets transport) data received. "+I(t.data,o.logMessageContent)+"."),o.onreceive&&o.onreceive(t.data)},i.onclose=function(t){o.logger.log(v.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(v.Trace,"(WebSockets transport) sending data. "+I(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}(),A=function(){function t(t,e){void 0===e&&(e={}),this.features={},T.isRequired(t,"url"),this.logger=function(t){return void 0===t?new B(v.Information):null===t?k.instance:t.log?t:new B(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 S(this.logger),this.connectionState=2,this.options=e}return t.prototype.start=function(t){return t=t||M.Binary,T.isIn(t,M,"transferFormat"),this.logger.log(v.Debug,"Starting connection with transfer format '"+M[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 g(this,void 0,void 0,function(){return f(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 g(this,void 0,void 0,function(){var e,n,o,r,i,s,a,c=this;return f(this,function(u){switch(u.label){case 0:e=this.baseUrl,this.accessTokenFactory=this.options.accessTokenFactory,u.label=1;case 1:return u.trys.push([1,12,,13]),this.options.skipNegotiation?this.options.transport!==P.WebSockets?[3,3]:(this.transport=this.constructTransport(P.WebSockets),[4,this.transport.connect(e,t)]):[3,5];case 2:return u.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 f(this,function(r){switch(r.label){case 0:return[4,i.getNegotiationResponse(e)];case 1:return n=r.sent(),2===i.connectionState?[2,{value:void 0}]:(n.url&&(e=n.url),n.accessToken&&(t=n.accessToken,i.accessTokenFactory=function(){return t}),o++,[2])}})},i=this,u.label=6;case 6:return[5,r()];case 7:if("object"==typeof(s=u.sent()))return[2,s.value];u.label=8;case 8:if(n.url&&o<100)return[3,6];u.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:u.sent(),u.label=11;case 11:return this.transport instanceof q&&(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=u.sent(),this.logger.log(v.Error,"Failed to start the connection: "+a),this.connectionState=2,this.transport=null,a;case 13:return[2]}})})},t.prototype.getNegotiationResponse=function(t){return g(this,void 0,void 0,function(){var e,n,o,r,i,s;return f(this,function(a){switch(a.label){case 0:return[4,this.accessTokenFactory()];case 1:(e=a.sent())&&((s={}).Authorization="Bearer "+e,n=s),o=this.resolveNegotiateUrl(t),this.logger.log(v.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 i=a.sent(),this.logger.log(v.Error,"Failed to complete negotiation with the server: "+i),i;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 g(this,void 0,void 0,function(){var r,i,s,a,c,u,l;return f(this,function(h){switch(h.label){case 0:return r=this.createConnectUrl(t,n.connectionId),this.isITransport(e)?(this.logger.log(v.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 h.sent(),this.changeState(0,1),[2];case 2:i=n.availableTransports,s=0,a=i,h.label=3;case 3:return s<a.length?(c=a[s],this.connectionState=0,"number"!=typeof(u=this.resolveTransport(c,e,o))?[3,8]:(this.transport=this.constructTransport(u),null!==n.connectionId?[3,5]:[4,this.getNegotiationResponse(t)])):[3,9];case 4:n=h.sent(),r=this.createConnectUrl(t,n.connectionId),h.label=5;case 5:return h.trys.push([5,7,,8]),[4,this.transport.connect(r,o)];case 6:return h.sent(),this.changeState(0,1),[2];case 7:return l=h.sent(),this.logger.log(v.Error,"Failed to start the transport '"+P[u]+"': "+l),this.connectionState=2,n.connectionId=null,[3,8];case 8:return s++,[3,3];case 9:throw new Error("Unable to initialize any of the available transports.")}})})},t.prototype.constructTransport=function(t){switch(t){case P.WebSockets:return new U(this.accessTokenFactory,this.logger,this.options.logMessageContent);case P.ServerSentEvents:return new H(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);case P.LongPolling:return new q(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=P[t.transport];if(null===o||void 0===o)this.logger.log(v.Debug,"Skipping transport '"+t.transport+"' because it is not supported by this client.");else{var r=t.transferFormats.map(function(t){return M[t]});if(function(t,e){return!t||0!=(e&t)}(e,o))if(r.indexOf(n)>=0){if(!(o===P.WebSockets&&"undefined"==typeof WebSocket||o===P.ServerSentEvents&&"undefined"==typeof EventSource))return this.logger.log(v.Debug,"Selecting transport '"+P[o]+"'"),o;this.logger.log(v.Debug,"Skipping transport '"+P[o]+"' because it is not supported in your environment.'")}else this.logger.log(v.Debug,"Skipping transport '"+P[o]+"' because it does not support the requested transfer format '"+M[n]+"'.");else this.logger.log(v.Debug,"Skipping transport '"+P[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 g(this,void 0,void 0,function(){return f(this,function(e){return this.transport=null,(t=this.stopError||t)?this.logger.log(v.Error,"Connection disconnected with error '"+t+"'."):this.logger.log(v.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(v.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 W="json",_=function(){function t(){this.name=W,this.version=1,this.transferFormat=M.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=k.instance);for(var n=[],o=0,r=C.parse(t);o<r.length;o++){var i=r[o],s=JSON.parse(i);if("number"!=typeof s.type)throw new Error("Invalid payload.");switch(s.type){case y.Invocation:this.isInvocationMessage(s);break;case y.StreamItem:this.isStreamItemMessage(s);break;case y.Completion:this.isCompletionMessage(s);break;case y.Ping:case y.Close:break;default:e.log(v.Information,"Unknown message type '"+s.type+"' ignored.");continue}n.push(s)}return n},t.prototype.writeMessage=function(t){return C.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}();!function(){function t(){}t.prototype.configureLogging=function(t){return T.isRequired(t,"logging"),!function(t){return void 0!==t.log}(t)?this.logger=new B(t):this.logger=t,this},t.prototype.withUrl=function(t,e){return T.isRequired(t,"url"),this.url=t,this.httpConnectionOptions="object"==typeof e?e:{transport:e},this},t.prototype.withHubProtocol=function(t){return T.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 A(this.url,t);return R.create(e,this.logger||k.instance,this.protocol||new _)}}();n(0);new class{constructor(t){this.currentUI=null,t.addObject(this,"uiMananger",["initAbout","initLogin","initPlay"]),this.iface=t}initAbout(){this.clearComponents(),this.about=new i(this.iface),this.currentUI="about"}initLogin(){this.clearComponents(),this.login=new u(this.iface),this.currentUI="login"}initPlay(){this.clearComponents(),this.play=new l(this.iface),this.currentUI="play"}clearComponents(){switch(this.currentUI){case null:return;case"about":this.about=null;break;case"login":this.login=null;break;case"play":this.play=null}this.currentUI=null}}(new class{constructor(){this.objects={}}addObject(t,e,n){this.objects[e]||(this.objects[e]=[]),this.objects[e].push(new o(t,n))}removeObject(t,e){this.objects[e]&&(objects[e]=objects[e].filter(e=>e.object!=t),0==objects[e].length&&(objects[e]=void 0))}callMethod(t,e,...n){if(!this.objects[t])return 1;let o=0;for(let r of this.objects[t])0!=r.execute(e,...n)&&(o=2);return o}}).initPlay()}]); \ No newline at end of file
diff --git a/WebInterface/dist/script/playModule.js b/WebInterface/dist/script/playModule.js
new file mode 100644
index 0000000..e807783
--- /dev/null
+++ b/WebInterface/dist/script/playModule.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{2:function(e,s,t){"use strict";t.r(s),t.d(s,"default",function(){return n});class n{constructor(e,s){this.user=e,this.connection=s}registerChat(e){this.chat=document.getElementById(e),this.messageList=this.chat.querySelector("#message-list"),this.messageInput=this.chat.querySelector("#input-message"),this.messageSend=this.chat.querySelector("#send-message"),this.connection.on("ReceiveMessage",(e,s)=>{let t=e+" sagt: "+s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),n=document.createElement("p");n.class="message",n.textContent=t,this.messageList.appendChild(n)}),this.messageSend.addEventListener("click",()=>{let e=this.messageInput.value;this.connection.invoke("SendMessage",this.user,e)})}}}}]); \ No newline at end of file
diff --git a/WebInterface/dist/style/about.css b/WebInterface/dist/style/about.css
new file mode 100644
index 0000000..5820f64
--- /dev/null
+++ b/WebInterface/dist/style/about.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}.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 .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}h1,h2,p,a{margin:0.5rem 1rem}h1,h2{margin-top:1rem;text-align:center}.front-layer{padding-bottom:5rem;display:-webkit-box;display:-ms-flexbox;display:flex}.about-container{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto;margin:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.about-container .about{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.about-container .contact{margin:1rem;display:-ms-grid;display:grid;-ms-grid-columns:1fr 5fr;grid-template-columns:1fr 5fr;-ms-grid-rows:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.about-container .contact h2{-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1/3}
diff --git a/WebInterface/dist/style/index.css b/WebInterface/dist/style/index.css
new file mode 100644
index 0000000..1004808
--- /dev/null
+++ b/WebInterface/dist/style/index.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 .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/dist/style/play.css b/WebInterface/dist/style/play.css
new file mode 100644
index 0000000..502af5e
--- /dev/null
+++ b/WebInterface/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}.game-window{width:calc(100% - 2rem);height:100%;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:#819ca9;margin:1rem;margin-bottom:2rem;border-style:none;border-radius:8px}.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}.chat{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.chat .messages{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;background-color:white;margin:0.5rem}.chat .input-message{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0.5rem}.chat .input-message input{font-size:2rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.chat .input-message .btn{margin-left:1rem}remove_if_redirected{width:100vw;height:100vh;text-align:center}