Merge pull request #2 from tobspr/master

Update to base project

README.md

@@ -64,7 +64,7 @@ This project is based on ES5. Some ES2015 features are used but most of them are
 5. Add a constructor. **The constructor must be called with optional parameters only!** `new MyFancyComponent({})` should always work.
 6. Add any props you need in the constructor.
 7. Add the component in `src/js/game/component_registry.js`
-8. Add the componetn in `src/js/game/entity_components.js`
+8. Add the component in `src/js/game/entity_components.js`
 9. Done! You can use your component now
 
 #### Adding a new building
@@ -96,6 +96,6 @@ This project is based on ES5. Some ES2015 features are used but most of them are
 
 For most assets I use Adobe Photoshop, you can find them in `assets/`.
 
-You will need a <a href="https://www.codeandweb.com/texturepacker" target="_blank">Texture Packer</a> license in order to regenerate the atlas. If you don't have one but want to contribute assets, let me know and I might compile it for you. I'm currently switching to an open source solution but I can't give an estimate when thats done.
+You will need a <a href="https://www.codeandweb.com/texturepacker" target="_blank">Texture Packer</a> license in order to regenerate the atlas. If you don't have one but want to contribute assets, let me know and I might compile it for you. I'm currently switching to an open source solution but I can't give an estimate when that's done.
 
 <img src="https://i.imgur.com/W25Fkl0.png" alt="shapez.io Screenshot">

gulp/sounds.js

@@ -16,6 +16,12 @@ function gulptasksSounds($, gulp, buildFolder) {
         cacheDirName: "shapezio-precompiled-sounds",
     });
 
+    function getFileCacheValue(file) {
+        const { _isVinyl, base, cwd, contents, history, stat, path } = file;
+        const encodedContents = Buffer.from(contents).toString('base64');
+        return { _isVinyl, base, cwd, contents: encodedContents, history, stat, path };
+    }
+
     // Encodes the game music
     gulp.task("sounds.music", () => {
         return gulp
@@ -34,6 +40,7 @@ function gulptasksSounds($, gulp, buildFolder) {
                     {
                         name: "music",
                         fileCache,
+                        value: getFileCacheValue,
                     }
                 )
             )
@@ -58,6 +65,7 @@ function gulptasksSounds($, gulp, buildFolder) {
                     {
                         name: "music-high-quality",
                         fileCache,
+                        value: getFileCacheValue,
                     }
                 )
             )

res_raw/atlas.tps

@@ -197,7 +197,7 @@
             <key>scaleMode</key>
             <enum type="ScaleMode">Smooth</enum>
             <key>extrude</key>
-            <uint>2</uint>
+            <uint>3</uint>
             <key>trimThreshold</key>
             <uint>2</uint>
             <key>trimMargin</key>
@@ -269,7 +269,7 @@
             <key type="filename">sprites/blueprints/miner.png</key>
             <key type="filename">sprites/blueprints/reader.png</key>
             <key type="filename">sprites/blueprints/rotater-ccw.png</key>
-            <key type="filename">sprites/blueprints/rotater-fl.png</key>
+            <key type="filename">sprites/blueprints/rotater-rotate180.png</key>
             <key type="filename">sprites/blueprints/rotater.png</key>
             <key type="filename">sprites/blueprints/splitter-compact-inverse.png</key>
             <key type="filename">sprites/blueprints/splitter-compact-merge-inverse.png</key>
@@ -281,8 +281,10 @@
             <key type="filename">sprites/blueprints/underground_belt_exit-tier2.png</key>
             <key type="filename">sprites/blueprints/underground_belt_exit.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-analyzer.png</key>
+            <key type="filename">sprites/blueprints/virtual_processor-painter.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-rotater.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-shapecompare.png</key>
+            <key type="filename">sprites/blueprints/virtual_processor-stacker.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-unstacker.png</key>
             <key type="filename">sprites/blueprints/virtual_processor.png</key>
             <key type="filename">sprites/blueprints/wire_tunnel-coating.png</key>
@@ -298,7 +300,7 @@
             <key type="filename">sprites/buildings/miner-chainable.png</key>
             <key type="filename">sprites/buildings/reader.png</key>
             <key type="filename">sprites/buildings/rotater-ccw.png</key>
-            <key type="filename">sprites/buildings/rotater-fl.png</key>
+            <key type="filename">sprites/buildings/rotater-rotate180.png</key>
             <key type="filename">sprites/buildings/splitter-compact-inverse.png</key>
             <key type="filename">sprites/buildings/splitter-compact-merge-inverse.png</key>
             <key type="filename">sprites/buildings/splitter-compact-merge.png</key>
