diff --git a/gulp/gulpfile.js b/gulp/gulpfile.js index 0db3f729..89b85db7 100644 --- a/gulp/gulpfile.js +++ b/gulp/gulpfile.js @@ -163,7 +163,7 @@ function serve({ standalone }) { }); // Watch .scss files, those trigger a css rebuild - gulp.watch(["../src/**/*.scss"], gulp.series("css.dev")); + gulp.watch(["../src/**/*.scss"], { usePolling: true }, gulp.series("css.dev")); // Watch .html files, those trigger a html rebuild gulp.watch("../src/**/*.html", gulp.series(standalone ? "html.standalone-dev" : "html.dev")); @@ -172,7 +172,7 @@ function serve({ standalone }) { // gulp.watch(["../res_raw/sounds/**/*.mp3", "../res_raw/sounds/**/*.wav"], gulp.series("sounds.dev")); // Watch translations - gulp.watch("../translations/**/*.yaml", gulp.series("translations.convertToJson")); + gulp.watch("../translations/**/*.yaml", { usePolling: true }, gulp.series("translations.convertToJson")); gulp.watch( ["../res_raw/sounds/sfx/*.mp3", "../res_raw/sounds/sfx/*.wav"], diff --git a/gulp/webpack.config.js b/gulp/webpack.config.js index 6e1d7388..42255b7f 100644 --- a/gulp/webpack.config.js +++ b/gulp/webpack.config.js @@ -14,6 +14,9 @@ module.exports = ({ watch = false, standalone = false }) => { "bundle.js": [path.resolve(__dirname, "../src/js/main.js")], }, watch, + watchOptions: { + poll: 1000 + }, node: { fs: "empty", }, diff --git a/src/css/states/keybindings.scss b/src/css/states/keybindings.scss index cf211403..49aecabb 100644 --- a/src/css/states/keybindings.scss +++ b/src/css/states/keybindings.scss @@ -1,5 +1,12 @@ -#state_KeybindingsState { +#state_SettingsState { + + $colorCategoryButton: #eee; + $colorCategoryButtonSelected: #5f748b; + .content { + display: flex; + overflow-y: scroll; + .topEntries { display: grid; grid-template-columns: 1fr auto; @@ -50,6 +57,148 @@ } } } + + .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; + } + } + } + } + } + + .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); + + .other { + margin-top: auto; + } + + button { + @include S(margin-top, 4px); + width: calc(100% - #{D(20px)}); + text-align: start; + + &::after { + content: unset; + } + } + + button.categoryButton, + button.about { + background-color: $colorCategoryButton; + color: #777a7f; + + &.active { + background-color: $colorCategoryButtonSelected; + color: #fff; + + &:hover { + opacity: 1; + } + } + + &.pressed { + transform: none !important; + } + } + + .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; + } + } + } } @include DarkThemeOverride { diff --git a/src/js/application.js b/src/js/application.js index e5e22b60..369cc032 100644 --- a/src/js/application.js +++ b/src/js/application.js @@ -145,7 +145,7 @@ export class Application { MobileWarningState, MainMenuState, InGameState, - SettingsState, + //SettingsState, KeybindingsState, AboutState, ChangelogState, diff --git a/src/js/core/textual_game_state.js b/src/js/core/textual_game_state.js index 52a1f946..d60f2201 100644 --- a/src/js/core/textual_game_state.js +++ b/src/js/core/textual_game_state.js @@ -71,7 +71,23 @@ export class TextualGameState extends GameState { backToStatePayload: this.backToStatePayload, }, }); - } + } + + /** + * Goes to a new state, telling him to go back to this state later + * @param {string} stateId + */ + switchToState(stateId) { + // debugger; + this.moveToState( + stateId, + { + backToStateId: this.backToStateId, + backToStatePayload: this.backToStatePayload, + }, + true + ); + } /** * Removes all click detectors, except the one on the back button. Useful when regenerating diff --git a/src/js/profile/application_settings.js b/src/js/profile/application_settings.js index bbbcb91d..a53d3358 100644 --- a/src/js/profile/application_settings.js +++ b/src/js/profile/application_settings.js @@ -23,6 +23,7 @@ export const enumCategories = { performance: "performance", advanced: "advanced", debug: "debug", + keybindings: "keybindings", }; export const uiScales = [ @@ -297,14 +298,14 @@ export const allApplicationSettings = [ if (IS_DEBUG) { for (let k in globalConfig.debug) { - if (k.startsWith('_')) continue; - const setting = new BoolSetting(`debug_${ k }`, enumCategories.debug, (app, value) => { + if (k.startsWith("_")) continue; + const setting = new BoolSetting(`debug_${k}`, enumCategories.debug, (app, value) => { globalConfig.debug[k] = value; }); setting.validate = () => true; - T.settings.labels[`debug_${ k }`] = { + T.settings.labels[`debug_${k}`] = { title: k.replace(/(?!^)([A-Z])/g, " $1"), - description: globalConfig.debug[`_${ k }`], + description: globalConfig.debug[`_${k}`], }; allApplicationSettings.push(setting); } @@ -391,7 +392,7 @@ export class ApplicationSettings extends ReadWriteProxy { * @param {string} key */ getSetting(key) { - if (!key.startsWith('debug_')) { + if (!key.startsWith("debug_")) { assert(this.getAllSettings().hasOwnProperty(key), "Setting not known: " + key); } return this.getAllSettings()[key]; diff --git a/src/js/states/keybindings.js b/src/js/states/keybindings.js index b68626c7..d2ba27c9 100644 --- a/src/js/states/keybindings.js +++ b/src/js/states/keybindings.js @@ -4,39 +4,58 @@ import { T } from "../translations"; import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper"; import { Dialog } from "../core/modal_dialog_elements"; import { IS_DEMO } from "../core/config"; +import { SettingsState } from "./settings"; -export class KeybindingsState extends TextualGameState { - constructor() { - super("KeybindingsState"); - } +export class KeybindingsState extends SettingsState { + // constructor() { + // super(); + // super("KeybindingsState"); + // this.settingsState = settingsState; + // } - getStateHeaderTitle() { - return T.keybindings.title; - } + // getStateHeaderTitle() { + // return T.keybindings.title; + // } getMainContentHTML() { return ` +
+ ${this.getCategoryButtonsHtml()} -
- ${T.keybindings.hint} - - +
+ + +
+
${T.global.loading} ...
+
+
-
+
+ +
+
+ ${T.keybindings.hint} + +
+
+ + ${this.getSettingsHtml()}
`; } onEnter() { + this.onEnterCommon(); + const keybindingsElem = this.htmlElement.querySelector(".keybindings"); this.trackClicks(this.htmlElement.querySelector(".resetBindings"), this.resetBindings); for (const category in KEYMAPPINGS) { const categoryDiv = document.createElement("div"); - categoryDiv.classList.add("category"); + categoryDiv.classList.add("keyCategory"); keybindingsElem.appendChild(categoryDiv); const labelDiv = document.createElement("strong"); @@ -173,7 +192,7 @@ export class KeybindingsState extends TextualGameState { }); } - getDefaultPreviousState() { - return "SettingsState"; - } + // getDefaultPreviousState() { + // return "SettingsState"; + // } } diff --git a/src/js/states/settings.js b/src/js/states/settings.js index 5e22492a..def472f3 100644 --- a/src/js/states/settings.js +++ b/src/js/states/settings.js @@ -4,8 +4,8 @@ import { allApplicationSettings, enumCategories } from "../profile/application_s import { T } from "../translations"; export class SettingsState extends TextualGameState { - constructor() { - super("SettingsState"); + constructor(key = "SettingsState") { + super(key); } getStateHeaderTitle() { @@ -92,7 +92,7 @@ export class SettingsState extends TextualGameState { `; } - onEnter(payload) { + onEnterCommon() { this.renderBuildText(); this.trackClicks(this.htmlElement.querySelector(".about"), this.onAboutClicked, { preventDefault: false, @@ -109,6 +109,12 @@ export class SettingsState extends TextualGameState { this.htmlElement.querySelector(".category").classList.add("active"); this.htmlElement.querySelector(".categoryButton").classList.add("active"); + + this.setActiveCategory(enumCategories.general); + } + + onEnter(payload) { + this.onEnterCommon(); } setActiveCategory(category) { @@ -164,6 +170,6 @@ export class SettingsState extends TextualGameState { } onKeybindingsClicked() { - this.moveToStateAddGoBack("KeybindingsState"); + this.switchToState("KeybindingsState"); } } diff --git a/translations/base-en.yaml b/translations/base-en.yaml index 29cde338..8966e629 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -722,6 +722,7 @@ settings: advanced: Advanced performance: Performance debug: Debug + keybindings: Keybindings versionBadges: dev: Development