tegakituesday/tegakituesday.com
tegakituesday/tegakituesday.com
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve UX while server statuses are loading

Browse source
This commit is contained in:
Elnu 2023-06-22 15:01:07 -07:00
parent a8c0969a71
commit 48ac5a44e2
2 changed files with 38 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
styles/sass/style.scss
View file

@ -175,7 +175,7 @@ a {
padding: 0.25em 0.5em 0.25em 0.5em;
border-radius: 2px;
&:disabled {
&:disabled, &.disabled {
background: gray;
}
}
@ -205,4 +205,12 @@ a {
.icon {
height: 1.5em;
vertical-align: middle;
}
h1 {
text-align: center;
&:first-child {
margin-top: 0;
}
}

50
templates/modal.html.tera
View file

@ -4,13 +4,20 @@
<p>In order to participate in challenges, you must be a member of a participating Discord server.</p>
<h2>Join a participating server</h2>
</div>
<div class="participating">
<h1>Participating servers</h1>
</div>
<div class="servers">
{% for guild in settings.guilds %}
{% if guild.hidden or not guild.invite %}{% continue %}{% endif %}
<div id="{{ guild.id }}" {% if guild.recommended %} class="recommended"{% endif %}>
<img src="https://cdn.discordapp.com/icons/{{ guild.id }}/{{ guild.icon }}.webp?size=96" alt="Server icon">
<div class="name">{{ guild.name }}</div>
<a href="https://discord.gg/{{ guild.invite }}" class="joinButton">Join</a>
<a href="https://discord.gg/{{ guild.invite }}" class="joinButton disabled">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon" style="height: 1em">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
</a>
{% if guild.recommended %}
<div class="label-wrapper">
<div class="label">Recommended</div>
@ -24,8 +31,8 @@
const dialog = document.querySelector("dialog");
// Fetch guilds
let guilds = null;
let is_in_participating_server = null;
const getGuilds = async () => {
let is_in_participating_server = false;
if (guilds === null) {
// Create the guilds dictionary object
guilds = {};
@ -39,12 +46,13 @@ const getGuilds = async () => {
const [id, is_member] = event.data.split(',');
// Add the key-value pair to the guilds dictionary
guilds[id] = is_member === 'true';
const joined = is_member === 'true';
guilds[id] = joined;
if (guilds[id]) {
setJoined(id);
if (joined) {
is_in_participating_server = true;
}
setJoined(id, joined);
});
// Function to block execution until SSE events are done
@ -62,22 +70,17 @@ const getGuilds = async () => {
// Call the function to block execution until SSE events are done
await waitForSSE()
}
return guilds;
return is_in_participating_server;
}
// Show server modal, both for welcome and server list
const showServers = async () => {
dialog.showModal();
// If the user is logged in, load the guild list
// and check if they have joined the available servers
const guilds = await getGuilds();
Object.keys(guilds).forEach(id => {
if (guilds[id]) {
setJoined(id);
}
})
await getGuilds();
};
// Switch Join button to Joined for server
const setJoined = id => {
const setJoined = (id, joined) => {
element = document.getElementById(id);
if (element === null) {
return;
@ -87,12 +90,17 @@ const setJoined = id => {
if (a === null) {
return;
}
const button = document.createElement("button");
button.tagName = "button";
button.className = "joinButton";
button.disabled = true;
button.innerHTML = "Joined"
element.querySelector("a").replaceWith(button);
if (joined) {
const button = document.createElement("button");
button.tagName = "button";
button.className = "joinButton";
button.disabled = true;
button.innerHTML = "Joined"
a.replaceWith(button);
} else {
a.innerHTML = "Join";
a.classList.remove("disabled");
}
}
// Check for welcomed cookie
@ -104,8 +112,7 @@ const loadServers = async () => {
// in case user pressed Join servers button
document.querySelector("dialog .welcome").style.display = "none";
} else {
const guilds = await getGuilds();
if (!is_in_participating_server) {
if (!(await getGuilds())) {
showServers();
}
// Even if already in participating server,
@ -117,6 +124,7 @@ if (welcomed()) {
// TODO: Remove welcome text via cookie check in template?
document.querySelector("dialog .welcome").style.display = "none";
} else {
document.querySelector("dialog .participating").style.display = "none";
// If not welcomed, see if welcome is necessary
loadServers();
}