diff options
Diffstat (limited to 'WebInterface/NodeJSServer/src')
8 files changed, 103 insertions, 42 deletions
diff --git a/WebInterface/NodeJSServer/src/modules/playModule.js b/WebInterface/NodeJSServer/src/modules/playModule.js new file mode 100644 index 0000000..06304cc --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/playModule.js @@ -0,0 +1,44 @@ +/** + * Handles ingame networking; + */ +export default class GameClient { + /** + * Defines basic attributes + * @param {string} user The username of the player + * @param {HubConnection} connection Already established connection to the + * server + */ + constructor(user, connection) { + this.user = user; + this.connection = connection; + } + + /** + * Registers chat html component + * @param {string} chatId Id of chat component + */ + registerChat(chatId) { + this.chat = document.getElementById(chatId); + this.messageList = this.chat.querySelector('#message-list'); + this.messageInput = this.chat.querySelector('#input-message'); + this.messageSend = this.chat.querySelector('#send-message'); + + this.connection.on('ReceiveMessage', (user, message) => { + let msg = message.replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>'); + let encodedMsg = user + ' sagt: ' + msg; + + let messageP = document.createElement('p'); + messageP.class = 'message'; + messageP.textContent = encodedMsg; + + this.messageList.appendChild(messageP); + }); + + this.messageSend.addEventListener('click', () => { + let message = this.messageInput.value; + this.connection.invoke('SendMessage', this.user, message); + }); + } +} diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js index 1bc9822..2f712b5 100644 --- a/WebInterface/NodeJSServer/src/modules/server-client.js +++ b/WebInterface/NodeJSServer/src/modules/server-client.js @@ -34,8 +34,6 @@ export default class ServerClient { this.refreshing = false; this.serverListing = new ServerListing(serverListingId, notifications); - - this.messageHandling(); } /** @@ -79,24 +77,11 @@ export default class ServerClient { */ sendLogin(group, password, username, callback) { this.connection.on('LoginResponse', (result) => { - callback(result, this); + callback(result, this.connection); this.connection.off('LoginResponse'); }); this.connection.invoke('Login', group, username, password); } - - /** - * Registers message handling - */ - messageHandling() { - this.connection.on('ReceiveMessage', (user, message) => { - let msg = message.replace(/&/g, '&') - .replace(/</g, '<') - .replace(/>/g, '>'); - let encodedMsg = user + ' sagt: ' + msg; - console.log(encodedMsg); // TODO: REMOVE, JUST FOR DEBUGGING - }); - } } /** @@ -104,5 +89,5 @@ export default class ServerClient { * @callback ServerClient~loginCallback * @param {number} result 0: Success, 1: PasswordError, 2:UsernameTaken, * 3:Unknown Error - * @param {ServerClient} client ServerClient object, that handled the login + * @param {ConnectionHub} connection Connection to the server */ diff --git a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js index d2a88c4..0bfd70d 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/login-modal.js +++ b/WebInterface/NodeJSServer/src/modules/ui/login-modal.js @@ -86,10 +86,10 @@ export default class LoginModal extends Modal { */ registerLoginBtn() { let eventListener; - let loginCallBack = (result, client) => { + let loginCallBack = (result, connection) => { console.log(result); if (result == 0) { - this.redirectToPlay(client); + this.redirectToPlay(connection); this.close(); } else if (result == 1) { this.invalid('Name'); @@ -107,11 +107,11 @@ export default class LoginModal extends Modal { eventListener = () => { this.invalid(); // Remove 'invalid' messages this.loginButton.removeEventListener('click', eventListener); - let userName = this.nameInput.value; + this.userName = this.nameInput.value; this.passwordInput.value.getHash() .then((result) => { this.serverClient.sendLogin(this.serverName, result, - userName, loginCallBack); + this.userName, loginCallBack); }); }; this.loginButton.addEventListener('click', eventListener); @@ -145,17 +145,18 @@ export default class LoginModal extends Modal { /** * Loads play site - * @param {ServerClient} serverClient Main server client + * @param {HubConnection} connection Connection to the server */ - redirectToPlay(serverClient) { + redirectToPlay(connection) { window.history.pushState('object or string', 'Game Page', 'play#game=' + this.serverName); fetch('play').then((response) => { response.text().then((htmlString) => { htmlString = htmlString.replace(/\.\.\//g, './'); htmlString = htmlString.replace(/<script src=".*"><\/script>/, ''); + console.log(htmlString); htmlString = htmlString.replace( - /<remove_if_redirected>.*?<\/remove_if_redirected>/g, ''); + /<remove_if_redirected>((.)|\n)*?<\/remove_if_redirected>/g, ''); document.open(); document.write(htmlString); document.close(); @@ -164,7 +165,11 @@ export default class LoginModal extends Modal { ui.refresh(); } - // import() + import(/* webpackChunkName: "/playModule" */ '../playModule') + .then(({default: GameClient}) => { + let gameClient = new GameClient(this.userName, connection); + gameClient.registerChat('chat'); + }); }); }); } diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js index ace8a0e..78ca323 100644 --- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js +++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js @@ -30,8 +30,7 @@ export default class ServerListing { addElements(array, serverClient, ui) { for (let server of array) { const name = server['name']; - const playerList = server['users']; - const playerAmount = playerList.length; + const playerAmount = server['userCount']; let serverDiv = document.createElement('div'); let nameSpan = document.createElement('span'); diff --git a/WebInterface/NodeJSServer/src/play-module.js b/WebInterface/NodeJSServer/src/play-module.js deleted file mode 100644 index 3781329..0000000 --- a/WebInterface/NodeJSServer/src/play-module.js +++ /dev/null @@ -1,15 +0,0 @@ - - -/** - * Handles ingame networking; - */ -export default class GameClient { - /** - * Defines basic attributes - * @param {HubConnection} connection Already established connection to the - * server - */ - constructor(connection) { - this.connection = connection; - } -} diff --git a/WebInterface/NodeJSServer/src/style/partials/_game.scss b/WebInterface/NodeJSServer/src/style/partials/_game.scss new file mode 100644 index 0000000..74b566b --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/_game.scss @@ -0,0 +1,13 @@ +@import './colors'; + +.game-window { + width: calc(100% - 2rem); + height: 100%; + display: flex; + flex-direction: column; + background-color: $secondary-light; + margin: 1rem; + margin-bottom: 2rem; + border-style: none; + border-radius: 8px; +} diff --git a/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss b/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss new file mode 100644 index 0000000..89b63b3 --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/game/_chat.scss @@ -0,0 +1,28 @@ +@import '../colors'; +@import '../btn'; + +.chat { + flex-grow: 1; + display: flex; + flex-direction: column; + + .messages { + flex-grow: 1; + background-color: white; + margin: 0.5rem; + } + + .input-message { + display: flex; + margin: 0.5rem; + + input { + font-size: 2rem; + flex-grow: 1; + } + + .btn { + margin-left: 1rem; + } + } +} diff --git a/WebInterface/NodeJSServer/src/style/play.scss b/WebInterface/NodeJSServer/src/style/play.scss index bfeec6d..7286f74 100644 --- a/WebInterface/NodeJSServer/src/style/play.scss +++ b/WebInterface/NodeJSServer/src/style/play.scss @@ -7,6 +7,8 @@ @import 'partials/front-layer/copyright'; @import 'partials/modal/base'; @import 'partials/modal/login'; +@import 'partials/game'; +@import 'partials/game/chat'; remove_if_redirected { width: 100vw; |