diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src')
-rw-r--r-- | WebInterface/NodeJSServer/src/index.js | 33 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/modules/server-client.js | 68 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/modules/ui/modal.js | 39 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/modules/ui/server-creator.js | 7 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/modules/ui/server-listing.js | 42 | ||||
-rw-r--r-- | WebInterface/NodeJSServer/src/style/index.scss | 33 |
6 files changed, 194 insertions, 28 deletions
diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js index f1a0120..01a9ba1 100644 --- a/WebInterface/NodeJSServer/src/index.js +++ b/WebInterface/NodeJSServer/src/index.js @@ -1,6 +1,7 @@ import Backdrop from './modules/ui/backdrop.js'; -import * as signalR from '@aspnet/signalr'; import BannerController from './modules/ui/notification-banner.js'; +import ServerClient from './modules/server-client.js' +import Modal from './modules/ui/modal.js'; // TODO: DEBUGGING let backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); backdrop.register(); @@ -9,30 +10,8 @@ let notifications = new BannerController('notifications', 'banner-info', 'dismiss-banner'); notifications.register(); -const connection = new signalR.HubConnectionBuilder() - .withUrl("http://89.183.117.197:5000/chatHub") - .configureLogging(signalR.LogLevel.Information) - .build(); +let client = new ServerClient('http://89.183.117.197:5000/chatHub', 'server-list', true); +document.getElementById('refresh-button') + .addEventListener('click', client.loadServers.bind(client)); -connection.on('ReceiveMessage', (user, message) => { - let msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); - let encodedMsg = user + " says " + msg; - let li = document.createElement("div"); - li.classList.add('server'); - li.textContent = encodedMsg; - document.getElementById('server-list').appendChild(li); -}); - -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() - .then(() => console.log('Connected')) - .catch(err => console.error(err.toString())); +new Modal('Test Titel'); diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js new file mode 100644 index 0000000..e550bb7 --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/server-client.js @@ -0,0 +1,68 @@ +import * as signalR from '@aspnet/signalr'; +import ServerListing from './ui/server-listing.js'; +import ServerCreator from './ui/server-creator.js'; + +export default class ServerClient { + constructor(url, serverListingId, debug = false) { + const connectionBuilder = new signalR.HubConnectionBuilder() + .withUrl(url) + + if (debug) { + connectionBuilder.configureLogging(signalR.LogLevel.Debug); + } else { + connectionBuilder.configureLogging(signalR.LogLevel.Error); + } + + this.connection = connectionBuilder.build(); + this.connection.start() + .then(() => this.loadServers()) + .catch(() => err => console.error(err.toString())); + + this.refreshing = false; + + this.serverListing = new ServerListing(serverListingId); + } + + loadServers() { + if (this.refreshing) return; + this.connection.on('ListGroups', (groups) => { + console.log(groups) + this.serverListing.flushElements(); + this.serverListing.addElements(groups); + this.connection.off('ListGroups'); + + this.refreshing = false; + }); + + this.connection.invoke('GetGroups') + .catch(err => { + this.refreshing = false; + console.error(err.toString()) + }); + this.refreshing = true; + } + + createServer(){ + + } + + messageHandling(){ + this.connection.on('ReceiveMessage', (user, message) => { + let msg = message.replace(/&/g, "&") + .replace(/</g, "<") + .replace(/>/g, ">"); + let encodedMsg = user + " sagt: " + msg; + }); + } +} + + + +// connection.on('ReceiveMessage', (user, message) => { +// let msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); +// let encodedMsg = user + " says " + msg; +// let li = document.createElement("div"); +// li.classList.add('server'); +// li.textContent = encodedMsg; +// document.getElementById('server-list').appendChild(li); +// }); diff --git a/WebInterface/NodeJSServer/src/modules/ui/modal.js b/WebInterface/NodeJSServer/src/modules/ui/modal.js new file mode 100644 index 0000000..e1aa8a2 --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/modal.js @@ -0,0 +1,39 @@ +export default class Modal { + constructor(titleString) { + let modalBackground = document.createElement('div'); + let modal = document.createElement('div'); + let title = document.createElement('h1'); + let body = document.createElement('div'); + + modalBackground.className = 'modal-container'; + modal.className = 'modal'; + title.className = 'modal-title'; + body.className = 'modal-body' + + title.textContent = titleString; + + modal.appendChild(title); + modalBackground.appendChild(modal); + document.body.appendChild(modalBackground); + + this.bg = modalBackground; + this.modal = modal; + this.title = title; + this.body = body; + + this.registerEvents(); + } + + registerEvents() { + this.bg.addEventListener('click', () => { + this.bg.classList.add('hidden'); + this.bg.addEventListener('transitionend', () => { + document.body.removeChild(this.bg); + }); + }); + } + + setBodyText(text) { + this.body.textContent = text; + } +} diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-creator.js b/WebInterface/NodeJSServer/src/modules/ui/server-creator.js new file mode 100644 index 0000000..4203dfe --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/server-creator.js @@ -0,0 +1,7 @@ +import Modal from './modal.js'; + +export default class ServerCreator extends Modal { + constructor() { + super('Neues Spiel') + } +} diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js new file mode 100644 index 0000000..be66573 --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js @@ -0,0 +1,42 @@ +export default class ServerListing { + constructor(serverListId) { + this.serverListing = document.getElementById(serverListId); + } + + flushElements() { + this.serverListing.innerHTML = ''; + } + + addElements(array) { + for (let server of array) { + const name = server['name']; + const playerList = server['users']; + const playerAmount = playerList.length; + + let serverDiv = document.createElement('div'); + let nameSpan = document.createElement('span'); + let onlineDot = document.createElement('div'); + let playerCountSpan = document.createElement('span'); + let playerCountStaticSpan = document.createElement('span'); + let joinButton = document.createElement('button'); + serverDiv.className = 'server'; + nameSpan.className = 'server-name'; + onlineDot.className = 'player-count-dot'; + playerCountSpan.className = 'player-count'; + playerCountStaticSpan.className = 'player-count-static'; + joinButton.className = 'btn join-btn'; + joinButton.id = 'join'; + nameSpan.textContent = name; + playerCountSpan.textContent = playerAmount; + playerCountStaticSpan.textContent = 'Spieler online'; + joinButton.textContent = 'Beitreten'; + + serverDiv.appendChild(nameSpan); + serverDiv.appendChild(onlineDot); + serverDiv.appendChild(playerCountSpan); + serverDiv.appendChild(playerCountStaticSpan); + serverDiv.appendChild(joinButton); + this.serverListing.appendChild(serverDiv); + } + } +} diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index dc225b0..b5ca607 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -137,7 +137,6 @@ body { margin: 0; padding: 16px; text-align: center; - z-index: 2; flex-grow: 1; @media (min-width: 450px) { @@ -392,3 +391,35 @@ body { text-align: center; } } + +.modal-container { + position:absolute; + top: 0; + width: 100vw; + height: 100vh; + background-color: #000000AA; + display: flex; + opacity: 1; + transition: opacity 200ms ease; + + &.hidden { + opacity: 0; + } + + .modal { + background-color: #546e7a; + margin: auto; + padding: 1rem; + border-style: none; + border-radius: 8px; + box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); + } + + .modal-title { + margin: 1rem; + } + + .modal-body { + margin: 0.25rem; + } +} |