diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src/modules/ui')
3 files changed, 88 insertions, 0 deletions
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); + } + } +} |