Skip to content

Commit b2b68af

Browse files
FuroYTFuroYT
authored
Discord widget (#107)
* Discord widget * hai * Update index.scss
1 parent 227aaaf commit b2b68af

4 files changed

Lines changed: 156 additions & 43 deletions

File tree

‎src/_style-vars.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
--text-color: white;
88
--scrollbar-color: #302235;
99
--code-background: #130d15;
10+
11+
--discord-dnd: hsl(358.16 calc(1*68.776%)53.529% /1);
12+
--discord-idle: hsl(37.792 calc(1*78.571%)38.431% /1);
13+
--discord-online: hsl(142.703 calc(1*60.656%)35.882% /1);
1014
}
1115

1216
* {

‎src/pages/index.html‎

Lines changed: 92 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -49,52 +49,71 @@
4949
</div>
5050
<div class="container">
5151
<div class="vertical-stack">
52-
<div class="content main-content">
53-
<h1 class="page-logo">
54-
<picture>
55-
<source srcset="root/img/codename-animated.webp" type="image/webp">
56-
<img class="content-logo" src="root/img/codename-animated.gif" alt="Codename Engine">
57-
</picture>
58-
</h1>
59-
<br />
60-
<a href="/api-docs/" class="default-button">API</a>
61-
<a href="/wiki/" class="default-button">Wiki</a>
62-
<a href="/tools/" class="default-button">Tools</a>
63-
<div>
64-
<p>Codename Engine is a fork of Friday Night Funkin'<br>with a focus on softcoding and modding.</p>
65-
</div>
66-
<div>
67-
<h2>Downloads</h2>
68-
</div>
69-
<div class="downloads">
70-
<div class="os-button">
71-
<a href="https://nightly.link/CodenameCrew/CodenameEngine/workflows/windows/main/Codename%20Engine.zip" class="default-button">
72-
<span>
73-
<img class="os-logo" src="root/img/os/windows.svg" alt="Icon for Windows"> Windows
74-
</span>
75-
</a>
52+
<div class="horizontal-stack">
53+
<div class="content main-content">
54+
<h1 class="page-logo">
55+
<picture>
56+
<source srcset="root/img/codename-animated.webp" type="image/webp">
57+
<img class="content-logo" src="root/img/codename-animated.gif" alt="Codename Engine">
58+
</picture>
59+
</h1>
60+
<br />
61+
<a href="/api-docs/" class="default-button">API</a>
62+
<a href="/wiki/" class="default-button">Wiki</a>
63+
<a href="/tools/" class="default-button">Tools</a>
64+
<div>
65+
<p>Codename Engine is a fork of Friday Night Funkin'<br>with a focus on softcoding and modding.</p>
66+
</div>
67+
<div>
68+
<h2>Downloads</h2>
7669
</div>
77-
<div class="os-button">
78-
<a href="https://nightly.link/CodenameCrew/CodenameEngine/workflows/macos/main/Codename%20Engine.zip" class="default-button">
79-
<span>
80-
<img class="os-logo" src="root/img/os/apple.svg" alt="Icon for MacOS"> MacOS
81-
</span>
82-
</a>
70+
<div class="downloads">
71+
<div class="os-button">
72+
<a href="https://nightly.link/CodenameCrew/CodenameEngine/workflows/windows/main/Codename%20Engine.zip" class="default-button">
73+
<span>
74+
<img class="os-logo" src="root/img/os/windows.svg" alt="Icon for Windows"> Windows
75+
</span>
76+
</a>
77+
</div>
78+
<div class="os-button">
79+
<a href="https://nightly.link/CodenameCrew/CodenameEngine/workflows/macos/main/Codename%20Engine.zip" class="default-button">
80+
<span>
81+
<img class="os-logo" src="root/img/os/apple.svg" alt="Icon for MacOS"> MacOS
82+
</span>
83+
</a>
84+
</div>
85+
<div class="os-button">
86+
<a href="https://nightly.link/CodenameCrew/CodenameEngine/workflows/linux/main/Codename%20Engine.zip" class="default-button">
87+
<span>
88+
<img class="os-logo" src="root/img/os/linux.svg" alt="Icon for Linux"> Linux
89+
</span>
90+
</a>
91+
</div>
8392
</div>
84-
<div class="os-button">
85-
<a href="https://nightly.link/CodenameCrew/CodenameEngine/workflows/linux/main/Codename%20Engine.zip" class="default-button">
86-
<span>
87-
<img class="os-logo" src="root/img/os/linux.svg" alt="Icon for Linux"> Linux
88-
</span>
89-
</a>
93+
<div>
94+
<i>Make sure to join our official <img class="icon" src="root/img/icons/discord.svg" alt="Discord"> <a href="https://discord.com/servers/codename-engine-860561967383445535">Discord&nbsp;Server</a>!</i>
95+
<br>
96+
<i>You can contribute to this website by going to the <i class="fa fa-github"></i> <a href="https://github.com/CodenameCrew/codename-website">Website&nbsp;repository</a></i>
97+
<br>
98+
<i>You can find the engine source by going to the <i class="fa fa-github"></i> <a href="https://github.com/CodenameCrew/CodenameEngine">Engine&nbsp;repository</a></i>
9099
</div>
91100
</div>
92-
<div>
93-
<i>Make sure to join our official <img class="icon" src="root/img/icons/discord.svg" alt="Discord"> <a href="https://discord.com/servers/codename-engine-860561967383445535">Discord&nbsp;Server</a>!</i>
94-
<br>
95-
<i>You can contribute to this website by going to the <i class="fa fa-github"></i> <a href="https://github.com/CodenameCrew/codename-website">Website&nbsp;repository</a></i>
96-
<br>
97-
<i>You can find the engine source by going to the <i class="fa fa-github"></i> <a href="https://github.com/CodenameCrew/CodenameEngine">Engine&nbsp;repository</a></i>
101+
102+
<div class="discordWidget">
103+
<div class="discordWidget-header">
104+
<h2 style="text-align: center; margin: 0; transform: translateY(50%);">Discord Server</h2>
105+
</div>
106+
<div class="discordWidget-content">
107+
<span>Members online</span>
108+
<div class="discordWidget-user">
109+
<img style="margin-right: 8px;"; src=""/>
110+
<span></span>
111+
</div>
112+
</div>
113+
<div class="discordWidget-footer">
114+
<span>Want to chat?</span>
115+
<a style="margin-left: 35px;" href="#" class="default-button">Join Server</a>
116+
</div>
98117
</div>
99118
</div>
100119

@@ -196,6 +215,37 @@ <h3>{{ safeish name }}</h3>
196215
</div>
197216
</div>
198217

218+
<script>
219+
const widgetContent = document.querySelector(".discordWidget-content");
220+
const widgetFooter = document.querySelector(".discordWidget-footer");
221+
const userTemplate = document.querySelector(".discordWidget-user");
222+
userTemplate.remove();
223+
fetch("https://discord.com/api/guilds/860561967383445535/widget.json").then(response => response.json()).then(data => {
224+
widgetFooter.querySelector("a").href = data.instant_invite;
225+
for (const member of data.members) {
226+
const user = userTemplate.cloneNode(true);
227+
user.querySelector("img").src = member.avatar_url + "?size=16";
228+
user.querySelector("span").innerText = member.username;
229+
user.querySelector("img").style.border = "solid var(--discord-" + member.status + ") 2px";
230+
widgetContent.appendChild(user);
231+
}
232+
})
233+
234+
function syncHeights() {
235+
const main = document.querySelector('.main-content');
236+
const discord = document.querySelector('.discordWidget');
237+
if (main && discord) {
238+
discord.style.height = `${main.offsetHeight}px`;
239+
const mainStyles = window.getComputedStyle(main);
240+
discord.style.marginTop = mainStyles.marginTop;
241+
}
242+
}
243+
244+
window.addEventListener('load', syncHeights);
245+
window.addEventListener('DOMContentLoaded', syncHeights);
246+
window.addEventListener('resize', syncHeights);
247+
</script>
248+
199249
<script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script>
200250
<script>
201251
kofiWidgetOverlay.draw('codename_engine', {

‎src/pages/index.scss‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@ div.compact {
7474
display: block;
7575
}
7676

77+
.horizontal-stack {
78+
display: block !important;
79+
}
80+
7781
div.vertical-stack {
7882
width: 100%;
7983
}
@@ -168,7 +172,7 @@ div.compact {
168172

169173
&.mods {
170174
flex-grow: 0;
171-
width: 565px;
175+
width: 40%;
172176
//display: table;
173177
padding: 0;
174178
}
@@ -412,6 +416,17 @@ div.compact {
412416
height: min-content;
413417
}
414418

419+
.horizontal-stack {
420+
display: flex;
421+
gap: 20px;
422+
align-items: center;
423+
}
424+
425+
.horizontal-stack div.content {
426+
flex: 2;
427+
margin-bottom: 0 !important;
428+
}
429+
415430
.donators-list {
416431
display: flex;
417432
flex-wrap: wrap;

‎src/style.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,50 @@ header {
305305
}
306306
}
307307

308+
.discordWidget {
309+
background-color: var(--background-secondary-color);
310+
flex: 1;
311+
user-select: none;
312+
border: solid rgba(0, 0, 0, 0.2) 2px !important;
313+
display: flex;
314+
flex-direction: column;
315+
}
316+
317+
.discordWidget-content {
318+
padding: 20px;
319+
overflow-y: scroll;
320+
width: 100%;
321+
background-color: var(--list-background-color);
322+
height: calc(100% - 70px - 65px);
323+
}
324+
325+
.discordWidget-header {
326+
width: 100%;
327+
height: 70px;
328+
border-bottom: solid rgba(0, 0, 0, 0.2) 2px !important;
329+
background-color: var(--background-secondary-color);
330+
}
331+
332+
.discordWidget-user {
333+
width: 100%;
334+
height: 20px;
335+
336+
align-items: center;
337+
margin: 6px 0;
338+
padding-left: 10px;
339+
display: flex;
340+
}
341+
342+
.discordWidget-footer {
343+
display: flex;
344+
justify-content: center;
345+
align-items: center;
346+
padding: 10px;
347+
width: 100%;
348+
height: 65px;
349+
background-color: var(--background-secondary-color);
350+
}
351+
308352
.hljs {
309353
padding: 20px;
310354
text-wrap: wrap;

0 commit comments

Comments
 (0)