@@ -308,8 +310,10 @@
             <key type="filename">sprites/buildings/underground_belt_exit-tier2.png</key>
             <key type="filename">sprites/buildings/underground_belt_exit.png</key>
             <key type="filename">sprites/buildings/virtual_processor-analyzer.png</key>
+            <key type="filename">sprites/buildings/virtual_processor-painter.png</key>
             <key type="filename">sprites/buildings/virtual_processor-rotater.png</key>
             <key type="filename">sprites/buildings/virtual_processor-shapecompare.png</key>
+            <key type="filename">sprites/buildings/virtual_processor-stacker.png</key>
             <key type="filename">sprites/buildings/virtual_processor-unstacker.png</key>
             <key type="filename">sprites/buildings/virtual_processor.png</key>
             <key type="filename">sprites/buildings/wire_tunnel-coating.png</key>
@@ -503,6 +507,28 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
+            <key type="filename">sprites/colors/blue.png</key>
+            <key type="filename">sprites/colors/cyan.png</key>
+            <key type="filename">sprites/colors/green.png</key>
+            <key type="filename">sprites/colors/purple.png</key>
+            <key type="filename">sprites/colors/red.png</key>
+            <key type="filename">sprites/colors/uncolored.png</key>
+            <key type="filename">sprites/colors/white.png</key>
+            <key type="filename">sprites/colors/yellow.png</key>
+            <struct type="IndividualSpriteSettings">
+                <key>pivotPoint</key>
+                <point_f>0.5,0.5</point_f>
+                <key>spriteScale</key>
+                <double>1</double>
+                <key>scale9Enabled</key>
+                <false/>
+                <key>scale9Borders</key>
+                <rect>18,18,36,36</rect>
+                <key>scale9Paddings</key>
+                <rect>18,18,36,36</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
             <key type="filename">sprites/debug/acceptor_slot.png</key>
             <key type="filename">sprites/debug/ejector_slot.png</key>
             <key type="filename">sprites/misc/hub_direction_indicator.png</key>

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,18 +468,44 @@ 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);
             }
+        }
+    }
+
+    .prefab_GameHint {
+        position: absolute;
+        @include S(left, 20px);
+        @include S(right, 20px);
+        @include S(bottom, 60px);
+        @include Text;
+        color: #666;
+
+        @include DarkThemeOverride() {
+            color: lighten($darkModeGameBackground, 50);
+        }
+    }
+
     .loadingStatus {
         position: absolute;
         @include S(left, 20px);
         @include S(right, 20px);
         @include S(bottom, 30px);
         @include Text;
-        @include TextShadow3D(#aaa);
+        @include PlainText;
+        color: #aaa;
+
+        @include DarkThemeOverride {
+            color: lighten($darkModeGameBackground, 20);
+        }
+
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -568,6 +599,13 @@ canvas {
             background-color: lighten($themeColor, 15);
         }
     }
+
+    @include DarkThemeOverride {
+        background-color: $darkModeGameBackground !important;
+        &.checked {
+            background-color: $colorBlueBright !important;
+        }
+    }
 }
 
 .rangeInputContainer {
@@ -597,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/icons.scss

@@ -1,4 +1,4 @@
-$buildings: belt, cutter, miner, mixer, painter, rotater, splitter, stacker, trash, underground_belt, wire,
+$buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, trash, underground_belt, wire,
     constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader;
 
 @each $building in $buildings {
@@ -7,7 +7,7 @@ $buildings: belt, cutter, miner, mixer, painter, rotater, splitter, stacker, tra
     }
 }
 
-$buildingsAndVariants: belt, splitter, splitter-compact, splitter-compact-inverse, underground_belt,
+$buildingsAndVariants: belt, balancer, balancer-merger, balancer-splitter, underground_belt,
     underground_belt-tier2, miner, miner-chainable, cutter, cutter-quad, rotater, rotater-ccw, rotater-fl,
     stacker, mixer, painter, painter-double, painter-quad, trash, trash-storage;
 @each $building in $buildingsAndVariants {
@@ -16,10 +16,18 @@ $buildingsAndVariants: belt, splitter, splitter-compact, splitter-compact-invers
     }
 }
 
-// Special case
+// @TODO: New buildings (balancer, wires, etc)
+
+// Special cases for mirrored vairants
 [data-icon="building_tutorials/painter-mirrored.png"] {
     background-image: uiResource("res/ui/building_tutorials/painter.png") !important;
 }
