Polishing, CSS Improvements, Improve dark mode

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(width, 35px);
-        @include S(height, 15px);
+        @include S(height, 35px);
-        @include S(margin-top, 1px);
-        @include S(margin-left, 5px);
         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;

src/css/ingame_hud/buildings_toolbar.scss

@@ -12,11 +12,10 @@
     transition: transform 120ms ease-in-out;
     will-change: transform;
 
-    background-color: rgba(mix(#ddd, $colorBlueBright, 90%), 0.5);
+    backdrop-filter: blur(D(5px));
-    backdrop-filter: blur(D(3px));
 
     @include DarkThemeOverride {
-        background-color: #222428;
+        background-color: darken($darkModeGameBackground, 15);
     }
 
     &:not(.visible) {
@@ -89,12 +88,18 @@
                     }
                 }
 
+                &.pressed {
+                    transform: scale(0.9) !important;
+                }
+
                 &.selected {
-                    transform: scale(1.05);
+                    // transform: scale(1.05);
 
                     &::before {
-                        background-color: $colorBlueBright;
+                        background-color: rgba($colorBlueBright, 0.2);
-                        opacity: 0.6;
+                        opacity: 1;
+                        border-top: D(3px) solid $colorBlueBright;
+                        @include S(top, -3px);
                     }
 
                     .keybinding {

src/css/ingame_hud/dialogs.scss

@@ -21,7 +21,7 @@
         }
     }
 
-    $darkModeDialogBg: darken($darkModeGameBackground, 10);
+    $darkModeDialogBg: darken($darkModeGameBackground, 5);
 
     @include DarkThemeOverride {
         background: rgba($darkModeDialogBg, 0.9);
@@ -37,10 +37,10 @@
 
         > .dialogInner.optionChooserDialog .optionParent {
             .option {
-                background: #3d3f42;
+                background: $darkModeControlsBackground;
 
                 &:hover {
-                    background-color: #424348;
+                    background-color: lighten($darkModeControlsBackground, 5);
                 }
 
                 &.active {
@@ -79,7 +79,7 @@
         pointer-events: all;
 
         @include DarkThemeOverride {
-            background: #333438;
+            background: darken($darkModeControlsBackground, 5);
         }
 
         &.optionChooserDialog {
@@ -91,7 +91,9 @@
                     pointer-events: all;
                     cursor: pointer;
                     @include S(padding, 10px);
+
                     background: #eee;
+
                     transition: background-color 0.12s ease-in-out;
 
                     &:hover {

src/css/ingame_hud/game_menu.scss

@@ -1,122 +1,142 @@
 #ingame_HUD_GameMenu {
     position: absolute;
-    top: 0;
+    @include S(top, 10px);
-    right: 0;
+    @include S(right, 10px);
-    display: flex;
+    display: grid;
-    grid-auto-flow: column;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    @include S(grid-gap, 6px);
 
-    > .menuButtons {
+    backdrop-filter: blur(D(1px));
-        position: relative;
-        display: flex;
-        flex-grow: 1;
-        @include S(padding, 5px, 4px);
-        justify-content: flex-end;
-        @include S(margin-left, 20px);
 
-        > .button {
+    // > .menuButtons {
-            @include S(width, 30px);
+    //     position: relative;
-            @include S(height, 30px);
+    //     display: flex;
-            display: inline-block;
+    //     flex-grow: 1;
-            background: center center / 60% no-repeat;
+    //     @include S(padding, 5px, 4px);
-            pointer-events: all;
+    //     justify-content: flex-end;
-            cursor: pointer;
+    //     @include S(margin-left, 20px);
-            transition: all 0.12s ease-in-out;
-            transition-property: opacity, transform;
-            will-change: opacity;
-            opacity: 0.9;
-            @include S(margin-left, 5px);
-            position: relative;
 
-            @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 {
+    //         @include IncreasedClickArea(0px);
-                opacity: 0.8;
-            }
 
-            &.save {
+    //         @include DarkThemeInvert;
-                background-image: uiResource("icons/save.png");
-                @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
-                    0% {
-                        transform: scale(1, 1);
-                    }
 
-                    70% {
+    //         &.save {
-                        transform: scale(1.5, 1.5) rotate(20deg);
+    //             background-image: uiResource("icons/save.png");
-                        opacity: 0.2;
+    //
-                    }
+    //         }
 
-                    85% {
+    //         &.settings {
-                        transform: scale(0.9, 0.9);
+    //             background-image: uiResource("icons/settings_menu_settings.png");
-                        opacity: 1;
+    //         }
-                    }
+    //     }
+    // }
 
-                    90% {
+    > button,
-                        transform: scale(1.1, 1.1);
+    > .button {
-                    }
-                }
-
-                &.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 {
         @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;
+        background: green;
-        @include S(min-height, 40px);
+        @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"] {
+        display: inline-flex;
-            background-color: rgb(93, 103, 250);
+        background: center center / 70% no-repeat;
-            background-image: uiResource("icons/shop.png");
+        grid-row: 1;
-            background-size: #{D(18px)};
+
+        &.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;
-        }
+            transform: translateY(0);
-
-        .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%);
         }
 
         &:not(.hasBadge) .badge {
@@ -124,34 +144,27 @@
         }
 
         &.hasBadge {
-            transform-origin: 50% 0%;
+            &.shop {
-            @include InlineAnimation(1s ease-in-out infinite) {
+                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%);
+                transform: translate(-50%, -50%);
-
-                background: #333;
                 @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);
-                    }
-                }
             }
         }
     }

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 {

src/css/ingame_hud/settings_menu.scss

@@ -2,21 +2,25 @@
     .statsElement {
         position: absolute;
         @include S(left, 30px);
-        @include S(top, 30px);
+        @include S(right, 30px);
+        @include S(bottom, 30px);
         color: #fff;
-        display: flex;
+        display: grid;
-        grid-template-rows: 1fr auto;
+        grid-template-rows: auto auto;
-        flex-direction: column;
+        grid-auto-columns: 1fr;
+        align-items: center;
+        justify-items: center;
 
         strong {
             text-transform: uppercase;
             @include PlainText;
             opacity: 0.5;
+            grid-row: 1;
         }
 
         span {
-            @include S(margin-bottom, 25px);
             @include Heading;
+            grid-row: 2;
         }
     }
 
@@ -27,15 +31,31 @@
 
     .buttons {
         display: grid;
-        grid-auto-flow: row;
+        grid-auto-flow: column;
-        @include S(grid-gap, 10px);
+        @include S(grid-gap, 50px);
-        background: rgba(0, 10, 20, 0.1);
+        @include S(margin-top, -10px);
-        @include S(padding, 10px);
-        @include S(border-radius, $globalBorderRadius);
 
         button {
-            background-color: #eee;
+            background: transparent;
-            color: #55585a;
+            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;
+            }
         }
     }
 }

src/css/ingame_hud/shop.scss

@@ -21,7 +21,7 @@
             }
 
             @include DarkThemeOverride {
-                background: #55585a;
+                background: $darkModeControlsBackground;
             }
 
             .title {

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 {

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 {

src/css/states/keybindings.scss

@@ -55,7 +55,7 @@
     @include DarkThemeOverride {
         .content {
             .hint {
-                background: #3b3d40;
+                background: darken($darkModeControlsBackground, 4);
             }
 
             .category .entry {

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;
+                color: $linkColor;
-                background: #fdfdfd;
+                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);
                 }
             }
 

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 {

src/css/textual_game_state.scss

@@ -74,7 +74,7 @@
         }
 
         > .container > .content {
-            background: darken($darkModeGameBackground, 3);
+            background: $darkModeControlsBackground;
             color: #eee;
         }
     }

src/css/variables.scss

@@ -31,14 +31,15 @@ $mainBgColor: #dee1ea;
 $accentColorBright: #e1e4ed;
 $accentColorDark: #7d808a;
 $colorGreenBright: #66bb6a;
-$colorBlueBright: rgb(74, 163, 223);
+$colorBlueBright: rgb(74, 151, 223);
 $colorRedBright: #ef5072;
 $themeColor: #393747;
 $ingameHudBg: rgba(#333438, 0.9);
 
 $text3dColor: #f4ffff;
 
-$darkModeGameBackground: #5c606c;
+$darkModeGameBackground: #535866;
+$darkModeControlsBackground: darken($darkModeGameBackground, 5);
 
 // Dialog properties
 $modalDialogBg: rgba(160, 165, 180, 0.8);

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);

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);
     }
 

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);
+            button.classList.add(id);
-            this.buttonsElement.appendChild(button);
+            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(this.element, null, ["button", "save", "animEven"]);
-
+        this.settingsButton = makeDiv(this.element, null, ["button", "settings"]);
-        this.saveButton = makeDiv(menuButtons, null, ["button", "save", "animEven"]);
-        this.settingsButton = makeDiv(menuButtons, null, ["button", "settings"]);
 
         this.trackClicks(this.saveButton, this.startSave);
         this.trackClicks(this.settingsButton, this.openSettings);

src/js/game/hud/parts/settings_menu.js

@@ -29,25 +29,25 @@ export class HUDSettingsMenu extends BaseHUDPart {
 
         const buttons = [
             {
-                title: T.ingame.settingsMenu.buttons.continue,
+                id: "continue",
                 action: () => this.close(),
             },
             {
-                title: T.ingame.settingsMenu.buttons.settings,
+                id: "settings",
                 action: () => this.goToSettings(),
             },
             {
-                title: T.ingame.settingsMenu.buttons.menu,
+                id: "menu",
                 action: () => this.returnToMenu(),
             },
         ];
 
         for (let i = 0; i < buttons.length; ++i) {
-            const { title, action } = buttons[i];
+            const { title, action, id } = buttons[i];
 
             const element = document.createElement("button");
             element.classList.add("styledButton");
-            element.innerText = title;
+            element.classList.add(id);
             this.buttonContainer.appendChild(element);
 
             this.trackClicks(element, action);

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;
 

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",
+            "shape": "#5d5f6a",
-            "red": "#4a3d3f",
+            "red": "#854f56",
-            "green": "#3e4a3d",
+            "green": "#667964",
-            "blue": "#35384a"
+            "blue": "#5e7ca4"
         },
         "chunkOverview": {
             "empty": "#444856",

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,
+            T.dialogs.confirmSavegameDelete.text
-            ["delete:bad", "cancel:good"]
+                .replace("<savegameName>", game.name || T.mainMenu.savegameUnnamed)
+                .replace("<savegameLevel>", String(game.level)),
+            ["cancel:good", "delete:bad:timeout"]
         );
 
         signals.delete.add(() => {

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?<br><br>            
+            '<savegameName>' at level <savegameLevel><br><br>
+            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