Skip to content

Commit f734e5c

Browse files
CarsonBurkeCarsonBurke
authored
Merge pull request #35 from shanemadden/formatting
fix: Re-apply reverted formatting improvement commits
2 parents 63c6352 + a9e5438 commit f734e5c

File tree

4 files changed

+99
-114
lines changed

4 files changed

+99
-114
lines changed

‎public/style.css‎

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ button:active {
5353
main {
5454
height: 100vh;
5555
display: flex;
56-
flex-direction: column;
56+
flex-direction: row;
5757
align-items: center;
5858
justify-content: center;
5959
}
@@ -63,8 +63,7 @@ main {
6363
background: #222;
6464
border-radius: var(--size-xs);
6565
margin: var(--size-sm);
66-
padding: var(--size-md);
67-
padding-right: var(--size-xs);
66+
padding: var(--size-md) var(--size-sm);
6867
display: flex;
6968
flex-direction: column;
7069
gap: var(--size-md);
@@ -96,41 +95,24 @@ main {
9695
.server {
9796
display: flex;
9897
align-items: center;
98+
gap: 10px;
9999
}
100100

101101
.server a {
102102
flex-grow: 1;
103103
}
104104

105-
.community-card {
106-
height: 320px;
107-
right: 0;
108-
bottom: 0;
109-
position: fixed;
110-
}
111-
112-
.comm-container {
113-
overflow: hidden;
114-
overflow-y: scroll;
115-
}
116-
117-
.comm-page {
118-
display: block;
119-
align-items: center;
120-
margin: 10px;
121-
}
122-
123-
.comm-page-buttom {
124-
width: 100%;
125-
}
126-
127105
.status-circle {
128106
cursor: pointer;
129107
width: 10px;
130108
height: 10px;
131109
border-radius: 50%;
132-
margin-left: 10px;
133110
display: inline-block;
134111
box-sizing: border-box;
135112
}
136113

114+
.community-section {
115+
position: absolute;
116+
bottom: 10px;
117+
right: 10px;
118+
}

‎src/serverStatus.ts‎

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,58 @@
11
/**
22
* This script is used to display the status of a server by changing the color of an element.
33
*/
4-
((document) => {
5-
const setLoading = (elem: HTMLElement) => {
6-
elem.style.backgroundColor = 'transparent';
7-
elem.style.border = '2px solid gold';
8-
elem.setAttribute('title', 'Loading...');
9-
};
10-
11-
const setStatus = (elem: HTMLElement, color: string, title: string) => {
12-
elem.style.border = 'none';
13-
elem.style.backgroundColor = color;
14-
elem.setAttribute('title', title);
15-
};
16-
17-
document.addEventListener('DOMContentLoaded', () => {
18-
const statusIcons = document.querySelectorAll('[data-api]') as NodeListOf<HTMLElement>;
19-
20-
statusIcons.forEach((elem) => {
21-
setStatus(elem, 'silver', 'Click to get server status');
22-
23-
elem.addEventListener('click', async function handleClick() {
24-
elem.removeEventListener('click', handleClick);
25-
elem.style.cursor = 'default';
26-
27-
setLoading(elem);
28-
29-
try {
30-
const host = elem.getAttribute('data-api');
31-
if (!host) {
32-
setStatus(elem, 'red', 'Invalid host');
33-
return;
34-
}
35-
36-
const response = (await Promise.race([
37-
fetch(host),
38-
new Promise((_, reject) => setTimeout(() => reject('Request timed out.'), 10000)),
39-
])) as Response;
40-
41-
if (response.ok && response.status === 200) {
42-
const data = await response.json();
43-
const users = Number(data.users || 0).toLocaleString();
44-
const title = data.ok ? `Online (${users} users)` : 'Online';
45-
setStatus(elem, 'green', title);
46-
} else {
47-
setStatus(elem, 'red', 'Unavailable');
48-
}
49-
} catch (error) {
50-
setStatus(elem, 'red', 'Offline');
51-
}
52-
});
53-
});
4+
5+
const setLoading = (elem: HTMLElement) => {
6+
elem.style.backgroundColor = 'transparent';
7+
elem.style.border = '2px solid gold';
8+
elem.setAttribute('title', 'Loading...');
9+
};
10+
11+
const setStatus = (elem: HTMLElement, color: string, title: string) => {
12+
elem.style.border = 'none';
13+
elem.style.backgroundColor = color;
14+
elem.setAttribute('title', title);
15+
};
16+
17+
document.addEventListener('DOMContentLoaded', async () => {
18+
const statusIcons = document.querySelectorAll('[data-api]') as NodeListOf<HTMLElement>;
19+
20+
statusIcons.forEach((elem) => {
21+
setStatus(elem, 'silver', 'Click to get server status');
22+
23+
handleClick(elem);
24+
25+
elem.addEventListener('click', () => handleClick(elem));
5426
});
55-
})(document);
27+
});
28+
29+
async function handleClick(elem: HTMLElement) {
30+
elem.removeEventListener('click', () => handleClick(elem));
31+
elem.style.cursor = 'default';
32+
33+
setLoading(elem);
34+
35+
try {
36+
const host = elem.getAttribute('data-api');
37+
if (!host) {
38+
setStatus(elem, 'red', 'Invalid host');
39+
return;
40+
}
41+
42+
const response = (await Promise.race([
43+
fetch(host),
44+
new Promise((_, reject) => setTimeout(() => reject('Request timed out.'), 10000)),
45+
])) as Response;
46+
47+
if (response.ok && response.status === 200) {
48+
const data = await response.json();
49+
const users = Number(data.users || 0).toLocaleString();
50+
const title = data.ok ? `Online (${users} users)` : 'Online';
51+
setStatus(elem, 'green', title);
52+
} else {
53+
setStatus(elem, 'red', 'Unavailable');
54+
}
55+
} catch (error) {
56+
setStatus(elem, 'red', 'Offline');
57+
}
58+
}

‎src/utils/utils.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,12 @@ export function getCommunityPages(): { title: string; url: string }[] {
113113
return [
114114
{ title: 'Screeps Wiki', url: 'https://wiki.screepspl.us/index.php/Screeps_Wiki' },
115115
{ title: 'Community Grafana', url: 'https://pandascreeps.com/' },
116-
{ title: 'MarvinMTB vlog', url: 'https://www.youtube.com/playlist?list=PLGlzrjCmziEj7hQZSwcmkXkMXgkQXUQ6C' },
116+
{ title: "MarvinTMB's videos", url: 'https://www.youtube.com/playlist?list=PLGlzrjCmziEj7hQZSwcmkXkMXgkQXUQ6C' },
117117
{
118-
title: 'Attaner vlog',
118+
title: "Atanner's videos",
119119
url: 'https://www.youtube.com/watch?v=N7KMOG8C5vA&list=PLw9di5JwI6p-HUP0yPUxciaEjrsFb2kR2',
120120
},
121-
{ title: 'Muons blog', url: 'https://bencbartlett.com/blog/tag/screeps/' },
122-
{ title: 'Harabis blog', url: 'https://sy-harabi.github.io/' },
121+
{ title: "Muon's blog", url: 'https://bencbartlett.com/blog/tag/screeps/' },
122+
{ title: "Harabi's blog", url: 'https://sy-harabi.github.io/' },
123123
];
124124
}

‎views/index.ejs‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,41 +14,41 @@
1414
<div class="card">
1515
<% // The serverList is passed in from the clientApp %>
1616
<% if(serverList.length===0){ %>
17-
<h1> Could not load Server List</h1>
18-
<% } %>
19-
<% serverList.forEach(section=> { %>
20-
<div class="card-section" data-section="<%= section.name %>">
21-
<% if (section.name.toLowerCase()==='official' ) { %>
22-
<div class="screeps-logo">
23-
<img src="<%= section.logo %>" alt="Screeps Logo" />
24-
</div>
25-
<% } else { %>
26-
<h2>
27-
<%= section.name %>
28-
</h2>
29-
<% } %>
30-
<% section.servers.forEach(server=> { %>
31-
<div class="server">
32-
<a href="<%= server.url %>">
33-
<button>
34-
<%= server.name %>
35-
</button>
36-
</a>
37-
<span class="status-circle" data-api="<%= server.api %>"></span>
17+
<h1> Could not load Server List</h1>
18+
<% } %>
19+
<% serverList.forEach(section=> { %>
20+
<div class="card-section" data-section="<%= section.name %>">
21+
<% if (section.name.toLowerCase()==='official' ) { %>
22+
<div class="screeps-logo">
23+
<img src="<%= section.logo %>" alt="Screeps Logo" />
24+
</div>
25+
<% } else { %>
26+
<h2>
27+
<%= section.name %>
28+
</h2>
29+
<% } %>
30+
<% section.servers.forEach(server=> { %>
31+
<div class="server">
32+
<span class="status-circle" data-api="<%= server.api %>"></span>
33+
<a href="<%= server.url %>">
34+
<button>
35+
<%= server.name %>
36+
</button>
37+
</a>
38+
</div>
39+
<% }) %>
3840
</div>
39-
<% }) %>
40-
</div>
41-
<% }) %>
41+
<% }) %>
4242
</div>
43-
<div class="card community-card">
44-
<% if(communityPages.length===0){ %>
45-
<h1> Could not load Community Content</h1>
46-
<% } else{ %>
47-
<h2>Community Content</h2>
48-
<% } %>
49-
<div class="comm-container">
43+
<div class="card community-section">
44+
<div class="card-section">
45+
<% if(communityPages.length===0){ %>
46+
<h1> Could not load Community Content</h1>
47+
<% } else{ %>
48+
<h2>Community Content</h2>
49+
<% } %>
5050
<% communityPages.forEach(page=> { %>
51-
<div class="comm-page">
51+
<div class="server">
5252
<a href="<%= page.url %>" target="_blank" rel="noopener noreferrer">
5353
<button class="comm-page-buttom">
5454
<%= page.title %>
@@ -57,7 +57,7 @@
5757
</div>
5858
<% }) %>
5959

60-
</div>
60+
</div>
6161
</div>
6262
</main>
6363
<script src="/dist/serverStatus.js"></script>

0 commit comments

Comments
 (0)