+[data-icon="building_tutorials/balancer-merger-inverse.png"] {
+    background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important;
+}
+[data-icon="building_tutorials/balancer-splitter-inverse.png"] {
+    background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important;
+}
 
 $icons: notification_saved, notification_success, notification_upgrade;
 @each $icon in $icons {

src/css/ingame_hud/buildings_toolbar.scss

@@ -1,6 +1,6 @@
 .ingame_buildingsToolbar {
-    position: fixed;
-    @include S(bottom, 0px);
+    position: absolute;
+    @include S(bottom, 5px);
     left: 50%;
     transform: translateX(-50%);
 
@@ -8,24 +8,25 @@
     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));
+    background-color: rgba(0, 40, 80, 0.05);
+    @include S(border-radius, $globalBorderRadius);
 
     @include DarkThemeOverride {
-        background-color: #222428;
+        background-color: rgba(darken($darkModeGameBackground, 15), 0.4);
+
+        &#ingame_HUD_wires_toolbar {
+            background-color: rgba(darken($darkModeGameBackground, 5), 0.1);
+        }
     }
 
     &: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;
@@ -42,7 +43,7 @@
             @include S(width, 35px);
             @include S(height, 40px);
 
-            background: center center / 65% no-repeat;
+            background: center center / 70% no-repeat;
 
             &:not(.unlocked) {
                 @include S(width, 20px);
@@ -68,34 +69,19 @@
                 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;
+                    background-color: rgba(30, 40, 90, 0.1);
                 }
+
+                &.pressed {
+                    transform: scale(0.9) !important;
                 }
 
                 &.selected {
-                    transform: scale(1.05);
-
-                    &::before {
-                        background-color: $colorBlueBright;
-                        opacity: 0.6;
-                    }
+                    // transform: scale(1.05);
+                    background-color: rgba(lighten($colorBlueBright, 9), 0.4);
 
                     .keybinding {
                         color: #111;

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/entity_debugger.scss

@@ -1,43 +1,79 @@
 #ingame_HUD_EntityDebugger {
     position: absolute;
+    background: $ingameHudBg;
+    @include S(padding, 5px);
     @include S(right, 30px);
-    @include S(top, 200px);
 
-    font-size: 14px;
-    line-height: 16px;
-    color: #fff;
-    background: rgba(0, 10, 20, 0.7);
-    padding: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include SuperSmallText;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+
+    > label {
+        text-transform: uppercase;
+    }
+
+    .hint {
+        color: #aaa;
+    }
+
     &,
     * {
         pointer-events: all;
     }
 
-    .flag {
-        display: inline-block;
-        background: #333438;
-        @include S(padding, 2px);
-        @include S(margin-right, 2px);
+    .propertyTable {
+        @include S(margin-top, 8px);
+    }
 
-        u {
+    .propertyTable,
+    .entityComponents,
+    .entityComponents .object > div {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        @include S(column-gap, 10px);
+    }
+
+    .entityComponents {
+        grid-column: 1 / 3;
+        @include S(margin-top, 5px);
+
+        font-family: "Roboto Mono", "Fira Code", monospace;
+        font-size: 90%;
+        @include S(letter-spacing, -0.5px);
+
+        label,
+        span {
+            line-height: 1.5em;
+
+            &:not(span) {
                 opacity: 0.5;
             }
         }
+        &,
+        * {
+            @include SuperSmallText;
+            @include S(font-size, 7px, $important: true);
+            @include S(line-height, 12px, $important: true);
+        }
 
-    .components {
-        @include S(margin-top, 4px);
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        @include S(grid-gap, 3px);
-        .component {
-            @include S(padding, 2px);
-            background: #333;
-            display: flex;
-            flex-direction: column;
+        .object {
+            grid-column: 1 / 3;
+            line-height: 1.5em;
 
-            .data {
-                @include S(width, 150px);
-                @include S(height, 130px);
+            > summary {
+                transition: opacity 0.1s ease-in-out;
+                cursor: pointer;
+                &:hover {
+                    opacity: 0.8;
+                }
+            }
+            > div {
+                @include S(margin-left, 4px);
+                cursor: pointer;
             }
         }
     }

src/css/ingame_hud/game_menu.scss

@@ -1,42 +1,55 @@
 #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,
     > .button {
+        @include PlainText;
+        @include IncreasedClickArea(0px);
+        background: green;
         @include S(width, 30px);
         @include S(height, 30px);
-            display: inline-block;
-            background: center center / 60% no-repeat;
+
         pointer-events: all;
         cursor: pointer;
+        position: relative;
         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);
+        display: inline-flex;
+        background: center center / 70% no-repeat;
+        grid-row: 1;
+
+        &.pressed {
+            transform: scale(0.9) !important;
+        }
+
+        opacity: 0.7;
+        &:hover {
+            opacity: 0.9 !important;
+        }
 
         @include DarkThemeInvert;
 
-            &:hover {
-                opacity: 0.8;
+        &.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);
@@ -56,56 +69,27 @@
                     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 {
-        @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);
-        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)};
-        }
-        &[data-button-id="stats"] {
-            background-color: rgb(85, 199, 138);
-            background-image: uiResource("icons/statistics.png");
+            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 {
@@ -113,34 +97,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);
-                    }
-                }
             }
         }
     }

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/pinned_shapes.scss

