From ff4bc953f16002befbd6cf8dd120a96cfeca26fe Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 8 Jun 2022 21:53:40 +0200 Subject: Allow users to leave and join active games. Add "Need replacement" list of games. --- public/join.js | 211 +++++++++++++++++++++++++++++++++------------------------ 1 file changed, 123 insertions(+), 88 deletions(-) (limited to 'public/join.js') diff --git a/public/join.js b/public/join.js index eef3833..2703f97 100644 --- a/public/join.js +++ b/public/join.js @@ -1,157 +1,192 @@ -"use strict"; +"use strict" -let start_status = game.status; -let evtsrc = null; -let timer = 0; +let start_status = game.status +let evtsrc = null +let timer = 0 -function confirm_delete(status) { - let warning = "Are you sure you want to DELETE this game?"; +function confirm_delete() { + let warning = `Are you sure you want to DELETE this game?` if (window.confirm(warning)) - window.location.href = "/delete/" + game.game_id; + window.location.href = "/delete/" + game.game_id } -let blink_title = document.title; -let blink_timer = 0; +function post(url) { + fetch(url, { method: "POST" }) + .then(r => r.text()) + .then(t => window.error.textContent = (t === "SUCCESS") ? "" : t) + .catch(e => window.error.textContent = e) + start_event_source() +} + +function start() { + post(`/start/${game.game_id}`) +} + +function join(role) { + post(`/join/${game.game_id}/${role}`) +} + +function part(role) { + let warning = "Are you sure you want to LEAVE this game?" + if (game.status === 0 || window.confirm(warning)) + post(`/part/${game.game_id}/${role}`) +} + +function kick(role) { + let player = players.find(p => p.role === role) + let warning = `Are you sure you want to KICK player ${player.name} (${role}) from this game?` + if (game.status === 0 || window.confirm(warning)) + post(`/part/${game.game_id}/${role}`) +} + +let blink_title = document.title +let blink_timer = 0 function start_blinker(message) { - let tick = false; + let tick = false if (blink_timer) - stop_blinker(); + stop_blinker() if (!document.hasFocus()) { - document.title = message; + document.title = message blink_timer = setInterval(function () { - document.title = tick ? message : blink_title; - tick = !tick; - }, 1000); + document.title = tick ? message : blink_title + tick = !tick + }, 1000) } } function stop_blinker() { - document.title = blink_title; - clearInterval(blink_timer); - blink_timer = 0; + document.title = blink_title + clearInterval(blink_timer) + blink_timer = 0 } -window.addEventListener("focus", stop_blinker); - -function send(url) { - fetch(url) - .then(r => r.text()) - .then(t => window.error.textContent = (t === "SUCCESS") ? "" : t) - .catch(e => window.error.textContent = e ); - start_event_source(); - return void 0; -} +window.addEventListener("focus", stop_blinker) function start_event_source() { if (!evtsrc || evtsrc.readyState === 2) { - console.log("STARTING EVENT SOURCE"); - evtsrc = new EventSource("/join-events/" + game.game_id); + console.log("STARTING EVENT SOURCE") + evtsrc = new EventSource("/join-events/" + game.game_id) evtsrc.addEventListener("players", function (evt) { - console.log("PLAYERS:", evt.data); - players = JSON.parse(evt.data); - update(); - }); + console.log("PLAYERS:", evt.data) + players = JSON.parse(evt.data) + update() + }) evtsrc.addEventListener("ready", function (evt) { - console.log("READY:", evt.data); - ready = JSON.parse(evt.data); - update(); - }); + console.log("READY:", evt.data) + ready = JSON.parse(evt.data) + update() + }) evtsrc.addEventListener("game", function (evt) { - console.log("GAME:", evt.data); - game = JSON.parse(evt.data); + console.log("GAME:", evt.data) + game = JSON.parse(evt.data) if (game.status > 1) { - clearInterval(timer); - evtsrc.close(); + clearInterval(timer) + evtsrc.close() } - update(); - }); + update() + }) evtsrc.addEventListener("deleted", function (evt) { - console.log("DELETED"); - window.location.href = '/' + game.title_id; - }); + console.log("DELETED") + window.location.href = '/' + game.title_id + }) evtsrc.onerror = function (err) { - window.message.innerHTML = "Disconnected from server..."; - }; + window.message.innerHTML = "Disconnected from server..." + } window.addEventListener('beforeunload', function (evt) { - evtsrc.close(); - }); + evtsrc.close() + }) } } function is_active(player, role) { - return (game.active === role || game.active === "Both" || game.active === "All"); + return (game.active === role || game.active === "Both" || game.active === "All") } function is_solo() { - return players.every(p => p.user_id === players[0].user_id); + return players.every(p => p.user_id === players[0].user_id) } function update() { for (let i = 0; i < roles.length; ++i) { - let role = roles[i]; - let role_id = "role_" + role.replace(/ /g, "_"); + let role = roles[i] + let role_id = "role_" + role.replace(/ /g, "_") if (game.is_random && game.status === 0) - role = "Random " + (i+1); - document.getElementById(role_id + "_name").textContent = role; - let player = players.find(p => p.role === role); - let element = document.getElementById(role_id); + role = "Random " + (i+1) + document.getElementById(role_id + "_name").textContent = role + let player = players.find(p => p.role === role) + let element = document.getElementById(role_id) if (player) { - if (game.status > 0) { - if (is_active(player, role)) - element.classList.add("is_active"); + switch (game.status) { + case 2: + if (player.user_id === user_id) + element.innerHTML = `${player.name}` else - element.classList.remove("is_active"); + element.innerHTML = player.name + break + case 1: + element.classList.toggle("is_active", is_active(player, role)) if (player.user_id === user_id) - element.innerHTML = `Play`; + element.innerHTML = `\u274c ${player.name}` + else if (game.owner_id === user_id) + element.innerHTML = `\u274c ${player.name}` else - element.innerHTML = player.name; - } else { - if ((player.user_id === user_id) || (game.owner_id === user_id)) - element.innerHTML = `\u274c ${player.name}`; + element.innerHTML = player.name + break + case 0: + if (player.user_id === user_id) + element.innerHTML = `\u274c ${player.name}` + else if (game.owner_id === user_id) + element.innerHTML = `\u274c ${player.name}` else - element.innerHTML = player.name; + element.innerHTML = player.name + break } } else { - if (game.status === 0) - element.innerHTML = `Join`; - else - element.innerHTML = "Empty"; + switch (game.status) { + case 2: + element.innerHTML = `Empty` + break + case 1: + case 0: + element.innerHTML = `Join` + break + } } } - let message = window.message; + let message = window.message if (game.status === 0) { if (ready && (game.owner_id === user_id)) - message.innerHTML = "Ready to start..."; + message.innerHTML = "Ready to start..." else if (ready) - message.innerHTML = `Waiting for ${game.owner_name} to start the game...`; + message.innerHTML = `Waiting for ${game.owner_name} to start the game...` else - message.innerHTML = "Waiting for players to join..."; + message.innerHTML = "Waiting for players to join..." } else { - message.innerHTML = `Observe`; + message.innerHTML = `Observe` } if (game.owner_id === user_id) { - window.start_button.disabled = !ready; - window.start_button.classList = (game.status === 0) ? "" : "hide"; - window.delete_button.classList = (game.status === 0 || is_solo()) ? "" : "hide"; + window.start_button.disabled = !ready + window.start_button.classList = (game.status === 0) ? "" : "hide" + window.delete_button.classList = (game.status === 0 || is_solo()) ? "" : "hide" if (game.status === 0 && ready) - start_blinker("READY TO START"); + start_blinker("READY TO START") else - stop_blinker(); + stop_blinker() } else { if (start_status === 0 && game.status === 1) - start_blinker("STARTED"); + start_blinker("STARTED") else - stop_blinker(); + stop_blinker() } } window.onload = function () { - update(); + update() if (game.status < 2) { - start_event_source(); - timer = setInterval(start_event_source, 15000); + start_event_source() + timer = setInterval(start_event_source, 15000) } } -- cgit v1.2.3