chore: expand credits

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
+public/discord-users.json

fetch-discord-users.js

@@ -0,0 +1,35 @@
+import dotenv from "dotenv";
+import fs from "node:fs/promises";
+
+const config = dotenv.config().parsed;
+
+const fetchUser = async (id) => {
+    const response = await fetch(`https://discord.com/api/v9/users/${id}`, {
+        headers: {
+            Authorization: config.DISCORD_API_KEY,
+        },
+    });
+    return await response.json();
+};
+
+const userIds = [
+    "382561799742160896", // peppidesu
+    "235482863250702336", // itepastra
+    "110878826136907776", // hopop
+    "1429874676590575907", // sarn kast
+    "329656222213079053", // eeveon
+    "1296648831370268756", // gleamingk111
+    "317342307705683968", // elki
+    "86612976529838080", // jar of galaxies
+    "138378536497971200", // mitru
+    "353959847189938196", // rickerd102
+];
+
+Promise.all(
+    userIds.map(async (id) => {
+        const data = await fetchUser(id);
+        return [id, { username: data.username, display: data.global_name }];
+    }),
+).then((data) => {
+    fs.writeFile("./public/discord-users.json", JSON.stringify(Object.fromEntries(data)));
+});

package.json

@@ -5,13 +5,14 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "vite build",
+        "build": "node fetch-discord-users && vite build",
         "preview": "vite preview",
         "sprites": "./build-sprites.sh",
         "deploy": "npm run build && gh-pages -d dist --nojekyll --cname elementipelago.peppidesu.dev"
     },
     "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^6.2.4",
+        "dotenv": "^17.2.3",
         "gh-pages": "^6.3.0",
         "svelte": "^5.48.0",
         "vite": "npm:rolldown-vite@7.3.1"

src/App.svelte

@@ -176,16 +176,17 @@
         <Drawer mount_func={mountElem} mounted_elements={mounted} />
         <Playfield bind:handle_dropped={on_dropped} />
     </div>
-    <Tray
-        handler={(btn) => {
-            openWindow = btn;
-        }}
-    />
     <Toast />
     <Chat show={openWindow == "chat"} onClose={() => (openWindow = "")} />
-    <Settings show={openWindow == "settings"} onClose={() => (openWindow = "")} />
     <Hints show={openWindow == "hints"} onClose={() => (openWindow = "")} />
 {/if}
