diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src')
4 files changed, 172 insertions, 37 deletions
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, "&").replace(/</g, "<").replace(/>/g, ">"); 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; |