diff options
Diffstat (limited to 'WebInterface')
-rw-r--r-- | WebInterface/NodeJSServer/dist/index.css | 2 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/dist/index.html | 72 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/index.js | 2 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/style/index.scss | 118 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/style/partials/_colors.scss | 2 |
5 files changed, 153 insertions, 43 deletions
diff --git a/WebInterface/NodeJSServer/dist/index.css b/WebInterface/NodeJSServer/dist/index.css index f2f052e..9d6ad73 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}.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 .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;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} diff --git a/WebInterface/NodeJSServer/dist/index.html b/WebInterface/NodeJSServer/dist/index.html index d54470c..9e44551 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"> @@ -20,7 +20,7 @@ <h1 class="header">Helden Online</h1> </div> <div class="menu-actions hidden" id="menu"> - <a class="menu-option active" id="listing-tab" href="./">Server Liste</a> + <a class="menu-option active" id="listing-tab" href="./">Spiele-Liste</a> <a class="menu-option" id="github-tab" href="https://github.com/TrueDoctor/DiscoBot" target="_blank">Projekt auf GitHub</a> <a class="menu-option" id="about-tab" href="about.html" target="_blank">About</a> </div> @@ -34,47 +34,39 @@ <hr> </div> <div class="server-listing"> - <h1>Server Listing</h1> + <h1>Aktive Spiele</h1> <hr> <div class="server-entries"> - <ul id="message-list"> - - </ul> - <input type="text" id="user-input"> - <input type="text" id="message-input"> - <button id="send-button"> - Senden - </button> - <button id="login-button"> - Login - </button> + <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> + <div class="button-container"> + <button id="new-game-button" class="btn"> + Spiel beginnen + </button> + <button id="refresh-button" class="btn text-btn refresh-btn"> + Aktualisieren + </button> </div> - <!-- <div class="server-entries"> - <p>Server 1</p> - <p>Server 2</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - <p>Server 3</p> - </div> --> + </div> <div class="copyright-container"> diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js index 8430851..979ef7d 100644 --- a/WebInterface/NodeJSServer/src/index.js +++ b/WebInterface/NodeJSServer/src/index.js @@ -9,6 +9,8 @@ const connection = new signalR.HubConnectionBuilder() .configureLogging(signalR.LogLevel.Information) .build(); +connection.on('') + connection.on('ReceiveMessage', (user, message) => { let msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); let encodedMsg = user + " says " + msg; diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index 67dc68e..7a83cea 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -19,6 +19,79 @@ body { 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: $secondary; + color: $secondary-text; + 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; + + background-position: center; + transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; + + &:hover { + background: $secondary-dark radial-gradient(circle, transparent 1%, $secondary-dark 1%) center/15000%; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } + + &:active { + background-color: $secondary-light; + background-size: 100%; + box-shadow: 0 1px 3px rgba(0,0,0,0.12); + transition: background 0s, box-shadow 0s; + } + + &:disabled { + color: $secondary-text-disabled; + background: $secondary-disabled; + box-shadow: none; + transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; + } +} + +.text-btn { + padding: 8px; + margin: 0; + font-size: 1rem; + font-family: 'Roboto Condensed', sans-serif; + font-weight: bold; + display: inline-block; + color: $secondary-text; + background-color: rgba(0, 0, 0, 0); + text-transform: uppercase; + box-shadow: none; + + background-position: center; + transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; + + &:hover { + background: $secondary-dark-transparent radial-gradient(circle, transparent 1%, $secondary-dark-transparent 1%) center/15000%; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } + + &:active { + background-color: $secondary-light; + background-size: 100%; + box-shadow: none; + transition: background 0s, box-shadow 0s; + } + + &:disabled { + background: rgba(0,0,0,0); + color: $secondary-text-disabled; + box-shadow: none; + transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; + } +} + .backdrop { background-color: $secondary; color: $secondary-text; @@ -29,7 +102,7 @@ body { align-items: center; .menu-icon { - background-image: url("/ressources/menu.png"); + background-image: url("./ressources/menu.png"); background-position: center; background-repeat: no-repeat; width: 36px; @@ -46,7 +119,7 @@ body { } &.open { - background-image: url("/ressources/menu_close.png"); + background-image: url("./ressources/menu_close.png"); } } @@ -208,6 +281,47 @@ body { .server-entries { overflow-y: auto; min-height: 0; + + .server { + font-size: 1.25rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + background-color: $primary-light; + padding: 0.5rem; + margin-bottom: 0.25rem; + border-style: none; + border-radius: 8px; + + .server-name { + font-weight: bold; + flex-grow: 100; + } + + .player-count { + + } + + .player-count-static { + margin-left: 0.25rem; + } + + .join-btn { + margin-left: 0.5rem; + flex-shrink: 1; + flex-grow: 1; + flex-basis: 15%; + } + } + } + + .button-container { + display: flex; + flex-direction: row-reverse; + margin-top: 1rem; + margin-right: 0.25rem; + min-height: 2.5rem; } } diff --git a/WebInterface/NodeJSServer/src/style/partials/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss index a19a2ab..91bc2d3 100644 --- a/WebInterface/NodeJSServer/src/style/partials/_colors.scss +++ b/WebInterface/NodeJSServer/src/style/partials/_colors.scss @@ -8,6 +8,8 @@ $secondary: #546e7a; $secondary-disabled: #546e7a61; $secondary-half-dark: #3e5864; $secondary-dark: #29434e; +$secondary-dark-transparent: #29434e61; $secondary-light: #819ca9; +$secondary-light-transparent: #819ca961; $secondary-text: #ffffff; $secondary-text-disabled: #ffffff61; |