From 31c91c54ad57d307fe542c6edf7014f00ea6959f Mon Sep 17 00:00:00 2001
From: Julius <trivernis@gmail.com>
Date: Fri, 17 May 2019 11:28:21 +0200
Subject: [PATCH] Frontend fixes

- added bingo help command
- added bingo ping command
---
 CHANGELOG.md                             |  2 +
 public/javascripts/bingo-web.js          | 61 ++++++++++++++++++++----
 public/stylesheets/sass/bingo/style.sass |  2 +-
 3 files changed, 56 insertions(+), 9 deletions(-)

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<number>}
+ */
+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(`
+            <b>Commands: </b><br>
+            /help - shows this help <br>
+            /hideinfo - hides all info messages <br>
+            /showinfo - shows all info messages <br>
+            /ping - shows the current ping <br>
+            `);
+            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<void>}
@@ -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