|
|
|
|
@ -1,66 +1,13 @@
|
|
|
|
|
/* eslint-disable no-unused-vars, no-undef */
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns the value of the url-param 'g'
|
|
|
|
|
* @returns {string}
|
|
|
|
|
*/
|
|
|
|
|
function getLobbyParam() {
|
|
|
|
|
let matches = window.location.href.match(/\??&?g=(\d+)/);
|
|
|
|
|
if (matches)
|
|
|
|
|
return matches[1];
|
|
|
|
|
else
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* REturns the value of the r url param
|
|
|
|
|
* @returns {string}
|
|
|
|
|
*/
|
|
|
|
|
function getRoundParam() {
|
|
|
|
|
let matches = window.location.href.match(/\??&?r=(\d+)/);
|
|
|
|
|
if (matches)
|
|
|
|
|
return matches[1];
|
|
|
|
|
else
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Spawns a notification when the window is inactive (hidden).
|
|
|
|
|
* @param body
|
|
|
|
|
* @param title
|
|
|
|
|
*/
|
|
|
|
|
function spawnNotification(body, title) {
|
|
|
|
|
if (Notification.permission !== 'denied' && document[getHiddenNames().hidden]) {
|
|
|
|
|
let options = {
|
|
|
|
|
body: body,
|
|
|
|
|
icon: '/favicon.ico'
|
|
|
|
|
};
|
|
|
|
|
let n = new Notification(title, options);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Submits the value of the username-input to set the username.
|
|
|
|
|
* @returns {Promise<Boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function submitUsername() {
|
|
|
|
|
let unameInput = document.querySelector('#input-username');
|
|
|
|
|
let username = unameInput.value;
|
|
|
|
|
|
|
|
|
|
if (username.length > 1 && username.length <= 30) {
|
|
|
|
|
return await setUsername(username);
|
|
|
|
|
} else {
|
|
|
|
|
showError('You need to provide a username (min. 2 characters, max. 30)!');
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
class BingoGraphqlHelper {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Sets the username for a user
|
|
|
|
|
* @param username {String} - the username
|
|
|
|
|
* @returns {Promise<boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function setUsername(username) {
|
|
|
|
|
static async setUsername(username) {
|
|
|
|
|
username = username.replace(/^\s+|\s+$/g, '');
|
|
|
|
|
let uname = username.replace(/[\n\t👑🌟]|^\s+|\s+$/gu, '');
|
|
|
|
|
if (uname.length === username.length) {
|
|
|
|
|
@ -80,6 +27,7 @@ async function setUsername(username) {
|
|
|
|
|
showError(response.errors[0].message);
|
|
|
|
|
else
|
|
|
|
|
showError(`Failed to submit username.`);
|
|
|
|
|
|
|
|
|
|
console.error(response);
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
@ -89,38 +37,10 @@ async function setUsername(username) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Joins a lobby or says to create one if none is found
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function joinLobby() {
|
|
|
|
|
if (getLobbyParam()) {
|
|
|
|
|
if (await submitUsername())
|
|
|
|
|
window.location.reload();
|
|
|
|
|
} else {
|
|
|
|
|
showError('No lobby found. Please create one.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Creates a lobby and redirects to the lobby.
|
|
|
|
|
* Creates a lobby via the graphql endpoint
|
|
|
|
|
* @returns {Promise<boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function createLobby() {
|
|
|
|
|
if (await submitUsername()) {
|
|
|
|
|
static async createLobby() {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
mutation {
|
|
|
|
|
bingo {
|
|
|
|
|
@ -139,13 +59,12 @@ async function createLobby() {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Lets the player leave the lobby
|
|
|
|
|
* Leaves a lobby via the graphql endpoint
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function leaveLobby() {
|
|
|
|
|
static async leaveLobby() {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
mutation($lobbyId:ID!){
|
|
|
|
|
bingo {
|
|
|
|
|
@ -164,11 +83,11 @@ async function leaveLobby() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Kicks a player by id.
|
|
|
|
|
* Kicks a player
|
|
|
|
|
* @param pid
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function kickPlayer(pid) {
|
|
|
|
|
static async kickPlayer(pid) {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
mutation ($lobbyId: ID!, $playerId:ID!) {
|
|
|
|
|
bingo {
|
|
|
|
|
@ -189,6 +108,240 @@ async function kickPlayer(pid) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Loads information about the rounds winner and the round stats.
|
|
|
|
|
* @returns {Promise<boolean>}
|
|
|
|
|
*/
|
|
|
|
|
static async loadWinnerInfo() {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
query($lobbyId:ID!) {
|
|
|
|
|
bingo {
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
currentRound {
|
|
|
|
|
status
|
|
|
|
|
winner {
|
|
|
|
|
id
|
|
|
|
|
username
|
|
|
|
|
}
|
|
|
|
|
start
|
|
|
|
|
finish
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let roundInfo = response.data.bingo.lobby.currentRound;
|
|
|
|
|
if (roundInfo.winner)
|
|
|
|
|
displayWinner(roundInfo);
|
|
|
|
|
else
|
|
|
|
|
window.location.reload();
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
console.error(response);
|
|
|
|
|
showError('Failed to get round information');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Loads the lobby wors in the words element via graphql.
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
static async loadLobbyWords() {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
query($lobbyId:ID!){
|
|
|
|
|
bingo {
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
words {
|
|
|
|
|
content
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let wordContainer = document.querySelector('#bingo-words');
|
|
|
|
|
|
|
|
|
|
if (wordContainer)
|
|
|
|
|
wordContainer.innerHTML = `<span class="bingoWord">
|
|
|
|
|
${response.data.bingo.lobby.words.map(x => x.content).join('</span><span class="bingoWord">')}</span>`;
|
|
|
|
|
} else {
|
|
|
|
|
showError('Failed to load words.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Sets the settings of the lobby
|
|
|
|
|
* @param words
|
|
|
|
|
* @param gridSize
|
|
|
|
|
* @returns {Promise<LobbyWrapper.words|*|properties.words|{default, type}|boolean>}
|
|
|
|
|
*/
|
|
|
|
|
static async setLobbySettings(words, gridSize) {
|
|
|
|
|
gridSize = Number(gridSize);
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
mutation ($lobbyId: ID!, $words: [String!]!, $gridSize:Int!) {
|
|
|
|
|
bingo {
|
|
|
|
|
mutateLobby(id: $lobbyId) {
|
|
|
|
|
setWords(words: $words) {
|
|
|
|
|
words {
|
|
|
|
|
content
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setGridSize(gridSize: $gridSize) {
|
|
|
|
|
gridSize
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`, {lobbyId: getLobbyParam(), words: words, gridSize: gridSize});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
return response.data.bingo.mutateLobby.setWords.words;
|
|
|
|
|
} else {
|
|
|
|
|
console.error(response);
|
|
|
|
|
if (response.errors)
|
|
|
|
|
showError(response.errors[0].message);
|
|
|
|
|
else
|
|
|
|
|
showError('Error when submitting lobby settings.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Refreshes the bingo chat
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
static async refreshChat() {
|
|
|
|
|
try {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
query($lobbyId:ID!){
|
|
|
|
|
bingo {
|
|
|
|
|
player {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
messages {
|
|
|
|
|
id
|
|
|
|
|
type
|
|
|
|
|
htmlContent
|
|
|
|
|
content
|
|
|
|
|
author {
|
|
|
|
|
id
|
|
|
|
|
username
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let messages = response.data.bingo.lobby.messages;
|
|
|
|
|
for (let message of messages)
|
|
|
|
|
if (!document.querySelector(`.chatMessage[msg-id="${message.id}"]`))
|
|
|
|
|
addChatMessage(message, response.data.bingo.player.id);
|
|
|
|
|
} else {
|
|
|
|
|
showError('Failed to refresh messages');
|
|
|
|
|
console.error(response);
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
showError('Failed to refresh messages');
|
|
|
|
|
console.error(err);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns the value of the url-param 'g'
|
|
|
|
|
* @returns {string}
|
|
|
|
|
*/
|
|
|
|
|
function getLobbyParam() {
|
|
|
|
|
let matches = window.location.href.match(/\??&?g=(\d+)/);
|
|
|
|
|
if (matches)
|
|
|
|
|
return matches[1];
|
|
|
|
|
else
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Spawns a notification when the window is inactive (hidden).
|
|
|
|
|
* @param body
|
|
|
|
|
* @param title
|
|
|
|
|
*/
|
|
|
|
|
function spawnNotification(body, title) {
|
|
|
|
|
if (Notification.permission !== 'denied' && document[getHiddenNames().hidden]) {
|
|
|
|
|
let options = {
|
|
|
|
|
body: body,
|
|
|
|
|
icon: '/favicon.ico'
|
|
|
|
|
};
|
|
|
|
|
let n = new Notification(title, options);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Submits the value of the username-input to set the username.
|
|
|
|
|
* @returns {Promise<Boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function submitUsername() {
|
|
|
|
|
let unameInput = document.querySelector('#input-username');
|
|
|
|
|
let username = unameInput.value;
|
|
|
|
|
|
|
|
|
|
if (username.length > 1 && username.length <= 30) {
|
|
|
|
|
return await BingoGraphqlHelper.setUsername(username);
|
|
|
|
|
} else {
|
|
|
|
|
showError('You need to provide a username (min. 2 characters, max. 30)!');
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Joins a lobby or says to create one if none is found
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function joinLobby() {
|
|
|
|
|
if (getLobbyParam()) {
|
|
|
|
|
if (await submitUsername())
|
|
|
|
|
window.location.reload();
|
|
|
|
|
} else {
|
|
|
|
|
showError('No lobby found. Please create one.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Creates a lobby and redirects to the lobby.
|
|
|
|
|
* @returns {Promise<boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function createLobby() {
|
|
|
|
|
if (await submitUsername())
|
|
|
|
|
await BingoGraphqlHelper.createLobby();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Lets the player leave the lobby
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function leaveLobby() {
|
|
|
|
|
await BingoGraphqlHelper.leaveLobby();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Kicks a player by id.
|
|
|
|
|
* @param pid
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function kickPlayer(pid) {
|
|
|
|
|
await BingoGraphqlHelper.kickPlayer(pid);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Executes a command
|
|
|
|
|
* @param message {String} - the message
|
|
|
|
|
@ -197,6 +350,7 @@ 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, '');
|
|
|
|
|
let command = /(\/\w+) ?(.*)?/g.exec(message);
|
|
|
|
|
@ -228,7 +382,7 @@ async function executeCommand(message) {
|
|
|
|
|
break;
|
|
|
|
|
case '/username':
|
|
|
|
|
if (command[2]) {
|
|
|
|
|
let uname = await setUsername(command[2]);
|
|
|
|
|
let uname = await BingoGraphqlHelper.setUsername(command[2]);
|
|
|
|
|
reply(`Your username is <b>${uname}</b> now.`);
|
|
|
|
|
} else {
|
|
|
|
|
reply('You need to provide a username');
|
|
|
|
|
@ -252,67 +406,11 @@ async function sendChatMessage() {
|
|
|
|
|
if (messageInput.value && messageInput.value.length > 0) {
|
|
|
|
|
let message = messageInput.value;
|
|
|
|
|
messageInput.value = '';
|
|
|
|
|
if (/^\/\.*/g.test(message)) {
|
|
|
|
|
await executeCommand(message);
|
|
|
|
|
} else {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
mutation($lobbyId:ID!, $message:String!){
|
|
|
|
|
bingo {
|
|
|
|
|
mutateLobby(id:$lobbyId) {
|
|
|
|
|
sendMessage(message:$message) {
|
|
|
|
|
id
|
|
|
|
|
htmlContent
|
|
|
|
|
type
|
|
|
|
|
author {
|
|
|
|
|
username
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {message: message, lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
addChatMessage(response.data.bingo.mutateLobby.sendMessage);
|
|
|
|
|
} else {
|
|
|
|
|
messageInput.value = message;
|
|
|
|
|
console.error(response);
|
|
|
|
|
showError('Error when sending message.');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Sets the words for the lobby
|
|
|
|
|
* @param words
|
|
|
|
|
* @param gridSize
|
|
|
|
|
* @returns {Promise<LobbyWrapper.words|*|properties.words|{default, type}|boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function setLobbySettings(words, gridSize) {
|
|
|
|
|
gridSize = Number(gridSize);
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
mutation ($lobbyId: ID!, $words: [String!]!, $gridSize:Int!) {
|
|
|
|
|
bingo {
|
|
|
|
|
mutateLobby(id: $lobbyId) {
|
|
|
|
|
setWords(words: $words) {
|
|
|
|
|
words {
|
|
|
|
|
content
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setGridSize(gridSize: $gridSize) {
|
|
|
|
|
gridSize
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`, {lobbyId: getLobbyParam(), words: words, gridSize: gridSize});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
return response.data.bingo.mutateLobby.setWords.words;
|
|
|
|
|
} else {
|
|
|
|
|
console.error(response);
|
|
|
|
|
if (response.errors)
|
|
|
|
|
showError(response.errors[0].message);
|
|
|
|
|
if (/^\/\.*/g.test(message))
|
|
|
|
|
await executeCommand(message);
|
|
|
|
|
else
|
|
|
|
|
showError('Error when submitting lobby settings.');
|
|
|
|
|
socket.emit('message', message);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -321,11 +419,13 @@ async function setLobbySettings(words, gridSize) {
|
|
|
|
|
* @returns {Promise<boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function startRound() {
|
|
|
|
|
let roundStart = document.querySelector('#button-round-start');
|
|
|
|
|
let textinput = document.querySelector('#input-bingo-words');
|
|
|
|
|
let words = getLobbyWords();
|
|
|
|
|
if (words.length > 0) {
|
|
|
|
|
roundStart.setAttribute('class', 'pending');
|
|
|
|
|
let gridSize = document.querySelector('#input-grid-size').value || 3;
|
|
|
|
|
let resultWords = await setLobbySettings(words, gridSize);
|
|
|
|
|
let resultWords = await BingoGraphqlHelper.setLobbySettings(words, gridSize);
|
|
|
|
|
if (resultWords) {
|
|
|
|
|
textinput.value = resultWords.map(x => x.content).join('\n');
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
@ -345,6 +445,7 @@ async function startRound() {
|
|
|
|
|
console.error(response);
|
|
|
|
|
showError('Error when starting round.');
|
|
|
|
|
}
|
|
|
|
|
roundStart.setAttribute('class', '');
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error('No words provided.');
|
|
|
|
|
@ -372,31 +473,8 @@ async function submitFieldToggle(wordPanel) {
|
|
|
|
|
let column = Number(wordPanel.getAttribute('b-column'));
|
|
|
|
|
let wordClass = wordPanel.getAttribute('class');
|
|
|
|
|
wordPanel.setAttribute('class', wordClass + ' pending');
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
mutation($lobbyId:ID!, $row:Int!, $column:Int!){
|
|
|
|
|
bingo {
|
|
|
|
|
mutateLobby(id:$lobbyId) {
|
|
|
|
|
toggleGridField(location:{row:$row, column:$column}) {
|
|
|
|
|
submitted
|
|
|
|
|
grid {
|
|
|
|
|
bingo
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam(), row: row, column: column});
|
|
|
|
|
wordPanel.setAttribute('class', wordClass);
|
|
|
|
|
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
wordPanel.setAttribute('b-sub', response.data.bingo.mutateLobby.toggleGridField.submitted);
|
|
|
|
|
if (response.data.bingo.mutateLobby.toggleGridField.grid.bingo)
|
|
|
|
|
document.querySelector('#container-bingo-button').setAttribute('class', '');
|
|
|
|
|
else
|
|
|
|
|
document.querySelector('#container-bingo-button').setAttribute('class', 'hidden');
|
|
|
|
|
} else {
|
|
|
|
|
console.error(response);
|
|
|
|
|
showError('Error when submitting field toggle');
|
|
|
|
|
}
|
|
|
|
|
socket.emit('fieldToggle', {row: row, column: column});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
@ -425,7 +503,7 @@ async function setRoundFinished() {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Submits bingo
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
* @returns {Promise<boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function submitBingo() {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
@ -446,8 +524,7 @@ async function submitBingo() {
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
|
|
|
|
|
if (response.status === 200 && response.data.bingo.mutateLobby.submitBingo) {
|
|
|
|
|
let round = response.data.bingo.mutateLobby.submitBingo;
|
|
|
|
|
displayWinner(round);
|
|
|
|
|
return true;
|
|
|
|
|
} else {
|
|
|
|
|
console.error(response);
|
|
|
|
|
showError('Failed to submit bingo');
|
|
|
|
|
@ -456,10 +533,10 @@ async function submitBingo() {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Displays the winner of the game in a popup.
|
|
|
|
|
* @param roundInfo {Object} - the round object as returned by graphql
|
|
|
|
|
* @param winner {Object} - the round object as returned by graphql
|
|
|
|
|
*/
|
|
|
|
|
function displayWinner(roundInfo) {
|
|
|
|
|
let name = roundInfo.winner.username;
|
|
|
|
|
function displayWinner(winner) {
|
|
|
|
|
let name = winner.username;
|
|
|
|
|
let winnerDiv = document.createElement('div');
|
|
|
|
|
let greyoverDiv = document.createElement('div');
|
|
|
|
|
winnerDiv.setAttribute('class', 'popup');
|
|
|
|
|
@ -506,43 +583,11 @@ async function statusWrap(func) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Loads information about the rounds winner and the round stats.
|
|
|
|
|
* @returns {Promise<boolean>}
|
|
|
|
|
*/
|
|
|
|
|
async function loadWinnerInfo() {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
query($lobbyId:ID!) {
|
|
|
|
|
bingo {
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
currentRound {
|
|
|
|
|
status
|
|
|
|
|
winner {
|
|
|
|
|
id
|
|
|
|
|
username
|
|
|
|
|
}
|
|
|
|
|
start
|
|
|
|
|
finish
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let roundInfo = response.data.bingo.lobby.currentRound;
|
|
|
|
|
if (roundInfo.winner)
|
|
|
|
|
displayWinner(roundInfo);
|
|
|
|
|
else
|
|
|
|
|
window.location.reload();
|
|
|
|
|
} else {
|
|
|
|
|
console.error(response);
|
|
|
|
|
showError('Failed to get round information');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Adds a message to the chat
|
|
|
|
|
* @param messageObject {Object} - the message object returned by graphql
|
|
|
|
|
* @param player {Number} - the id of the player
|
|
|
|
|
* @param [player] {Number} - the id of the player
|
|
|
|
|
*/
|
|
|
|
|
function addChatMessage(messageObject, player) {
|
|
|
|
|
let msgSpan = document.createElement('span');
|
|
|
|
|
@ -558,8 +603,10 @@ function addChatMessage(messageObject, player) {
|
|
|
|
|
msgSpan.innerHTML = `
|
|
|
|
|
<span class="chatMessageContent ${messageObject.type}">${messageObject.htmlContent}</span>`;
|
|
|
|
|
|
|
|
|
|
if (messageObject.author && messageObject.author.id !== player)
|
|
|
|
|
|
|
|
|
|
if (messageObject.type === 'USER' && messageObject.author && messageObject.author.id !== player)
|
|
|
|
|
spawnNotification(messageObject.content, messageObject.author.username);
|
|
|
|
|
|
|
|
|
|
let chatContent = document.querySelector('#chat-content');
|
|
|
|
|
chatContent.appendChild(msgSpan);
|
|
|
|
|
chatContent.scrollTop = chatContent.scrollHeight; // auto-scroll to bottom
|
|
|
|
|
@ -577,231 +624,133 @@ function addPlayer(player, options) {
|
|
|
|
|
|
|
|
|
|
if (options.isAdmin && player.id !== options.admin)
|
|
|
|
|
playerContainer.innerHTML = `<button class="kickPlayerButton" onclick="kickPlayer(${player.id})">⨯</button>`;
|
|
|
|
|
|
|
|
|
|
playerContainer.innerHTML += `<span class="playernameSpan">${player.username}</span>`;
|
|
|
|
|
|
|
|
|
|
if (player.id === options.admin)
|
|
|
|
|
playerContainer.innerHTML += "<span class='adminSpan'> 👑</span>";
|
|
|
|
|
|
|
|
|
|
document.querySelector('#player-list').appendChild(playerContainer);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Refreshes the bingo chat
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
* Returns the current player id
|
|
|
|
|
* @returns {Promise<*>}
|
|
|
|
|
*/
|
|
|
|
|
async function refreshChat() {
|
|
|
|
|
try {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
async function getPlayerInfo() {
|
|
|
|
|
let result = await postGraphqlQuery(`
|
|
|
|
|
query ($lobbyId:ID!) {
|
|
|
|
|
bingo {
|
|
|
|
|
player {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
messages {
|
|
|
|
|
id
|
|
|
|
|
type
|
|
|
|
|
htmlContent
|
|
|
|
|
content
|
|
|
|
|
author {
|
|
|
|
|
id
|
|
|
|
|
username
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let messages = response.data.bingo.lobby.messages;
|
|
|
|
|
for (let message of messages)
|
|
|
|
|
if (!document.querySelector(`.chatMessage[msg-id="${message.id}"]`))
|
|
|
|
|
addChatMessage(message, response.data.bingo.player.id);
|
|
|
|
|
} else {
|
|
|
|
|
showError('Failed to refresh messages');
|
|
|
|
|
console.error(response);
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
showError('Failed to refresh messages');
|
|
|
|
|
console.error(err);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Refreshes the player list
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function refreshPlayers() {
|
|
|
|
|
try {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
query ($lobbyId: ID!) {
|
|
|
|
|
bingo {
|
|
|
|
|
player {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
players {
|
|
|
|
|
id
|
|
|
|
|
username
|
|
|
|
|
wins(lobbyId: $lobbyId)
|
|
|
|
|
}
|
|
|
|
|
admin {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let players = response.data.bingo.lobby.players;
|
|
|
|
|
let adminId = response.data.bingo.lobby.admin.id;
|
|
|
|
|
let isAdmin = response.data.bingo.player.id === adminId;
|
|
|
|
|
for (let player of players)
|
|
|
|
|
if (!document.querySelector(`.playerEntryContainer[b-pid="${player.id}"]`))
|
|
|
|
|
addPlayer(player, {admin: adminId, isAdmin: isAdmin});
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (result.status === 200) {
|
|
|
|
|
let bingoData = result.data.bingo;
|
|
|
|
|
return {
|
|
|
|
|
id: bingoData.player.id,
|
|
|
|
|
username: bingoData.player.username,
|
|
|
|
|
isAdmin: bingoData.lobby.admin.id === bingoData.player.id
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
showError('Failed to refresh players');
|
|
|
|
|
console.error(response);
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
showError('Failed to refresh players');
|
|
|
|
|
console.error(err);
|
|
|
|
|
showError('Failed to fetch player Id');
|
|
|
|
|
console.error(result);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Removes players that are not existent in the player array
|
|
|
|
|
* @param players {Array<Object>} - player id response of graphql
|
|
|
|
|
* Initializes all socket events
|
|
|
|
|
* @param data
|
|
|
|
|
*/
|
|
|
|
|
function removeLeftPlayers(players) {
|
|
|
|
|
for (let playerEntry of document.querySelectorAll('.playerEntryContainer'))
|
|
|
|
|
if (!players.find(x => (x.id === playerEntry.getAttribute('b-pid'))))
|
|
|
|
|
playerEntry.remove();
|
|
|
|
|
}
|
|
|
|
|
function initSocketEvents(data) {
|
|
|
|
|
let playerId = data.id;
|
|
|
|
|
let indicator = document.querySelector('#status-indicator');
|
|
|
|
|
indicator.setAttribute('status', 'error');
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Refreshes if a player-refresh is needed.
|
|
|
|
|
* Removes players that are not in the lobby anyomre.
|
|
|
|
|
* @param players
|
|
|
|
|
*/
|
|
|
|
|
function checkPlayerRefresh(players) {
|
|
|
|
|
let playerRefresh = false;
|
|
|
|
|
removeLeftPlayers(players);
|
|
|
|
|
for (let player of players)
|
|
|
|
|
if (!document.querySelector(`.playerEntryContainer[b-pid="${player.id}"]`))
|
|
|
|
|
playerRefresh = true;
|
|
|
|
|
if (playerRefresh)
|
|
|
|
|
statusWrap(refreshPlayers);
|
|
|
|
|
}
|
|
|
|
|
socket.on('connect', () => {
|
|
|
|
|
indicator.setAttribute('socket-status', 'connected');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Checks if messages need to be refreshed and does it if it needs to.
|
|
|
|
|
* @param messages
|
|
|
|
|
*/
|
|
|
|
|
function checkMessageRefresh(messages) {
|
|
|
|
|
let messageRefresh = false;
|
|
|
|
|
for (let message of messages)
|
|
|
|
|
if (!document.querySelector(`.chatMessage[msg-id="${message.id}"]`))
|
|
|
|
|
messageRefresh = true;
|
|
|
|
|
if (messageRefresh)
|
|
|
|
|
statusWrap(refreshChat);
|
|
|
|
|
}
|
|
|
|
|
socket.on('reconnect', async () => {
|
|
|
|
|
indicator.setAttribute('socket-status', 'connected');
|
|
|
|
|
await BingoGraphqlHelper.refreshChat();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* refreshes the lobby and calls itself with a timeout
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
*/
|
|
|
|
|
async function refreshLobby() {
|
|
|
|
|
try {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
query($lobbyId:ID!){
|
|
|
|
|
bingo {
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
players {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
messages {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
currentRound {
|
|
|
|
|
id
|
|
|
|
|
status
|
|
|
|
|
}
|
|
|
|
|
words {
|
|
|
|
|
content
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let {players, messages, currentRound} = response.data.bingo.lobby;
|
|
|
|
|
checkPlayerRefresh(players);
|
|
|
|
|
checkMessageRefresh(messages);
|
|
|
|
|
let wordContainer = document.querySelector('#bingo-words');
|
|
|
|
|
socket.on('disconnect', () => {
|
|
|
|
|
indicator.setAttribute('socket-status', 'disconnected');
|
|
|
|
|
showError('Disconnected from socket!');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (wordContainer)
|
|
|
|
|
wordContainer.innerHTML = `<span class="bingoWord">
|
|
|
|
|
${response.data.bingo.lobby.words.map(x => x.content).join('</span><span class="bingoWord">')}</span>`;
|
|
|
|
|
socket.on('reconnecting', () => {
|
|
|
|
|
indicator.setAttribute('socket-status', 'reconnecting');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (currentRound && currentRound.status === 'ACTIVE' && Number(currentRound.id) !== Number(getRoundParam())) {
|
|
|
|
|
insertParam('r', currentRound.id);
|
|
|
|
|
spawnNotification('The round started!', 'Bingo');
|
|
|
|
|
}
|
|
|
|
|
socket.on('error', (error) => {
|
|
|
|
|
showError(`Socket Error: ${JSON.stringify(error)}`);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
socket.on('message', (msg) => {
|
|
|
|
|
addChatMessage(msg, playerId);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
socket.on('statusChange', (status, winner) => {
|
|
|
|
|
if (status === 'FINISHED' && winner) {
|
|
|
|
|
if (document.querySelector('#container-bingo-round'))
|
|
|
|
|
displayWinner(winner);
|
|
|
|
|
} else {
|
|
|
|
|
showError('Failed to refresh lobby');
|
|
|
|
|
console.error(response);
|
|
|
|
|
window.location.reload();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
socket.on('playerJoin', (playerObject) => {
|
|
|
|
|
addPlayer(playerObject, data);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
socket.on('playerLeave', (playerId) => {
|
|
|
|
|
document.querySelector(`.playerEntryContainer[b-pid='${playerId}']`).remove();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
socket.on('usernameChange', (playerObject) => {
|
|
|
|
|
document.querySelector(`.playerEntryContainer[b-pid='${playerObject.id}'] .playerNameSpan`).innerText = playerObject.username;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
socket.on('wordsChange', async () => {
|
|
|
|
|
try {
|
|
|
|
|
await BingoGraphqlHelper.loadLobbyWords();
|
|
|
|
|
} catch (err) {
|
|
|
|
|
showError('Failed to refresh lobby');
|
|
|
|
|
console.error(err);
|
|
|
|
|
} finally {
|
|
|
|
|
setTimeout(refreshLobby, 1000);
|
|
|
|
|
showError('Failed to load new lobby words.');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
socket.on('fieldChange', (field) => {
|
|
|
|
|
let wordPanel = document.querySelector(`.bingoWordPanel[b-row='${field.row}'][b-column='${field.column}']`);
|
|
|
|
|
wordPanel.setAttribute('b-sub', field.submitted);
|
|
|
|
|
wordPanel.setAttribute('class', 'bingoWordPanel');
|
|
|
|
|
if (field.bingo)
|
|
|
|
|
document.querySelector('#container-bingo-button').setAttribute('class', '');
|
|
|
|
|
else
|
|
|
|
|
document.querySelector('#container-bingo-button').setAttribute('class', 'hidden');
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Checks the status of the lobby and the current round.
|
|
|
|
|
* @returns {Promise<void>}
|
|
|
|
|
* Initializes the lobby refresh with sockets or graphql
|
|
|
|
|
*/
|
|
|
|
|
async function refreshRound() {
|
|
|
|
|
let roundOver = false;
|
|
|
|
|
try {
|
|
|
|
|
let response = await postGraphqlQuery(`
|
|
|
|
|
query($lobbyId:ID!) {
|
|
|
|
|
bingo {
|
|
|
|
|
lobby(id:$lobbyId) {
|
|
|
|
|
players {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
messages {
|
|
|
|
|
id
|
|
|
|
|
}
|
|
|
|
|
currentRound {
|
|
|
|
|
id
|
|
|
|
|
status
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}`, {lobbyId: getLobbyParam()});
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let {players, messages, currentRound} = response.data.bingo.lobby;
|
|
|
|
|
|
|
|
|
|
checkPlayerRefresh(players);
|
|
|
|
|
checkMessageRefresh(messages);
|
|
|
|
|
if (!currentRound || currentRound.status === "FINISHED") {
|
|
|
|
|
roundOver = true;
|
|
|
|
|
await loadWinnerInfo();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
showError('Failed to refresh round');
|
|
|
|
|
console.error(response);
|
|
|
|
|
}
|
|
|
|
|
} catch (err) {
|
|
|
|
|
showError('Failed to refresh round');
|
|
|
|
|
console.error(err);
|
|
|
|
|
} finally {
|
|
|
|
|
if (!roundOver)
|
|
|
|
|
setTimeout(refreshRound, 1000);
|
|
|
|
|
}
|
|
|
|
|
function initRefresh() {
|
|
|
|
|
getPlayerInfo().then((data) => {
|
|
|
|
|
socket = new SimpleSocket(`/bingo/${getLobbyParam()}`, {playerId: data.id});
|
|
|
|
|
initSocketEvents(data);
|
|
|
|
|
});
|
|
|
|
|
let chatContent = document.querySelector('#chat-content');
|
|
|
|
|
chatContent.scrollTop = chatContent.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener("unhandledrejection", function (promiseRejectionEvent) {
|
|
|
|
|
@ -812,10 +761,10 @@ window.addEventListener("unhandledrejection", function (promiseRejectionEvent) {
|
|
|
|
|
// prevent ctrl + s
|
|
|
|
|
window.addEventListener("keydown", async (e) => {
|
|
|
|
|
if (e.which === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
if (document.querySelector('#input-bingo-words')) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
let gridSize = document.querySelector('#input-grid-size').value || 3;
|
|
|
|
|
await statusWrap(async () => await setLobbySettings(getLobbyWords(), gridSize));
|
|
|
|
|
await statusWrap(async () => await BingoGraphqlHelper.setLobbySettings(getLobbyWords(), gridSize));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, false);
|
|
|
|
|
@ -830,3 +779,5 @@ window.onload = async () => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let socket = null;
|
|
|
|
|
|
Trivernis
6 years ago
committed by
GitHub