diff options
5 files changed, 81 insertions, 0 deletions
diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js index d1f925d..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 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(); @@ -13,3 +14,4 @@ let client = new ServerClient('http://89.183.117.197:5000/chatHub', 'server-list document.getElementById('refresh-button') .addEventListener('click', client.loadServers.bind(client)); +new Modal('Test Titel'); diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js index 8cf28f6..e550bb7 100644 --- a/WebInterface/NodeJSServer/src/modules/server-client.js +++ b/WebInterface/NodeJSServer/src/modules/server-client.js @@ -1,5 +1,6 @@ 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) { 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/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss index 83f9f0a..b5ca607 100644 --- a/WebInterface/NodeJSServer/src/style/index.scss +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -391,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; + } +} |