Frontend fixes

- added bingo help command
- added bingo ping command
pull/15/head
Julius 6 years ago
parent 73ff02be67
commit 31c91c54ad

@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- kick function for bingo - kick function for bingo
- grid size input - grid size input
- bingo status bar - bingo status bar
- bingo chat commands
## Changed ## Changed
@ -47,3 +48,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- mobile layout - mobile layout
- code style issues - code style issues
- Bingo button not shown on refresh - Bingo button not shown on refresh
- bingo chat style (images too large)

@ -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 * 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 * Sends a message to the chat
* @returns {Promise<void>} * @returns {Promise<void>}
@ -144,14 +195,8 @@ async function sendChatMessage() {
if (messageInput.value && messageInput.value.length > 0) { if (messageInput.value && messageInput.value.length > 0) {
let message = messageInput.value; let message = messageInput.value;
messageInput.value = ''; messageInput.value = '';
if (message === '/hideinfo' || message === '/showinfo') { if (/^\/\.*/g.test(message)) {
let jsStyle = document.querySelector('#js-style'); await executeCommand(message);
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;
} else { } else {
let response = await postGraphqlQuery(` let response = await postGraphqlQuery(`
mutation($lobbyId:ID!, $message:String!){ mutation($lobbyId:ID!, $message:String!){

@ -68,7 +68,7 @@
color: $inactive color: $inactive
img img
width: 100% max-width: 100%
height: auto height: auto
border-radius: 0.2em border-radius: 0.2em

Loading…
Cancel
Save