Skip to content

Commit

Permalink
Re-apply reverted commits
Browse files Browse the repository at this point in the history
  • Loading branch information
shanemadden committed Aug 29, 2024
1 parent 63c6352 commit f1faaa0
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 114 deletions.
34 changes: 8 additions & 26 deletions public/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ button:active {
main {
height: 100vh;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: center;
}
Expand All @@ -63,8 +63,7 @@ main {
background: #222;
border-radius: var(--size-xs);
margin: var(--size-sm);
padding: var(--size-md);
padding-right: var(--size-xs);
padding: var(--size-md) var(--size-sm);
display: flex;
flex-direction: column;
gap: var(--size-md);
Expand Down Expand Up @@ -96,41 +95,24 @@ main {
.server {
display: flex;
align-items: center;
gap: 10px;
}

.server a {
flex-grow: 1;
}

.community-card {
height: 320px;
right: 0;
bottom: 0;
position: fixed;
}

.comm-container {
overflow: hidden;
overflow-y: scroll;
}

.comm-page {
display: block;
align-items: center;
margin: 10px;
}

.comm-page-buttom {
width: 100%;
}

.status-circle {
cursor: pointer;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 10px;
display: inline-block;
box-sizing: border-box;
}

.community-section {
position: absolute;
bottom: 10px;
right: 10px;
}
111 changes: 60 additions & 51 deletions src/serverStatus.ts
Original file line number Diff line number Diff line change
@@ -1,55 +1,64 @@
/**
* This script is used to display the status of a server by changing the color of an element.
*/
((document) => {
const setLoading = (elem: HTMLElement) => {
elem.style.backgroundColor = 'transparent';
elem.style.border = '2px solid gold';
elem.setAttribute('title', 'Loading...');
};

const setStatus = (elem: HTMLElement, color: string, title: string) => {
elem.style.border = 'none';
elem.style.backgroundColor = color;
elem.setAttribute('title', title);
};

document.addEventListener('DOMContentLoaded', () => {
const statusIcons = document.querySelectorAll('[data-api]') as NodeListOf<HTMLElement>;

statusIcons.forEach((elem) => {
setStatus(elem, 'silver', 'Click to get server status');

elem.addEventListener('click', async function handleClick() {
elem.removeEventListener('click', handleClick);
elem.style.cursor = 'default';

setLoading(elem);

try {
const host = elem.getAttribute('data-api');
if (!host) {
setStatus(elem, 'red', 'Invalid host');
return;
}

const response = (await Promise.race([
fetch(host),
new Promise((_, reject) => setTimeout(() => reject('Request timed out.'), 10000)),
])) as Response;

if (response.ok && response.status === 200) {
const data = await response.json();
const users = Number(data.users || 0).toLocaleString();
const title = data.ok ? `Online (${users} users)` : 'Online';
setStatus(elem, 'green', title);
} else {
setStatus(elem, 'red', 'Unavailable');
}
} catch (error) {
setStatus(elem, 'red', 'Offline');
}
});
});

const setLoading = (elem: HTMLElement) => {
elem.style.backgroundColor = 'transparent';
elem.style.border = '2px solid gold';
elem.setAttribute('title', 'Loading...');
};

const setStatus = (elem: HTMLElement, color: string, title: string) => {
elem.style.border = 'none';
elem.style.backgroundColor = color;
elem.setAttribute('title', title);
};

document.addEventListener('DOMContentLoaded', async () => {
const statusIcons = document.querySelectorAll('[data-api]') as NodeListOf<HTMLElement>;

statusIcons.forEach((elem) => {
setStatus(elem, 'silver', 'Click to get server status');

handleClick(elem);
sleep(3000);

elem.addEventListener('click', () => handleClick(elem));
});
})(document);
});

async function handleClick(elem: HTMLElement) {
elem.removeEventListener('click', () => handleClick(elem));
elem.style.cursor = 'default';

setLoading(elem);

try {
const host = elem.getAttribute('data-api');
if (!host) {
setStatus(elem, 'red', 'Invalid host');
return;
}

const response = (await Promise.race([
fetch(host),
new Promise((_, reject) => setTimeout(() => reject('Request timed out.'), 10000)),
])) as Response;

if (response.ok && response.status === 200) {
const data = await response.json();
const users = Number(data.users || 0).toLocaleString();
const title = data.ok ? `Online (${users} users)` : 'Online';
setStatus(elem, 'green', title);
} else {
setStatus(elem, 'red', 'Unavailable');
}
} catch (error) {
setStatus(elem, 'red', 'Offline');
}
}

function sleep(ms: number) {
return new Promise<void>(resolve => setTimeout(() => resolve(), ms));
}

8 changes: 4 additions & 4 deletions src/utils/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,12 @@ export function getCommunityPages(): { title: string; url: string }[] {
return [
{ title: 'Screeps Wiki', url: 'https://wiki.screepspl.us/index.php/Screeps_Wiki' },
{ title: 'Community Grafana', url: 'https://pandascreeps.com/' },
{ title: 'MarvinMTB vlog', url: 'https://www.youtube.com/playlist?list=PLGlzrjCmziEj7hQZSwcmkXkMXgkQXUQ6C' },
{ title: "MarvinTMB's videos", url: 'https://www.youtube.com/playlist?list=PLGlzrjCmziEj7hQZSwcmkXkMXgkQXUQ6C' },
{
title: 'Attaner vlog',
title: "Atanner's videos",
url: 'https://www.youtube.com/watch?v=N7KMOG8C5vA&list=PLw9di5JwI6p-HUP0yPUxciaEjrsFb2kR2',
},
{ title: 'Muons blog', url: 'https://bencbartlett.com/blog/tag/screeps/' },
{ title: 'Harabis blog', url: 'https://sy-harabi.github.io/' },
{ title: "Muon's blog", url: 'https://bencbartlett.com/blog/tag/screeps/' },
{ title: "Harabi's blog", url: 'https://sy-harabi.github.io/' },
];
}
66 changes: 33 additions & 33 deletions views/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,41 @@
<div class="card">
<% // The serverList is passed in from the clientApp %>
<% if(serverList.length===0){ %>
<h1> Could not load Server List</h1>
<% } %>
<% serverList.forEach(section=> { %>
<div class="card-section" data-section="<%= section.name %>">
<% if (section.name.toLowerCase()==='official' ) { %>
<div class="screeps-logo">
<img src="<%= section.logo %>" alt="Screeps Logo" />
</div>
<% } else { %>
<h2>
<%= section.name %>
</h2>
<% } %>
<% section.servers.forEach(server=> { %>
<div class="server">
<a href="<%= server.url %>">
<button>
<%= server.name %>
</button>
</a>
<span class="status-circle" data-api="<%= server.api %>"></span>
<h1> Could not load Server List</h1>
<% } %>
<% serverList.forEach(section=> { %>
<div class="card-section" data-section="<%= section.name %>">
<% if (section.name.toLowerCase()==='official' ) { %>
<div class="screeps-logo">
<img src="<%= section.logo %>" alt="Screeps Logo" />
</div>
<% } else { %>
<h2>
<%= section.name %>
</h2>
<% } %>
<% section.servers.forEach(server=> { %>
<div class="server">
<span class="status-circle" data-api="<%= server.api %>"></span>
<a href="<%= server.url %>">
<button>
<%= server.name %>
</button>
</a>
</div>
<% }) %>
</div>
<% }) %>
</div>
<% }) %>
<% }) %>
</div>
<div class="card community-card">
<% if(communityPages.length===0){ %>
<h1> Could not load Community Content</h1>
<% } else{ %>
<h2>Community Content</h2>
<% } %>
<div class="comm-container">
<div class="card community-section">
<div class="card-section">
<% if(communityPages.length===0){ %>
<h1> Could not load Community Content</h1>
<% } else{ %>
<h2>Community Content</h2>
<% } %>
<% communityPages.forEach(page=> { %>
<div class="comm-page">
<div class="server">
<a href="<%= page.url %>" target="_blank" rel="noopener noreferrer">
<button class="comm-page-buttom">
<%= page.title %>
Expand All @@ -57,7 +57,7 @@
</div>
<% }) %>

</div>
</div>
</div>
</main>
<script src="/dist/serverStatus.js"></script>
Expand Down

0 comments on commit f1faaa0

Please sign in to comment.