diff --git a/res/ui/building_icons/belt.png b/res/ui/building_icons/belt.png index 628480fb..28c2967a 100644 Binary files a/res/ui/building_icons/belt.png and b/res/ui/building_icons/belt.png differ diff --git a/res/ui/building_icons/constant_signal.png b/res/ui/building_icons/constant_signal.png index b438fa29..6d7d9110 100644 Binary files a/res/ui/building_icons/constant_signal.png and b/res/ui/building_icons/constant_signal.png differ diff --git a/res/ui/building_icons/cutter.png b/res/ui/building_icons/cutter.png index 6d0fc4d1..45dfe89a 100644 Binary files a/res/ui/building_icons/cutter.png and b/res/ui/building_icons/cutter.png differ diff --git a/res/ui/building_icons/display.png b/res/ui/building_icons/display.png index 14c48d7e..e24cef7b 100644 Binary files a/res/ui/building_icons/display.png and b/res/ui/building_icons/display.png differ diff --git a/res/ui/building_icons/filter.png b/res/ui/building_icons/filter.png index 2e87af28..a0cba584 100644 Binary files a/res/ui/building_icons/filter.png and b/res/ui/building_icons/filter.png differ diff --git a/res/ui/building_icons/lever.png b/res/ui/building_icons/lever.png index 77eea9f3..63ef3581 100644 Binary files a/res/ui/building_icons/lever.png and b/res/ui/building_icons/lever.png differ diff --git a/res/ui/building_icons/logic_gate.png b/res/ui/building_icons/logic_gate.png index 81a0bdd6..b6956ce6 100644 Binary files a/res/ui/building_icons/logic_gate.png and b/res/ui/building_icons/logic_gate.png differ diff --git a/res/ui/building_icons/miner.png b/res/ui/building_icons/miner.png index fc7050ea..d02d3d15 100644 Binary files a/res/ui/building_icons/miner.png and b/res/ui/building_icons/miner.png differ diff --git a/res/ui/building_icons/mixer.png b/res/ui/building_icons/mixer.png index 87409438..8b4a30e2 100644 Binary files a/res/ui/building_icons/mixer.png and b/res/ui/building_icons/mixer.png differ diff --git a/res/ui/building_icons/painter.png b/res/ui/building_icons/painter.png index 4aa888b6..274166aa 100644 Binary files a/res/ui/building_icons/painter.png and b/res/ui/building_icons/painter.png differ diff --git a/res/ui/building_icons/reader.png b/res/ui/building_icons/reader.png index 890a6ad7..7a2e8d97 100644 Binary files a/res/ui/building_icons/reader.png and b/res/ui/building_icons/reader.png differ diff --git a/res/ui/building_icons/rotater.png b/res/ui/building_icons/rotater.png index 3fb355d6..3d4776bc 100644 Binary files a/res/ui/building_icons/rotater.png and b/res/ui/building_icons/rotater.png differ diff --git a/res/ui/building_icons/splitter.png b/res/ui/building_icons/splitter.png index fb889bab..424f7f63 100644 Binary files a/res/ui/building_icons/splitter.png and b/res/ui/building_icons/splitter.png differ diff --git a/res/ui/building_icons/stacker.png b/res/ui/building_icons/stacker.png index 5a4dda42..495c470e 100644 Binary files a/res/ui/building_icons/stacker.png and b/res/ui/building_icons/stacker.png differ diff --git a/res/ui/building_icons/trash.png b/res/ui/building_icons/trash.png index b6a34ae6..fe8553d5 100644 Binary files a/res/ui/building_icons/trash.png and b/res/ui/building_icons/trash.png differ diff --git a/res/ui/building_icons/underground_belt.png b/res/ui/building_icons/underground_belt.png index b52f4d8e..6e24d4ce 100644 Binary files a/res/ui/building_icons/underground_belt.png and b/res/ui/building_icons/underground_belt.png differ diff --git a/res/ui/building_icons/virtual_processor.png b/res/ui/building_icons/virtual_processor.png index f5471999..a8759e16 100644 Binary files a/res/ui/building_icons/virtual_processor.png and b/res/ui/building_icons/virtual_processor.png differ diff --git a/res/ui/building_icons/wire.png b/res/ui/building_icons/wire.png index 6bae2537..38e0ba92 100644 Binary files a/res/ui/building_icons/wire.png and b/res/ui/building_icons/wire.png differ diff --git a/res/ui/building_icons/wire_tunnel.png b/res/ui/building_icons/wire_tunnel.png index d0e185f9..b44197fe 100644 Binary files a/res/ui/building_icons/wire_tunnel.png and b/res/ui/building_icons/wire_tunnel.png differ diff --git a/res/ui/icons/delete.png b/res/ui/icons/delete.png index db1c86f1..114693a6 100644 Binary files a/res/ui/icons/delete.png and b/res/ui/icons/delete.png differ diff --git a/res/ui/icons/download.png b/res/ui/icons/download.png index 68ed3fb4..9bea1b85 100644 Binary files a/res/ui/icons/download.png and b/res/ui/icons/download.png differ diff --git a/res/ui/icons/enum_selector_white.png b/res/ui/icons/enum_selector_white.png new file mode 100644 index 00000000..c95a44cc Binary files /dev/null and b/res/ui/icons/enum_selector_white.png differ diff --git a/res/ui/icons/main_menu_exit.png b/res/ui/icons/main_menu_exit.png index 07a54c6c..b1918778 100644 Binary files a/res/ui/icons/main_menu_exit.png and b/res/ui/icons/main_menu_exit.png differ diff --git a/res/ui/icons/main_menu_settings.png b/res/ui/icons/main_menu_settings.png index eb99a2ef..88bd4987 100644 Binary files a/res/ui/icons/main_menu_settings.png and b/res/ui/icons/main_menu_settings.png differ diff --git a/res/ui/icons/save.png b/res/ui/icons/save.png index d48274bc..e75c08f4 100644 Binary files a/res/ui/icons/save.png and b/res/ui/icons/save.png differ diff --git a/res/ui/icons/settings_menu_exit.png b/res/ui/icons/settings_menu_exit.png new file mode 100644 index 00000000..3fa17330 Binary files /dev/null and b/res/ui/icons/settings_menu_exit.png differ diff --git a/res/ui/icons/settings_menu_play.png b/res/ui/icons/settings_menu_play.png new file mode 100644 index 00000000..358b5362 Binary files /dev/null and b/res/ui/icons/settings_menu_play.png differ diff --git a/res/ui/icons/settings_menu_settings.png b/res/ui/icons/settings_menu_settings.png new file mode 100644 index 00000000..8eb6efee Binary files /dev/null and b/res/ui/icons/settings_menu_settings.png differ diff --git a/res/ui/icons/shop.png b/res/ui/icons/shop.png index 29519103..94dbc6de 100644 Binary files a/res/ui/icons/shop.png and b/res/ui/icons/shop.png differ diff --git a/res/ui/icons/shop_active.png b/res/ui/icons/shop_active.png new file mode 100644 index 00000000..773d4c88 Binary files /dev/null and b/res/ui/icons/shop_active.png differ diff --git a/res/ui/icons/statistics.png b/res/ui/icons/statistics.png index c6b8e68a..e6349d88 100644 Binary files a/res/ui/icons/statistics.png and b/res/ui/icons/statistics.png differ diff --git a/src/css/common.scss b/src/css/common.scss index 091eb050..504f9b74 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -392,13 +392,18 @@ canvas { &::after { content: " "; background: uiResource("loading.svg") center center / contain no-repeat; - @include S(width, 15px); - @include S(height, 15px); - @include S(margin-top, 1px); - @include S(margin-left, 5px); + @include S(width, 35px); + @include S(height, 35px); display: inline-block; vertical-align: middle; } + + @include InlineAnimation(1.5s ease-in-out infinite) { + 50% { + transform: scale(1.2) rotate(160deg); + } + } + @include DarkThemeOverride { color: #fff; } @@ -463,10 +468,16 @@ canvas { justify-content: center; flex-direction: column; .loadingImage { - background: uiResource("loading.svg") center center / #{D(60px)} no-repeat; + background: uiResource("loading.svg") center center / #{D(40px)} no-repeat; width: 100%; display: flex; flex-grow: 1; + + @include InlineAnimation(1.5s ease-in-out infinite) { + 50% { + transform: scale(1.2) rotate(160deg); + } + } } .hint { @@ -476,6 +487,10 @@ canvas { @include S(bottom, 60px); @include Text; color: #666; + + @include DarkThemeOverride() { + color: lighten($darkModeGameBackground, 50); + } } .loadingStatus { @@ -486,6 +501,11 @@ canvas { @include Text; @include PlainText; color: #aaa; + + @include DarkThemeOverride { + color: lighten($darkModeGameBackground, 20); + } + display: flex; flex-direction: column; justify-content: center; @@ -579,6 +599,13 @@ canvas { background-color: lighten($themeColor, 15); } } + + @include DarkThemeOverride { + background-color: $darkModeGameBackground !important; + &.checked { + background-color: $colorBlueBright !important; + } + } } .rangeInputContainer { @@ -608,6 +635,16 @@ input.rangeInput { @include S(border-radius, 8px); } + @include DarkThemeOverride { + &::-webkit-slider-runnable-track { + background-color: $darkModeControlsBackground; + } + + &::-webkit-slider-thumb { + box-shadow: inset 0 0 0 D(10px) #eee; + } + } + &::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss index d394106d..4700a7d6 100644 --- a/src/css/ingame_hud/buildings_toolbar.scss +++ b/src/css/ingame_hud/buildings_toolbar.scss @@ -1,107 +1,112 @@ -.ingame_buildingsToolbar { - position: fixed; - @include S(bottom, 0px); - left: 50%; - transform: translateX(-50%); - - // NOTE: This flex rule may not be necessary. Need to find out intent. - display: flex; - flex-direction: column; - background: transparent; - border-bottom-width: 0; - transition: transform 120ms ease-in-out; - will-change: transform; - - background-color: rgba(mix(#ddd, $colorBlueBright, 90%), 0.5); - backdrop-filter: blur(D(3px)); - - @include DarkThemeOverride { - background-color: #222428; - } - - &:not(.visible) { - transform: translateX(-50%) translateY(#{D(100px)}); - } - - @include S(border-top-left-radius, $globalBorderRadius); - @include S(border-top-right-radius, $globalBorderRadius); - - .buildings { - display: grid; - grid-auto-flow: column; - - .building { - color: $accentColorDark; - display: flex; - flex-direction: column; - position: relative; - align-items: center; - justify-content: center; - @include S(padding, 5px); - @include S(padding-bottom, 1px); - @include S(width, 35px); - @include S(height, 40px); - - background: center center / 65% no-repeat; - - &:not(.unlocked) { - @include S(width, 20px); - opacity: 0.15; - background-image: none !important; - - &::before { - content: " "; - background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)} - no-repeat; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 4; - } - } - - @include S(border-radius, $globalBorderRadius); - - &.unlocked { - pointer-events: all; - transition: all 50ms ease-in-out; - transition-property: background-color, transform; - cursor: pointer; - will-change: transform; - - &::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: $accentColorDark; - opacity: 0; - will-change: opacity; - } - - &:hover { - &::before { - opacity: 0.1; - } - } - - &.selected { - transform: scale(1.05); - - &::before { - background-color: $colorBlueBright; - opacity: 0.6; - } - - .keybinding { - color: #111; - } - } - } - } - } -} +.ingame_buildingsToolbar { + position: fixed; + @include S(bottom, 0px); + left: 50%; + transform: translateX(-50%); + + // NOTE: This flex rule may not be necessary. Need to find out intent. + display: flex; + flex-direction: column; + background: transparent; + border-bottom-width: 0; + transition: transform 120ms ease-in-out; + will-change: transform; + + backdrop-filter: blur(D(5px)); + + @include DarkThemeOverride { + background-color: darken($darkModeGameBackground, 15); + } + + &:not(.visible) { + transform: translateX(-50%) translateY(#{D(100px)}); + } + + @include S(border-top-left-radius, $globalBorderRadius); + @include S(border-top-right-radius, $globalBorderRadius); + + .buildings { + display: grid; + grid-auto-flow: column; + + .building { + color: $accentColorDark; + display: flex; + flex-direction: column; + position: relative; + align-items: center; + justify-content: center; + @include S(padding, 5px); + @include S(padding-bottom, 1px); + @include S(width, 35px); + @include S(height, 40px); + + background: center center / 65% no-repeat; + + &:not(.unlocked) { + @include S(width, 20px); + opacity: 0.15; + background-image: none !important; + + &::before { + content: " "; + background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)} + no-repeat; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 4; + } + } + + @include S(border-radius, $globalBorderRadius); + + &.unlocked { + pointer-events: all; + transition: all 50ms ease-in-out; + transition-property: background-color, transform; + cursor: pointer; + will-change: transform; + + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: $accentColorDark; + opacity: 0; + will-change: opacity; + } + + &:hover { + &::before { + opacity: 0.1; + } + } + + &.pressed { + transform: scale(0.9) !important; + } + + &.selected { + // transform: scale(1.05); + + &::before { + background-color: rgba($colorBlueBright, 0.2); + opacity: 1; + border-top: D(3px) solid $colorBlueBright; + @include S(top, -3px); + } + + .keybinding { + color: #111; + } + } + } + } + } +} diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss index 9c9ce7a4..cee9bb92 100644 --- a/src/css/ingame_hud/dialogs.scss +++ b/src/css/ingame_hud/dialogs.scss @@ -1,231 +1,233 @@ -.ingameDialog { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: all; - background: $modalDialogBg; - - display: flex; - align-items: center; - justify-content: center; - - @include InlineAnimation(0.12s ease-in-out) { - 0% { - background-color: transparent; - opacity: 0.5; - } - 100% { - background-color: $modalDialogBg; - } - } - - $darkModeDialogBg: darken($darkModeGameBackground, 10); - - @include DarkThemeOverride { - background: rgba($darkModeDialogBg, 0.9); - @include InlineAnimation(0.12s ease-in-out) { - 0% { - background-color: transparent; - opacity: 0.5; - } - 100% { - background-color: rgba($darkModeDialogBg, 0.9); - } - } - - > .dialogInner.optionChooserDialog .optionParent { - .option { - background: #3d3f42; - - &:hover { - background-color: #424348; - } - - &.active { - background: $colorBlueBright; - color: #fff; - } - } - } - } - - &.visible { - .dialogInner { - opacity: 1; - } - backdrop-filter: blur(D(3px)); - } - - .dialogInner { - transition: opacity 0.2s ease-in-out; - opacity: 0; - } - - &.loadingDialog { - * { - color: #fff; - } - } - - > .dialogInner { - background: #fff; - max-height: calc(100vh - #{D(40px)}); - @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; - @include S(grid-gap, 5px); - grid-template-columns: 1fr 1fr; - .option { - pointer-events: all; - 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; - } - } - } - } - - > .title { - @include Heading; - margin: 0; - text-transform: uppercase; - display: grid; - align-items: center; - grid-template-columns: 1fr auto; - @include S(margin-bottom, 10px); - - @include DarkThemeInvert(); - > .closeButton { - opacity: 0.7; - @include S(width, 20px); - @include S(height, 20px); - background: uiResource("icons/close.png") center center / 80% no-repeat; - cursor: pointer; - pointer-events: all; - transition: opacity 0.2s ease-in-out; - &:hover { - opacity: 0.4; - } - } - } - - > .content { - @include PlainText; - overflow-y: auto; - pointer-events: all; - @include S(width, 350px); - - @include DarkThemeOverride { - color: #aaa; - } - - a { - color: $colorBlueBright; - } - - strong { - font-weight: bold; - } - - .keybinding { - position: relative; - background: #eee; - @include PlainText; - height: unset; - margin: 1px 0; - } - - input { - background: #eee; - color: #333438; - width: 100%; - - &.errored { - background-color: rgb(250, 206, 206); - } - } - - ul.bucketList { - padding-left: 30px; - - li { - display: list-item; - } - } - } - - > .buttons { - @include S(margin-top, 15px); - display: flex; - justify-content: flex-end; - > button { - @include S(margin-left, 8px); - @include Text; - @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; - } - - &.bad { - background-color: $colorRedBright; - color: #fff; - } - - &.timedButton { - pointer-events: none; - cursor: default; - position: relative; - overflow: hidden; - &::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: unset; - z-index: 5; - content: " "; - display: inline-block; - background: rgba(#fff, 0.6); - @include InlineAnimation(5s linear) { - 0% { - width: 100%; - } - 100% { - width: 0%; - } - } - } - } - } - } - } -} +.ingameDialog { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: all; + background: $modalDialogBg; + + display: flex; + align-items: center; + justify-content: center; + + @include InlineAnimation(0.12s ease-in-out) { + 0% { + background-color: transparent; + opacity: 0.5; + } + 100% { + background-color: $modalDialogBg; + } + } + + $darkModeDialogBg: darken($darkModeGameBackground, 5); + + @include DarkThemeOverride { + background: rgba($darkModeDialogBg, 0.9); + @include InlineAnimation(0.12s ease-in-out) { + 0% { + background-color: transparent; + opacity: 0.5; + } + 100% { + background-color: rgba($darkModeDialogBg, 0.9); + } + } + + > .dialogInner.optionChooserDialog .optionParent { + .option { + background: $darkModeControlsBackground; + + &:hover { + background-color: lighten($darkModeControlsBackground, 5); + } + + &.active { + background: $colorBlueBright; + color: #fff; + } + } + } + } + + &.visible { + .dialogInner { + opacity: 1; + } + backdrop-filter: blur(D(3px)); + } + + .dialogInner { + transition: opacity 0.2s ease-in-out; + opacity: 0; + } + + &.loadingDialog { + * { + color: #fff; + } + } + + > .dialogInner { + background: #fff; + max-height: calc(100vh - #{D(40px)}); + @include S(border-radius, $globalBorderRadius); + display: flex; + flex-direction: column; + @include S(padding, 12px); + pointer-events: all; + + @include DarkThemeOverride { + background: darken($darkModeControlsBackground, 5); + } + + &.optionChooserDialog { + .optionParent { + display: grid; + @include S(grid-gap, 5px); + grid-template-columns: 1fr 1fr; + .option { + pointer-events: all; + 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; + } + } + } + } + + > .title { + @include Heading; + margin: 0; + text-transform: uppercase; + display: grid; + align-items: center; + grid-template-columns: 1fr auto; + @include S(margin-bottom, 10px); + + @include DarkThemeInvert(); + > .closeButton { + opacity: 0.7; + @include S(width, 20px); + @include S(height, 20px); + background: uiResource("icons/close.png") center center / 80% no-repeat; + cursor: pointer; + pointer-events: all; + transition: opacity 0.2s ease-in-out; + &:hover { + opacity: 0.4; + } + } + } + + > .content { + @include PlainText; + overflow-y: auto; + pointer-events: all; + @include S(width, 350px); + + @include DarkThemeOverride { + color: #aaa; + } + + a { + color: $colorBlueBright; + } + + strong { + font-weight: bold; + } + + .keybinding { + position: relative; + background: #eee; + @include PlainText; + height: unset; + margin: 1px 0; + } + + input { + background: #eee; + color: #333438; + width: 100%; + + &.errored { + background-color: rgb(250, 206, 206); + } + } + + ul.bucketList { + padding-left: 30px; + + li { + display: list-item; + } + } + } + + > .buttons { + @include S(margin-top, 15px); + display: flex; + justify-content: flex-end; + > button { + @include S(margin-left, 8px); + @include Text; + @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; + } + + &.bad { + background-color: $colorRedBright; + color: #fff; + } + + &.timedButton { + pointer-events: none; + cursor: default; + position: relative; + overflow: hidden; + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: unset; + z-index: 5; + content: " "; + display: inline-block; + background: rgba(#fff, 0.6); + @include InlineAnimation(5s linear) { + 0% { + width: 100%; + } + 100% { + width: 0%; + } + } + } + } + } + } + } +} diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index e4810c09..258d098d 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -1,122 +1,142 @@ #ingame_HUD_GameMenu { position: absolute; - top: 0; - right: 0; - display: flex; - grid-auto-flow: column; + @include S(top, 10px); + @include S(right, 10px); + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + @include S(grid-gap, 6px); - > .menuButtons { - position: relative; - display: flex; - flex-grow: 1; - @include S(padding, 5px, 4px); - justify-content: flex-end; - @include S(margin-left, 20px); + backdrop-filter: blur(D(1px)); - > .button { - @include S(width, 30px); - @include S(height, 30px); - display: inline-block; - background: center center / 60% no-repeat; - pointer-events: all; - cursor: pointer; - transition: all 0.12s ease-in-out; - transition-property: opacity, transform; - will-change: opacity; - opacity: 0.9; - @include S(margin-left, 5px); - position: relative; + // > .menuButtons { + // position: relative; + // display: flex; + // flex-grow: 1; + // @include S(padding, 5px, 4px); + // justify-content: flex-end; + // @include S(margin-left, 20px); - @include IncreasedClickArea(0px); + // > .button { + // @include S(width, 30px); + // @include S(height, 30px); + // display: inline-block; + // background: center center / 60% no-repeat; + // pointer-events: all; + // cursor: pointer; + // transition: all 0.12s ease-in-out; + // transition-property: opacity, transform; + // will-change: opacity; + // opacity: 0.5; + // &:hover { + // opacity: 0.7; + // } - @include DarkThemeInvert; + // @include DarkThemeOverride { + // opacity: 0.9; + // &:hover { + // opacity: 0.6; + // } + // } + // @include S(margin-left, 5px); + // position: relative; - &:hover { - opacity: 0.8; - } + // @include IncreasedClickArea(0px); - &.save { - background-image: uiResource("icons/save.png"); - @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) { - 0% { - transform: scale(1, 1); - } + // @include DarkThemeInvert; - 70% { - transform: scale(1.5, 1.5) rotate(20deg); - opacity: 0.2; - } + // &.save { + // background-image: uiResource("icons/save.png"); + // + // } - 85% { - transform: scale(0.9, 0.9); - opacity: 1; - } + // &.settings { + // background-image: uiResource("icons/settings_menu_settings.png"); + // } + // } + // } - 90% { - transform: scale(1.1, 1.1); - } - } - - &.saving { - @include InlineAnimation(0.4s ease-in-out infinite) { - 50% { - opacity: 0.5; - transform: scale(0.8); - } - } - pointer-events: none; - cursor: default; - } - } - - &.settings { - background-image: uiResource("icons/settings.png"); - } - } - } - - .buttonContainer button { + > button, + > .button { @include PlainText; - color: #fff; - border-color: rgba(0, 0, 0, 0.1); - @include S(padding, 5px, 5px, 5px); - - @include S(padding-left, 30px); - @include S(margin-right, 3px); @include IncreasedClickArea(0px); - @include ButtonText; - @include S(min-height, 40px); + background: green; + @include S(width, 30px); + @include S(height, 30px); + + pointer-events: all; + cursor: pointer; + position: relative; transition: all 0.12s ease-in-out; transition-property: opacity, transform; - display: inline-flex; - background: center #{D(13px)} / #{D(20px)} no-repeat; - background-color: $colorGreenBright; - &[data-button-id="shop"] { - background-color: rgb(93, 103, 250); - background-image: uiResource("icons/shop.png"); - background-size: #{D(18px)}; + display: inline-flex; + background: center center / 70% no-repeat; + grid-row: 1; + + &.pressed { + transform: scale(0.9) !important; } - &[data-button-id="stats"] { - background-color: rgb(85, 199, 138); + + opacity: 0.5; + &:hover { + opacity: 0.9 !important; + } + + @include DarkThemeInvert; + + &.shop { + background-image: uiResource("icons/shop.png"); + grid-column: 1; + } + + &.stats { background-image: uiResource("icons/statistics.png"); + grid-column: 2; + } + + &.save { + background-image: uiResource("icons/save.png"); + grid-column: 3; + @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) { + 0% { + transform: scale(1, 1); + } + + 70% { + transform: scale(1.5, 1.5) rotate(20deg); + opacity: 0.2; + } + + 85% { + transform: scale(0.9, 0.9); + opacity: 1; + } + + 90% { + transform: scale(1.1, 1.1); + } + } + + &.saving { + @include InlineAnimation(0.4s ease-in-out infinite) { + 50% { + opacity: 0.5; + transform: scale(0.8); + } + } + pointer-events: none; + cursor: default; + } + } + + &.settings { + background-image: uiResource("icons/settings_menu_settings.png"); + grid-column: 4; } &:hover { opacity: 0.9; - } - - .keybinding { - border: 0; - color: #fff; - border-top-left-radius: 0; - border-top-right-radius: 0; - bottom: unset; - background: transparent; - @include S(top, 0px); - right: unset; - left: 50%; - transform: translateX(-50%); + transform: translateY(0); } &:not(.hasBadge) .badge { @@ -124,34 +144,27 @@ } &.hasBadge { - transform-origin: 50% 0%; - @include InlineAnimation(1s ease-in-out infinite) { + &.shop { + filter: none; + background-image: uiResource("icons/shop_active.png"); + opacity: 0.9; + } + transform-origin: 50% 50%; + @include InlineAnimation(0.8s ease-in-out infinite) { 50% { - transform: scale(1.02); + transform: scale(1.3) rotate(6deg); } } .badge { position: absolute; - @include S(bottom, -8px); + top: 50%; left: 50%; - transform: translateX(-50%); - - background: #333; + transform: translate(-50%, -50%); @include PlainText; display: flex; justify-content: center; align-items: center; - @include S(min-width, 5px); - @include S(height, 10px); - @include S(padding, 1px, 3px, 2px); - @include S(border-radius, $globalBorderRadius); - border: #{D(1px)} solid #fff; - @include InlineAnimation(1s ease-in-out infinite) { - 50% { - transform: translateX(-50%) scale(1.05); - } - } } } } diff --git a/src/css/ingame_hud/keybindings_overlay.scss b/src/css/ingame_hud/keybindings_overlay.scss index 21d07b4b..e6845afe 100644 --- a/src/css/ingame_hud/keybindings_overlay.scss +++ b/src/css/ingame_hud/keybindings_overlay.scss @@ -7,7 +7,7 @@ flex-direction: column; align-items: flex-start; color: #333438; - backdrop-filter: blur(D(2px)); + backdrop-filter: blur(D(1px)); padding: D(3px); @include DarkThemeOverride { diff --git a/src/css/ingame_hud/settings_menu.scss b/src/css/ingame_hud/settings_menu.scss index e0cec1f6..3ba67358 100644 --- a/src/css/ingame_hud/settings_menu.scss +++ b/src/css/ingame_hud/settings_menu.scss @@ -1,41 +1,61 @@ -#ingame_HUD_SettingsMenu { - .statsElement { - position: absolute; - @include S(left, 30px); - @include S(top, 30px); - color: #fff; - display: flex; - grid-template-rows: 1fr auto; - flex-direction: column; - - strong { - text-transform: uppercase; - @include PlainText; - opacity: 0.5; - } - - span { - @include S(margin-bottom, 25px); - @include Heading; - } - } - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - .buttons { - display: grid; - grid-auto-flow: row; - @include S(grid-gap, 10px); - background: rgba(0, 10, 20, 0.1); - @include S(padding, 10px); - @include S(border-radius, $globalBorderRadius); - - button { - background-color: #eee; - color: #55585a; - } - } -} +#ingame_HUD_SettingsMenu { + .statsElement { + position: absolute; + @include S(left, 30px); + @include S(right, 30px); + @include S(bottom, 30px); + color: #fff; + display: grid; + grid-template-rows: auto auto; + grid-auto-columns: 1fr; + align-items: center; + justify-items: center; + + strong { + text-transform: uppercase; + @include PlainText; + opacity: 0.5; + grid-row: 1; + } + + span { + @include Heading; + grid-row: 2; + } + } + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .buttons { + display: grid; + grid-auto-flow: column; + @include S(grid-gap, 50px); + @include S(margin-top, -10px); + + button { + background: transparent; + filter: invert(1); + + background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat; + content: ""; + opacity: 0.8; + @include S(width, 35px); + @include S(height, 35px); + + &.settings { + background-image: uiResource("icons/settings_menu_settings.png"); + } + + &.menu { + background-image: uiResource("icons/settings_menu_exit.png"); + } + + &:hover { + opacity: 0.6; + } + } + } +} diff --git a/src/css/ingame_hud/shop.scss b/src/css/ingame_hud/shop.scss index d8cc8a86..73727390 100644 --- a/src/css/ingame_hud/shop.scss +++ b/src/css/ingame_hud/shop.scss @@ -1,320 +1,320 @@ -#ingame_HUD_Shop { - .content { - @include S(padding-right, 10px); - display: flex; - flex-direction: column; - @include S(width, 500px); - - .upgrade { - display: grid; - grid-template-columns: auto 1fr auto; - background: #eee; - @include S(border-radius, $globalBorderRadius); - @include S(margin-bottom, 4px); - @include S(padding, 5px, 10px); - @include S(grid-row-gap, 1px); - @include S(height, 85px); - grid-template-rows: #{D(20px)} auto; - - &:last-child { - margin-bottom: 0; - } - - @include DarkThemeOverride { - background: #55585a; - } - - .title { - grid-column: 1 / 3; - grid-row: 1 / 2; - @include PlainText; - display: flex; - align-items: center; - flex-direction: row-reverse; - justify-content: flex-end; - - @include DarkThemeOverride { - color: #fff; - } - - .tier { - @include S(margin-right, 9px); - background: $colorGreenBright; - @include S(border-radius, $globalBorderRadius); - text-transform: uppercase; - @include PlainText; - color: #fff; - text-align: center; - font-weight: bold; - @include S(min-width, 50px); - @include S(padding, 0px, 5px); - - &[data-tier="0"] { - background-color: rgb(73, 186, 190); - } - &[data-tier="1"] { - background-color: rgb(88, 110, 207); - } - &[data-tier="2"] { - background-color: rgb(189, 100, 192); - } - &[data-tier="3"] { - background-color: rgb(117, 192, 98); - } - &[data-tier="4"] { - background-color: rgb(243, 77, 48); - } - &[data-tier="5"] { - background-color: rgb(255, 209, 6); - } - &[data-tier="6"] { - background-color: rgb(44, 41, 46); - } - } - } - - .icon { - @include S(width, 40px); - @include S(height, 40px); - background: center center / 80% no-repeat; - align-self: center; - justify-self: center; - grid-column: 1 / 2; - grid-row: 2 / 4; - @include S(margin-right, 30px); - @include S(margin-left, 10px); - opacity: 0.32; - display: none; - } - - .description { - grid-column: 2 / 4; - grid-row: 1 / 2; - @include PlainText; - color: #aaa; - align-self: start; - justify-self: end; - } - - .requirements { - grid-column: 2 / 3; - grid-row: 3 / 4; - display: grid; - grid-auto-flow: column; - @include S(grid-gap, 9px); - justify-content: start; - - .requirement { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - @include S(width, 70px); - overflow: hidden; - - button.pin { - @include S(width, 12px); - @include S(height, 12px); - background: uiResource("icons/pin.png") center center / 95% no-repeat; - position: absolute; - @include S(top, 2px); - @include S(right, 2px); - opacity: 0.6; - cursor: pointer; - pointer-events: all; - @include IncreasedClickArea(5px); - transition: opacity 0.12s ease-in-out; - - @include DarkThemeInvert; - - $disabledOpacity: 0.2; - $enabledOpacity: 0.6; - - &:hover { - opacity: $enabledOpacity + 0.1; - } - - &.alreadyPinned { - opacity: $disabledOpacity !important; - - &:hover { - opacity: $disabledOpacity + 0.1 !important; - } - } - - &.isGoal { - background: uiResource("icons/current_goal_marker.png") center center / 95% - no-repeat; - opacity: $disabledOpacity !important; - cursor: default; - pointer-events: none; - } - - &.pinned { - opacity: $disabledOpacity; - @include InlineAnimation(0.3s ease-in-out) { - 0% { - opacity: 1; - transform: scale(0.8); - } - - 30% { - opacity: 1; - transform: scale(1.2); - } - - 100% { - transform: scale(1); - } - } - &:hover { - opacity: $disabledOpacity + 0.1; - } - } - - &.unpinned { - opacity: $enabledOpacity; - @include InlineAnimation(0.3s ease-in-out) { - 0% { - opacity: 1; - transform: scale(0.8); - } - - 30% { - opacity: 1; - transform: scale(1.2); - } - - 100% { - transform: scale(1); - } - } - &:hover { - opacity: $enabledOpacity + 0.1; - } - } - } - - button.showInfo { - @include S(width, 11px); - @include S(height, 11px); - background: uiResource("icons/info_button.png") center center / 95% no-repeat; - position: absolute; - @include S(top, 17px); - @include S(right, 2.5px); - opacity: 0.5; - cursor: pointer; - pointer-events: all; - @include IncreasedClickArea(5px); - transition: opacity 0.12s ease-in-out; - @include DarkThemeInvert; - - &:hover { - opacity: 0.6; - } - } - - canvas { - @include S(width, 40px); - @include S(height, 40px); - } - - .amount { - @include S(margin-top, 4px); - z-index: 10; - @include SuperSmallText; - letter-spacing: 0; - background: #e2e4e6; - - @include S(line-height, 13px); - @include S(border-radius, $globalBorderRadius); - @include S(padding, 1px, 0px, 2px); - position: relative; - text-align: center; - @include S(min-width, 50px); - // @include S(max-width, 100px); - overflow: hidden; - width: 100%; - - @include DarkThemeOverride { - background: #333438; - color: #fff; - } - - .progressBar { - bottom: 0; - left: 0; - right: 0; - top: 0; - @include S(border-radius, $globalBorderRadius); - position: absolute; - display: inline-block; - z-index: -1; - transition: all 0.2s ease-in-out; - transition-property: width, background-color; - background: #bdbfca; - - @include DarkThemeOverride { - background: #8c8d96; - } - - &.complete { - background-color: $colorGreenBright; - - @include DarkThemeOverride { - background-color: $colorGreenBright; - } - } - } - } - } - } - - button.buy { - grid-column: 3 / 4; - grid-row: 3 / 4; - align-self: center; - justify-self: end; - // @include S(padding, 4px, 5px); - // @include PlainText; - background-color: $colorGreenBright; - color: #fff; - - transition: all 0.2s ease-in-out; - transition-property: background-color, opacity; - - &:not(.buyable) { - background-color: #aaa; - cursor: default; - pointer-events: none; - opacity: 0.3; - } - - &.buyable { - @include InlineAnimation(1s ease-in-out infinite) { - 0% { - } - - 50% { - background-color: lighten($colorGreenBright, 10); - } - 100% { - } - } - } - } - - &.maxLevel { - button.buy { - opacity: 0 !important; - } - .requirements { - display: none; - } - .description { - color: $colorGreenBright; - } - } - } - } -} +#ingame_HUD_Shop { + .content { + @include S(padding-right, 10px); + display: flex; + flex-direction: column; + @include S(width, 500px); + + .upgrade { + display: grid; + grid-template-columns: auto 1fr auto; + background: #eee; + @include S(border-radius, $globalBorderRadius); + @include S(margin-bottom, 4px); + @include S(padding, 5px, 10px); + @include S(grid-row-gap, 1px); + @include S(height, 85px); + grid-template-rows: #{D(20px)} auto; + + &:last-child { + margin-bottom: 0; + } + + @include DarkThemeOverride { + background: $darkModeControlsBackground; + } + + .title { + grid-column: 1 / 3; + grid-row: 1 / 2; + @include PlainText; + display: flex; + align-items: center; + flex-direction: row-reverse; + justify-content: flex-end; + + @include DarkThemeOverride { + color: #fff; + } + + .tier { + @include S(margin-right, 9px); + background: $colorGreenBright; + @include S(border-radius, $globalBorderRadius); + text-transform: uppercase; + @include PlainText; + color: #fff; + text-align: center; + font-weight: bold; + @include S(min-width, 50px); + @include S(padding, 0px, 5px); + + &[data-tier="0"] { + background-color: rgb(73, 186, 190); + } + &[data-tier="1"] { + background-color: rgb(88, 110, 207); + } + &[data-tier="2"] { + background-color: rgb(189, 100, 192); + } + &[data-tier="3"] { + background-color: rgb(117, 192, 98); + } + &[data-tier="4"] { + background-color: rgb(243, 77, 48); + } + &[data-tier="5"] { + background-color: rgb(255, 209, 6); + } + &[data-tier="6"] { + background-color: rgb(44, 41, 46); + } + } + } + + .icon { + @include S(width, 40px); + @include S(height, 40px); + background: center center / 80% no-repeat; + align-self: center; + justify-self: center; + grid-column: 1 / 2; + grid-row: 2 / 4; + @include S(margin-right, 30px); + @include S(margin-left, 10px); + opacity: 0.32; + display: none; + } + + .description { + grid-column: 2 / 4; + grid-row: 1 / 2; + @include PlainText; + color: #aaa; + align-self: start; + justify-self: end; + } + + .requirements { + grid-column: 2 / 3; + grid-row: 3 / 4; + display: grid; + grid-auto-flow: column; + @include S(grid-gap, 9px); + justify-content: start; + + .requirement { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + @include S(width, 70px); + overflow: hidden; + + button.pin { + @include S(width, 12px); + @include S(height, 12px); + background: uiResource("icons/pin.png") center center / 95% no-repeat; + position: absolute; + @include S(top, 2px); + @include S(right, 2px); + opacity: 0.6; + cursor: pointer; + pointer-events: all; + @include IncreasedClickArea(5px); + transition: opacity 0.12s ease-in-out; + + @include DarkThemeInvert; + + $disabledOpacity: 0.2; + $enabledOpacity: 0.6; + + &:hover { + opacity: $enabledOpacity + 0.1; + } + + &.alreadyPinned { + opacity: $disabledOpacity !important; + + &:hover { + opacity: $disabledOpacity + 0.1 !important; + } + } + + &.isGoal { + background: uiResource("icons/current_goal_marker.png") center center / 95% + no-repeat; + opacity: $disabledOpacity !important; + cursor: default; + pointer-events: none; + } + + &.pinned { + opacity: $disabledOpacity; + @include InlineAnimation(0.3s ease-in-out) { + 0% { + opacity: 1; + transform: scale(0.8); + } + + 30% { + opacity: 1; + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } + } + &:hover { + opacity: $disabledOpacity + 0.1; + } + } + + &.unpinned { + opacity: $enabledOpacity; + @include InlineAnimation(0.3s ease-in-out) { + 0% { + opacity: 1; + transform: scale(0.8); + } + + 30% { + opacity: 1; + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } + } + &:hover { + opacity: $enabledOpacity + 0.1; + } + } + } + + button.showInfo { + @include S(width, 11px); + @include S(height, 11px); + background: uiResource("icons/info_button.png") center center / 95% no-repeat; + position: absolute; + @include S(top, 17px); + @include S(right, 2.5px); + opacity: 0.5; + cursor: pointer; + pointer-events: all; + @include IncreasedClickArea(5px); + transition: opacity 0.12s ease-in-out; + @include DarkThemeInvert; + + &:hover { + opacity: 0.6; + } + } + + canvas { + @include S(width, 40px); + @include S(height, 40px); + } + + .amount { + @include S(margin-top, 4px); + z-index: 10; + @include SuperSmallText; + letter-spacing: 0; + background: #e2e4e6; + + @include S(line-height, 13px); + @include S(border-radius, $globalBorderRadius); + @include S(padding, 1px, 0px, 2px); + position: relative; + text-align: center; + @include S(min-width, 50px); + // @include S(max-width, 100px); + overflow: hidden; + width: 100%; + + @include DarkThemeOverride { + background: #333438; + color: #fff; + } + + .progressBar { + bottom: 0; + left: 0; + right: 0; + top: 0; + @include S(border-radius, $globalBorderRadius); + position: absolute; + display: inline-block; + z-index: -1; + transition: all 0.2s ease-in-out; + transition-property: width, background-color; + background: #bdbfca; + + @include DarkThemeOverride { + background: #8c8d96; + } + + &.complete { + background-color: $colorGreenBright; + + @include DarkThemeOverride { + background-color: $colorGreenBright; + } + } + } + } + } + } + + button.buy { + grid-column: 3 / 4; + grid-row: 3 / 4; + align-self: center; + justify-self: end; + // @include S(padding, 4px, 5px); + // @include PlainText; + background-color: $colorGreenBright; + color: #fff; + + transition: all 0.2s ease-in-out; + transition-property: background-color, opacity; + + &:not(.buyable) { + background-color: #aaa; + cursor: default; + pointer-events: none; + opacity: 0.3; + } + + &.buyable { + @include InlineAnimation(1s ease-in-out infinite) { + 0% { + } + + 50% { + background-color: lighten($colorGreenBright, 10); + } + 100% { + } + } + } + } + + &.maxLevel { + button.buy { + opacity: 0 !important; + } + .requirements { + display: none; + } + .description { + color: $colorGreenBright; + } + } + } + } +} diff --git a/src/css/ingame_hud/statistics.scss b/src/css/ingame_hud/statistics.scss index 12b8c1aa..47809d5a 100644 --- a/src/css/ingame_hud/statistics.scss +++ b/src/css/ingame_hud/statistics.scss @@ -49,6 +49,10 @@ background-color: #44484a !important; transition: opacity 0.2s ease-in-out; + + @include DarkThemeOverride { + background-color: lighten($darkModeControlsBackground, 10) !important; + } } .filtersDataSource, @@ -110,10 +114,10 @@ } @include DarkThemeOverride { - background: #222428; + background: $darkModeControlsBackground; &.pinned { - background: darken(#222428, 10); + background: mix($darkModeControlsBackground, $colorBlueBright, 90%); } } @@ -159,6 +163,11 @@ grid-column: 1 / 2; grid-row: 2 / 3; justify-self: end; + color: #55595a; + + @include DarkThemeOverride { + color: #aaa; + } } } } @@ -176,6 +185,10 @@ align-self: center; text-align: right; color: #55595a; + + @include DarkThemeOverride { + color: #aaa; + } } canvas.graph { diff --git a/src/css/states/ingame.scss b/src/css/states/ingame.scss index 207d67b0..29799f20 100644 --- a/src/css/states/ingame.scss +++ b/src/css/states/ingame.scss @@ -21,6 +21,12 @@ @include S(right, 20px); @include PlainText; text-align: center; + + color: #666; + + @include DarkThemeOverride() { + color: lighten($darkModeGameBackground, 50); + } } #ingame_Canvas { diff --git a/src/css/states/keybindings.scss b/src/css/states/keybindings.scss index cf211403..09cc88dd 100644 --- a/src/css/states/keybindings.scss +++ b/src/css/states/keybindings.scss @@ -1,71 +1,71 @@ -#state_KeybindingsState { - .content { - .topEntries { - display: grid; - grid-template-columns: 1fr auto; - @include S(grid-gap, 5px); - @include S(margin-bottom, 10px); - } - - .hint { - display: block; - background: #eee; - @include S(padding, 4px); - @include PlainText; - } - - .category { - .entry { - display: grid; - @include S(margin-top, 2px); - @include S(padding-top, 2px); - @include S(grid-gap, 4px); - grid-template-columns: 1fr #{D(100px)} auto auto; - border-bottom: #{D(1px)} dotted #eee; - color: #888c8f; - .mapping { - color: $colorBlueBright; - text-align: center; - } - - button { - @include S(height, 15px); - @include S(width, 15px); - @include IncreasedClickArea(0px); - background: transparent center center / 40% no-repeat; - opacity: 0.9; - &.editKeybinding { - background-image: uiResource("icons/edit_key.png"); - } - - &.resetKeybinding { - background-image: uiResource("icons/reset_key.png"); - } - - &.disabled { - pointer-events: none; - cursor: default; - opacity: 0.1 !important; - } - } - } - } - } - - @include DarkThemeOverride { - .content { - .hint { - background: #3b3d40; - } - - .category .entry { - color: #c0c4c8; - border-bottom-color: #888; - - button { - filter: invert(1); - } - } - } - } -} +#state_KeybindingsState { + .content { + .topEntries { + display: grid; + grid-template-columns: 1fr auto; + @include S(grid-gap, 5px); + @include S(margin-bottom, 10px); + } + + .hint { + display: block; + background: #eee; + @include S(padding, 4px); + @include PlainText; + } + + .category { + .entry { + display: grid; + @include S(margin-top, 2px); + @include S(padding-top, 2px); + @include S(grid-gap, 4px); + grid-template-columns: 1fr #{D(100px)} auto auto; + border-bottom: #{D(1px)} dotted #eee; + color: #888c8f; + .mapping { + color: $colorBlueBright; + text-align: center; + } + + button { + @include S(height, 15px); + @include S(width, 15px); + @include IncreasedClickArea(0px); + background: transparent center center / 40% no-repeat; + opacity: 0.9; + &.editKeybinding { + background-image: uiResource("icons/edit_key.png"); + } + + &.resetKeybinding { + background-image: uiResource("icons/reset_key.png"); + } + + &.disabled { + pointer-events: none; + cursor: default; + opacity: 0.1 !important; + } + } + } + } + } + + @include DarkThemeOverride { + .content { + .hint { + background: darken($darkModeControlsBackground, 4); + } + + .category .entry { + color: #c0c4c8; + border-bottom-color: #888; + + button { + filter: invert(1); + } + } + } + } +} diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 0d0a289e..a18c10ad 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -25,13 +25,15 @@ background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat; transition: opacity 0.12s ease-in-out; @include IncreasedClickArea(2px); + opacity: 0.7; &:hover { - opacity: 0.9; + opacity: 1; } } .exitAppButton { background-image: uiResource("icons/main_menu_exit.png"); + background-size: 90%; } .languageChoose { @@ -40,6 +42,7 @@ background-color: #fff; @include S(border-width, 2px); background-size: cover; + opacity: 0.8; } } @@ -57,7 +60,7 @@ transform: translate(50%, 50%); filter: blur(D(3px)); - $opacity: 0.2; + $opacity: 0.07; &.loaded { display: block; opacity: $opacity; @@ -332,25 +335,39 @@ button.downloadGame { grid-column: 3 / 4; grid-row: 1 / 2; - background-color: $colorBlueBright; + background-color: transparent; background-image: uiResource("icons/download.png"); @include S(width, 15px); @include IncreasedClickArea(0px); @include S(height, 15px); - background-size: 60%; + background-size: 80%; align-self: start; + opacity: 0.4; + + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; } button.deleteGame { grid-column: 3 / 4; grid-row: 2 / 3; - background-color: $colorRedBright; + background-color: transparent; @include IncreasedClickArea(0px); background-image: uiResource("icons/delete.png"); @include S(width, 15px); @include S(height, 15px); align-self: end; - background-size: 60%; + background-size: 80%; + opacity: 0.4; + + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; } button.renameGame { @@ -363,11 +380,11 @@ justify-self: center; background-size: 90%; - opacity: 0.25; + opacity: 0.4; @include S(margin-left, 4px); &:hover { - opacity: 0.35; + opacity: 0.5; } @include DarkThemeInvert; @@ -379,6 +396,11 @@ margin: 0; @include S(width, 32px); height: 100%; + @include S(margin-left, 4px); + + @include DarkThemeOverride { + background-color: lighten($darkModeControlsBackground, 10); + } } } } @@ -407,13 +429,17 @@ @include S(padding, 15px); + $linkBg: #fdfdff; + $linkBgHover: darken($linkBg, 2); + $linkColor: #55586a; + > .boxLink { display: grid; align-items: center; grid-template-columns: 1fr auto; justify-content: center; - background: #fdfdfd uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat; + background: $linkBg uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat; @include S(padding, 5px); @include S(padding-left, 10px); @include S(border-radius, $globalBorderRadius); @@ -422,7 +448,7 @@ font-weight: bold; box-sizing: border-box; text-transform: uppercase; - color: #616266; + color: $linkColor; transition: background-color 0.12s ease-in-out; pointer-events: all; @@ -431,7 +457,7 @@ cursor: pointer; &:hover { - background-color: #f0f6ff; + background-color: $linkBgHover; } .thirdpartyLogo { @@ -458,12 +484,12 @@ @include S(height, 60px); > a { - color: #616266; - background: #fdfdfd; + color: $linkColor; + background: $linkBg; height: 100%; &:hover { - background-color: #f0f6ff; + background-color: $linkBgHover; } @include SuperSmallText; text-transform: uppercase; @@ -499,19 +525,11 @@ @include DarkThemeOverride { background: $darkModeGameBackground center center / cover !important; - .topButtons { - filter: invert(1); - - .languageChoose { - filter: invert(1); - } - } - .mainContainer { - background: darken($darkModeGameBackground, 10); + background: $darkModeControlsBackground; .savegames .savegame { - background: darken($darkModeGameBackground, 15); + background: darken($darkModeControlsBackground, 5); color: white; } } @@ -519,11 +537,11 @@ .footer { > a, .sidelinks > a { - background-color: darken($darkModeGameBackground, 10); + background-color: $darkModeControlsBackground; color: #eee; &:hover { - background-color: darken($darkModeGameBackground, 8); + background-color: darken($darkModeControlsBackground, 5); } } diff --git a/src/css/states/settings.scss b/src/css/states/settings.scss index a31cfea3..9c4c2882 100644 --- a/src/css/states/settings.scss +++ b/src/css/states/settings.scss @@ -1,6 +1,6 @@ #state_SettingsState { $colorCategoryButton: #eeeff5; - $colorCategoryButtonSelected: #5f748b; + $colorCategoryButtonSelected: $colorBlueBright; $layoutBreak: 1000px; @@ -177,10 +177,12 @@ .sidebar { button.categoryButton, button.about { - background-color: #3f3f47; + color: #ccc; + background-color: darken($darkModeControlsBackground, 5); &.active { - background-color: $colorBlueBright; + color: #fff; + background-color: $colorCategoryButtonSelected; } } } @@ -192,8 +194,13 @@ .value.enum { // dirty but works - filter: invert(0.78) sepia(40%) hue-rotate(190deg); - color: #222; + // color: #222; + background-color: $darkModeControlsBackground; + background-image: uiResource("icons/enum_selector_white.png"); + color: #ddd; + &:hover { + background-color: darken($darkModeControlsBackground, 2); + } } .value.checkbox { diff --git a/src/css/textual_game_state.scss b/src/css/textual_game_state.scss index 54c5dbb3..63b59cd0 100644 --- a/src/css/textual_game_state.scss +++ b/src/css/textual_game_state.scss @@ -1,81 +1,81 @@ -.gameState.textualState { - display: grid; - grid-template-rows: auto 1fr; - box-sizing: border-box; - @include S(padding, 32px); - height: 100vh; - - .headerBar { - display: flex; - - h1 { - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - pointer-events: all; - cursor: pointer; - @include SuperHeading; - text-transform: uppercase; - color: #333438; - position: relative; - @include IncreasedClickArea(10px); - } - - .backButton { - @include S(width, 30px); - @include S(height, 30px); - @include S(margin-right, 10px); - @include S(margin-left, -5px); - background: uiResource("icons/state_back_button.png") center center / 70% no-repeat; - } - - @include S(margin-bottom, 20px); - } - - > .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: 100%; - overflow-y: auto; - box-sizing: border-box; - pointer-events: all; - - a { - color: $colorBlueBright; - } - - .categoryLabel { - display: block; - text-transform: uppercase; - @include S(margin-top, 15px); - @include S(margin-bottom, 15px); - @include Heading; - } - } - } - - @include DarkThemeOverride { - .headerBar { - h1 { - color: #e2e0db; - } - - .backButton { - filter: invert(1); - } - } - - > .container > .content { - background: darken($darkModeGameBackground, 3); - color: #eee; - } - } -} +.gameState.textualState { + display: grid; + grid-template-rows: auto 1fr; + box-sizing: border-box; + @include S(padding, 32px); + height: 100vh; + + .headerBar { + display: flex; + + h1 { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + pointer-events: all; + cursor: pointer; + @include SuperHeading; + text-transform: uppercase; + color: #333438; + position: relative; + @include IncreasedClickArea(10px); + } + + .backButton { + @include S(width, 30px); + @include S(height, 30px); + @include S(margin-right, 10px); + @include S(margin-left, -5px); + background: uiResource("icons/state_back_button.png") center center / 70% no-repeat; + } + + @include S(margin-bottom, 20px); + } + + > .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: 100%; + overflow-y: auto; + box-sizing: border-box; + pointer-events: all; + + a { + color: $colorBlueBright; + } + + .categoryLabel { + display: block; + text-transform: uppercase; + @include S(margin-top, 15px); + @include S(margin-bottom, 15px); + @include Heading; + } + } + } + + @include DarkThemeOverride { + .headerBar { + h1 { + color: #e2e0db; + } + + .backButton { + filter: invert(1); + } + } + + > .container > .content { + background: $darkModeControlsBackground; + color: #eee; + } + } +} diff --git a/src/css/variables.scss b/src/css/variables.scss index 7646e471..d2798f41 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,198 +1,199 @@ -$globalBorderRadius: 2px; - -// When to reduce control elements size for small devices -$layoutExpandMinWidth: 340px; - -// Font sizes and line heights -$superHeadingFontSize: 25px; -$superHeadingLineHeight: 24px; - -$breakTooltipShowStatsPx: 1023px; - -$headingFontSize: 19px; -$headingLineHeight: 21px; - -$textFontSize: 16px; -$textLineHeight: 21px; - -$plainTextFontSize: 13px; -$plainTextLineHeight: 17px; - -$supersmallTextFontSize: 10px; -$supersmallTextLineHeight: 13px; -$buttonFontSize: 14px; -$buttonLineHeight: 18px; - -// Main background color -$mainBgColor: #dee1ea; - -// Accent colors - -$accentColorBright: #e1e4ed; -$accentColorDark: #7d808a; -$colorGreenBright: #66bb6a; -$colorBlueBright: rgb(74, 163, 223); -$colorRedBright: #ef5072; -$themeColor: #393747; -$ingameHudBg: rgba(#333438, 0.9); - -$text3dColor: #f4ffff; - -$darkModeGameBackground: #5c606c; - -// Dialog properties -$modalDialogBg: rgba(160, 165, 180, 0.8); -$dialogBgColor: lighten($mainBgColor, 10); - -$lightFontWeight: normal; -$boldFontWeight: 600; - -$iconSizeSmall: 30px; -$iconSizeMedium: 40px; -$iconSizeLarge: 60px; - -// Poppins 500 -// Rubik 400 -// Cairo 400 -// Viga 400 -// Sniglet 400 - -$mainFont: "GameFont", sans-serif; -// $mainFont: "DK Canoodle"; -// $mainFont: "MADE Florence Sans"; -$numberFont: $mainFont; -$textFont: $mainFont; - -$mainFontWeight: 400; -$mainFontSpacing: 0.04em; -$mainFontScale: 1; - -@mixin DebugText($color) { - // font-size: 3px; - // &, - // * { - // color: $color !important; - // } -} - -@mixin SuperSmallText { - @include ScaleFont($supersmallTextFontSize, $supersmallTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - @include DebugText(green); -} - -@mixin PlainText { - @include ScaleFont($plainTextFontSize, $plainTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - - @include DebugText(red); -} - -@mixin Text { - @include ScaleFont($textFontSize, $textLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - - letter-spacing: $mainFontSpacing; - - @include DebugText(blue); -} - -@mixin Heading { - @include ScaleFont($headingFontSize, $headingLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - - @include DebugText(yellow); -} - -@mixin SuperHeading { - @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - - @include DebugText(orange); -} - -@mixin ButtonText { - @include ScaleFont($buttonFontSize, $buttonLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - @include DebugText(purple); -} - -@function str-split($string, $separator) { - // empty array/list - $split-arr: (); - // first index of separator in string - $index: str-index($string, $separator); - // loop through string - @while $index != null { - // get the substring from the first character to the separator - $item: str-slice($string, 1, $index - 1); - // push item to array - $split-arr: append($split-arr, $item); - // remove item and separator from string - $string: str-slice($string, $index + 1); - // find new index of separator - $index: str-index($string, $separator); - } - // add the remaining string to list (the last item) - $split-arr: append($split-arr, $string); - - @return $split-arr; -} - -@function _first-index($string, $direction: "left") { - @for $i from 1 through str-length($string) { - $index: if($direction == "left", $i, -$i); - - @if str-slice($string, $index, $index) != " " { - @return $index; - } - } - - @return 0; -} - -@function trim($string) { - @return str-slice($string, _first-index($string, "left"), _first-index($string, "right")); -} - -@mixin AppendGlobal($prefix) { - $strSelector: quote(&); - $selectors: str-split($strSelector, ","); - - $builtSelector: null; - - @if (& == null) { - $builtSelector: "html" + $prefix; - } @else { - $builtSelector: (); - // @debug ($strSelector, "->>>", $selectors); - @each $srcSelector in $selectors { - $srcSelector: trim($srcSelector); - // @debug ("___", $srcSelector); - $selector: "html" + $prefix + " " + $srcSelector; - @if str-index($srcSelector, "html.") { - $selector: "html" + - $prefix + - "." + - str-slice($srcSelector, str-index($srcSelector, "html.") + 5); - } - // @debug ("_______", $selector); - $builtSelector: append($builtSelector, $selector, comma); - } - } - - @at-root #{$builtSelector} { - @content; - } -} +$globalBorderRadius: 2px; + +// When to reduce control elements size for small devices +$layoutExpandMinWidth: 340px; + +// Font sizes and line heights +$superHeadingFontSize: 25px; +$superHeadingLineHeight: 24px; + +$breakTooltipShowStatsPx: 1023px; + +$headingFontSize: 19px; +$headingLineHeight: 21px; + +$textFontSize: 16px; +$textLineHeight: 21px; + +$plainTextFontSize: 13px; +$plainTextLineHeight: 17px; + +$supersmallTextFontSize: 10px; +$supersmallTextLineHeight: 13px; +$buttonFontSize: 14px; +$buttonLineHeight: 18px; + +// Main background color +$mainBgColor: #dee1ea; + +// Accent colors + +$accentColorBright: #e1e4ed; +$accentColorDark: #7d808a; +$colorGreenBright: #66bb6a; +$colorBlueBright: rgb(74, 151, 223); +$colorRedBright: #ef5072; +$themeColor: #393747; +$ingameHudBg: rgba(#333438, 0.9); + +$text3dColor: #f4ffff; + +$darkModeGameBackground: #535866; +$darkModeControlsBackground: darken($darkModeGameBackground, 5); + +// Dialog properties +$modalDialogBg: rgba(160, 165, 180, 0.8); +$dialogBgColor: lighten($mainBgColor, 10); + +$lightFontWeight: normal; +$boldFontWeight: 600; + +$iconSizeSmall: 30px; +$iconSizeMedium: 40px; +$iconSizeLarge: 60px; + +// Poppins 500 +// Rubik 400 +// Cairo 400 +// Viga 400 +// Sniglet 400 + +$mainFont: "GameFont", sans-serif; +// $mainFont: "DK Canoodle"; +// $mainFont: "MADE Florence Sans"; +$numberFont: $mainFont; +$textFont: $mainFont; + +$mainFontWeight: 400; +$mainFontSpacing: 0.04em; +$mainFontScale: 1; + +@mixin DebugText($color) { + // font-size: 3px; + // &, + // * { + // color: $color !important; + // } +} + +@mixin SuperSmallText { + @include ScaleFont($supersmallTextFontSize, $supersmallTextLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + @include DebugText(green); +} + +@mixin PlainText { + @include ScaleFont($plainTextFontSize, $plainTextLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + + @include DebugText(red); +} + +@mixin Text { + @include ScaleFont($textFontSize, $textLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + + letter-spacing: $mainFontSpacing; + + @include DebugText(blue); +} + +@mixin Heading { + @include ScaleFont($headingFontSize, $headingLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + + @include DebugText(yellow); +} + +@mixin SuperHeading { + @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + + @include DebugText(orange); +} + +@mixin ButtonText { + @include ScaleFont($buttonFontSize, $buttonLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + @include DebugText(purple); +} + +@function str-split($string, $separator) { + // empty array/list + $split-arr: (); + // first index of separator in string + $index: str-index($string, $separator); + // loop through string + @while $index != null { + // get the substring from the first character to the separator + $item: str-slice($string, 1, $index - 1); + // push item to array + $split-arr: append($split-arr, $item); + // remove item and separator from string + $string: str-slice($string, $index + 1); + // find new index of separator + $index: str-index($string, $separator); + } + // add the remaining string to list (the last item) + $split-arr: append($split-arr, $string); + + @return $split-arr; +} + +@function _first-index($string, $direction: "left") { + @for $i from 1 through str-length($string) { + $index: if($direction == "left", $i, -$i); + + @if str-slice($string, $index, $index) != " " { + @return $index; + } + } + + @return 0; +} + +@function trim($string) { + @return str-slice($string, _first-index($string, "left"), _first-index($string, "right")); +} + +@mixin AppendGlobal($prefix) { + $strSelector: quote(&); + $selectors: str-split($strSelector, ","); + + $builtSelector: null; + + @if (& == null) { + $builtSelector: "html" + $prefix; + } @else { + $builtSelector: (); + // @debug ($strSelector, "->>>", $selectors); + @each $srcSelector in $selectors { + $srcSelector: trim($srcSelector); + // @debug ("___", $srcSelector); + $selector: "html" + $prefix + " " + $srcSelector; + @if str-index($srcSelector, "html.") { + $selector: "html" + + $prefix + + "." + + str-slice($srcSelector, str-index($srcSelector, "html.") + 5); + } + // @debug ("_______", $selector); + $builtSelector: append($builtSelector, $selector, comma); + } + } + + @at-root #{$builtSelector} { + @content; + } +} diff --git a/src/js/core/modal_dialog_elements.js b/src/js/core/modal_dialog_elements.js index 3acd2673..124f51d4 100644 --- a/src/js/core/modal_dialog_elements.js +++ b/src/js/core/modal_dialog_elements.js @@ -277,7 +277,6 @@ export class DialogLoading extends Dialog { const loader = document.createElement("div"); loader.classList.add("prefab_LoadingTextWithAnim"); loader.classList.add("loadingIndicator"); - loader.innerText = T.global.loading; elem.appendChild(loader); this.app.inputMgr.pushReciever(this.inputReciever); diff --git a/src/js/game/game_loading_overlay.js b/src/js/game/game_loading_overlay.js index 13df0e27..431504d8 100644 --- a/src/js/game/game_loading_overlay.js +++ b/src/js/game/game_loading_overlay.js @@ -55,7 +55,6 @@ export class GameLoadingOverlay { internalAddSpinnerAndText(element) { const inner = document.createElement("span"); inner.classList.add("prefab_LoadingTextWithAnim"); - inner.innerText = T.global.loading; element.appendChild(inner); } diff --git a/src/js/game/hud/parts/game_menu.js b/src/js/game/hud/parts/game_menu.js index 6db50066..27290fa1 100644 --- a/src/js/game/hud/parts/game_menu.js +++ b/src/js/game/hud/parts/game_menu.js @@ -17,7 +17,8 @@ export class HUDGameMenu extends BaseHUDPart { label: "Upgrades", handler: () => this.root.hud.parts.shop.show(), keybinding: KEYMAPPINGS.ingame.menuOpenShop, - badge: () => this.root.hubGoals.getAvailableUpgradeCount(), + // badge: () => this.root.hubGoals.getAvailableUpgradeCount(), + badge: () => 1, notification: /** @type {[string, enumNotificationType]} */ ([ T.ingame.notifications.newUpgrade, enumNotificationType.upgrade, @@ -52,18 +53,15 @@ export class HUDGameMenu extends BaseHUDPart { * }>} */ this.visibilityToUpdate = []; - this.buttonsElement = makeDiv(this.element, null, ["buttonContainer"]); - buttons.forEach(({ id, label, handler, keybinding, badge, notification, visible }) => { const button = document.createElement("button"); - button.setAttribute("data-button-id", id); - this.buttonsElement.appendChild(button); + button.classList.add(id); + this.element.appendChild(button); this.trackClicks(button, handler); if (keybinding) { const binding = this.root.keyMapper.getBinding(keybinding); binding.add(handler); - binding.appendLabelToElement(button); } if (visible) { @@ -87,10 +85,8 @@ export class HUDGameMenu extends BaseHUDPart { } }); - const menuButtons = makeDiv(this.element, null, ["menuButtons"]); - - this.saveButton = makeDiv(menuButtons, null, ["button", "save", "animEven"]); - this.settingsButton = makeDiv(menuButtons, null, ["button", "settings"]); + this.saveButton = makeDiv(this.element, null, ["button", "save", "animEven"]); + this.settingsButton = makeDiv(this.element, null, ["button", "settings"]); this.trackClicks(this.saveButton, this.startSave); this.trackClicks(this.settingsButton, this.openSettings); diff --git a/src/js/game/hud/parts/settings_menu.js b/src/js/game/hud/parts/settings_menu.js index 391fde01..0cd94f79 100644 --- a/src/js/game/hud/parts/settings_menu.js +++ b/src/js/game/hud/parts/settings_menu.js @@ -1,127 +1,127 @@ -import { BaseHUDPart } from "../base_hud_part"; -import { makeDiv, formatBigNumberFull } from "../../../core/utils"; -import { DynamicDomAttach } from "../dynamic_dom_attach"; -import { InputReceiver } from "../../../core/input_receiver"; -import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper"; -import { T } from "../../../translations"; -import { StaticMapEntityComponent } from "../../components/static_map_entity"; -import { BeltComponent } from "../../components/belt"; - -export class HUDSettingsMenu extends BaseHUDPart { - createElements(parent) { - this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]); - - this.menuElement = makeDiv(this.background, null, ["menuElement"]); - - this.statsElement = makeDiv( - this.background, - null, - ["statsElement"], - ` - ${T.ingame.settingsMenu.beltsPlaced} - ${T.ingame.settingsMenu.buildingsPlaced} - ${T.ingame.settingsMenu.playtime} - - ` - ); - - this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]); - - const buttons = [ - { - title: T.ingame.settingsMenu.buttons.continue, - action: () => this.close(), - }, - { - title: T.ingame.settingsMenu.buttons.settings, - action: () => this.goToSettings(), - }, - { - title: T.ingame.settingsMenu.buttons.menu, - action: () => this.returnToMenu(), - }, - ]; - - for (let i = 0; i < buttons.length; ++i) { - const { title, action } = buttons[i]; - - const element = document.createElement("button"); - element.classList.add("styledButton"); - element.innerText = title; - this.buttonContainer.appendChild(element); - - this.trackClicks(element, action); - } - } - - returnToMenu() { - this.root.gameState.goBackToMenu(); - } - - goToSettings() { - this.root.gameState.goToSettings(); - } - - shouldPauseGame() { - return this.visible; - } - - shouldPauseRendering() { - return this.visible; - } - - initialize() { - this.root.keyMapper.getBinding(KEYMAPPINGS.general.back).add(this.show, this); - - this.domAttach = new DynamicDomAttach(this.root, this.background, { - attachClass: "visible", - }); - - this.inputReciever = new InputReceiver("settingsmenu"); - this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever); - this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this); - - this.close(); - } - - cleanup() { - document.body.classList.remove("ingameDialogOpen"); - } - - show() { - this.visible = true; - document.body.classList.add("ingameDialogOpen"); - this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever); - - const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60); - - /** @type {HTMLElement} */ - const playtimeElement = this.statsElement.querySelector(".playtime"); - /** @type {HTMLElement} */ - const buildingsPlacedElement = this.statsElement.querySelector(".buildingsPlaced"); - /** @type {HTMLElement} */ - const beltsPlacedElement = this.statsElement.querySelector(".beltsPlaced"); - - playtimeElement.innerText = T.global.time.xMinutes.replace("", `${totalMinutesPlayed}`); - - buildingsPlacedElement.innerText = formatBigNumberFull( - this.root.entityMgr.getAllWithComponent(StaticMapEntityComponent).length - - this.root.entityMgr.getAllWithComponent(BeltComponent).length - ); - - beltsPlacedElement.innerText = formatBigNumberFull( - this.root.entityMgr.getAllWithComponent(BeltComponent).length - ); - } - - close() { - this.visible = false; - document.body.classList.remove("ingameDialogOpen"); - this.root.app.inputMgr.makeSureDetached(this.inputReciever); - this.update(); - } - - update() { - this.domAttach.update(this.visible); - } -} +import { BaseHUDPart } from "../base_hud_part"; +import { makeDiv, formatBigNumberFull } from "../../../core/utils"; +import { DynamicDomAttach } from "../dynamic_dom_attach"; +import { InputReceiver } from "../../../core/input_receiver"; +import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper"; +import { T } from "../../../translations"; +import { StaticMapEntityComponent } from "../../components/static_map_entity"; +import { BeltComponent } from "../../components/belt"; + +export class HUDSettingsMenu extends BaseHUDPart { + createElements(parent) { + this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]); + + this.menuElement = makeDiv(this.background, null, ["menuElement"]); + + this.statsElement = makeDiv( + this.background, + null, + ["statsElement"], + ` + ${T.ingame.settingsMenu.beltsPlaced} + ${T.ingame.settingsMenu.buildingsPlaced} + ${T.ingame.settingsMenu.playtime} + + ` + ); + + this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]); + + const buttons = [ + { + id: "continue", + action: () => this.close(), + }, + { + id: "settings", + action: () => this.goToSettings(), + }, + { + id: "menu", + action: () => this.returnToMenu(), + }, + ]; + + for (let i = 0; i < buttons.length; ++i) { + const { title, action, id } = buttons[i]; + + const element = document.createElement("button"); + element.classList.add("styledButton"); + element.classList.add(id); + this.buttonContainer.appendChild(element); + + this.trackClicks(element, action); + } + } + + returnToMenu() { + this.root.gameState.goBackToMenu(); + } + + goToSettings() { + this.root.gameState.goToSettings(); + } + + shouldPauseGame() { + return this.visible; + } + + shouldPauseRendering() { + return this.visible; + } + + initialize() { + this.root.keyMapper.getBinding(KEYMAPPINGS.general.back).add(this.show, this); + + this.domAttach = new DynamicDomAttach(this.root, this.background, { + attachClass: "visible", + }); + + this.inputReciever = new InputReceiver("settingsmenu"); + this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever); + this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this); + + this.close(); + } + + cleanup() { + document.body.classList.remove("ingameDialogOpen"); + } + + show() { + this.visible = true; + document.body.classList.add("ingameDialogOpen"); + this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever); + + const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60); + + /** @type {HTMLElement} */ + const playtimeElement = this.statsElement.querySelector(".playtime"); + /** @type {HTMLElement} */ + const buildingsPlacedElement = this.statsElement.querySelector(".buildingsPlaced"); + /** @type {HTMLElement} */ + const beltsPlacedElement = this.statsElement.querySelector(".beltsPlaced"); + + playtimeElement.innerText = T.global.time.xMinutes.replace("", `${totalMinutesPlayed}`); + + buildingsPlacedElement.innerText = formatBigNumberFull( + this.root.entityMgr.getAllWithComponent(StaticMapEntityComponent).length - + this.root.entityMgr.getAllWithComponent(BeltComponent).length + ); + + beltsPlacedElement.innerText = formatBigNumberFull( + this.root.entityMgr.getAllWithComponent(BeltComponent).length + ); + } + + close() { + this.visible = false; + document.body.classList.remove("ingameDialogOpen"); + this.root.app.inputMgr.makeSureDetached(this.inputReciever); + this.update(); + } + + update() { + this.domAttach.update(this.visible); + } +} diff --git a/src/js/game/systems/map_resources.js b/src/js/game/systems/map_resources.js index c368e684..807afb36 100644 --- a/src/js/game/systems/map_resources.js +++ b/src/js/game/systems/map_resources.js @@ -49,11 +49,20 @@ export class MapResourcesSystem extends GameSystem { } else { // HIGH QUALITY: Draw all items const layer = chunk.lowerLayer; + const layerEntities = chunk.contents; for (let x = 0; x < globalConfig.mapChunkSize; ++x) { const row = layer[x]; + const rowEntities = layerEntities[x]; const worldX = (chunk.tileX + x) * globalConfig.tileSize; for (let y = 0; y < globalConfig.mapChunkSize; ++y) { const lowerItem = row[y]; + + const entity = rowEntities[y]; + if (entity) { + // Don't draw if there is an entity above + continue; + } + if (lowerItem) { const worldY = (chunk.tileY + y) * globalConfig.tileSize; diff --git a/src/js/game/themes/dark.json b/src/js/game/themes/dark.json index 7466201f..2f03b767 100644 --- a/src/js/game/themes/dark.json +++ b/src/js/game/themes/dark.json @@ -1,7 +1,7 @@ { "uiStyle": "dark", "map": { - "background": "#2e2f37", + "background": "#3e3f47", "grid": "rgba(255, 255, 255, 0.02)", "gridLineWidth": 0.5, @@ -25,10 +25,10 @@ "colorBlindPickerTile": "rgba(255, 255, 255, 0.5)", "resources": { - "shape": "#3d3f4a", - "red": "#4a3d3f", - "green": "#3e4a3d", - "blue": "#35384a" + "shape": "#5d5f6a", + "red": "#854f56", + "green": "#667964", + "blue": "#5e7ca4" }, "chunkOverview": { "empty": "#444856", diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index d8d81001..12443cf1 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -488,8 +488,10 @@ export class MainMenuState extends GameState { const signals = this.dialogs.showWarning( T.dialogs.confirmSavegameDelete.title, - T.dialogs.confirmSavegameDelete.text, - ["delete:bad", "cancel:good"] + T.dialogs.confirmSavegameDelete.text + .replace("", game.name || T.mainMenu.savegameUnnamed) + .replace("", String(game.level)), + ["cancel:good", "delete:bad:timeout"] ); signals.delete.add(() => { diff --git a/translations/base-en.yaml b/translations/base-en.yaml index dc43f3ce..a355cf7c 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -191,7 +191,9 @@ dialogs: confirmSavegameDelete: title: Confirm deletion text: >- - Are you sure you want to delete the game? + Are you sure you want to delete the following game?

+ '' at level

+ This can not be undone! savegameDeletionError: title: Failed to delete @@ -390,7 +392,7 @@ ingame: buttons: continue: Continue settings: Settings - menu: Return to menu + menu: Menu # Bottom left tutorial hints tutorialHints: @@ -908,7 +910,7 @@ keybindings: hint: >- Tip: Be sure to make use of CTRL, SHIFT and ALT! They enable different placement options. - resetKeybindings: Reset Keybindings + resetKeybindings: Reset categoryLabels: general: Application