@@ -18,7 +18,6 @@
         @include S(margin-bottom, 4px);
         color: #333438;
         // text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
-        filter: drop-shadow(#{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2));
 
         &.unpinable {
             > canvas {

src/css/ingame_hud/sandbox_controller.scss

@@ -14,7 +14,7 @@
         text-transform: uppercase;
     }
 
-    .hint {
+    .sandboxHint {
         color: #aaa;
     }
 

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;
-        grid-template-rows: 1fr auto;
-        flex-direction: column;
+        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 S(margin-bottom, 25px);
             @include Heading;
+            grid-row: 2;
         }
     }
 
@@ -27,15 +31,31 @@
 
     .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);
+        grid-auto-flow: column;
+        @include S(grid-gap, 50px);
+        @include S(margin-top, -10px);
 
         button {
-            background-color: #eee;
-            color: #55585a;
+            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;
+            }
         }
     }
 }

src/css/ingame_hud/shape_viewer.scss

@@ -39,13 +39,6 @@
             }
         }
 
-        .seperator {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-        }
-
         .layer {
             position: relative;
             background: #eee;

src/css/ingame_hud/shop.scss

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

src/css/ingame_hud/statistics.scss

@@ -33,22 +33,47 @@
 
             &.displayIcons,
             &.displayDetailed,
-            &.displaySorted {
-                background: uiResource("icons/display_list.png") center center / #{D(15px)} no-repeat;
+            &.displaySorted,
+            &.displayIterateUnit {
+                background: transparent center center / #{D(15px)} no-repeat;
+            }
+
+            &.displayDetailed {
+                background-image: uiResource("icons/display_list.png");
+            }
+
             &.displayIcons {
                 background-image: uiResource("icons/display_icons.png");
                 background-size: #{D(11.5px)};
             }
+
+            &.displayDetailed {
+                @include S(border-top-left-radius, $globalBorderRadius);
+                @include S(border-bottom-left-radius, $globalBorderRadius);
+            }
+
             &.displaySorted {
                 background-image: uiResource("icons/display_sorted.png");
                 background-size: #{D(11.5px)};
-                    margin-right: 4px;
+                margin-right: 5px;
+                @include S(border-top-right-radius, $globalBorderRadius);
+                @include S(border-bottom-right-radius, $globalBorderRadius);
+
                 @include S(padding, 1px, 0);
             }
+
+            &.displayIterateUnit {
+                background-image: uiResource("icons/toggle_unit.png");
+                opacity: 0.8;
+                @include S(padding, 1px, 0);
             }
 
             background-color: #44484a !important;
             transition: opacity 0.2s ease-in-out;
+
+            @include DarkThemeOverride {
+                background-color: lighten($darkModeControlsBackground, 10) !important;
+            }
         }
 
         .filtersDataSource,
@@ -110,10 +135,10 @@
             }
 
             @include DarkThemeOverride {
-                background: #222428;
+                background: $darkModeControlsBackground;
 
                 &.pinned {
-                    background: darken(#222428, 10);
+                    background: mix($darkModeControlsBackground, $colorBlueBright, 90%);
                 }
             }
 
@@ -159,6 +184,11 @@
                     grid-column: 1 / 2;
                     grid-row: 2 / 3;
                     justify-self: end;
+                    color: #55595a;
+
+                    @include DarkThemeOverride {
+                        color: #aaa;
+                    }
                 }
             }
         }
@@ -176,6 +206,10 @@
                     align-self: center;
                     text-align: right;
                     color: #55595a;
