|
|
@ -1,3 +1,4 @@
|
|
|
|
|
|
|
|
/* eslint-disable no-unused-vars, no-undef */
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* Returns the value of the url-param 'game'
|
|
|
|
* Returns the value of the url-param 'game'
|
|
|
|
* @returns {string}
|
|
|
|
* @returns {string}
|
|
|
@ -17,7 +18,7 @@ function getGameParam() {
|
|
|
|
async function submitBingoWords() {
|
|
|
|
async function submitBingoWords() {
|
|
|
|
let textContent = document.querySelector('#bingo-textarea').value;
|
|
|
|
let textContent = document.querySelector('#bingo-textarea').value;
|
|
|
|
let words = textContent.replace(/[<>]/g, '').split('\n').filter((el) => {
|
|
|
|
let words = textContent.replace(/[<>]/g, '').split('\n').filter((el) => {
|
|
|
|
return (!!el && el.length > 0) // remove empty strings and non-types from word array
|
|
|
|
return (!!el && el.length > 0); // remove empty strings and non-types from word array
|
|
|
|
});
|
|
|
|
});
|
|
|
|
if (words.length === 0) {
|
|
|
|
if (words.length === 0) {
|
|
|
|
showError('You need to provide at least one word!');
|
|
|
|
showError('You need to provide at least one word!');
|
|
|
@ -43,7 +44,7 @@ async function submitBingoWords() {
|
|
|
|
insertParam('game', gameid);
|
|
|
|
insertParam('game', gameid);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
showError(`Failed to create game. HTTP Error: ${response.status}`);
|
|
|
|
showError(`Failed to create game. HTTP Error: ${response.status}`);
|
|
|
|
console.error(response)
|
|
|
|
console.error(response);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -60,7 +61,7 @@ async function createFollowup() {
|
|
|
|
id
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}`,null,`/graphql?game=${getGameParam()}`);
|
|
|
|
}`, null, `/graphql?game=${getGameParam()}`);
|
|
|
|
if (response.status === 200 && response.data.bingo.createFollowupGame) {
|
|
|
|
if (response.status === 200 && response.data.bingo.createFollowupGame) {
|
|
|
|
let gameid = response.data.bingo.createFollowupGame.id;
|
|
|
|
let gameid = response.data.bingo.createFollowupGame.id;
|
|
|
|
insertParam('game', gameid);
|
|
|
|
insertParam('game', gameid);
|
|
|
@ -88,7 +89,7 @@ async function submitUsername() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}`, {
|
|
|
|
}`, {
|
|
|
|
username: username
|
|
|
|
username: username
|
|
|
|
},`/graphql?game=${getGameParam()}`);
|
|
|
|
}, `/graphql?game=${getGameParam()}`);
|
|
|
|
if (response.status === 200) {
|
|
|
|
if (response.status === 200) {
|
|
|
|
unameInput.value = '';
|
|
|
|
unameInput.value = '';
|
|
|
|
unameInput.placeholder = response.data.username;
|
|
|
|
unameInput.placeholder = response.data.username;
|
|
|
@ -122,22 +123,59 @@ async function submitWord(word) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}`, {
|
|
|
|
}`, {
|
|
|
|
word: word
|
|
|
|
word: word
|
|
|
|
},`/graphql?game=${getGameParam()}`);
|
|
|
|
}, `/graphql?game=${getGameParam()}`);
|
|
|
|
|
|
|
|
|
|
|
|
if (response.status === 200 && response.data.bingo.toggleWord) {
|
|
|
|
if (response.status === 200 && response.data.bingo.toggleWord) {
|
|
|
|
let fieldGrid = response.data.bingo.toggleWord.fieldGrid;
|
|
|
|
let fieldGrid = response.data.bingo.toggleWord.fieldGrid;
|
|
|
|
for (let row of fieldGrid) {
|
|
|
|
for (let row of fieldGrid)
|
|
|
|
for (let field of row) {
|
|
|
|
for (let field of row)
|
|
|
|
document.querySelectorAll(`.bingo-word-panel[b-word="${field.base64Word}"]`).forEach(x => {
|
|
|
|
document.querySelectorAll(`.bingo-word-panel[b-word="${field.base64Word}"]`).forEach(x => {
|
|
|
|
x.setAttribute('b-sub', field.submitted);
|
|
|
|
x.setAttribute('b-sub', field.submitted);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (response.data.bingo.toggleWord.bingo)
|
|
|
|
|
|
|
|
document.querySelector('#bingo-button').setAttribute('class', '');
|
|
|
|
|
|
|
|
else
|
|
|
|
|
|
|
|
document.querySelector('#bingo-button').setAttribute('class', 'hidden');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
showError(`Failed to submit word. HTTP Error: ${response.status}`);
|
|
|
|
|
|
|
|
console.error(response);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
|
|
* Refreshes the bingo grid. Shows the bingo button if a bingo is possible
|
|
|
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
async function refreshBingoGrid() {
|
|
|
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
|
|
|
query {
|
|
|
|
|
|
|
|
bingo {
|
|
|
|
|
|
|
|
activeGrid {
|
|
|
|
|
|
|
|
bingo
|
|
|
|
|
|
|
|
fieldGrid {
|
|
|
|
|
|
|
|
word
|
|
|
|
|
|
|
|
base64Word
|
|
|
|
|
|
|
|
submitted
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (response.data.bingo.toggleWord.bingo) {
|
|
|
|
}`, {}, `/graphql?game=${getGameParam()}`);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (response.status === 200 && response.data.bingo.activeGrid) {
|
|
|
|
|
|
|
|
let fieldGrid = response.data.bingo.activeGrid.fieldGrid;
|
|
|
|
|
|
|
|
for (let row of fieldGrid)
|
|
|
|
|
|
|
|
for (let field of row)
|
|
|
|
|
|
|
|
document.querySelectorAll(`.bingo-word-panel[b-word="${field.base64Word}"]`).forEach(x => {
|
|
|
|
|
|
|
|
x.setAttribute('b-sub', field.submitted);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (response.data.bingo.activeGrid.bingo)
|
|
|
|
document.querySelector('#bingo-button').setAttribute('class', '');
|
|
|
|
document.querySelector('#bingo-button').setAttribute('class', '');
|
|
|
|
} else {
|
|
|
|
else
|
|
|
|
document.querySelector('#bingo-button').setAttribute('class', 'hidden');
|
|
|
|
document.querySelector('#bingo-button').setAttribute('class', 'hidden');
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
showError(`Failed to submit word. HTTP Error: ${response.status}`);
|
|
|
|
showError(`Failed to submit word. HTTP Error: ${response.status}`);
|
|
|
|
console.error(response);
|
|
|
|
console.error(response);
|
|
|
@ -162,12 +200,12 @@ async function submitBingo() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}`,null,`/graphql?game=${getGameParam()}`);
|
|
|
|
}`, null, `/graphql?game=${getGameParam()}`);
|
|
|
|
if (response.status === 200 && response.data.bingo.submitBingo) {
|
|
|
|
if (response.status === 200 && response.data.bingo.submitBingo) {
|
|
|
|
let bingoSession = response.data.bingo.submitBingo;
|
|
|
|
let bingoSession = response.data.bingo.submitBingo;
|
|
|
|
if (bingoSession.bingos.length > 0) {
|
|
|
|
if (bingoSession.bingos.length > 0) {
|
|
|
|
displayWinner(bingoSession.players.find(x => x.id === bingoSession.bingos[0]).username);
|
|
|
|
displayWinner(bingoSession.players.find(x => x.id === bingoSession.bingos[0]).username);
|
|
|
|
clearInterval(refrInterval)
|
|
|
|
clearInterval(refrInterval);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
showError(`Failed to submit Bingo. HTTP Error: ${response.status}`);
|
|
|
|
showError(`Failed to submit Bingo. HTTP Error: ${response.status}`);
|
|
|
@ -181,6 +219,7 @@ async function submitBingo() {
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
async function refresh() {
|
|
|
|
async function refresh() {
|
|
|
|
|
|
|
|
await refreshBingoGrid();
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
query {
|
|
|
|
query {
|
|
|
|
bingo {
|
|
|
|
bingo {
|
|
|
@ -205,7 +244,7 @@ async function refresh() {
|
|
|
|
|
|
|
|
|
|
|
|
if (bingoSession.bingos.length > 0) {
|
|
|
|
if (bingoSession.bingos.length > 0) {
|
|
|
|
displayWinner(bingoSession.players.find(x => x.id === bingoSession.bingos[0]).username);
|
|
|
|
displayWinner(bingoSession.players.find(x => x.id === bingoSession.bingos[0]).username);
|
|
|
|
clearInterval(refrInterval)
|
|
|
|
clearInterval(refrInterval);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
for (let player of bingoSession.players) {
|
|
|
|
for (let player of bingoSession.players) {
|
|
|
|
let foundPlayerDiv = document.querySelector(`.player-container[b-pid='${player.id}'`);
|
|
|
|
let foundPlayerDiv = document.querySelector(`.player-container[b-pid='${player.id}'`);
|
|
|
@ -217,16 +256,16 @@ async function refresh() {
|
|
|
|
document.querySelector('#players-container').appendChild(playerDiv);
|
|
|
|
document.querySelector('#players-container').appendChild(playerDiv);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
let playerNameSpan = foundPlayerDiv.querySelector('.player-name-span');
|
|
|
|
let playerNameSpan = foundPlayerDiv.querySelector('.player-name-span');
|
|
|
|
if (playerNameSpan.innerText !== player.username) {
|
|
|
|
if (playerNameSpan.innerText !== player.username)
|
|
|
|
playerNameSpan.innerText = player.username;
|
|
|
|
playerNameSpan.innerText = player.username;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for (let chatMessage of bingoSession.getMessages)
|
|
|
|
for (let chatMessage of bingoSession.getMessages) {
|
|
|
|
|
|
|
|
if (!document.querySelector(`.chatMessage[msg-id='${chatMessage.id}'`))
|
|
|
|
if (!document.querySelector(`.chatMessage[msg-id='${chatMessage.id}'`))
|
|
|
|
addChatMessage(chatMessage);
|
|
|
|
addChatMessage(chatMessage);
|
|
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
if (response.status === 400)
|
|
|
|
if (response.status === 400)
|
|
|
|
clearInterval(refrInterval);
|
|
|
|
clearInterval(refrInterval);
|
|
|
@ -288,7 +327,7 @@ async function sendChatMessage() {
|
|
|
|
type
|
|
|
|
type
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}`,{message: message}, `/graphql?game=${getGameParam()}`);
|
|
|
|
}`, {message: message}, `/graphql?game=${getGameParam()}`);
|
|
|
|
if (response.status === 200) {
|
|
|
|
if (response.status === 200) {
|
|
|
|
addChatMessage(response.data.bingo.sendChatMessage);
|
|
|
|
addChatMessage(response.data.bingo.sendChatMessage);
|
|
|
|
messageInput.value = '';
|
|
|
|
messageInput.value = '';
|
|
|
@ -307,14 +346,14 @@ function addChatMessage(messageObject) {
|
|
|
|
let msgSpan = document.createElement('span');
|
|
|
|
let msgSpan = document.createElement('span');
|
|
|
|
msgSpan.setAttribute('class', 'chatMessage');
|
|
|
|
msgSpan.setAttribute('class', 'chatMessage');
|
|
|
|
msgSpan.setAttribute('msg-id', messageObject.id);
|
|
|
|
msgSpan.setAttribute('msg-id', messageObject.id);
|
|
|
|
if (messageObject.type === "USER") {
|
|
|
|
if (messageObject.type === "USER")
|
|
|
|
msgSpan.innerHTML = `
|
|
|
|
msgSpan.innerHTML = `
|
|
|
|
<span class="chatUsername">${messageObject.username}:</span>
|
|
|
|
<span class="chatUsername">${messageObject.username}:</span>
|
|
|
|
<span class="chatMessageContent">${messageObject.htmlContent}</span>`;
|
|
|
|
<span class="chatMessageContent">${messageObject.htmlContent}</span>`;
|
|
|
|
} else {
|
|
|
|
else
|
|
|
|
msgSpan.innerHTML = `
|
|
|
|
msgSpan.innerHTML = `
|
|
|
|
<span class="chatMessageContent ${messageObject.type}">${messageObject.htmlContent}</span>`;
|
|
|
|
<span class="chatMessageContent ${messageObject.type}">${messageObject.htmlContent}</span>`;
|
|
|
|
}
|
|
|
|
|
|
|
|
let chatContent = document.querySelector('#chat-content');
|
|
|
|
let chatContent = document.querySelector('#chat-content');
|
|
|
|
chatContent.appendChild(msgSpan);
|
|
|
|
chatContent.appendChild(msgSpan);
|
|
|
|
chatContent.scrollTop = chatContent.scrollHeight; // auto-scroll to bottom
|
|
|
|
chatContent.scrollTop = chatContent.scrollHeight; // auto-scroll to bottom
|
|
|
@ -338,7 +377,7 @@ function toggleChatView() {
|
|
|
|
if (contentContainer.getAttribute('class') === 'displayChat')
|
|
|
|
if (contentContainer.getAttribute('class') === 'displayChat')
|
|
|
|
contentContainer.setAttribute('class', '');
|
|
|
|
contentContainer.setAttribute('class', '');
|
|
|
|
else
|
|
|
|
else
|
|
|
|
contentContainer.setAttribute('class', 'displayChat')
|
|
|
|
contentContainer.setAttribute('class', 'displayChat');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener("unhandledrejection", function(promiseRejectionEvent) {
|
|
|
|
window.addEventListener("unhandledrejection", function(promiseRejectionEvent) {
|
|
|
@ -349,9 +388,9 @@ window.addEventListener("unhandledrejection", function(promiseRejectionEvent) {
|
|
|
|
window.onload = () => {
|
|
|
|
window.onload = () => {
|
|
|
|
if (document.querySelector('#chat-container'))
|
|
|
|
if (document.querySelector('#chat-container'))
|
|
|
|
refresh();
|
|
|
|
refresh();
|
|
|
|
if (window && !document.querySelector('#bingoform')) {
|
|
|
|
if (window && !document.querySelector('#bingoform'))
|
|
|
|
refrInterval = setInterval(refresh, 1000); // global variable to clear
|
|
|
|
refrInterval = setInterval(refresh, 1000); // eslint-disable-line no-undef
|
|
|
|
}
|
|
|
|
|
|
|
|
let gridSizeElem = document.querySelector('#bingo-grid-size');
|
|
|
|
let gridSizeElem = document.querySelector('#bingo-grid-size');
|
|
|
|
document.querySelector('#bingo-grid-y').innerText = gridSizeElem.value;
|
|
|
|
document.querySelector('#bingo-grid-y').innerText = gridSizeElem.value;
|
|
|
|
gridSizeElem.oninput = () => {
|
|
|
|
gridSizeElem.oninput = () => {
|
|
|
|