diff --git a/src/css/common.scss b/src/css/common.scss index b2078fa2..80d7ae16 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -73,6 +73,9 @@ body { scrollbar-face-color: #888; scrollbar-track-color: rgba(255, 255, 255, 0.1); + // Firefox + scrollbar-color: #cdd0d4 rgba(#000, 0.05); + overflow: hidden; @include Text; diff --git a/src/css/states/changelog.scss b/src/css/states/changelog.scss index 109f1d36..1daa5f04 100644 --- a/src/css/states/changelog.scss +++ b/src/css/states/changelog.scss @@ -1,5 +1,6 @@ #state_ChangelogState { .content { + @include S(max-width, 800px); display: flex; flex-direction: column; } diff --git a/src/css/states/settings.scss b/src/css/states/settings.scss index f06c9b31..6140e46a 100644 --- a/src/css/states/settings.scss +++ b/src/css/states/settings.scss @@ -1,89 +1,138 @@ #state_SettingsState { - .content { - .versionbar { - @include S(margin-top, 20px); - @include SuperSmallText; - display: grid; - align-items: center; - grid-template-columns: 1fr auto; - .buildVersion { - display: flex; - flex-direction: column; - color: #aaadaf; + $colorCategoryButton: #393747; + $colorCategoryButtonSelected: #5c5872; + + .container .content { + display: flex; + overflow-y: scroll; + + .categoryContainer { + width: 100%; + + .category { + display: none; + + &.active { + display: block; + } + + .setting { + @include S(padding, 10px); + background: #eeeff5; + @include S(border-radius, $globalBorderRadius); + @include S(margin-bottom, 5px); + + label { + text-transform: uppercase; + @include Text; + } + + .desc { + @include S(margin-top, 5px); + @include SuperSmallText; + color: #aaadb2; + } + + > .row { + display: grid; + align-items: center; + grid-template-columns: 1fr auto; + } + + &.disabled { + // opacity: 0.3; + pointer-events: none; + * { + pointer-events: none !important; + cursor: default !important; + } + position: relative; + .standaloneOnlyHint { + @include PlainText; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: all; + display: flex; + align-items: center; + justify-content: center; + background: rgba(#fff, 0.5); + text-transform: uppercase; + color: $colorRedBright; + } + } + + .value.enum { + background: #fff; + @include PlainText; + display: flex; + align-items: flex-start; + pointer-events: all; + cursor: pointer; + justify-content: center; + @include S(min-width, 100px); + @include S(border-radius, $globalBorderRadius); + @include S(padding, 4px); + @include S(padding-right, 15px); + + background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)}) + calc(50% + #{D(1px)}) / #{D(15px)} no-repeat; + + transition: background-color 0.12s ease-in-out; + &:hover { + background-color: #fafafa; + } + } + } } } - button.about { - background-color: $colorGreenBright; - } + .sidebar { + display: flex; + flex-direction: column; + @include S(min-width, 210px); + @include S(max-width, 320px); + width: 30%; + height: 100%; + position: sticky; + top: 0; + @include S(margin-left, 20px); + @include S(margin-right, 32px); - .setting { - @include S(padding, 10px); - background: #eeeff5; - @include S(border-radius, $globalBorderRadius); - @include S(margin-bottom, 5px); - - label { - text-transform: uppercase; - @include Text; + .other { + margin-top: auto; } - .desc { - @include S(margin-top, 5px); + button { + @include S(margin-top, 4px); + width: calc(100% - #{D(20px)}); + text-align: start; + } + + button.categoryButton { + background-color: $colorCategoryButton; + + &.active { + background-color: $colorCategoryButtonSelected; + } + } + + button.about { + background-color: $colorGreenBright; + } + + .versionbar { + @include S(margin-top, 20px); @include SuperSmallText; - color: #aaadb2; - } - - > .row { display: grid; align-items: center; grid-template-columns: 1fr auto; - } - - &.disabled { - // opacity: 0.3; - pointer-events: none; - * { - pointer-events: none !important; - cursor: default !important; - } - position: relative; - .standaloneOnlyHint { - @include PlainText; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: all; + .buildVersion { display: flex; - align-items: center; - justify-content: center; - background: rgba(#fff, 0.5); - text-transform: uppercase; - color: $colorRedBright; - } - } - - .value.enum { - background: #fff; - @include PlainText; - display: flex; - align-items: flex-start; - pointer-events: all; - cursor: pointer; - justify-content: center; - @include S(min-width, 100px); - @include S(border-radius, $globalBorderRadius); - @include S(padding, 4px); - @include S(padding-right, 15px); - - background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)}) - calc(50% + #{D(1px)}) / #{D(15px)} no-repeat; - - transition: background-color 0.12s ease-in-out; - &:hover { - background-color: #fafafa; + flex-direction: column; + color: #aaadaf; } } } diff --git a/src/css/textual_game_state.scss b/src/css/textual_game_state.scss index a8d7a31f..54c5dbb3 100644 --- a/src/css/textual_game_state.scss +++ b/src/css/textual_game_state.scss @@ -1,24 +1,18 @@ .gameState.textualState { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - $padding: 15px; - - .headerBar, - > .container .content { - @include S(width, 500px); - } + display: grid; + grid-template-rows: auto 1fr; + box-sizing: border-box; + @include S(padding, 32px); + height: 100vh; .headerBar { display: flex; - align-items: center; - justify-content: flex-start; h1 { - display: flex; - pointer-events: all; + display: grid; + grid-template-columns: auto 1fr; align-items: center; + pointer-events: all; cursor: pointer; @include SuperHeading; text-transform: uppercase; @@ -39,11 +33,17 @@ } > .container { + display: flex; + justify-content: center; + width: 100%; + overflow-y: auto; + > .content { + width: 100%; background: #fff; @include S(border-radius, $globalBorderRadius); @include S(padding, 10px); - height: calc(80vh - #{D(60px)}); + height: 100%; overflow-y: auto; box-sizing: border-box; pointer-events: all; diff --git a/src/js/profile/application_settings.js b/src/js/profile/application_settings.js index 708c4d7b..a1f17e86 100644 --- 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) { diff --git a/src/js/states/settings.js b/src/js/states/settings.js index 4dce1fa3..01679d89 100644 --- 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 ` -
- ${ - this.app.platformWrapper.getSupportsKeyboard() - ? ` - - ` - : "" - } - +
+ ${this.getCategoryButtonsHtml()} -
+
+ ${ + this.app.platformWrapper.getSupportsKeyboard() + ? `` + : "" + } + - ${this.getSettingsHtml()} -
-
${T.global.loading} ...
+
+
${T.global.loading} ...
+
+
+
+ ${this.getSettingsHtml()} +
`; } + getCategoryButtonsHtml() { + return Object.keys(enumCategories) + .map(key => enumCategories[key]) + .map( + category => + ` + + ` + ) + .join(""); + } + getSettingsHtml() { - let lastCategory = null; - let html = ""; + const categoriesHTML = {}; + + Object.keys(enumCategories).forEach(key => { + const catName = enumCategories[key]; + categoriesHTML[catName] = `
`; + }); + for (let i = 0; i < allApplicationSettings.length; ++i) { const setting = allApplicationSettings[i]; - if (setting.categoryId !== lastCategory) { - lastCategory = setting.categoryId; - if (i !== 0) { - html += "
"; - } - html += `${T.settings.categories[lastCategory]}`; - html += "
"; - } - - html += setting.getHtml(); - } - if (lastCategory) { - html += "
"; + categoriesHTML[setting.categoryId] += setting.getHtml(); } - return html; + return Object.keys(categoriesHTML) + .map(k => categoriesHTML[k] + "
") + .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() { @@ -107,6 +141,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"); } diff --git a/translations/base-en.yaml b/translations/base-en.yaml index afd2a728..781e55a9 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -647,8 +647,9 @@ storyRewards: settings: title: Settings categories: - game: Game - app: Application + general: General + userInterface: User Interface + advanced: Advanced versionBadges: dev: Development