+
+                    @include DarkThemeOverride {
+                        color: #aaa;
+                    }
                 }
 
                 canvas.graph {

src/css/states/ingame.scss

@@ -14,6 +14,21 @@
         flex-direction: column;
     }
 
+    .prefab_GameHint {
+        position: absolute;
+        @include S(bottom, 40px);
+        @include S(left, 20px);
+        @include S(right, 20px);
+        @include PlainText;
+        text-align: center;
+
+        color: #666;
+
+        @include DarkThemeOverride() {
+            color: lighten($darkModeGameBackground, 50);
+        }
+    }
+
     #ingame_Canvas {
         position: absolute;
         top: 0;

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;
@@ -121,10 +124,13 @@
             }
 
             .steamLink {
+                align-self: center;
+                justify-self: center;
                 width: 100%;
                 @include S(height, 40px);
+                @include S(width, 180px);
 
-                background: uiResource("get_on_steam.png") center center / contain no-repeat;
+                background: #171a23 uiResource("get_on_steam.png") center center / contain no-repeat;
                 overflow: hidden;
                 display: block;
                 text-indent: -999em;
@@ -134,8 +140,11 @@
                 transition: all 0.12s ease-in;
                 transition-property: opacity, transform;
                 transform: skewX(-0.5deg);
+
+                @include S(border-radius, $globalBorderRadius);
+
                 &:hover {
-                    transform: skewX(-1deg) scale(1.02);
+                    transform: scale(1.02);
                     opacity: 0.9;
                 }
             }
@@ -332,25 +341,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 +386,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 +402,11 @@
                     margin: 0;
                     @include S(width, 32px);
                     height: 100%;
+                    @include S(margin-left, 4px);
+
+                    @include DarkThemeOverride {
+                        background-color: lighten($darkModeControlsBackground, 10);
+                    }
                 }
             }
         }
@@ -407,13 +435,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 +454,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 +463,7 @@
 
             cursor: pointer;
             &:hover {
-                background-color: #f0f6ff;
+                background-color: $linkBgHover;
             }
 
             .thirdpartyLogo {
@@ -458,12 +490,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 +531,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 +543,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,13 +1,95 @@
 #state_SettingsState {
-    $colorCategoryButton: #eee;
-    $colorCategoryButtonSelected: #5f748b;
+    $colorCategoryButton: #eeeff5;
+    $colorCategoryButtonSelected: $colorBlueBright;
+
+    $layoutBreak: 1000px;
 
     .container .content {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        @include S(grid-gap, 10px);
+
+        @include StyleBelowWidth($layoutBreak) {
+            grid-template-columns: 1fr;
+        }
+
+        .sidebar {
+            display: grid;
+            @include S(min-width, 210px);
+            @include S(max-width, 320px);
+            @include S(grid-gap, 3px);
+            grid-template-rows: auto auto auto auto auto 1fr;
+
+            @include StyleBelowWidth($layoutBreak) {
+                grid-template-rows: 1fr 1fr;
+                grid-template-columns: auto auto;
+                max-width: unset !important;
+            }
+
+            button {
+                text-align: left;
+                &::after {
+                    content: unset;
+                }
+                width: 100%;
+                box-sizing: border-box;
+
+                @include StyleBelowWidth($layoutBreak) {
+                    text-align: center;
+                }
+            }
+
+            .other {
+                @include S(margin-top, 10px);
+                align-self: end;
+
+                @include StyleBelowWidth($layoutBreak) {
+                    margin-top: 0;
+                }
+            }
+
+            button.categoryButton,
+            button.about {
+                background-color: $colorCategoryButton;
+                color: #777a7f;
+
+                &.active {
+                    background-color: $colorCategoryButtonSelected;
+                    color: #fff;
+
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+
+                &.pressed {
+                    transform: none !important;
+                }
+            }
+
+            .versionbar {
+                @include S(margin-top, 10px);
+
+                @include StyleBelowWidth($layoutBreak) {
+                    display: none;
+                }
+
+                @include SuperSmallText;
+                display: grid;
+                align-items: center;
+                grid-template-columns: 1fr auto;
+                .buildVersion {
                     display: flex;
-        overflow-y: scroll;
+                    flex-direction: column;
+                    color: #aaadaf;
+                }
+            }
+        }
 
         .categoryContainer {
-            width: 100%;
+            overflow-y: scroll;
+            pointer-events: all;
+            @include S(padding-right, 10px);
 
             .category {
                 display: none;
@@ -88,65 +170,6 @@
                 }
             }
         }
-
-        .sidebar {
-            display: flex;
-            flex-direction: column;
-            @include S(min-width, 210px);
-            @include S(max-width, 320px);
-            width: 30%;
-            height: 100%;
-            position: sticky;
-            top: 0;
-            @include S(margin-left, 20px);
-            @include S(margin-right, 32px);
-
-            .other {
-                margin-top: auto;
-            }
-
-            button {
-                @include S(margin-top, 4px);
-                width: calc(100% - #{D(20px)});
-                text-align: start;
-
-                &::after {
-                    content: unset;
-                }
-            }
-
-            button.categoryButton,
-            button.about {
-                background-color: $colorCategoryButton;
-                color: #777a7f;
-
-                &.active {
-                    background-color: $colorCategoryButtonSelected;
-                    color: #fff;
-
-                    &:hover {
-                        opacity: 1;
-                    }
-                }
-
-                &.pressed {
-                    transform: none !important;
-                }
-            }
-
-            .versionbar {
-                @include S(margin-top, 20px);
-                @include SuperSmallText;
-                display: grid;
-                align-items: center;
-                grid-template-columns: 1fr auto;
-                .buildVersion {
-                    display: flex;
-                    flex-direction: column;
-                    color: #aaadaf;
-                }
-            }
-        }
     }
 
     @include DarkThemeOverride {
@@ -154,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;
                     }
                 }
             }
