diff --git a/res/ui/get_on_steam.png b/res/ui/get_on_steam.png index f276031c..f8503229 100644 Binary files a/res/ui/get_on_steam.png and b/res/ui/get_on_steam.png differ diff --git a/src/css/adinplay.scss b/src/css/adinplay.scss index 8b69bd84..c0deca58 100644 --- a/src/css/adinplay.scss +++ b/src/css/adinplay.scss @@ -40,7 +40,7 @@ &.waitingForFinish { .videoInner { - @include BorderRadius(4px); + @include S(border-radius, $globalBorderRadius); overflow: hidden; &::after { @@ -74,7 +74,7 @@ .adInner { @include BoxShadow3D(lighten($mainBgColor, 15)); - @include BorderRadius(4px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 15px); // max-width: 960px; display: block !important; diff --git a/src/css/application_error.scss b/src/css/application_error.scss index a53e4aa2..b69a1cfe 100644 --- a/src/css/application_error.scss +++ b/src/css/application_error.scss @@ -53,7 +53,7 @@ font-family: monospace; text-align: left; @include S(padding, 6px); - @include BorderRadius(2px); + @include S(border-radius, $globalBorderRadius); @include BoxShadow3D(#eee); position: absolute; @include S(bottom, 25px); diff --git a/src/css/common.scss b/src/css/common.scss index e48658aa..55af39dd 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -169,20 +169,26 @@ button { box-sizing: content-box; @include S(padding, 3px, 10px); @include IncreasedClickArea(10px); - @include BorderRadius(4px); @include TextShadow3D(#fff, $borderColor: #28292a); @include ButtonText; - @include Button3D($accentColorBright); - border: #{D(1px)} solid rgba(0, 10, 20, 0.2); + border: 0; + background: $colorBlueBright; + color: #fff; + + // border: #{D(1px)} solid rgba(0, 10, 20, 0.2); @include S(border-bottom-width, 2px); - color: $accentColorDark; + // color: $accentColorDark; letter-spacing: 0.05em !important; - box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2); + // box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2); .keybinding { @include S(bottom, -2.5px); @include S(right, -2px); } + transition: opacity 0.12s ease-in-out; + &:hover { + opacity: 0.9; + } } ::selection { @@ -210,7 +216,7 @@ input[type="email"] { @include Text; @include IncreasedClickArea(15px); - @include BorderRadius(4px); + @include S(border-radius, $globalBorderRadius); &::placeholder { color: #fff; @@ -307,7 +313,7 @@ canvas { } ::-webkit-scrollbar-thumb { - border-radius: 4px; + // border-radius: 4px; background: #cdd0d4; } @@ -407,7 +413,7 @@ canvas { content: "Coming soon!"; z-index: 10000; background: rgba(lighten($mainBgColor, 0), 0.4); - @include BorderRadius(4px); + @include S(border-radius, $globalBorderRadius); position: absolute; display: flex; justify-content: center; @@ -480,7 +486,7 @@ canvas { bottom: 0; z-index: 1; @include BoxShadow3D($themeColor, $size: 1px); - @include BorderRadius(4px); + @include S(border-radius, $globalBorderRadius); transform-origin: 0% 50%; @@ -568,7 +574,7 @@ canvas { text-transform: uppercase; @include S(padding, 1.5px, 3px, 2px); @include PlainText; - @include BorderRadius(2px); + @include S(border-radius, $globalBorderRadius); &, > span { @include S(font-size, 9px); diff --git a/src/css/ingame_hud/building_placer.scss b/src/css/ingame_hud/building_placer.scss index ab7c8da9..55b2af34 100644 --- a/src/css/ingame_hud/building_placer.scss +++ b/src/css/ingame_hud/building_placer.scss @@ -6,7 +6,7 @@ display: grid; @include S(padding, 6px); - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(width, 240px); @include S(grid-column-gap, 5px); @@ -14,6 +14,10 @@ grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; + @include DarkThemeOverride { + background-color: #55585a; + } + .buildingLabel { @include PlainText; @include S(margin-bottom, 2px); @@ -54,7 +58,7 @@ @include S(width, 100px); @include S(height, 100px); background: top left / 100% 100% no-repeat; - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); } @include StyleBelowWidth(700px) { @@ -77,10 +81,14 @@ .keybinding { position: relative; } + + @include DarkThemeOverride { + color: rgba(#fff, 0.5); + } } .variant { - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); background: rgba(0, 10, 20, 0.1); display: flex; position: relative; diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss index e3ba48e0..d9f91fcc 100644 --- a/src/css/ingame_hud/buildings_toolbar.scss +++ b/src/css/ingame_hud/buildings_toolbar.scss @@ -56,10 +56,10 @@ } } - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); &.selected { - background-color: rgba(74, 163, 223, 0.3) !important; + background-color: rgba($colorBlueBright, 0.3) !important; transform: scale(1.05); .keybinding { color: #111; diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss index e2a79ed9..45015115 100644 --- a/src/css/ingame_hud/dialogs.scss +++ b/src/css/ingame_hud/dialogs.scss @@ -21,6 +21,19 @@ } } + @include DarkThemeOverride { + background: rgba(#33363d, 0.9); + @include InlineAnimation(0.12s ease-in-out) { + 0% { + background-color: transparent; + opacity: 0.5; + } + 100% { + background-color: rgba(#33363d, 0.9); + } + } + } + &.visible { .dialogInner { opacity: 1; @@ -43,12 +56,16 @@ @include S(min-width, 300px); max-width: calc(100vw - #{D(40px)}); max-height: calc(100vh - #{D(40px)}); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); display: flex; flex-direction: column; @include S(padding, 12px); pointer-events: all; + @include DarkThemeOverride { + background: #333438; + } + &.optionChooserDialog { .optionParent { display: grid; @@ -59,6 +76,16 @@ cursor: pointer; @include S(padding, 10px); background: #eee; + transition: background-color 0.12s ease-in-out; + + &:hover { + background-color: #e7e7e7; + } + + &.active { + background-color: $colorBlueBright; + color: #fff; + } } } } @@ -72,6 +99,7 @@ grid-template-columns: 1fr auto; @include S(margin-bottom, 10px); + @include DarkThemeInvert(); > .closeButton { opacity: 0.7; @include S(width, 20px); @@ -87,6 +115,7 @@ } > .content { + @include PlainText; overflow-y: auto; pointer-events: all; } @@ -101,6 +130,11 @@ @include S(min-width, 60px); @include S(padding, 5px, 15px); + transition: opacity 0.12s ease-in-out; + &:hover { + opacity: 0.9; + } + &.good { background-color: $colorGreenBright; color: #fff; diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index e32adfce..87b6cbef 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -27,6 +27,8 @@ position: relative; @include IncreasedClickArea(0px); + @include DarkThemeInvert; + &:hover { opacity: 0.8; } @@ -79,7 +81,6 @@ border-color: rgba(0, 0, 0, 0.1); @include S(padding, 5px, 5px, 5px); - border-radius: 0 0 #{D(4px)} #{D(4px)}; @include S(padding-left, 30px); @include S(margin-right, 3px); @include IncreasedClickArea(0px); @@ -144,7 +145,7 @@ @include S(min-width, 5px); @include S(height, 10px); @include S(padding, 1px, 3px, 2px); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); border: #{D(1px)} solid #fff; @include InlineAnimation(1s ease-in-out infinite) { 50% { diff --git a/src/css/ingame_hud/mass_selector.scss b/src/css/ingame_hud/mass_selector.scss index 99027735..3c41893c 100644 --- a/src/css/ingame_hud/mass_selector.scss +++ b/src/css/ingame_hud/mass_selector.scss @@ -4,7 +4,7 @@ left: 50%; transform: translateX(-50%); background: rgba(lighten(#f77, 5), 0.95); - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 6px, 10px); @include SuperSmallText; color: #fff; diff --git a/src/css/ingame_hud/notifications.scss b/src/css/ingame_hud/notifications.scss index cc957e5c..4b8ee767 100644 --- a/src/css/ingame_hud/notifications.scss +++ b/src/css/ingame_hud/notifications.scss @@ -5,13 +5,17 @@ .notification { background: rgba(#333438, 0.8); - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(margin-top, 3px); color: #fff; @include SuperSmallText; @include S(padding, 7px, 10px); @include S(width, 150px); + @include DarkThemeOverride { + background-color: rgba(#55595d, 0.8); + } + &[data-icon] { @include S(background-position-x, 8px); background-position-y: center; diff --git a/src/css/ingame_hud/pinned_shapes.scss b/src/css/ingame_hud/pinned_shapes.scss index 4947db29..2e4c8390 100644 --- a/src/css/ingame_hud/pinned_shapes.scss +++ b/src/css/ingame_hud/pinned_shapes.scss @@ -41,6 +41,10 @@ flex-direction: row; grid-column: 2 / 3; @include S(height, 9px); + + @include DarkThemeOverride { + color: #eee; + } } > .goalLabel { @@ -68,6 +72,8 @@ @include S(top, -4px); @include S(left, -4px); background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat; + + @include DarkThemeInvert; } } } diff --git a/src/css/ingame_hud/settings_menu.scss b/src/css/ingame_hud/settings_menu.scss index ade1fda1..70b9897a 100644 --- a/src/css/ingame_hud/settings_menu.scss +++ b/src/css/ingame_hud/settings_menu.scss @@ -27,6 +27,6 @@ @include S(grid-gap, 10px); background: rgba(0, 10, 20, 0.1); @include S(padding, 20px); - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); } } diff --git a/src/css/ingame_hud/shop.scss b/src/css/ingame_hud/shop.scss index cba6eb33..41834d06 100644 --- a/src/css/ingame_hud/shop.scss +++ b/src/css/ingame_hud/shop.scss @@ -9,7 +9,7 @@ display: grid; grid-template-columns: auto 1fr auto; background: #eee; - @include S(border-radius, 3px); + @include S(border-radius, $globalBorderRadius); @include S(margin-bottom, 4px); @include S(padding, 5px, 10px); @include S(grid-row-gap, 1px); @@ -20,6 +20,10 @@ margin-bottom: 0; } + @include DarkThemeOverride { + background: #55585a; + } + .title { grid-column: 1 / 3; grid-row: 1 / 2; @@ -32,7 +36,7 @@ .tier { @include S(margin-right, 9px); background: $colorGreenBright; - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); text-transform: uppercase; @include PlainText; color: #fff; @@ -160,19 +164,23 @@ background: #e2e4e6; @include S(line-height, 13px); - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 1px, 2px, 2px); position: relative; text-align: center; @include S(min-width, 50px); overflow: hidden; + @include DarkThemeOverride { + background: #333438; + } + .progressBar { bottom: 0; left: 0; right: 0; top: 0; - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); position: absolute; display: inline-block; z-index: -1; diff --git a/src/css/ingame_hud/statistics.scss b/src/css/ingame_hud/statistics.scss index f646badd..fe56f393 100644 --- a/src/css/ingame_hud/statistics.scss +++ b/src/css/ingame_hud/statistics.scss @@ -80,10 +80,14 @@ > div { background: #f4f4f4; - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(margin-bottom, 4px); display: grid; + @include DarkThemeOverride { + background: #222428; + } + grid-template-columns: 1fr auto; @include S(padding, 5px); &:last-child { @@ -100,7 +104,7 @@ .counter { @include SuperSmallText; - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 0, 3px); } } diff --git a/src/css/ingame_hud/unlock_notification.scss b/src/css/ingame_hud/unlock_notification.scss index 15ffe0e0..597b45f9 100644 --- a/src/css/ingame_hud/unlock_notification.scss +++ b/src/css/ingame_hud/unlock_notification.scss @@ -17,7 +17,7 @@ .dialog { background: rgba(#222428, 0.5); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 30px); @include InlineAnimation(0.5s ease-in-out) { @@ -54,7 +54,7 @@ @include S(padding, 1px, 6px); @include S(margin, 20px, 0, 20px); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); @include InlineAnimation(0.5s ease-in-out) { 0% { transform: translateY(-60vh); @@ -111,7 +111,7 @@ background-position: center center; background-size: cover; background-repeat: no-repeat; - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15); } } diff --git a/src/css/ingame_hud/vignette_overlay.scss b/src/css/ingame_hud/vignette_overlay.scss index c973b16e..ce569fd4 100644 --- a/src/css/ingame_hud/vignette_overlay.scss +++ b/src/css/ingame_hud/vignette_overlay.scss @@ -6,4 +6,9 @@ bottom: 0; background: uiResource("vignette.lossless.png") center center / cover no-repeat; pointer-events: none; + + @include DarkThemeOverride { + // Too many artifacts + display: none; + } } diff --git a/src/css/main.scss b/src/css/main.scss index 166eb6f7..a17833c8 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -62,9 +62,9 @@ ingame_HUD_MassSelector, ingame_HUD_BetaOverlay, // Dialogs +ingame_HUD_UnlockNotification, ingame_HUD_Shop, ingame_HUD_Statistics, -ingame_HUD_UnlockNotification, ingame_HUD_SettingsMenu; $zindex: 100; diff --git a/src/css/mixins.scss b/src/css/mixins.scss index 311c176d..dc5eeb86 100644 --- a/src/css/mixins.scss +++ b/src/css/mixins.scss @@ -348,3 +348,16 @@ button, @content; } } + +@mixin DarkThemeOverride { + @at-root body[data-theme="dark"] &, + &[data-theme="dark"] { + @content; + } +} + +@mixin DarkThemeInvert { + @include DarkThemeOverride { + filter: invert(1); + } +} diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index af6878e7..b77fdc07 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -4,9 +4,26 @@ justify-content: center; flex-direction: column; - background: rgb(140, 165, 194) center center / cover !important; + // background: #aaacb4 center center / cover !important; + background: #bbc2cf center center / cover !important; + + .settingsButton { + position: absolute; + @include S(bottom, 30px); + @include S(right, 30px); + @include S(width, 35px); + @include S(height, 35px); + pointer-events: all; + cursor: pointer; + background: uiResource("icons/settings.png") center center / contain no-repeat; + transition: opacity 0.12s ease-in-out; + &:hover { + opacity: 0.9; + } + } .fullscreenBackgroundVideo { + // display: none !important; z-index: -1; position: fixed; right: 50%; @@ -45,7 +62,7 @@ .standaloneBanner { background: rgb(255, 225, 238); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); height: 100%; box-sizing: border-box; @include S(padding, 15px); @@ -125,7 +142,7 @@ @include PlainText; background: $colorRedBright; @include S(padding, 10px); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); color: #fff; @include S(margin-top, 10px); border: #{D(2px)} solid rgba(0, 10, 20, 0.1); @@ -138,7 +155,7 @@ flex-direction: column; background: #fafafa; @include S(padding, 20px); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); // border: #{D(2px)} solid rgba(0, 10, 20, 0.1); height: 100%; width: 100%; @@ -149,7 +166,7 @@ background-color: $colorRedBright; @include PlainText; color: #fff; - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 5px); } @@ -158,9 +175,10 @@ @include S(width, 130px); @include S(padding, 15px, 20px); letter-spacing: 0.3em !important; + + font-weight: bold; color: #fff; background-color: $colorGreenBright; - text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1); transition: transform 0.12s ease-in-out; &:hover { transform: scale(1.02); @@ -184,7 +202,7 @@ .savegame { background: #eee; - @include BorderRadius(4px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 5px); display: grid; grid-template-columns: 1fr auto auto; @@ -259,7 +277,7 @@ background: #fafafa; @include S(padding, 5px); @include S(padding-left, 10px); - @include S(border-radius, 4px); + @include S(border-radius, $globalBorderRadius); @include S(margin-left, 10px); @include SuperSmallText(); diff --git a/src/css/states/preload.scss b/src/css/states/preload.scss index d7cb412f..4a16d387 100644 --- a/src/css/states/preload.scss +++ b/src/css/states/preload.scss @@ -32,7 +32,7 @@ @include BoxShadow3D(#fff); @include S(padding, 15px); - @include BorderRadius(4px); + @include S(border-radius, $globalBorderRadius); @include DropShadow; .errorHeader { diff --git a/src/css/states/settings.scss b/src/css/states/settings.scss index f4b6e6b4..0c9ca862 100644 --- a/src/css/states/settings.scss +++ b/src/css/states/settings.scss @@ -8,10 +8,23 @@ @include Heading; } + .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; + } + } + .setting { @include S(padding, 10px); background: #eee; - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(margin-bottom, 5px); label { @@ -31,6 +44,15 @@ grid-template-columns: 1fr auto; } + &.disabled { + opacity: 0.3; + pointer-events: none; + * { + pointer-events: none !important; + cursor: default !important; + } + } + .value.enum { background: #fff; @include PlainText; @@ -40,7 +62,7 @@ cursor: pointer; justify-content: center; @include S(min-width, 100px); - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 4px); @include S(padding-right, 15px); diff --git a/src/css/textual_game_state.scss b/src/css/textual_game_state.scss index ffb2a757..d8c980cd 100644 --- a/src/css/textual_game_state.scss +++ b/src/css/textual_game_state.scss @@ -33,7 +33,7 @@ .content { background: #fff; - @include S(border-radius, 2px); + @include S(border-radius, $globalBorderRadius); @include S(padding, 10px); max-height: calc(80vh - #{D(60px)}); overflow-y: auto; diff --git a/src/css/variables.scss b/src/css/variables.scss index 99dc3ea1..03213900 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -31,6 +31,7 @@ $mainBgColor: #dee1ea; $accentColorBright: #e1e4ed; $accentColorDark: #7d808a; $colorGreenBright: #66bb6a; +$colorBlueBright: rgb(74, 163, 223); $colorRedBright: #ef5072; $themeColor: #393747; $ingameHudBg: rgba($accentColorBright, 0.1); @@ -39,7 +40,7 @@ $ingameHudBorder: #{D(1.5px)} solid $accentColorDark; $text3dColor: #f4ffff; // Dialog properties -$modalDialogBg: rgba(#666a73, 0.8); +$modalDialogBg: rgba(160, 165, 180, 0.8); $dialogBgColor: lighten($mainBgColor, 10); $lightFontWeight: normal; diff --git a/src/js/core/config.js b/src/js/core/config.js index e7e6c47c..10495e4f 100644 --- a/src/js/core/config.js +++ b/src/js/core/config.js @@ -76,8 +76,8 @@ export const globalConfig = { debug: { /* dev:start */ - fastGameEnter: true, - noArtificialDelays: true, + // fastGameEnter: true, + // noArtificialDelays: true, // disableSavegameWrite: true, showEntityBounds: false, showAcceptorEjectors: false, diff --git a/src/js/game/hud/parts/settings_menu.js b/src/js/game/hud/parts/settings_menu.js index b2c706b7..8dbfee2f 100644 --- a/src/js/game/hud/parts/settings_menu.js +++ b/src/js/game/hud/parts/settings_menu.js @@ -88,8 +88,11 @@ export class HUDSettingsMenu extends BaseHUDPart { // this.background.classList.add("visible"); this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever); - const totalSecondsPlayed = Math.ceil(this.root.time.now()); - this.timePlayed.querySelector(".playtime").innerText = formatSeconds(totalSecondsPlayed); + const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60); + this.timePlayed.querySelector(".playtime").innerText = T.global.time.xMinutes.replace( + "", + "" + totalMinutesPlayed + ); } close() { diff --git a/src/js/game/hud/parts/statistics.js b/src/js/game/hud/parts/statistics.js index 010d923f..f8cdd0a8 100644 --- a/src/js/game/hud/parts/statistics.js +++ b/src/js/game/hud/parts/statistics.js @@ -56,7 +56,7 @@ export class HUDStatistics extends BaseHUDPart { this.dataSource = source; this.dialogInner.setAttribute("data-datasource", source); - this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].title; + this.sourceExplanation.innerText = T.ingame.statistics.dataSources[source].description; if (this.visible) { this.rerenderFull(); } diff --git a/src/js/game/map_chunk_view.js b/src/js/game/map_chunk_view.js index 7634db64..411bfba8 100644 --- a/src/js/game/map_chunk_view.js +++ b/src/js/game/map_chunk_view.js @@ -7,6 +7,7 @@ import { Math_max, Math_round } from "../core/builtins"; import { Rectangle } from "../core/rectangle"; import { createLogger } from "../core/logging"; import { smoothenDpi } from "../core/dpi_manager"; +import { THEME } from "./theme"; const logger = createLogger("chunk"); const chunkSizePixels = globalConfig.mapChunkSize * globalConfig.tileSize; @@ -119,9 +120,9 @@ export class MapChunkView extends MapChunk { context.scale(bgDpi, bgDpi); } else { if (this.containedEntities.length > 0) { - context.fillStyle = "#c5ccd6"; + context.fillStyle = THEME.map.chunkOverview.filled; } else { - context.fillStyle = "#a6afbb"; + context.fillStyle = THEME.map.chunkOverview.empty; } context.fillRect(0, 0, 10000, 10000); } diff --git a/src/js/game/theme.js b/src/js/game/theme.js index 198f9797..251f4433 100644 --- a/src/js/game/theme.js +++ b/src/js/game/theme.js @@ -3,5 +3,8 @@ export const THEMES = { light: require("./themes/light.json"), }; -// TODO: Make themes customizable -export const THEME = THEMES.light; +export let THEME = THEMES.light; + +export function applyGameTheme(id) { + THEME = THEMES[id]; +} diff --git a/src/js/game/themes/dark.json b/src/js/game/themes/dark.json index 6d0c1b22..caf28bfb 100644 --- a/src/js/game/themes/dark.json +++ b/src/js/game/themes/dark.json @@ -10,6 +10,10 @@ "red": "#4a3d3f", "green": "#3e4a3d", "blue": "#35384a" + }, + "chunkOverview": { + "empty": "#444856", + "filled": "#646b7d" } }, diff --git a/src/js/game/themes/light.json b/src/js/game/themes/light.json index c3431928..d0a1e9bb 100644 --- a/src/js/game/themes/light.json +++ b/src/js/game/themes/light.json @@ -10,6 +10,11 @@ "red": "#ffbfc1", "green": "#cbffc4", "blue": "#bfdaff" + }, + + "chunkOverview": { + "empty": "#a6afbb", + "filled": "c5ccd6" } }, diff --git a/src/js/profile/application_settings.js b/src/js/profile/application_settings.js index b86ba45d..b45d35b8 100644 --- a/src/js/profile/application_settings.js +++ b/src/js/profile/application_settings.js @@ -6,7 +6,7 @@ import { ReadWriteProxy } from "../core/read_write_proxy"; import { BoolSetting, EnumSetting, BaseSetting } from "./setting_types"; import { createLogger } from "../core/logging"; import { ExplainedResult } from "../core/explained_result"; -import { THEMES } from "../game/theme"; +import { THEMES, THEME, applyGameTheme } from "../game/theme"; const logger = createLogger("application_settings"); @@ -68,26 +68,14 @@ export const allApplicationSettings = [ }, G_IS_STANDALONE ), - new EnumSetting("theme", { - options: Object.keys(THEMES), - valueGetter: theme => theme, - textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1), - category: categoryApp, - restartRequired: false, - changeCb: - /** - * @param {Application} app - */ - (app, id) => document.body.setAttribute("data-theme", id), - }), + new BoolSetting( "soundsMuted", categoryApp, /** * @param {Application} app */ - (app, value) => app.sound.setSoundsMuted(value), - false + (app, value) => app.sound.setSoundsMuted(value) ), new BoolSetting( "musicMuted", @@ -95,11 +83,25 @@ export const allApplicationSettings = [ /** * @param {Application} app */ - (app, value) => app.sound.setMusicMuted(value), - false + (app, value) => app.sound.setMusicMuted(value) ), // GAME + new EnumSetting("theme", { + options: Object.keys(THEMES), + valueGetter: theme => theme, + textGetter: theme => theme.substr(0, 1).toUpperCase() + theme.substr(1), + category: categoryGame, + restartRequired: false, + changeCb: + /** + * @param {Application} app + */ + (app, id) => { + applyGameTheme(id); + document.body.setAttribute("data-theme", id); + }, + }), ]; export function getApplicationSettingById(id) { diff --git a/src/js/states/ingame.js b/src/js/states/ingame.js index 5e0c8d62..6307a22c 100644 --- a/src/js/states/ingame.js +++ b/src/js/states/ingame.js @@ -148,7 +148,10 @@ export class InGameState extends GameState { * Goes back to the settings state */ goToSettings() { - this.saveThenGoToState("SettingsState"); + this.saveThenGoToState("SettingsState", { + backToStateId: this.key, + backToStatePayload: this.creationPayload, + }); } /** diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index f701fa85..8335e350 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -32,6 +32,8 @@ export class MainMenuState extends GameState { return ` + + @@ -191,6 +193,7 @@ export class MainMenuState extends GameState { }); } + this.trackClicks(qs(".settingsButton"), this.onSettingsButtonClicked); this.renderSavegames(); } @@ -281,6 +284,10 @@ export class MainMenuState extends GameState { }); } + onSettingsButtonClicked() { + this.moveToState("SettingsState"); + } + onPlayButtonClicked() { const savegame = this.app.savegameMgr.createNewSavegame(); @@ -288,7 +295,7 @@ export class MainMenuState extends GameState { if (G_IS_DEV) { // TODO - this.moveToState("SettingsState"); + // this.moveToState("SettingsState"); } this.moveToState("InGameState", { diff --git a/src/js/states/settings.js b/src/js/states/settings.js index 48a60273..35d7687c 100644 --- a/src/js/states/settings.js +++ b/src/js/states/settings.js @@ -19,12 +19,12 @@ export class SettingsState extends TextualGameState { ${ this.app.platformWrapper.getSupportsKeyboard() ? ` - + ` : "" } - + @@ -33,7 +33,7 @@ export class SettingsState extends TextualGameState { ${this.getSettingsHtml()}
${T.global.loading} ...
- +
diff --git a/translations/base-en.yaml b/translations/base-en.yaml index 9eb66b86..4543de87 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -45,6 +45,8 @@ global: minutesAndSecondsShort: m s hoursAndMinutesShort: h s + xMinutes: minutes + keys: tab: TAB control: CTRL @@ -290,11 +292,6 @@ settings: description: >- It is recommended to play the game in fullscreen to get the best experience. Only available in the standalone. - theme: - title: Interface theme - description: >- - Choose the interface theme which also affects the game. Notice that everything except the default theme may lead to graphical issues. - soundsMuted: title: Mute Sounds description: >- @@ -304,3 +301,8 @@ settings: title: Mute Music description: >- If enabled, mutes all music. + + theme: + title: Game theme + description: >- + Choose the game theme which mainly affects the map background. Notice that everything except the light theme may lead to graphical issues.