Major ui changes (#482)

* "discord" -> "Discord", sync most translations * that major settings update you'll like * Finish new settings, add logo to about page * sync & format translations
2026-03-02 03:39:21 +00:00 · 2020-07-23 09:48:23 +03:00
parent db52e0400b
commit 2df1b8d014
41 changed files with 573 additions and 299 deletions
--- a/src/js/changelog.js
+++ b/src/js/changelog.js
@@ -24,7 +24,7 @@ export const CHANGELOG = [
        version: "1.1.19",
        date: "02.07.2020",
        entries: [
-            "There are now notifications every 15 minutes in the demo version to buy the full version (For further details and the reason, check the #surveys channel in the discord)",
+            "There are now notifications every 15 minutes in the demo version to buy the full version (For further details and the reason, check the #surveys channel in the Discord)",
            "I'm still working on the wires update, I hope to release it mid july!",
        ],
    },
@@ -151,7 +151,7 @@ export const CHANGELOG = [
        version: "1.1.10",
        date: "12.06.2020",
        entries: [
-            "There are now linux builds on steam! Please report any issues in the discord!",
+            "There are now linux builds on steam! Please report any issues in the Discord!",
            "Steam cloud saves are now available!",
            "Added and update more translations (Big thank you to all translators!)",
            "Prevent invalid connection if existing underground tunnel entrance exists (by jaysc)",
@@ -221,7 +221,7 @@ export const CHANGELOG = [
        entries: [
            "The official trailer is now ready! Check it out <a href='https://www.youtube.com/watch?v=KyorY1uIqiQ' target='_blank'>here</a>!",
            "The <a href='https://steam.shapez.io' target='_blank'>steam page</a> is now live!",
-            "Experimental linux builds are now available! Please give me feedback on them in the discord",
+            "Experimental linux builds are now available! Please give me feedback on them in the Discord",
            "Allow hovering pinned shapes to enlarge them",
            "Allow deselecting blueprints with right click and 'Q'",
            "Move default key for deleting from 'X' to 'DEL'",
--- a/src/js/profile/application_settings.js
+++ b/src/js/profile/application_settings.js
@@ -13,8 +13,14 @@ import { LANGUAGES } from "../languages";

 const logger = createLogger("application_settings");

-const categoryGame = "game";
-const categoryApp = "app";
+/**
+ * @enum {string}
+ */
+export const enumCategories = {
+    general: "general",
+    userInterface: "userInterface",
+    advanced: "advanced",
+};

 export const uiScales = [
    {
@@ -122,7 +128,7 @@ export const allApplicationSettings = [
        options: Object.keys(LANGUAGES),
        valueGetter: key => key,
        textGetter: key => LANGUAGES[key].name,
-        category: categoryApp,
+        category: enumCategories.general,
        restartRequired: true,
        changeCb: (app, id) => null,
        magicValue: "auto-detect",
@@ -132,7 +138,7 @@ export const allApplicationSettings = [
        options: uiScales.sort((a, b) => a.size - b.size),
        valueGetter: scale => scale.id,
        textGetter: scale => T.settings.labels.uiScale.scales[scale.id],
-        category: categoryApp,
+        category: enumCategories.userInterface,
        restartRequired: false,
        changeCb:
            /**
@@ -143,7 +149,7 @@ export const allApplicationSettings = [

    new BoolSetting(
        "fullscreen",
-        categoryApp,
+        enumCategories.general,
        /**
         * @param {Application} app
         */
@@ -157,7 +163,7 @@ export const allApplicationSettings = [

    new BoolSetting(
        "soundsMuted",
-        categoryApp,
+        enumCategories.general,
        /**
         * @param {Application} app
         */
@@ -165,7 +171,7 @@ export const allApplicationSettings = [
    ),
    new BoolSetting(
        "musicMuted",
-        categoryApp,
+        enumCategories.general,
        /**
         * @param {Application} app
         */
@@ -174,7 +180,7 @@ export const allApplicationSettings = [

    new BoolSetting(
        "enableColorBlindHelper",
-        categoryApp,
+        enumCategories.general,
        /**
         * @param {Application} app
         */
@@ -182,13 +188,13 @@ export const allApplicationSettings = [
    ),

    // GAME
-    new BoolSetting("offerHints", categoryGame, (app, value) => {}),
+    new BoolSetting("offerHints", enumCategories.userInterface, (app, value) => {}),

    new EnumSetting("theme", {
        options: Object.keys(THEMES),
        valueGetter: theme => theme,
        textGetter: theme => T.settings.labels.theme.themes[theme],
-        category: categoryGame,
+        category: enumCategories.userInterface,
        restartRequired: false,
        changeCb:
            /**
@@ -205,7 +211,7 @@ export const allApplicationSettings = [
        options: autosaveIntervals,
        valueGetter: interval => interval.id,
        textGetter: interval => T.settings.labels.autosaveInterval.intervals[interval.id],
-        category: categoryGame,
+        category: enumCategories.advanced,
        restartRequired: false,
        changeCb:
            /**
@@ -218,7 +224,7 @@ export const allApplicationSettings = [
        options: ["60", "100", "120", "144", "165", "250", G_IS_DEV ? "10" : "500"],
        valueGetter: rate => rate,
        textGetter: rate => rate + " Hz",
-        category: categoryGame,
+        category: enumCategories.advanced,
        restartRequired: false,
        changeCb: (app, id) => {},
        enabled: !IS_DEMO,
@@ -228,7 +234,7 @@ export const allApplicationSettings = [
        options: scrollWheelSensitivities.sort((a, b) => a.scale - b.scale),
        valueGetter: scale => scale.id,
        textGetter: scale => T.settings.labels.scrollWheelSensitivity.sensitivity[scale.id],
-        category: categoryGame,
+        category: enumCategories.advanced,
        restartRequired: false,
        changeCb:
            /**
@@ -241,17 +247,17 @@ export const allApplicationSettings = [
        options: movementSpeeds.sort((a, b) => a.multiplier - b.multiplier),
        valueGetter: multiplier => multiplier.id,
        textGetter: multiplier => T.settings.labels.movementSpeed.speeds[multiplier.id],
-        category: categoryGame,
+        category: enumCategories.advanced,
        restartRequired: false,
        changeCb: (app, id) => {},
    }),

-    new BoolSetting("alwaysMultiplace", categoryGame, (app, value) => {}),
-    new BoolSetting("enableTunnelSmartplace", categoryGame, (app, value) => {}),
-    new BoolSetting("vignette", categoryGame, (app, value) => {}),
-    new BoolSetting("compactBuildingInfo", categoryGame, (app, value) => {}),
-    new BoolSetting("disableCutDeleteWarnings", categoryGame, (app, value) => {}),
-    new BoolSetting("rotationByBuilding", categoryGame, (app, value) => {}),
+    new BoolSetting("alwaysMultiplace", enumCategories.userInterface, (app, value) => {}),
+    new BoolSetting("enableTunnelSmartplace", enumCategories.advanced, (app, value) => {}),
+    new BoolSetting("vignette", enumCategories.userInterface, (app, value) => {}),
+    new BoolSetting("compactBuildingInfo", enumCategories.userInterface, (app, value) => {}),
+    new BoolSetting("disableCutDeleteWarnings", enumCategories.advanced, (app, value) => {}),
+    new BoolSetting("rotationByBuilding", enumCategories.advanced, (app, value) => {}),
 ];

 export function getApplicationSettingById(id) {
--- a/src/js/states/about.js
+++ b/src/js/states/about.js
@@ -1,9 +1,7 @@
 import { TextualGameState } from "../core/textual_game_state";
-import { SOUNDS } from "../platform/sound";
 import { T } from "../translations";
-import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
-import { Dialog } from "../core/modal_dialog_elements";
 import { THIRDPARTY_URLS } from "../core/config";
+import { cachebust } from "../core/cachebust";

 export class AboutState extends TextualGameState {
    constructor() {
@@ -15,9 +13,16 @@ export class AboutState extends TextualGameState {
    }

    getMainContentHTML() {
-        return T.about.body
-            .replace("<githublink>", THIRDPARTY_URLS.github)
-            .replace("<discordlink>", THIRDPARTY_URLS.discord);
+        return `
+            <div class="head">
+                <img src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
+            </div>
+            <div class="text">
+            ${T.about.body
+                .replace("<githublink>", THIRDPARTY_URLS.github)
+                .replace("<discordlink>", THIRDPARTY_URLS.discord)}
+            </div>
+        `;
    }

    onEnter() {
--- a/src/js/states/settings.js
+++ b/src/js/states/settings.js
@@ -1,6 +1,6 @@
 import { TextualGameState } from "../core/textual_game_state";
 import { formatSecondsToTimeAgo } from "../core/utils";
-import { allApplicationSettings } from "../profile/application_settings";
+import { allApplicationSettings, enumCategories } from "../profile/application_settings";
 import { T } from "../translations";

 export class SettingsState extends TextualGameState {
@@ -15,50 +15,62 @@ export class SettingsState extends TextualGameState {
    getMainContentHTML() {
        return `

-            <div class="upperLinks">
-            ${
-                this.app.platformWrapper.getSupportsKeyboard()
-                    ? `
-                        <button class="styledButton editKeybindings">${T.keybindings.title}</button>
-            `
-                    : ""
-            }
-            <button class="styledButton about">${T.about.title}</button>
+        <div class="sidebar">
+            ${this.getCategoryButtonsHtml()}

-         </div>
+            <div class="other">
+                ${
+                    this.app.platformWrapper.getSupportsKeyboard()
+                        ? `<button class="styledButton editKeybindings">${T.keybindings.title}</button>`
+                        : ""
+                }

+                <button class="styledButton about">${T.about.title}</button>

-            ${this.getSettingsHtml()}
-            <div class="versionbar">
-                <div class="buildVersion">${T.global.loading} ...</div>
+                <div class="versionbar">
+                    <div class="buildVersion">${T.global.loading} ...</div>
+                </div>
            </div>
+        </div>

+        <div class="categoryContainer">
+            ${this.getSettingsHtml()}
+        </div>

        `;
    }

+    getCategoryButtonsHtml() {
+        return Object.keys(enumCategories)
+            .map(key => enumCategories[key])
+            .map(
+                category =>
+                    `
+                    <button class="styledButton categoryButton" data-category-btn="${category}">
+                        ${T.settings.categories[category]}
+                    </button>
+                    `
+            )
+            .join("");
+    }
+
    getSettingsHtml() {
-        let lastCategory = null;
-        let html = "";
+        const categoriesHTML = {};
+
+        Object.keys(enumCategories).forEach(key => {
+            const catName = enumCategories[key];
+            categoriesHTML[catName] = `<div class="category" data-category="${catName}">`;
+        });
+
        for (let i = 0; i < allApplicationSettings.length; ++i) {
            const setting = allApplicationSettings[i];

-            if (setting.categoryId !== lastCategory) {
-                lastCategory = setting.categoryId;
-                if (i !== 0) {
-                    html += "</div>";
-                }
-                html += `<strong class="categoryLabel">${T.settings.categories[lastCategory]}</strong>`;
-                html += "<div class='settingsContainer'>";
-            }
-
-            html += setting.getHtml();
-        }
-        if (lastCategory) {
-            html += "</div>";
+            categoriesHTML[setting.categoryId] += setting.getHtml();
        }

-        return html;
+        return Object.keys(categoriesHTML)
+            .map(k => categoriesHTML[k] + "</div>")
+            .join("");
    }

    renderBuildText() {
@@ -90,6 +102,28 @@ export class SettingsState extends TextualGameState {
        }

        this.initSettings();
+        this.initCategoryButtons();
+
+        this.htmlElement.querySelector(".category").classList.add("active");
+        this.htmlElement.querySelector(".categoryButton").classList.add("active");
+    }
+
+    setActiveCategory(category) {
+        const previousCategory = this.htmlElement.querySelector(".category.active");
+        const previousCategoryButton = this.htmlElement.querySelector(".categoryButton.active");
+
+        if (previousCategory.getAttribute("data-category") == category) {
+            return;
+        }
+
+        previousCategory.classList.remove("active");
+        previousCategoryButton.classList.remove("active");
+
+        const newCategory = this.htmlElement.querySelector("[data-category='" + category + "']");
+        const newCategoryButton = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
+
+        newCategory.classList.add("active");
+        newCategoryButton.classList.add("active");
    }

    initSettings() {
@@ -108,6 +142,20 @@ export class SettingsState extends TextualGameState {
        });
    }

+    initCategoryButtons() {
+        Object.keys(enumCategories).forEach(key => {
+            const category = enumCategories[key];
+            const button = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
+            this.trackClicks(
+                button,
+                () => {
+                    this.setActiveCategory(category);
+                },
+                { preventDefault: false }
+            );
+        });
+    }
+
    onAboutClicked() {
        this.moveToStateAddGoBack("AboutState");
    }