@@ -169,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/application.js

@@ -168,6 +168,9 @@ export class Application {
 
         if (!G_IS_MOBILE_APP && !IS_MOBILE) {
             window.addEventListener("mousemove", this.handleMousemove.bind(this));
+            window.addEventListener("mouseout", this.handleMousemove.bind(this));
+            window.addEventListener("mouseover", this.handleMousemove.bind(this));
+            window.addEventListener("mouseleave", this.handleMousemove.bind(this));
         }
 
         // Unload events

src/js/changelog.js

@@ -24,13 +24,17 @@ export const CHANGELOG = [
             "Mark pinned shapes in statistics dialog and show them first (inspired by davidburhans)",
             "Added setting to show chunk borders",
             "Quad painters have been reworked! They now are integrated with the wires, and only paint the shape when the value is 1 (inspired by dengr1605)",
-            "There are now compact 1x1 splitters available to be unlocked!",
+            "There are now compact 1x1 balancers available to be unlocked!",
             "Replaced level completion sound to be less distracting",
             "Allow editing waypoints (by isaisstillalive)",
             "Show confirmation when cutting area which is too expensive to get pasted again (by isaisstillalive)",
             "Show mouse and camera tile on debug overlay (F4) (by dengr)",
+            "Fix belt planner placing the belt when a dialog opens in the meantime",
+            "Added confirmation when deleting a savegame",
             "Fixed tunnels entrances connecting to exits sometimes when they shouldn't",
+            "You can now pan the map with your mouse by moving the cursor to the edges of the screen!",
             "Added setting to auto select the extractor when pipetting a resource patch (by Exund)",
+            "You can now change the unit (seconds / minutes / hours) in the statistics dialog",
             "The initial belt planner direction is now based on the cursor movement (by MizardX)",
             "Fix preferred variant not getting saved when clicking on the hud (by Danacus)",
         ],
@@ -109,7 +113,7 @@ export const CHANGELOG = [
         date: "17.06.2020",
         entries: [
             "You can now place straight belts (and tunnels) by holding SHIFT! (For you, @giantwaffle ❤️)",
-            "Added continue button to main menu and add seperate 'New game' button (by jaysc)",
+            "Added continue button to main menu and add separate 'New game' button (by jaysc)",
             "Added setting to disable smart tunnel placement introduced with the last update",
             "Added setting to disable vignette",
             "Update translations",

src/js/core/buffer_maintainer.js

@@ -13,7 +13,7 @@ import { round1Digit } from "./utils";
 
 const logger = createLogger("buffers");
 
-const bufferGcDurationSeconds = 5;
+const bufferGcDurationSeconds = 0.5;
 
 export class BufferMaintainer {
     /**
@@ -86,27 +86,29 @@ export class BufferMaintainer {
         // Make sure our backlog never gets too big
         clearBufferBacklog();
 
-        const bufferStats = getBufferStats();
-        const mbUsed = round1Digit(bufferStats.vramUsage / (1024 * 1024));
-        logger.log(
-            "GC: Remove",
-            (deletedKeys + "").padStart(4),
-            ", Remain",
-            (totalKeys + "").padStart(4),
-            "(",
-            (bufferStats.bufferCount + "").padStart(4),
-            "total",
-            ")",
+        // if (G_IS_DEV) {
+        //     const bufferStats = getBufferStats();
+        //     const mbUsed = round1Digit(bufferStats.vramUsage / (1024 * 1024));
+        //     logger.log(
+        //         "GC: Remove",
+        //         (deletedKeys + "").padStart(4),
+        //         ", Remain",
+        //         (totalKeys + "").padStart(4),
+        //         "(",
+        //         (bufferStats.bufferCount + "").padStart(4),
+        //         "total",
+        //         ")",
 
-            "(",
-            (bufferStats.backlog + "").padStart(4),
-            "backlog",
-            ")",
+        //         "(",
+        //         (bufferStats.backlogSize + "").padStart(4),
+        //         "backlog",
+        //         ")",
 
-            "VRAM:",
-            mbUsed,
-            "MB"
-        );
+        //         "VRAM:",
+        //         mbUsed,
+        //         "MB"
+        //     );
+        // }
 
         ++this.iterationIndex;
     }

src/js/core/buffer_utils.js

@@ -25,17 +25,43 @@ export function disableImageSmoothing(context) {
     context.webkitImageSmoothingEnabled = false;
 }
 
-const registeredCanvas = [];
-const freeCanvasList = [];
+/**
+ * @typedef {{
+ *   canvas: HTMLCanvasElement,
+ *   context: CanvasRenderingContext2D
+ * }} CanvasCacheEntry
+ */
 
-let vramUsage = 0;
-let bufferCount = 0;
+/**
+ * @type {Array<CanvasCacheEntry>}
+ */
+const registeredCanvas = [];
+
+/**
+ * Buckets for each width * height combination
+ * @type {Map<number, Array<CanvasCacheEntry>>}
+ */
+const freeCanvasBuckets = new Map();
+
+/**
+ * Track statistics
+ */
+const stats = {
+    vramUsage: 0,
+    backlogVramUsage: 0,
+    bufferCount: 0,
+    numReused: 0,
+    numCreated: 0,
+};
 
 /**
  *
  * @param {HTMLCanvasElement} canvas
  */
 export function getBufferVramUsageBytes(canvas) {
+    assert(canvas, "no canvas given");
+    assert(Number.isFinite(canvas.width), "bad canvas width: " + canvas.width);
+    assert(Number.isFinite(canvas.height), "bad canvas height" + canvas.height);
     return canvas.width * canvas.height * 4;
 }
 
@@ -43,17 +69,31 @@ export function getBufferVramUsageBytes(canvas) {
  * Returns stats on the allocated buffers
  */
 export function getBufferStats() {
+    let numBuffersFree = 0;
+    freeCanvasBuckets.forEach(bucket => {
+        numBuffersFree += bucket.length;
+    });
+
     return {
-        vramUsage,
-        bufferCount,
-        backlog: freeCanvasList.length,
+        ...stats,
+        backlogKeys: freeCanvasBuckets.size,
+        backlogSize: numBuffersFree,
     };
 }
 
+/**
+ * Clears the backlog buffers if they grew too much
+ */
 export function clearBufferBacklog() {
-    while (freeCanvasList.length > 50) {
-        freeCanvasList.pop();
+    freeCanvasBuckets.forEach(bucket => {
+        while (bucket.length > 500) {
+            const entry = bucket[bucket.length - 1];
+            stats.backlogVramUsage -= getBufferVramUsageBytes(entry.canvas);
+            delete entry.canvas;
+            delete entry.context;
+            bucket.pop();
         }
+    });
 }
 
 /**
@@ -84,46 +124,16 @@ export function makeOffscreenBuffer(w, h, { smooth = true, reusable = true, labe
     let canvas = null;
     let context = null;
 
-    let bestMatchingOne = null;
-    let bestMatchingPixelsDiff = 1e50;
-
-    const currentPixels = w * h;
-
     // Ok, search in cache first
-    for (let i = 0; i < freeCanvasList.length; ++i) {
-        const { canvas: useableCanvas, context: useableContext } = freeCanvasList[i];
+    const bucket = freeCanvasBuckets.get(w * h) || [];
+
+    for (let i = 0; i < bucket.length; ++i) {
+        const { canvas: useableCanvas, context: useableContext } = bucket[i];
         if (useableCanvas.width === w && useableCanvas.height === h) {
             // Ok we found one
             canvas = useableCanvas;
             context = useableContext;
 
-            fastArrayDelete(freeCanvasList, i);
-            break;
-        }
-
-        const otherPixels = useableCanvas.width * useableCanvas.height;
-        const diff = Math.abs(otherPixels - currentPixels);
-        if (diff < bestMatchingPixelsDiff) {
-            bestMatchingPixelsDiff = diff;
-            bestMatchingOne = {
-                canvas: useableCanvas,
-                context: useableContext,
-                index: i,
-            };
-        }
-    }
-
-    // Ok none matching, reuse one though
-    if (!canvas && bestMatchingOne) {
-        canvas = bestMatchingOne.canvas;
-        context = bestMatchingOne.context;
-        canvas.width = w;
-        canvas.height = h;
-        fastArrayDelete(freeCanvasList, bestMatchingOne.index);
-    }
-
-    // Reset context
-    if (context) {
             // Restore past state
             context.restore();
             context.save();
@@ -131,6 +141,12 @@ export function makeOffscreenBuffer(w, h, { smooth = true, reusable = true, labe
 
             delete canvas.style.width;
             delete canvas.style.height;
+
+            stats.numReused++;
+            stats.backlogVramUsage -= getBufferVramUsageBytes(canvas);
+            fastArrayDelete(bucket, i);
+            break;
+        }
     }
 
     // None found , create new one
@@ -138,6 +154,8 @@ export function makeOffscreenBuffer(w, h, { smooth = true, reusable = true, labe
         canvas = document.createElement("canvas");
         context = canvas.getContext("2d" /*, { alpha } */);
 
+        stats.numCreated++;
+
         canvas.width = w;
         canvas.height = h;
 
@@ -145,6 +163,7 @@ export function makeOffscreenBuffer(w, h, { smooth = true, reusable = true, labe
         context.save();
     }
 
+    // @ts-ignore
     canvas.label = label;
 
     if (smooth) {
@@ -167,8 +186,9 @@ export function makeOffscreenBuffer(w, h, { smooth = true, reusable = true, labe
 export function registerCanvas(canvas, context) {
     registeredCanvas.push({ canvas, context });
 
-    bufferCount += 1;
-    vramUsage += getBufferVramUsageBytes(canvas);
+    stats.bufferCount += 1;
+    const bytesUsed = getBufferVramUsageBytes(canvas);
+    stats.vramUsage += bytesUsed;
 }
 
 /**
@@ -180,6 +200,7 @@ export function freeCanvas(canvas) {
 
     let index = -1;
     let data = null;
+
     for (let i = 0; i < registeredCanvas.length; ++i) {
         if (registeredCanvas[i].canvas === canvas) {
             index = i;
@@ -193,8 +214,18 @@ export function freeCanvas(canvas) {
         return;
     }
     fastArrayDelete(registeredCanvas, index);
-    freeCanvasList.push(data);
 
-    bufferCount -= 1;
-    vramUsage -= getBufferVramUsageBytes(canvas);
+    const key = canvas.width * canvas.height;
+    const bucket = freeCanvasBuckets.get(key);
+    if (bucket) {
+        bucket.push(data);
+    } else {
+        freeCanvasBuckets.set(key, [data]);
+    }
+
+    stats.bufferCount -= 1;
+
+    const bytesUsed = getBufferVramUsageBytes(canvas);
+    stats.vramUsage -= bytesUsed;
+    stats.backlogVramUsage += bytesUsed;
 }

src/js/core/config.js

@@ -68,7 +68,7 @@ export const globalConfig = {
         cutterQuad: 1 / 4,
         rotater: 1 / 1,
         rotaterCCW: 1 / 1,
-        rotaterFL: 1 / 1,
+        rotater180: 1 / 1,
         painter: 1 / 6,
         painterDouble: 1 / 8,
         painterQuad: 1 / 8,
@@ -84,8 +84,8 @@ export const globalConfig = {
     // Global game speed
     gameSpeed: 1,
 
-    warmupTimeSecondsFast: 0.1,
-    warmupTimeSecondsRegular: 1,
+    warmupTimeSecondsFast: 0.5,
+    warmupTimeSecondsRegular: 3,
 
     smoothing: {
         smoothMainCanvas: smoothCanvas && true,
@@ -132,5 +132,5 @@ if (G_IS_DEV && globalConfig.debug.renderForTrailer) {
 }
 
 if (globalConfig.debug.fastGameEnter) {
-    globalConfig.debug.noArtificalDelays = true;
+    globalConfig.debug.noArtificialDelays = true;
 }