+<Tray
+    handler={(btn) => {
+        openWindow = btn;
+    }}
+    {connected}
+/>
+<Settings show={openWindow == "settings"} onClose={() => (openWindow = "")} />
 
 <style>
     .game {

src/app.css

@@ -20,10 +20,6 @@ a {
     text-decoration: inherit;
 }
 
-a:hover {
-    color: #535bf2;
-}
-
 body {
     scrollbar-color: #000 rgba(0, 0, 0, 0);
     display: grid;
@@ -32,7 +28,7 @@ body {
     margin: 0;
     overflow: hidden;
 
-    >* {
+    > * {
         grid-area: 1 / 1 / 1 / 1;
     }
 }
@@ -42,7 +38,9 @@ body {
 }
 
 input,
-button {
+button,
+.button {
+    color: black;
     border-radius: 10px;
     border: 3px solid black;
     padding: 0.6em 0.8em;

src/lib/Login.svelte

@@ -60,9 +60,9 @@
     <div class="error">{error}</div>
 </div>
 <div class="download">
-    Download AP world here <a href="https://github.com/peppidesu/elementipelago/releases"
+    <a href="https://github.com/peppidesu/elementipelago/releases"
         ><img src="/sprites/ui/download.png" /></a
-    >
+    >Download AP world here
 </div>
 
 <style>
@@ -77,7 +77,7 @@
     .download {
         position: absolute;
         top: 0;
-        right: 0;
+        left: 0;
         margin: 10px;
         z-index: 10000;
         display: flex;
@@ -87,6 +87,7 @@
         gap: 5px;
         > a {
             padding: 0.25em;
+
             > img {
                 display: block;
                 width: 32px;
@@ -96,14 +97,14 @@
             margin-inline: auto;
             border-radius: 10px;
             border: 3px solid black;
-            padding: 0.4em 0.4em;
+
             font-size: 1em;
             font-weight: 500;
             font-family: inherit;
             background-color: white;
             cursor: pointer;
             transition: border-color 0.25s;
-            margin-left: 0.5em;
+            margin-right: 0.5em;
 
             &:hover {
                 border-color: #646cff;

src/lib/Settings.svelte

@@ -6,6 +6,38 @@
     let music_vol = $state(parseFloat(localStorage.getItem("settings.music_volume") ?? "1.0"));
     let sfx_vol = $state(parseFloat(localStorage.getItem("settings.sfx_volume") ?? "1.0"));
 
+    let users = await (await fetch("/discord-users.json")).json();
+
+    const credits = [
+        {
+            label: "Development & artwork",
+            users: ["382561799742160896", "235482863250702336"],
+        },
+        {
+            label: "Audio samples from freesound.org",
+            lines: [
+                "'Doorbell Pull with pull Store Bell 05.wav' by maisonsonique (CC BY 4.0)",
+                "'Door, Front, Opening, A.wav' by InspectorJ (CC BY 4.0)",
+            ],
+        },
+        {
+            label: "Playtesting",
+            users: ["1429874676590575907", "317342307705683968"],
+        },
+        {
+            label: "Feedback & support",
+            users: [
+                "138378536497971200",
+                "329656222213079053",
+                "110878826136907776",
+                "1296648831370268756",
+                "86612976529838080",
+                "353959847189938196",
+            ],
+            columns: 2,
+        },
+    ];
+
     function onchange() {
         localStorage.setItem("settings.music_volume", music_vol.toString());
     }
@@ -35,14 +67,33 @@
                     {onpointerup}
                 />
             </div>
+            <div style="border-bottom: 3px solid #c0c0c0; padding-block: 10px"></div>
             <h2>Credits</h2>
-            <p>Elementipelago</p>
-            <p>a game by Pepijn & Noa made for Archipelago</p>
-            <!-- <h3>Programming</h3>
-            <h3>Artwork</h3>
-            <h3>Audio</h3>
-            <h3>Support & Playtesting</h3> -->
-            <h3>License</h3>
+            <h1 style="justify-self: center; font-size: 3em">elementipelago</h1>
+            <p>a game made for Archipelago</p>
+            {#each credits as section}
+                <h3>{section.label}</h3>
+                <ul
+                    style="display: grid; grid-template-columns: repeat({section.columns ??
+                        1}, 1fr); justify-self: stretch; align-items: center;"
+                >
+                    {#each section.users as id, i}
+                        <li
+                            style={section.users.length % 2 === 1 && i === section.users.length - 1
+                                ? "grid-column: 1 / -1"
+                                : ""}
+                        >
+                            {users[id].display ?? users[id].username} (@{users[id].username})
+                        </li>
+                    {:else}
+                        {#each section.lines as line}
+                            <li>{line}</li>
+                        {/each}
+                    {/each}
+                </ul>
+            {/each}
+            <div style="border-bottom: 3px solid #c0c0c0; padding-block: 10px"></div>
+            <h2>License</h2>
             <p>
                 Elementipelago is a free and open-source project licensed under the
                 <a
@@ -59,17 +110,23 @@
                     https://creativecommons.org/licenses/by-nc/4.0/
                 </a>.
             </p>
-            <p>
-                SFX include samples sourced from freesound.com, some of which licensed under CC-BY
-                4.0. Authors requiring attribution are listed below, detailed attribution can be
-                found in the README.md of this project:
+            <h2>Links</h2>
+            <p style="display: flex; flex-wrap: wrap; justify-content: center; gap: 10px">
+                <a
+                    class="button"
+                    target="_blank"
+                    href="https://github.com/peppidesu/elementipelago"
+                >
+                    Github
+                </a>
+                <a class="button" target="_blank" href="https://archipelago.gg">Archipelago</a>
+                <a
+                    class="button"
+                    target="_blank"
+                    href="https://discord.com/channels/731205301247803413/1397584087493115934"
+                    >Discord channel</a
+                >
             </p>
-            <ul>
-                <li>maisonsonique</li>
-                <li>InspectorJ</li>
-            </ul>
-            <h3>Special thanks</h3>
-            <p>you &lt;3</p>
         </ul>
     </div>
 </Window>
@@ -78,7 +135,7 @@
     div {
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         width: 100%;
         gap: 10px;
 
@@ -94,6 +151,10 @@
             overflow-y: scroll;
             flex-grow: 1;
             margin: 0;
+            > * {
+                max-width: 1000px;
+                margin-inline: auto;
+            }
             div {
                 margin: 0 auto;
                 display: flex;
@@ -136,7 +197,7 @@
                 }
             }
             ul {
-                list-style: disc;
+                list-style: none;
                 justify-self: center;
                 overflow: auto;
             }