diff --git a/CHANGELOG.md b/CHANGELOG.md index 365161b..c2aa5f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - kick function for bingo - grid size input - bingo status bar +- bingo chat commands ## Changed @@ -47,3 +48,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - mobile layout - code style issues - Bingo button not shown on refresh +- bingo chat style (images too large) diff --git a/public/javascripts/bingo-web.js b/public/javascripts/bingo-web.js index e940383..47d04a9 100644 --- a/public/javascripts/bingo-web.js +++ b/public/javascripts/bingo-web.js @@ -55,6 +55,20 @@ async function submitUsername() { } } +/** + * Function that displays the ping in the console. + * @returns {Promise} + */ +async function ping() { + let start = new Date().getTime(); + let response = await postGraphqlQuery(` + query { + time + }`); + console.log(`Ping: ${(new Date().getTime()) - start} ms`); + return (new Date().getTime()) - start; +} + /** * TODO: real join logic */ @@ -135,6 +149,43 @@ async function kickPlayer(pid) { } } +/** + * Executes a command + * @param message {String} - the message + */ +async function executeCommand(message) { + function reply(content) { + addChatMessage({content: content, htmlContent: content, type: 'INFO'}); + } + let jsStyle = document.querySelector('#js-style'); + message = message.replace(/\s/g, ''); + switch(message) { + case '/help': + reply(` + Commands:
+ /help - shows this help
+ /hideinfo - hides all info messages
+ /showinfo - shows all info messages
+ /ping - shows the current ping
+ `); + break; + case '/hideinfo': + jsStyle.innerHTML = '.chatMessage[msg-type="INFO"] {display: none}'; + break; + case '/showinfo': + jsStyle.innerHTML = '.chatMessage[msg-type="INFO"] {}'; + break; + case '/ping': + reply(`Ping: ${await ping()} ms`); + break; + default: + reply('Unknown command'); + break; + } + let chatContent = document.querySelector('#chat-content'); + chatContent.scrollTop = chatContent.scrollHeight; +} + /** * Sends a message to the chat * @returns {Promise} @@ -144,14 +195,8 @@ async function sendChatMessage() { if (messageInput.value && messageInput.value.length > 0) { let message = messageInput.value; messageInput.value = ''; - if (message === '/hideinfo' || message === '/showinfo') { - let jsStyle = document.querySelector('#js-style'); - if (message === '/hideinfo') - jsStyle.innerHTML = '.chatMessage[msg-type="INFO"] {display: none}'; - else - jsStyle.innerHTML = '.chatMessage[msg-type="INFO"] {}'; - let chatContent = document.querySelector('#chat-content'); - chatContent.scrollTop = chatContent.scrollHeight; + if (/^\/\.*/g.test(message)) { + await executeCommand(message); } else { let response = await postGraphqlQuery(` mutation($lobbyId:ID!, $message:String!){ diff --git a/public/stylesheets/sass/bingo/style.sass b/public/stylesheets/sass/bingo/style.sass index 1ee72a7..213eae5 100644 --- a/public/stylesheets/sass/bingo/style.sass +++ b/public/stylesheets/sass/bingo/style.sass @@ -68,7 +68,7 @@ color: $inactive img - width: 100% + max-width: 100% height: auto border-radius: 0.2em