From 2093c4e47aaed97fca92709ede30f020e7c48292 Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Sat, 29 Sep 2018 19:06:02 +0200
Subject: Added AWESOME styling!

---
 WebInterface/NodeJSServer/dist/index.css           |  2 +-
 WebInterface/NodeJSServer/dist/index.html          | 46 +++++------
 WebInterface/NodeJSServer/dist/index.js            |  2 +-
 WebInterface/NodeJSServer/src/index.js             | 38 ++++-----
 .../src/modules/ui/notification-banner.js          | 75 +++++++++++++++++
 WebInterface/NodeJSServer/src/style/index.scss     | 94 +++++++++++++++++-----
 .../NodeJSServer/src/style/partials/_colors.scss   |  2 +
 7 files changed, 197 insertions(+), 62 deletions(-)
 create mode 100644 WebInterface/NodeJSServer/src/modules/ui/notification-banner.js

diff --git a/WebInterface/NodeJSServer/dist/index.css b/WebInterface/NodeJSServer/dist/index.css
index 9d6ad73..dcda9bc 100644
--- a/WebInterface/NodeJSServer/dist/index.css
+++ b/WebInterface/NodeJSServer/dist/index.css
@@ -1 +1 @@
-html,body{height:100vh;margin:0;padding:0;font-family:'Roboto', sans-serif;font-display:swap;overflow:hidden;background-color:#212121;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background-color:#546e7a;position:relative}.btn{border:none;border-radius:4px;padding:8px;margin:0;font-size:1rem;font-family:'Roboto Condensed', sans-serif;font-weight:bold;display:inline-block;background-color:#546e7a;color:#fff;text-transform:uppercase;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);cursor:pointer;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}.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}.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;z-index:2;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}@media (min-width: 450px){.backdrop .header-bar .header{margin-right:56px}}.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}.container{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}}.container .banner{z-index:1;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}.container .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}.container .banner .banner-text{-ms-flex-item-align:left;-ms-grid-row-align:left;align-self:left;margin:1rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.container .banner .btn-container{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;text-align:right}.container .banner .btn-container .banner-button{display:inline-block;background:none;color:#29434e;border:none;-webkit-box-shadow:none;box-shadow:none;font-size:1rem;-ms-flex-item-align:right;-ms-grid-row-align:right;align-self:right;text-transform:uppercase;padding:16px;margin:0;margin-right:1rem;font-family:'Roboto Condensed', sans-serif;cursor:pointer;font-weight:bold;letter-spacing:0.125rem}.container .banner hr{width:100%}.container .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)}.container .server-listing h1{text-align:center}.container .server-listing hr{width:100%}.container .server-listing .server-entries{overflow-y:auto;min-height:0}.container .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;-ms-flex-wrap:wrap;flex-wrap:wrap;-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}.container .server-listing .server-entries .server .server-name{font-weight:bold;-webkit-box-flex:100;-ms-flex-positive:100;flex-grow:100}.container .server-listing .server-entries .server .player-count-static{margin-left:0.25rem}.container .server-listing .server-entries .server .join-btn{margin-left:0.5rem;-ms-flex-negative:1;flex-shrink:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:15%;flex-basis:15%}.container .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}.container .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}
+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;z-index:2;-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}.container{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}}.container .banner{z-index:1;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){.container .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)}}.container .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}.container .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}.container .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}.container .banner .btn-container .banner-button{color:#29434e;padding:8px 16px;margin:0;margin-right:1rem;letter-spacing:0.125rem}.container .banner hr{width:100%}@media (max-height: 550px){.container .banner hr{margin-bottom:0}}.container .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)}.container .server-listing h1{text-align:center}@media (max-height: 550px){.container .server-listing h1{display:none}}.container .server-listing hr{width:100%}@media (max-height: 550px){.container .server-listing hr{display:none}}@media (max-height: 450px){.container .server-listing{padding-bottom:0.125rem}}.container .server-listing .server-entries{overflow-y:auto;min-height:0}.container .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){.container .server-listing .server-entries .server{-ms-flex-wrap:wrap;flex-wrap:wrap}}.container .server-listing .server-entries .server .server-name{font-weight:bold;letter-spacing:0.125rem;white-space:nowrap;overflow:hidden;margin:0.5rem 0}.container .server-listing .server-entries .server .player-count{font-family:'Roboto Condensed', sans-serif}.container .server-listing .server-entries .server .player-count-static{white-space:nowrap;margin-left:0.25rem;letter-spacing:0;font-family:'Roboto Condensed', sans-serif}@media (max-width: 1000px){.container .server-listing .server-entries .server .player-count-static{display:none}}.container .server-listing .server-entries .server .player-count-dot{background-color:#393;border-radius:50%;min-width:1rem;min-height:1rem;width:1rem;height:1rem;margin-left:auto;margin-right:0.25rem}.container .server-listing .server-entries .server .join-btn{margin-left:0.5rem;min-width:12rem}.container .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){.container .server-listing .button-container{margin-top:0.125rem;min-height:2rem}}.container .copyright-container{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;width:100%;margin:4px;bottom:0;text-align:center}
diff --git a/WebInterface/NodeJSServer/dist/index.html b/WebInterface/NodeJSServer/dist/index.html
index 9e44551..e1585e9 100644
--- a/WebInterface/NodeJSServer/dist/index.html
+++ b/WebInterface/NodeJSServer/dist/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -29,34 +29,34 @@
       <div class="banner" id="notifications">
         <p class="banner-text" id="banner-info">Loading javascript.</p>
         <div class="btn-container">
-          <button class="banner-button" id="dismiss-banner">Okay</button>
+          <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">
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 2</span><span class="player-count">1</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
-          <div class="server"><span class="server-name">Server 1</span><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+        <div class="server-entries" id="server-list">
+          <div class="server"><span class="server-name">Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 2</span><div class="player-count-dot"></div><span class="player-count">1</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
+          <div class="server"><span class="server-name">Server 1</span><div class="player-count-dot"></div><span class="player-count">3</span><span class="player-count-static">Spieler online</span><button class="join-btn btn" id="join">Beitreten</button></div>
         </div>
         <div class="button-container">
           <button id="new-game-button" class="btn">
diff --git a/WebInterface/NodeJSServer/dist/index.js b/WebInterface/NodeJSServer/dist/index.js
index f7db8c2..6533493 100644
--- a/WebInterface/NodeJSServer/dist/index.js
+++ b/WebInterface/NodeJSServer/dist/index.js
@@ -13,4 +13,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
 See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
-var o=function(t,e){return(o=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 r(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var s=function(){return(s=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 i(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 a(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 c,u=function(t){function e(e,n){var o=this,r=this.constructor.prototype;return(o=t.call(this,e)||this).statusCode=n,o.__proto__=r,o}return r(e,t),e}(Error),l=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 r(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"}(c||(c={}));var h,p=function(){return function(t,e,n){this.statusCode=t,this.statusText=e,this.content=n}}(),g=function(t){function e(e){var n=t.call(this)||this;return n.logger=e,n}return r(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 p(r.status,r.statusText,r.response||r.responseText)):o(new u(r.statusText,r.status))},r.onerror=function(){e.logger.log(c.Warning,"Error from HTTP request. "+r.status+": "+r.statusText),o(new u(r.statusText,r.status))},r.ontimeout=function(){e.logger.log(c.Warning,"Timeout from HTTP request."),o(new l)},r.send(t.content||"")})},e}(function(){function t(){}return t.prototype.get=function(t,e){return this.send(s({},e,{method:"GET",url:t}))},t.prototype.post=function(t,e){return this.send(s({},e,{method:"POST",url:t}))},t.prototype.delete=function(t,e){return this.send(s({},e,{method:"DELETE",url:t}))},t}()),f=function(){function t(){}return t.write=function(e){return""+e+t.RecordSeparator},t.parse=function(e){if(e[e.length-1]!==t.RecordSeparator)throw new Error("Message is incomplete.");var n=e.split(t.RecordSeparator);return n.pop(),n},t.RecordSeparatorCode=30,t.RecordSeparator=String.fromCharCode(t.RecordSeparatorCode),t}(),d=function(){function t(){}return t.prototype.writeHandshakeRequest=function(t){return f.write(JSON.stringify(t))},t.prototype.parseHandshakeResponse=function(t){var e,n;if(t instanceof ArrayBuffer){var o=new Uint8Array(t);if(-1===(s=o.indexOf(f.RecordSeparatorCode)))throw new Error("Message is incomplete.");var r=s+1;e=String.fromCharCode.apply(null,o.slice(0,r)),n=o.byteLength>r?o.slice(r).buffer:null}else{var s,i=t;if(-1===(s=i.indexOf(f.RecordSeparator)))throw new Error("Message is incomplete.");r=s+1;e=i.substring(0,r),n=i.length>r?i.substring(r):null}var a=f.parse(e);return[n,JSON.parse(a[0])]},t}();!function(t){t[t.Invocation=1]="Invocation",t[t.StreamItem=2]="StreamItem",t[t.Completion=3]="Completion",t[t.StreamInvocation=4]="StreamInvocation",t[t.CancelInvocation=5]="CancelInvocation",t[t.Ping=6]="Ping",t[t.Close=7]="Close"}(h||(h={}));var v=function(){function t(){}return t.prototype.log=function(t,e){},t.instance=new t,t}(),m=function(){function t(){}return t.isRequired=function(t,e){if(null===t||void 0===t)throw new Error("The '"+e+"' argument is required.")},t.isIn=function(t,e,n){if(!(t in e))throw new Error("Unknown "+n+" value: "+t+".")},t}();function y(t,e){var n=null;return t instanceof ArrayBuffer?(n="Binary data of length "+t.byteLength,e&&(n+=". Content: '"+function(t){var e="";return new Uint8Array(t).forEach(function(t){e+="0x"+(t<16?"0":"")+t.toString(16)+" "}),e.substr(0,e.length-1)}(t)+"'")):"string"==typeof t&&(n="String data of length "+t.length,e&&(n+=". Content: '"+t+"'.")),n}function b(t,e,n,o,r,s,u){return i(this,void 0,void 0,function(){var i,l,h,p;return a(this,function(a){switch(a.label){case 0:return[4,r()];case 1:return(l=a.sent())&&((p={}).Authorization="Bearer "+l,i=p),t.log(c.Trace,"("+e+" transport) sending data. "+y(s,u)+"."),[4,n.post(o,{content:s,headers:i})];case 2:return h=a.sent(),t.log(c.Trace,"("+e+" transport) request complete. Response status: "+h.statusCode+"."),[2]}})})}var w,S,k=function(){function t(t){this.observers=[],this.cancelCallback=t}return t.prototype.next=function(t){for(var e=0,n=this.observers;e<n.length;e++){n[e].next(t)}},t.prototype.error=function(t){for(var e=0,n=this.observers;e<n.length;e++){var o=n[e];o.error&&o.error(t)}},t.prototype.complete=function(){for(var t=0,e=this.observers;t<e.length;t++){var n=e[t];n.complete&&n.complete()}},t.prototype.subscribe=function(t){return this.observers.push(t),new T(this,t)},t}(),T=function(){function t(t,e){this.subject=t,this.observer=e}return t.prototype.dispose=function(){var t=this.subject.observers.indexOf(this.observer);t>-1&&this.subject.observers.splice(t,1),0===this.subject.observers.length&&this.subject.cancelCallback().catch(function(t){})},t}(),C=function(){function t(t){this.minimumLogLevel=t}return t.prototype.log=function(t,e){if(t>=this.minimumLogLevel)switch(t){case c.Critical:case c.Error:console.error(c[t]+": "+e);break;case c.Warning:console.warn(c[t]+": "+e);break;case c.Information:console.info(c[t]+": "+e);break;default:console.log(c[t]+": "+e)}},t}(),E=3e4,I=function(){function t(t,e,n){var o=this;m.isRequired(t,"connection"),m.isRequired(e,"logger"),m.isRequired(n,"protocol"),this.serverTimeoutInMilliseconds=E,this.logger=e,this.protocol=n,this.connection=t,this.handshakeProtocol=new d,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 i(this,void 0,void 0,function(){var t;return a(this,function(e){switch(e.label){case 0:return t={protocol:this.protocol.name,version:this.protocol.version},this.logger.log(c.Debug,"Starting HubConnection."),this.receivedHandshakeResponse=!1,[4,this.connection.start(this.protocol.transferFormat)];case 1:return e.sent(),this.logger.log(c.Debug,"Sending handshake request."),[4,this.connection.send(this.handshakeProtocol.writeHandshakeRequest(t))];case 2:return e.sent(),this.logger.log(c.Information,"Using HubProtocol '"+this.protocol.name+"'."),this.cleanupTimeout(),this.configureTimeout(),[2]}})})},t.prototype.stop=function(){return this.logger.log(c.Debug,"Stopping HubConnection."),this.cleanupTimeout(),this.connection.stop()},t.prototype.stream=function(t){for(var e=this,n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];var r=this.createStreamInvocation(t,n),s=new k(function(){var t=e.createCancelInvocation(r.invocationId),n=e.protocol.writeMessage(t);return delete e.callbacks[r.invocationId],e.connection.send(n)});this.callbacks[r.invocationId]=function(t,e){e?s.error(e):t.type===h.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===h.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 h.Invocation:this.invokeClientMethod(o);break;case h.StreamItem:case h.Completion:var r=this.callbacks[o.invocationId];null!=r&&(o.type===h.Completion&&delete this.callbacks[o.invocationId],r(o));break;case h.Ping:break;case h.Close:this.logger.log(c.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(c.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(c.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(c.Error,r),this.connection.stop(new Error(r))}else this.logger.log(c.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(c.Error,o),this.connection.stop(new Error(o))}}else this.logger.log(c.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:h.Invocation};var o=this.id;return this.id++,{arguments:e,invocationId:o.toString(),target:t,type:h.Invocation}},t.prototype.createStreamInvocation=function(t,e){var n=this.id;return this.id++,{arguments:e,invocationId:n.toString(),target:t,type:h.StreamInvocation}},t.prototype.createCancelInvocation=function(t){return{invocationId:t,type:h.CancelInvocation}},t}();!function(t){t[t.None=0]="None",t[t.WebSockets=1]="WebSockets",t[t.ServerSentEvents=2]="ServerSentEvents",t[t.LongPolling=4]="LongPolling"}(w||(w={})),function(t){t[t.Text=1]="Text",t[t.Binary=2]="Binary"}(S||(S={}));var P=function(){function t(){this.isAborted=!1}return t.prototype.abort=function(){this.isAborted||(this.isAborted=!0,this.onabort&&this.onabort())},Object.defineProperty(t.prototype,"signal",{get:function(){return this},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"aborted",{get:function(){return this.isAborted},enumerable:!0,configurable:!0}),t}(),L=5e3,x=function(){function t(t,e,n,o,r){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.pollAbort=new P,this.logMessageContent=o,this.shutdownTimeout=r||L}return Object.defineProperty(t.prototype,"pollAborted",{get:function(){return this.pollAbort.aborted},enumerable:!0,configurable:!0}),t.prototype.connect=function(t,e){return i(this,void 0,void 0,function(){var n,o,r,s,i;return a(this,function(a){switch(a.label){case 0:if(m.isRequired(t,"url"),m.isRequired(e,"transferFormat"),m.isIn(e,S,"transferFormat"),this.url=t,this.logger.log(c.Trace,"(LongPolling transport) Connecting"),e===S.Binary&&"string"!=typeof(new XMLHttpRequest).responseType)throw new Error("Binary protocols over XmlHttpRequest not implementing advanced features are not supported.");return n={abortSignal:this.pollAbort.signal,headers:{},timeout:9e4},e===S.Binary&&(n.responseType="arraybuffer"),[4,this.accessTokenFactory()];case 1:return o=a.sent(),this.updateHeaderToken(n,o),s=t+"&_="+Date.now(),this.logger.log(c.Trace,"(LongPolling transport) polling: "+s),[4,this.httpClient.get(s,n)];case 2:return 200!==(i=a.sent()).statusCode?(this.logger.log(c.Error,"(LongPolling transport) Unexpected response code: "+i.statusCode),r=new u(i.statusText,i.statusCode),this.running=!1):this.running=!0,this.poll(this.url,n,r),[2,Promise.resolve()]}})})},t.prototype.updateHeaderToken=function(t,e){e?t.headers.Authorization="Bearer "+e:t.headers.Authorization&&delete t.headers.Authorization},t.prototype.poll=function(t,e,n){return i(this,void 0,void 0,function(){var o,r,s,i;return a(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(c.Trace,"(LongPolling transport) polling: "+r),[4,this.httpClient.get(r,e)];case 4:return 204===(s=a.sent()).statusCode?(this.logger.log(c.Information,"(LongPolling transport) Poll terminated by server"),this.running=!1):200!==s.statusCode?(this.logger.log(c.Error,"(LongPolling transport) Unexpected response code: "+s.statusCode),n=new u(s.statusText,s.statusCode),this.running=!1):s.content?(this.logger.log(c.Trace,"(LongPolling transport) data received. "+y(s.content,this.logMessageContent)),this.onreceive&&this.onreceive(s.content)):this.logger.log(c.Trace,"(LongPolling transport) Poll timed out, reissuing."),[3,6];case 5:return i=a.sent(),this.running?i instanceof l?this.logger.log(c.Trace,"(LongPolling transport) Poll timed out, reissuing."):(n=i,this.running=!1):this.logger.log(c.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(c.Trace,"(LongPolling transport) Firing onclose event. Error: "+(n||"<undefined>")),this.onclose(n)),this.logger.log(c.Trace,"(LongPolling transport) Transport finished."),[7];case 9:return[2]}})})},t.prototype.send=function(t){return i(this,void 0,void 0,function(){return a(this,function(e){return this.running?[2,b(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 i(this,void 0,void 0,function(){var t,e,n=this;return a(this,function(o){switch(o.label){case 0:return o.trys.push([0,,3,4]),this.running=!1,this.logger.log(c.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(c.Trace,"(LongPolling transport) DELETE request accepted."),[3,4];case 3:return this.stopped||(this.shutdownTimer=setTimeout(function(){n.logger.log(c.Warning,"(LongPolling transport) server did not terminate after DELETE request, canceling poll."),n.pollAbort.abort()},this.shutdownTimeout)),[7];case 4:return[2]}})})},t}(),R=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 i(this,void 0,void 0,function(){var n,o=this;return a(this,function(r){switch(r.label){case 0:if(m.isRequired(t,"url"),m.isRequired(e,"transferFormat"),m.isIn(e,S,"transferFormat"),"undefined"==typeof EventSource)throw new Error("'EventSource' is not supported in your environment.");return this.logger.log(c.Trace,"(SSE transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),this.url=t,[2,new Promise(function(n,r){var s=!1;e!==S.Text&&r(new Error("The Server-Sent Events transport only supports the 'Text' transfer format"));var i=new EventSource(t,{withCredentials:!0});try{i.onmessage=function(t){if(o.onreceive)try{o.logger.log(c.Trace,"(SSE transport) data received. "+y(t.data,o.logMessageContent)+"."),o.onreceive(t.data)}catch(t){return void(o.onclose&&o.onclose(t))}},i.onerror=function(t){var e=new Error(t.message||"Error occurred");s?o.close(e):r(e)},i.onopen=function(){o.logger.log(c.Information,"SSE connected to "+o.url),o.eventSource=i,s=!0,n()}}catch(t){return Promise.reject(t)}})]}})})},t.prototype.send=function(t){return i(this,void 0,void 0,function(){return a(this,function(e){return this.eventSource?[2,b(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}(),M=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 i(this,void 0,void 0,function(){var n,o=this;return a(this,function(r){switch(r.label){case 0:if(m.isRequired(t,"url"),m.isRequired(e,"transferFormat"),m.isIn(e,S,"transferFormat"),"undefined"==typeof WebSocket)throw new Error("'WebSocket' is not supported in your environment.");return this.logger.log(c.Trace,"(WebSockets transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),[2,new Promise(function(n,r){t=t.replace(/^http/,"ws");var s=new WebSocket(t);e===S.Binary&&(s.binaryType="arraybuffer"),s.onopen=function(e){o.logger.log(c.Information,"WebSocket connected to "+t),o.webSocket=s,n()},s.onerror=function(t){r(t.error)},s.onmessage=function(t){o.logger.log(c.Trace,"(WebSockets transport) data received. "+y(t.data,o.logMessageContent)+"."),o.onreceive&&o.onreceive(t.data)},s.onclose=function(t){o.logger.log(c.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(c.Trace,"(WebSockets transport) sending data. "+y(t,this.logMessageContent)+"."),this.webSocket.send(t),Promise.resolve()):Promise.reject("WebSocket is not in the OPEN state")},t.prototype.stop=function(){return this.webSocket&&(this.webSocket.close(),this.webSocket=null),Promise.resolve()},t}(),O=function(){function t(t,e){void 0===e&&(e={}),this.features={},m.isRequired(t,"url"),this.logger=function(t){return void 0===t?new C(c.Information):null===t?v.instance:t.log?t:new C(t)}(e.logger),this.baseUrl=this.resolveUrl(t),(e=e||{}).accessTokenFactory=e.accessTokenFactory||function(){return null},e.logMessageContent=e.logMessageContent||!1,this.httpClient=e.httpClient||new g(this.logger),this.connectionState=2,this.options=e}return t.prototype.start=function(t){return t=t||S.Binary,m.isIn(t,S,"transferFormat"),this.logger.log(c.Debug,"Starting connection with transfer format '"+S[t]+"'."),2!==this.connectionState?Promise.reject(new Error("Cannot start a connection that is not in the 'Disconnected' state.")):(this.connectionState=0,this.startPromise=this.startInternal(t),this.startPromise)},t.prototype.send=function(t){if(1!==this.connectionState)throw new Error("Cannot send data if the connection is not in the 'Connected' State.");return this.transport.send(t)},t.prototype.stop=function(t){return i(this,void 0,void 0,function(){return a(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 i(this,void 0,void 0,function(){var e,n,o,r,s,i,u,l=this;return a(this,function(h){switch(h.label){case 0:e=this.baseUrl,this.accessTokenFactory=this.options.accessTokenFactory,h.label=1;case 1:return h.trys.push([1,12,,13]),this.options.skipNegotiation?this.options.transport!==w.WebSockets?[3,3]:(this.transport=this.constructTransport(w.WebSockets),[4,this.transport.connect(e,t)]):[3,5];case 2:return h.sent(),[3,4];case 3:throw Error("Negotiation can only be skipped when using the WebSocket transport directly.");case 4:return[3,11];case 5:n=null,o=0,r=function(){var t;return a(this,function(r){switch(r.label){case 0:return[4,s.getNegotiationResponse(e)];case 1:return n=r.sent(),2===s.connectionState?[2,{value:void 0}]:(n.url&&(e=n.url),n.accessToken&&(t=n.accessToken,s.accessTokenFactory=function(){return t}),o++,[2])}})},s=this,h.label=6;case 6:return[5,r()];case 7:if("object"==typeof(i=h.sent()))return[2,i.value];h.label=8;case 8:if(n.url&&o<100)return[3,6];h.label=9;case 9:if(100===o&&n.url)throw Error("Negotiate redirection limit exceeded.");return[4,this.createTransport(e,this.options.transport,n,t)];case 10:h.sent(),h.label=11;case 11:return this.transport instanceof x&&(this.features.inherentKeepAlive=!0),this.transport.onreceive=this.onreceive,this.transport.onclose=function(t){return l.stopConnection(t)},this.changeState(0,1),[3,13];case 12:throw u=h.sent(),this.logger.log(c.Error,"Failed to start the connection: "+u),this.connectionState=2,this.transport=null,u;case 13:return[2]}})})},t.prototype.getNegotiationResponse=function(t){return i(this,void 0,void 0,function(){var e,n,o,r,s,i;return a(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(c.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(c.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 i(this,void 0,void 0,function(){var r,s,i,u,l,h,p;return a(this,function(a){switch(a.label){case 0:return r=this.createConnectUrl(t,n.connectionId),this.isITransport(e)?(this.logger.log(c.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 a.sent(),this.changeState(0,1),[2];case 2:s=n.availableTransports,i=0,u=s,a.label=3;case 3:return i<u.length?(l=u[i],this.connectionState=0,"number"!=typeof(h=this.resolveTransport(l,e,o))?[3,8]:(this.transport=this.constructTransport(h),null!==n.connectionId?[3,5]:[4,this.getNegotiationResponse(t)])):[3,9];case 4:n=a.sent(),r=this.createConnectUrl(t,n.connectionId),a.label=5;case 5:return a.trys.push([5,7,,8]),[4,this.transport.connect(r,o)];case 6:return a.sent(),this.changeState(0,1),[2];case 7:return p=a.sent(),this.logger.log(c.Error,"Failed to start the transport '"+w[h]+"': "+p),this.connectionState=2,n.connectionId=null,[3,8];case 8:return i++,[3,3];case 9:throw new Error("Unable to initialize any of the available transports.")}})})},t.prototype.constructTransport=function(t){switch(t){case w.WebSockets:return new M(this.accessTokenFactory,this.logger,this.options.logMessageContent);case w.ServerSentEvents:return new R(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);case w.LongPolling:return new x(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=w[t.transport];if(null===o||void 0===o)this.logger.log(c.Debug,"Skipping transport '"+t.transport+"' because it is not supported by this client.");else{var r=t.transferFormats.map(function(t){return S[t]});if(function(t,e){return!t||0!=(e&t)}(e,o))if(r.indexOf(n)>=0){if(!(o===w.WebSockets&&"undefined"==typeof WebSocket||o===w.ServerSentEvents&&"undefined"==typeof EventSource))return this.logger.log(c.Debug,"Selecting transport '"+w[o]+"'"),o;this.logger.log(c.Debug,"Skipping transport '"+w[o]+"' because it is not supported in your environment.'")}else this.logger.log(c.Debug,"Skipping transport '"+w[o]+"' because it does not support the requested transfer format '"+S[n]+"'.");else this.logger.log(c.Debug,"Skipping transport '"+w[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 i(this,void 0,void 0,function(){return a(this,function(e){return this.transport=null,(t=this.stopError||t)?this.logger.log(c.Error,"Connection disconnected with error '"+t+"'."):this.logger.log(c.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(c.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 F="json",q=function(){function t(){this.name=F,this.version=1,this.transferFormat=S.Text}return t.prototype.parseMessages=function(t,e){if("string"!=typeof t)throw new Error("Invalid input for JSON hub protocol. Expected a string.");if(!t)return[];null===e&&(e=v.instance);for(var n=[],o=0,r=f.parse(t);o<r.length;o++){var s=r[o],i=JSON.parse(s);if("number"!=typeof i.type)throw new Error("Invalid payload.");switch(i.type){case h.Invocation:this.isInvocationMessage(i);break;case h.StreamItem:this.isStreamItemMessage(i);break;case h.Completion:this.isCompletionMessage(i);break;case h.Ping:case h.Close:break;default:e.log(c.Information,"Unknown message type '"+i.type+"' ignored.");continue}n.push(i)}return n},t.prototype.writeMessage=function(t){return f.write(JSON.stringify(t))},t.prototype.isInvocationMessage=function(t){this.assertNotEmptyString(t.target,"Invalid payload for Invocation message."),void 0!==t.invocationId&&this.assertNotEmptyString(t.invocationId,"Invalid payload for Invocation message.")},t.prototype.isStreamItemMessage=function(t){if(this.assertNotEmptyString(t.invocationId,"Invalid payload for StreamItem message."),void 0===t.item)throw new Error("Invalid payload for StreamItem message.")},t.prototype.isCompletionMessage=function(t){if(t.result&&t.error)throw new Error("Invalid payload for Completion message.");!t.result&&t.error&&this.assertNotEmptyString(t.error,"Invalid payload for Completion message."),this.assertNotEmptyString(t.invocationId,"Invalid payload for Completion message.")},t.prototype.assertNotEmptyString=function(t,e){if("string"!=typeof t||""===t)throw new Error(e)},t}(),H=function(){function t(){}return t.prototype.configureLogging=function(t){return m.isRequired(t,"logging"),!function(t){return void 0!==t.log}(t)?this.logger=new C(t):this.logger=t,this},t.prototype.withUrl=function(t,e){return m.isRequired(t,"url"),this.url=t,this.httpConnectionOptions="object"==typeof e?e:{transport:e},this},t.prototype.withHubProtocol=function(t){return m.isRequired(t,"protocol"),this.protocol=t,this},t.prototype.build=function(){var t=this.httpConnectionOptions||{};if(void 0===t.logger&&(t.logger=this.logger),!this.url)throw new Error("The 'HubConnectionBuilder.withUrl' method must be called before building the connection.");var e=new O(this.url,t);return I.create(e,this.logger||v.instance,this.protocol||new q)},t}();new class{constructor(t,e,n){this.backdrop=document.getElementById(t),this.frontLayer=document.getElementById(e),this.menuButton=document.getElementById(n)}register(){this.registerButtonEvent(),this.registerFrontLayerEvent()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.backdrop.classList.contains("hidden")?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.menuButton.classList.contains("open")?this.menuButton.classList.remove("open"):this.menuButton.classList.add("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open")})}}("menu","front-layer","show-menu").register();const j=(new H).withUrl("http://89.183.31.151:5000/chatHub").configureLogging(c.Information).build();j.on("ReceiveMessage",(t,e)=>{let n=t+" says "+e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),o=document.createElement("li");o.textContent=n,document.getElementById("message-list").appendChild(o)}),document.getElementById("send-button").addEventListener("click",()=>{let t=document.getElementById("user-input").value,e=document.getElementById("message-input").value;j.invoke("SendMessage",t,e).catch(function(t){return console.error(t.toString())}),event.preventDefault()}),j.start().catch(t=>console.error(t.toString()))}]);
\ No newline at end of file
+var o=function(t,e){return(o=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 r(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var s=function(){return(s=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 i(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 a(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 c,u=function(t){function e(e,n){var o=this,r=this.constructor.prototype;return(o=t.call(this,e)||this).statusCode=n,o.__proto__=r,o}return r(e,t),e}(Error),l=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 r(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"}(c||(c={}));var h,p=function(){return function(t,e,n){this.statusCode=t,this.statusText=e,this.content=n}}(),g=function(t){function e(e){var n=t.call(this)||this;return n.logger=e,n}return r(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 p(r.status,r.statusText,r.response||r.responseText)):o(new u(r.statusText,r.status))},r.onerror=function(){e.logger.log(c.Warning,"Error from HTTP request. "+r.status+": "+r.statusText),o(new u(r.statusText,r.status))},r.ontimeout=function(){e.logger.log(c.Warning,"Timeout from HTTP request."),o(new l)},r.send(t.content||"")})},e}(function(){function t(){}return t.prototype.get=function(t,e){return this.send(s({},e,{method:"GET",url:t}))},t.prototype.post=function(t,e){return this.send(s({},e,{method:"POST",url:t}))},t.prototype.delete=function(t,e){return this.send(s({},e,{method:"DELETE",url:t}))},t}()),d=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}(),f=function(){function t(){}return t.prototype.writeHandshakeRequest=function(t){return d.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(d.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(d.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=d.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"}(h||(h={}));var v=function(){function t(){}return t.prototype.log=function(t,e){},t.instance=new t,t}(),m=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 b(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 y(t,e,n,o,r,s,u){return i(this,void 0,void 0,function(){var i,l,h,p;return a(this,function(a){switch(a.label){case 0:return[4,r()];case 1:return(l=a.sent())&&((p={}).Authorization="Bearer "+l,i=p),t.log(c.Trace,"("+e+" transport) sending data. "+b(s,u)+"."),[4,n.post(o,{content:s,headers:i})];case 2:return h=a.sent(),t.log(c.Trace,"("+e+" transport) request complete. Response status: "+h.statusCode+"."),[2]}})})}var w,S,k=function(){function t(t){this.observers=[],this.cancelCallback=t}return t.prototype.next=function(t){for(var e=0,n=this.observers;e<n.length;e++){n[e].next(t)}},t.prototype.error=function(t){for(var e=0,n=this.observers;e<n.length;e++){var o=n[e];o.error&&o.error(t)}},t.prototype.complete=function(){for(var t=0,e=this.observers;t<e.length;t++){var n=e[t];n.complete&&n.complete()}},t.prototype.subscribe=function(t){return this.observers.push(t),new T(this,t)},t}(),T=function(){function t(t,e){this.subject=t,this.observer=e}return t.prototype.dispose=function(){var t=this.subject.observers.indexOf(this.observer);t>-1&&this.subject.observers.splice(t,1),0===this.subject.observers.length&&this.subject.cancelCallback().catch(function(t){})},t}(),C=function(){function t(t){this.minimumLogLevel=t}return t.prototype.log=function(t,e){if(t>=this.minimumLogLevel)switch(t){case c.Critical:case c.Error:console.error(c[t]+": "+e);break;case c.Warning:console.warn(c[t]+": "+e);break;case c.Information:console.info(c[t]+": "+e);break;default:console.log(c[t]+": "+e)}},t}(),E=3e4,I=function(){function t(t,e,n){var o=this;m.isRequired(t,"connection"),m.isRequired(e,"logger"),m.isRequired(n,"protocol"),this.serverTimeoutInMilliseconds=E,this.logger=e,this.protocol=n,this.connection=t,this.handshakeProtocol=new f,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 i(this,void 0,void 0,function(){var t;return a(this,function(e){switch(e.label){case 0:return t={protocol:this.protocol.name,version:this.protocol.version},this.logger.log(c.Debug,"Starting HubConnection."),this.receivedHandshakeResponse=!1,[4,this.connection.start(this.protocol.transferFormat)];case 1:return e.sent(),this.logger.log(c.Debug,"Sending handshake request."),[4,this.connection.send(this.handshakeProtocol.writeHandshakeRequest(t))];case 2:return e.sent(),this.logger.log(c.Information,"Using HubProtocol '"+this.protocol.name+"'."),this.cleanupTimeout(),this.configureTimeout(),[2]}})})},t.prototype.stop=function(){return this.logger.log(c.Debug,"Stopping HubConnection."),this.cleanupTimeout(),this.connection.stop()},t.prototype.stream=function(t){for(var e=this,n=[],o=1;o<arguments.length;o++)n[o-1]=arguments[o];var r=this.createStreamInvocation(t,n),s=new k(function(){var t=e.createCancelInvocation(r.invocationId),n=e.protocol.writeMessage(t);return delete e.callbacks[r.invocationId],e.connection.send(n)});this.callbacks[r.invocationId]=function(t,e){e?s.error(e):t.type===h.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===h.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 h.Invocation:this.invokeClientMethod(o);break;case h.StreamItem:case h.Completion:var r=this.callbacks[o.invocationId];null!=r&&(o.type===h.Completion&&delete this.callbacks[o.invocationId],r(o));break;case h.Ping:break;case h.Close:this.logger.log(c.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(c.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(c.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(c.Error,r),this.connection.stop(new Error(r))}else this.logger.log(c.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(c.Error,o),this.connection.stop(new Error(o))}}else this.logger.log(c.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:h.Invocation};var o=this.id;return this.id++,{arguments:e,invocationId:o.toString(),target:t,type:h.Invocation}},t.prototype.createStreamInvocation=function(t,e){var n=this.id;return this.id++,{arguments:e,invocationId:n.toString(),target:t,type:h.StreamInvocation}},t.prototype.createCancelInvocation=function(t){return{invocationId:t,type:h.CancelInvocation}},t}();!function(t){t[t.None=0]="None",t[t.WebSockets=1]="WebSockets",t[t.ServerSentEvents=2]="ServerSentEvents",t[t.LongPolling=4]="LongPolling"}(w||(w={})),function(t){t[t.Text=1]="Text",t[t.Binary=2]="Binary"}(S||(S={}));var P=function(){function t(){this.isAborted=!1}return t.prototype.abort=function(){this.isAborted||(this.isAborted=!0,this.onabort&&this.onabort())},Object.defineProperty(t.prototype,"signal",{get:function(){return this},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"aborted",{get:function(){return this.isAborted},enumerable:!0,configurable:!0}),t}(),L=5e3,M=function(){function t(t,e,n,o,r){this.httpClient=t,this.accessTokenFactory=e||function(){return null},this.logger=n,this.pollAbort=new P,this.logMessageContent=o,this.shutdownTimeout=r||L}return Object.defineProperty(t.prototype,"pollAborted",{get:function(){return this.pollAbort.aborted},enumerable:!0,configurable:!0}),t.prototype.connect=function(t,e){return i(this,void 0,void 0,function(){var n,o,r,s,i;return a(this,function(a){switch(a.label){case 0:if(m.isRequired(t,"url"),m.isRequired(e,"transferFormat"),m.isIn(e,S,"transferFormat"),this.url=t,this.logger.log(c.Trace,"(LongPolling transport) Connecting"),e===S.Binary&&"string"!=typeof(new XMLHttpRequest).responseType)throw new Error("Binary protocols over XmlHttpRequest not implementing advanced features are not supported.");return n={abortSignal:this.pollAbort.signal,headers:{},timeout:9e4},e===S.Binary&&(n.responseType="arraybuffer"),[4,this.accessTokenFactory()];case 1:return o=a.sent(),this.updateHeaderToken(n,o),s=t+"&_="+Date.now(),this.logger.log(c.Trace,"(LongPolling transport) polling: "+s),[4,this.httpClient.get(s,n)];case 2:return 200!==(i=a.sent()).statusCode?(this.logger.log(c.Error,"(LongPolling transport) Unexpected response code: "+i.statusCode),r=new u(i.statusText,i.statusCode),this.running=!1):this.running=!0,this.poll(this.url,n,r),[2,Promise.resolve()]}})})},t.prototype.updateHeaderToken=function(t,e){e?t.headers.Authorization="Bearer "+e:t.headers.Authorization&&delete t.headers.Authorization},t.prototype.poll=function(t,e,n){return i(this,void 0,void 0,function(){var o,r,s,i;return a(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(c.Trace,"(LongPolling transport) polling: "+r),[4,this.httpClient.get(r,e)];case 4:return 204===(s=a.sent()).statusCode?(this.logger.log(c.Information,"(LongPolling transport) Poll terminated by server"),this.running=!1):200!==s.statusCode?(this.logger.log(c.Error,"(LongPolling transport) Unexpected response code: "+s.statusCode),n=new u(s.statusText,s.statusCode),this.running=!1):s.content?(this.logger.log(c.Trace,"(LongPolling transport) data received. "+b(s.content,this.logMessageContent)),this.onreceive&&this.onreceive(s.content)):this.logger.log(c.Trace,"(LongPolling transport) Poll timed out, reissuing."),[3,6];case 5:return i=a.sent(),this.running?i instanceof l?this.logger.log(c.Trace,"(LongPolling transport) Poll timed out, reissuing."):(n=i,this.running=!1):this.logger.log(c.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(c.Trace,"(LongPolling transport) Firing onclose event. Error: "+(n||"<undefined>")),this.onclose(n)),this.logger.log(c.Trace,"(LongPolling transport) Transport finished."),[7];case 9:return[2]}})})},t.prototype.send=function(t){return i(this,void 0,void 0,function(){return a(this,function(e){return this.running?[2,y(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 i(this,void 0,void 0,function(){var t,e,n=this;return a(this,function(o){switch(o.label){case 0:return o.trys.push([0,,3,4]),this.running=!1,this.logger.log(c.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(c.Trace,"(LongPolling transport) DELETE request accepted."),[3,4];case 3:return this.stopped||(this.shutdownTimer=setTimeout(function(){n.logger.log(c.Warning,"(LongPolling transport) server did not terminate after DELETE request, canceling poll."),n.pollAbort.abort()},this.shutdownTimeout)),[7];case 4:return[2]}})})},t}(),x=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 i(this,void 0,void 0,function(){var n,o=this;return a(this,function(r){switch(r.label){case 0:if(m.isRequired(t,"url"),m.isRequired(e,"transferFormat"),m.isIn(e,S,"transferFormat"),"undefined"==typeof EventSource)throw new Error("'EventSource' is not supported in your environment.");return this.logger.log(c.Trace,"(SSE transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),this.url=t,[2,new Promise(function(n,r){var s=!1;e!==S.Text&&r(new Error("The Server-Sent Events transport only supports the 'Text' transfer format"));var i=new EventSource(t,{withCredentials:!0});try{i.onmessage=function(t){if(o.onreceive)try{o.logger.log(c.Trace,"(SSE transport) data received. "+b(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(c.Information,"SSE connected to "+o.url),o.eventSource=i,s=!0,n()}}catch(t){return Promise.reject(t)}})]}})})},t.prototype.send=function(t){return i(this,void 0,void 0,function(){return a(this,function(e){return this.eventSource?[2,y(this.logger,"SSE",this.httpClient,this.url,this.accessTokenFactory,t,this.logMessageContent)]:[2,Promise.reject(new Error("Cannot send until the transport is connected"))]})})},t.prototype.stop=function(){return this.close(),Promise.resolve()},t.prototype.close=function(t){this.eventSource&&(this.eventSource.close(),this.eventSource=null,this.onclose&&this.onclose(t))},t}(),R=function(){function t(t,e,n){this.logger=e,this.accessTokenFactory=t||function(){return null},this.logMessageContent=n}return t.prototype.connect=function(t,e){return i(this,void 0,void 0,function(){var n,o=this;return a(this,function(r){switch(r.label){case 0:if(m.isRequired(t,"url"),m.isRequired(e,"transferFormat"),m.isIn(e,S,"transferFormat"),"undefined"==typeof WebSocket)throw new Error("'WebSocket' is not supported in your environment.");return this.logger.log(c.Trace,"(WebSockets transport) Connecting"),[4,this.accessTokenFactory()];case 1:return(n=r.sent())&&(t+=(t.indexOf("?")<0?"?":"&")+"access_token="+encodeURIComponent(n)),[2,new Promise(function(n,r){t=t.replace(/^http/,"ws");var s=new WebSocket(t);e===S.Binary&&(s.binaryType="arraybuffer"),s.onopen=function(e){o.logger.log(c.Information,"WebSocket connected to "+t),o.webSocket=s,n()},s.onerror=function(t){r(t.error)},s.onmessage=function(t){o.logger.log(c.Trace,"(WebSockets transport) data received. "+b(t.data,o.logMessageContent)+"."),o.onreceive&&o.onreceive(t.data)},s.onclose=function(t){o.logger.log(c.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(c.Trace,"(WebSockets transport) sending data. "+b(t,this.logMessageContent)+"."),this.webSocket.send(t),Promise.resolve()):Promise.reject("WebSocket is not in the OPEN state")},t.prototype.stop=function(){return this.webSocket&&(this.webSocket.close(),this.webSocket=null),Promise.resolve()},t}(),O=function(){function t(t,e){void 0===e&&(e={}),this.features={},m.isRequired(t,"url"),this.logger=function(t){return void 0===t?new C(c.Information):null===t?v.instance:t.log?t:new C(t)}(e.logger),this.baseUrl=this.resolveUrl(t),(e=e||{}).accessTokenFactory=e.accessTokenFactory||function(){return null},e.logMessageContent=e.logMessageContent||!1,this.httpClient=e.httpClient||new g(this.logger),this.connectionState=2,this.options=e}return t.prototype.start=function(t){return t=t||S.Binary,m.isIn(t,S,"transferFormat"),this.logger.log(c.Debug,"Starting connection with transfer format '"+S[t]+"'."),2!==this.connectionState?Promise.reject(new Error("Cannot start a connection that is not in the 'Disconnected' state.")):(this.connectionState=0,this.startPromise=this.startInternal(t),this.startPromise)},t.prototype.send=function(t){if(1!==this.connectionState)throw new Error("Cannot send data if the connection is not in the 'Connected' State.");return this.transport.send(t)},t.prototype.stop=function(t){return i(this,void 0,void 0,function(){return a(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 i(this,void 0,void 0,function(){var e,n,o,r,s,i,u,l=this;return a(this,function(h){switch(h.label){case 0:e=this.baseUrl,this.accessTokenFactory=this.options.accessTokenFactory,h.label=1;case 1:return h.trys.push([1,12,,13]),this.options.skipNegotiation?this.options.transport!==w.WebSockets?[3,3]:(this.transport=this.constructTransport(w.WebSockets),[4,this.transport.connect(e,t)]):[3,5];case 2:return h.sent(),[3,4];case 3:throw Error("Negotiation can only be skipped when using the WebSocket transport directly.");case 4:return[3,11];case 5:n=null,o=0,r=function(){var t;return a(this,function(r){switch(r.label){case 0:return[4,s.getNegotiationResponse(e)];case 1:return n=r.sent(),2===s.connectionState?[2,{value:void 0}]:(n.url&&(e=n.url),n.accessToken&&(t=n.accessToken,s.accessTokenFactory=function(){return t}),o++,[2])}})},s=this,h.label=6;case 6:return[5,r()];case 7:if("object"==typeof(i=h.sent()))return[2,i.value];h.label=8;case 8:if(n.url&&o<100)return[3,6];h.label=9;case 9:if(100===o&&n.url)throw Error("Negotiate redirection limit exceeded.");return[4,this.createTransport(e,this.options.transport,n,t)];case 10:h.sent(),h.label=11;case 11:return this.transport instanceof M&&(this.features.inherentKeepAlive=!0),this.transport.onreceive=this.onreceive,this.transport.onclose=function(t){return l.stopConnection(t)},this.changeState(0,1),[3,13];case 12:throw u=h.sent(),this.logger.log(c.Error,"Failed to start the connection: "+u),this.connectionState=2,this.transport=null,u;case 13:return[2]}})})},t.prototype.getNegotiationResponse=function(t){return i(this,void 0,void 0,function(){var e,n,o,r,s,i;return a(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(c.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(c.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 i(this,void 0,void 0,function(){var r,s,i,u,l,h,p;return a(this,function(a){switch(a.label){case 0:return r=this.createConnectUrl(t,n.connectionId),this.isITransport(e)?(this.logger.log(c.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 a.sent(),this.changeState(0,1),[2];case 2:s=n.availableTransports,i=0,u=s,a.label=3;case 3:return i<u.length?(l=u[i],this.connectionState=0,"number"!=typeof(h=this.resolveTransport(l,e,o))?[3,8]:(this.transport=this.constructTransport(h),null!==n.connectionId?[3,5]:[4,this.getNegotiationResponse(t)])):[3,9];case 4:n=a.sent(),r=this.createConnectUrl(t,n.connectionId),a.label=5;case 5:return a.trys.push([5,7,,8]),[4,this.transport.connect(r,o)];case 6:return a.sent(),this.changeState(0,1),[2];case 7:return p=a.sent(),this.logger.log(c.Error,"Failed to start the transport '"+w[h]+"': "+p),this.connectionState=2,n.connectionId=null,[3,8];case 8:return i++,[3,3];case 9:throw new Error("Unable to initialize any of the available transports.")}})})},t.prototype.constructTransport=function(t){switch(t){case w.WebSockets:return new R(this.accessTokenFactory,this.logger,this.options.logMessageContent);case w.ServerSentEvents:return new x(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);case w.LongPolling:return new M(this.httpClient,this.accessTokenFactory,this.logger,this.options.logMessageContent);default:throw new Error("Unknown transport: "+t+".")}},t.prototype.resolveTransport=function(t,e,n){var o=w[t.transport];if(null===o||void 0===o)this.logger.log(c.Debug,"Skipping transport '"+t.transport+"' because it is not supported by this client.");else{var r=t.transferFormats.map(function(t){return S[t]});if(function(t,e){return!t||0!=(e&t)}(e,o))if(r.indexOf(n)>=0){if(!(o===w.WebSockets&&"undefined"==typeof WebSocket||o===w.ServerSentEvents&&"undefined"==typeof EventSource))return this.logger.log(c.Debug,"Selecting transport '"+w[o]+"'"),o;this.logger.log(c.Debug,"Skipping transport '"+w[o]+"' because it is not supported in your environment.'")}else this.logger.log(c.Debug,"Skipping transport '"+w[o]+"' because it does not support the requested transfer format '"+S[n]+"'.");else this.logger.log(c.Debug,"Skipping transport '"+w[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 i(this,void 0,void 0,function(){return a(this,function(e){return this.transport=null,(t=this.stopError||t)?this.logger.log(c.Error,"Connection disconnected with error '"+t+"'."):this.logger.log(c.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(c.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 F="json",q=function(){function t(){this.name=F,this.version=1,this.transferFormat=S.Text}return t.prototype.parseMessages=function(t,e){if("string"!=typeof t)throw new Error("Invalid input for JSON hub protocol. Expected a string.");if(!t)return[];null===e&&(e=v.instance);for(var n=[],o=0,r=d.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 h.Invocation:this.isInvocationMessage(i);break;case h.StreamItem:this.isStreamItemMessage(i);break;case h.Completion:this.isCompletionMessage(i);break;case h.Ping:case h.Close:break;default:e.log(c.Information,"Unknown message type '"+i.type+"' ignored.");continue}n.push(i)}return n},t.prototype.writeMessage=function(t){return d.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}(),B=function(){function t(){}return t.prototype.configureLogging=function(t){return m.isRequired(t,"logging"),!function(t){return void 0!==t.log}(t)?this.logger=new C(t):this.logger=t,this},t.prototype.withUrl=function(t,e){return m.isRequired(t,"url"),this.url=t,this.httpConnectionOptions="object"==typeof e?e:{transport:e},this},t.prototype.withHubProtocol=function(t){return m.isRequired(t,"protocol"),this.protocol=t,this},t.prototype.build=function(){var t=this.httpConnectionOptions||{};if(void 0===t.logger&&(t.logger=this.logger),!this.url)throw new Error("The 'HubConnectionBuilder.withUrl' method must be called before building the connection.");var e=new O(this.url,t);return I.create(e,this.logger||v.instance,this.protocol||new q)},t}();new class{constructor(t,e,n){this.backdrop=document.getElementById(t),this.frontLayer=document.getElementById(e),this.menuButton=document.getElementById(n)}register(){this.registerButtonEvent(),this.registerFrontLayerEvent()}registerButtonEvent(){this.menuButton.addEventListener("click",()=>{this.backdrop.classList.contains("hidden")?this.backdrop.classList.remove("hidden"):this.backdrop.classList.add("hidden"),this.menuButton.classList.contains("open")?this.menuButton.classList.remove("open"):this.menuButton.classList.add("open")})}registerFrontLayerEvent(){this.frontLayer.addEventListener("click",()=>{this.backdrop.classList.add("hidden"),this.menuButton.classList.remove("open")})}}("menu","front-layer","show-menu").register(),new class{constructor(t,e,n){this.banner=document.getElementById(t),this.bannerText=document.getElementById(e),this.dismissBtn=document.getElementById(n),this.bannerMsgs=[],this.banner.classList.add("hidden")}register(){this.dismissBtn.addEventListener("click",()=>{this.dismissCurrent()})}show(t,e){let n={name:t,text:e,html:!1};this.bannerMsgs.push(n),this.update()}hide(t){if(t){for(let e=0;e<this.bannerMsgs.length;e++)this.bannerMsgs[e].name==t&&this.bannerMsgs.splice(e,1);this.update()}else this.bannerMsgs=[],this.banner.classList.add("hidden")}dismissCurrent(){this.hide(this.current)}update(){if(0===this.bannerMsgs.length)return void this.banner.classList.add("hidden");const t=this.bannerMsgs[this.bannerMsgs.length-1],e=t.name,n=t.text,o=t.html;this.banner.classList.remove("hidden"),o?this.bannerText.innerHTML=n:this.bannerText.innerText=n,this.current=e}showPersistence(){let t={name:"persistence",text:"Storage persistence is disabled, so in-browser storage of created Wikis might not work.\nClick <a href=\"#\" onclick=\"\n          event.preventDefault();\n          navigator.storage.persist().then((persistent) => {\n            if (persistent) notificationManager.show('storageSuccess', 'Storage persistence successfully turned on.');\n            else notificationManager.show('storageFail', 'Storage persistence has been rejected.');\n          });\n        \">here</a> to enable storage persistence.",html:!0};this.bannerMsgs.push(t),this.update()}}("notifications","banner-info","dismiss-banner").register();const H=(new B).withUrl("http://89.183.117.197:5000/chatHub").configureLogging(c.Information).build();H.on("ReceiveMessage",(t,e)=>{let n=t+" says "+e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),o=document.createElement("div");o.classList.add("server"),o.textContent=n,document.getElementById("server-list").appendChild(o)}),document.getElementById("new-game-button").addEventListener("click",()=>{let t=window.prompt("Please enter method:","SendMessage"),e=window.prompt("Please enter user:","Default"),n=window.prompt("Please enter message:","Super duper Nachricht");H.invoke(t,e,n).catch(function(t){return console.error(t.toString())}),event.preventDefault()}),H.start().then(()=>console.log("Connected")).catch(t=>console.error(t.toString()))}]);
\ No newline at end of file
diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js
index 979ef7d..f1a0120 100644
--- a/WebInterface/NodeJSServer/src/index.js
+++ b/WebInterface/NodeJSServer/src/index.js
@@ -1,38 +1,38 @@
 import Backdrop from './modules/ui/backdrop.js';
-import * as signalR from "@aspnet/signalr";
+import * as signalR from '@aspnet/signalr';
+import BannerController from './modules/ui/notification-banner.js';
 
 let backdrop = new Backdrop('menu', 'front-layer', 'show-menu');
 backdrop.register();
 
+let notifications = new BannerController('notifications',
+    'banner-info', 'dismiss-banner');
+notifications.register();
+
 const connection = new signalR.HubConnectionBuilder()
-    .withUrl("http://89.183.31.151:5000/chatHub")
+    .withUrl("http://89.183.117.197:5000/chatHub")
     .configureLogging(signalR.LogLevel.Information)
     .build();
 
-connection.on('')
-
 connection.on('ReceiveMessage', (user, message) => {
   let msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   let encodedMsg = user + " says " + msg;
-  let li = document.createElement("li");
+  let li = document.createElement("div");
+  li.classList.add('server');
   li.textContent = encodedMsg;
-  document.getElementById('message-list').appendChild(li);
+  document.getElementById('server-list').appendChild(li);
 });
 
-document.getElementById('send-button').addEventListener('click', () => {
-  let user = document.getElementById("user-input").value;
-  let message = document.getElementById("message-input").value;
-  connection.invoke("SendMessage", user, message).catch(function (err) {
+document.getElementById('new-game-button').addEventListener('click', () => {
+  let method = window.prompt('Please enter method:', 'SendMessage');
+  let user = window.prompt('Please enter user:', 'Default');
+  let message = window.prompt('Please enter message:', 'Super duper Nachricht');
+  connection.invoke(method, user, message).catch(function (err) {
     return console.error(err.toString());
   });
   event.preventDefault();
-});
-
-
-
-
-
-
-
+}),
 
-connection.start().catch(err => console.error(err.toString()));
+connection.start()
+    .then(() => console.log('Connected'))
+    .catch(err => console.error(err.toString()));
diff --git a/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
new file mode 100644
index 0000000..d14845e
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/modules/ui/notification-banner.js
@@ -0,0 +1,75 @@
+export default class BannerController {
+  constructor(bannerId, textP, dismissBtn) {
+    this.banner = document.getElementById(bannerId);
+    this.bannerText = document.getElementById(textP);
+    this.dismissBtn = document.getElementById(dismissBtn);
+    this.bannerMsgs = [];
+
+    // Hide Banner after JS loading finished
+    this.banner.classList.add('hidden');
+  }
+
+  register() {
+    this.dismissBtn.addEventListener('click', () => {
+      this.dismissCurrent();
+    });
+  }
+
+  show(name, text) {
+    let bannerItem = {name, text, 'html': false};
+    this.bannerMsgs.push(bannerItem);
+
+    this.update();
+  }
+
+  hide(name) {
+    if (!name) {
+      this.bannerMsgs = [];
+      this.banner.classList.add('hidden');
+    } else {
+      for (let i = 0; i < this.bannerMsgs.length; i++) {
+        if (this.bannerMsgs[i].name == name) {
+          this.bannerMsgs.splice(i, 1);
+        }
+      }
+
+      this.update();
+    }
+  }
+
+  dismissCurrent() {
+    this.hide(this.current);
+  }
+
+  update() {
+    if (this.bannerMsgs.length === 0) {
+      this.banner.classList.add('hidden');
+      return;
+    }
+
+    const lastNotification = this.bannerMsgs[this.bannerMsgs.length - 1];
+    const name = lastNotification.name;
+    const text = lastNotification.text;
+    const html = lastNotification.html;
+    this.banner.classList.remove('hidden');
+
+    if (html) this.bannerText.innerHTML = text;
+    else this.bannerText.innerText = text;
+
+    this.current = name;
+  }
+
+  showPersistence() {
+    let text = `Storage persistence is disabled, so in-browser storage of created Wikis might not work.\n` +
+        `Click <a href="#" onclick="
+          event.preventDefault();
+          navigator.storage.persist().then((persistent) => {
+            if (persistent) notificationManager.show('storageSuccess', 'Storage persistence successfully turned on.');
+            else notificationManager.show('storageFail', 'Storage persistence has been rejected.');
+          });
+        ">here</a> to enable storage persistence.`;
+    let bannerItem = {'name': 'persistence', text, 'html': true};
+    this.bannerMsgs.push(bannerItem);
+    this.update();
+  }
+}
diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss
index 7a83cea..dc225b0 100644
--- a/WebInterface/NodeJSServer/src/style/index.scss
+++ b/WebInterface/NodeJSServer/src/style/index.scss
@@ -33,6 +33,7 @@ body {
   text-transform: uppercase;
   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;
   transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease;
@@ -101,6 +102,10 @@ body {
     display: flex;
     align-items: center;
 
+    @media (max-height: 550px) {
+      margin-top: 0.125rem;
+    }
+
     .menu-icon {
       background-image: url("./ressources/menu.png");
       background-position: center;
@@ -114,6 +119,11 @@ body {
       border-radius: 32px;
       transition: background-color 100ms ease;
 
+      @media (max-height: 550px) {
+        padding: 0;
+        margin: 0.125rem;
+      }
+
       &:hover {
         background-color: $secondary-dark;
       }
@@ -133,6 +143,10 @@ body {
       @media (min-width: 450px) {
         margin-right: 56px;
       }
+
+      @media (max-height: 550px) {
+        padding: 0;
+      }
     }
   }
 
@@ -215,6 +229,14 @@ body {
     transform-origin: top;
     transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-start;
     min-height: 3.5rem;
+    justify-items: center;
+    justify-content: center;
+
+    @media (max-height: 550px) {
+      position: absolute;
+      width: 100%;
+      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    }
 
     &.hidden {
       transform: scaleY(0);
@@ -222,38 +244,36 @@ body {
       max-height: 0;
       transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-end;
       min-height: 0;
+      margin-bottom: 0;
     }
 
     .banner-text {
       align-self: left;
       margin: 1rem;
-      flex-grow: 1;
+      flex-grow: 100;
     }
 
     .btn-container{
+      display: flex;
       flex-grow: 1;
       text-align: right;
+
+
       .banner-button {
-        display: inline-block;
-        background: none;
         color: $secondary-dark;
-        border: none;
-        box-shadow: none;
-        font-size: 1rem;
-        align-self: right;
-        text-transform: uppercase;
-        padding: 16px;
+        padding: 8px 16px;
         margin: 0;
         margin-right: 1rem;
-        font-family: 'Roboto Condensed', sans-serif;
-        cursor: pointer;
-        font-weight: bold;
         letter-spacing: 0.125rem;
       }
     }
 
     hr {
       width: 100%;
+
+      @media (max-height: 550px) {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -273,9 +293,19 @@ body {
     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
     h1 {
       text-align: center;
+      @media (max-height: 550px) {
+        display: none;
+      }
     }
     hr {
       width: 100%;
+      @media (max-height: 550px) {
+        display: none;
+      }
+    }
+
+    @media (max-height: 450px) {
+      padding-bottom: 0.125rem
     }
 
     .server-entries {
@@ -286,7 +316,11 @@ body {
         font-size: 1.25rem;
         display: flex;
         flex-direction: row;
-        flex-wrap: wrap;
+
+        @media (max-width: 1000px) {
+          flex-wrap: wrap;
+        }
+
         align-items: center;
         background-color: $primary-light;
         padding: 0.5rem;
@@ -296,22 +330,41 @@ body {
 
         .server-name {
           font-weight: bold;
-          flex-grow: 100;
+          letter-spacing: 0.125rem;
+          white-space: nowrap;
+          overflow: hidden;
+          margin: 0.5rem 0;
         }
 
         .player-count {
-
+          font-family: 'Roboto Condensed', sans-serif;
         }
 
         .player-count-static {
+          @media (max-width: 1000px) {
+            display: none;
+          }
+
+          white-space: nowrap;
           margin-left: 0.25rem;
+          letter-spacing: 0;
+          font-family: 'Roboto Condensed', sans-serif;
+        }
+
+        .player-count-dot {
+          background-color: $online-green;
+          border-radius: 50%;
+          min-width: 1rem;
+          min-height: 1rem;
+          width: 1rem;
+          height: 1rem;
+          margin-left: auto;
+          margin-right: 0.25rem;
         }
 
         .join-btn {
           margin-left: 0.5rem;
-          flex-shrink: 1;
-          flex-grow: 1;
-          flex-basis: 15%;
+          min-width: 12rem;
         }
       }
     }
@@ -322,6 +375,11 @@ body {
       margin-top: 1rem;
       margin-right: 0.25rem;
       min-height: 2.5rem;
+
+      @media (max-height: 450px) {
+        margin-top: 0.125rem;
+        min-height: 2rem;
+      }
     }
   }
 
diff --git a/WebInterface/NodeJSServer/src/style/partials/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
index 91bc2d3..2c954fa 100644
--- a/WebInterface/NodeJSServer/src/style/partials/_colors.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/_colors.scss
@@ -13,3 +13,5 @@ $secondary-light: #819ca9;
 $secondary-light-transparent: #819ca961;
 $secondary-text: #ffffff;
 $secondary-text-disabled: #ffffff61;
+
+$online-green: #339933;
-- 
cgit v1.2.3-54-g00ecf