Small Improvements

gulp/contributors.js

@@ -5,7 +5,7 @@ const nodeFetch = require("node-fetch");
 
 const APILink = "https://api.github.com/repos/tobspr/shapez.io";
 const numOfReqPerPage = 100; // Max is 100, change to something lower if loads are too long
-const personalAccessToken = "<INSERT_YOU_P.A.T_HERE";
+const personalAccessToken = "PUT TOKEN HERE";
 
 const JSONFileLocation = path.join(__dirname, "..", "contributors.json");
 
@@ -156,12 +156,6 @@ async function updateContributors() {
 function gulpTaskContributors($, gulp) {
     gulp.task("contributors.build", cb => tryToUpdateContributors().then(() => cb));
     gulp.task("contributors.build.force", cb => updateContributors().then(() => cb));
-
-    gulp.task("fetch.test", cb => {
-        fetch(APILink)
-            .then(res => console.log(res.headers.get("x-ratelimit-remaining")))
-            .then(cb);
-    });
 }
 
 module.exports = {

src/css/states/credits.scss

@@ -2,6 +2,10 @@
     .container .content {
         text-align: center;
 
+        .tobspr .title {
+            @include S(margin-top, 10px);
+        }
+
         .section {
             @include S(margin-top, 10px);
             @include S(padding, 5px);
@@ -12,28 +16,18 @@
 
             .title {
                 @include Heading;
+                @include S(margin-bottom, 8px);
+
+                color: #555;
+                @include DarkThemeOverride {
+                    color: #eee;
+                }
             }
 
             .people {
-                .entry {
+                max-height: 0;
-                }
+                overflow: hidden;
-
+                transition: max-height 0.5s ease-out;
-                .flex-entry {
-                    display: flex;
-
-                    .entry {
-                        display: inline-block;
-                        width: min-content;
-                    }
-                }
-            }
-
-            .people-flex {
-                display: flex;
-
-                .entry {
-                    display: flex;
-                }
             }
         }
     }

src/js/states/credits.js

@@ -1,76 +1,61 @@
 import { TextualGameState } from "../core/textual_game_state";
 import { contributors, translators } from "../../../contributors.json";
-const APILink = "https://api.github.com/repos/tobspr/shapez.io"; // Should use THRIDPARY_URLS, but it is really hard to read.
+import { T } from "../translations";
-const numOfReqPerPage = 100; // Max is 100, change to something lower if loads are too long
 
 export class CreditsState extends TextualGameState {
     constructor() {
         super("CreditsState");
-        this.state = "Credits";
     }
 
     getStateHeaderTitle() {
-        return this.state;
+        return T.credits.title;
     }
 
     getMainContentHTML() {
         return `
-            <div class="section"><div class="title">Tobias Springer - Main Programer and Artist</div></div>
+            <div class="section tobspr"><div class="title">${this.linkify(
+                "https://github.com/tobspr",
+                "Tobias Springer"
+            )} - ${T.credits.tobspr}</div></div>
             <div class="special-shout-out section">
-                <div class="title">A Special Thanks To:</div>
+                <button class="title">${T.credits.specialThanks.title}:</button>
                 <div class="people">
-                    <div class="entry">Pepsin - Created the soundtrack</div>
+                    <div class="entry">${this.linkify(
-                    <div class="entry">Sense 101 - Designed the Puzzle DLC's official puzzles</div>
+                        "https://soundcloud.com/pettersumelius",
-                    <div class="entry">SargeanTravis - Created an achievement by whining a lot</div>
+                        "Peppsen"
-                    <div class="entry">Bagel03 - Was an absolute CHAD</div>
+                    )} - ${T.credits.specialThanks.descriptions.peppsen}</div>
-                    <div class="entry">Dengr - Wouldn't tell me what to put here</div>
+                    <div class="entry">Add some other people here (Whoever you think deserves it)</div>
-                    <div class="entry">Block of Emerald - Also wouldn't tell me what to put here</div>
+
                 </div>
             </div>
             <div class="translators section">
-                <div class="title">Translators: </div>
+                <button class="title">Translators:</button>
-                <div class="flex-people">
+                <div class="people">
-                    ${this.getTranslatorsHTML()}
+                    ${this.getGithubHTML(translators)}
                 </div>
             </div>
             <div class="contributors section">
-                <div class="title">Contributors: </div>
+                <button class="title">Contributors:</button>
-                <div class="flex-people">
+                <div class="people">
-                    ${this.getContributorsHTML()}
+                    ${this.getGithubHTML(contributors)}
                 </div>
             </div>
         `;
     }
 
-    getTranslatorsHTML() {
+    linkify(href, text) {
-        let html = "";
+        return `<a href="${href}" target="_blank">${text}</a>`;
-        for (let i = 0; i < translators.length; i++) {
-            html += `
-            <br>
-            <div class="entry">
-                    <a href="${translators[i].username}" target="_blank">${
-                translators[i].username
-            }</a>: <br> ${translators[i].value
-                .map(pr => {
-                    return `<a href=${pr.html_url} target="_blank">${this.getGoodTitle(pr.title)}</a>, `;
-                })
-                .reduce((p, c) => p + c)
-                .slice(0, -2)}
-            </div>
-            `;
-        }
-        return html;
     }
 
-    getContributorsHTML() {
+    getGithubHTML(list) {
         let html = "";
-        for (let i = 0; i < contributors.length; i++) {
+        for (let i = 0; i < list.length; i++) {
             html += `
-            <br>
+            ${i === 0 ? "" : "<br>"}
             <div class="entry">
-                    <a href="${contributors[i].username}" target="_blank">${
+                    ${this.linkify(`https://github.com/${list[i].username}`, list[i].username)}: <br> ${list[
-                contributors[i].username
+                i
-            }</a>: <br> ${contributors[i].value
+            ].value
                 .map(pr => {
                     return `<a href=${pr.html_url} target="_blank">${this.getGoodTitle(pr.title)}</a>, `;
                 })
@@ -89,6 +74,33 @@ export class CreditsState extends TextualGameState {
     }
 
     onEnter() {
-        // this.setPRInnerHTML();
+        // Allow the user to close any section by clicking on the title
+        const buttons = this.htmlElement.querySelectorAll("button.title");
+        buttons.forEach(button => {
+            /** @type {HTMLElement} */
+            //@ts-ignore
+            const people = button.nextElementSibling;
+
+            button.addEventListener("click", e => {
+                if (people.style.maxHeight) {
+                    people.style.maxHeight = null;
+                } else {
+                    people.style.maxHeight = people.scrollHeight + "px";
+                }
+            });
+
+            // Set them to open at the start
+            people.style.maxHeight = people.scrollHeight + "px";
+        });
+
+        // Link stuff
+        const links = this.htmlElement.querySelectorAll("a[href]");
+        links.forEach(link => {
+            this.trackClicks(
+                link,
+                () => this.app.platformWrapper.openExternalLink(link.getAttribute("href")),
+                { preventClick: true }
+            );
+        });
     }
 }

translations/base-en.yaml

@@ -1381,6 +1381,18 @@ about:
 changelog:
     title: Changelog
 
+credits:
+    title: Credits
+    tobspr: Main Programer and Artist
+    specialThanks:
+        title: Special Thanks To
+        descriptions:
+            peppsen: Created the awesome soundtrack
+    translators:
+        title: Translators
+    contributors:
+        title: Contributors
+
 demo:
     features:
         restoringGames: Restoring savegames