Puzzle DLC (#1172)

* Puzzle mode (#1135)

* Add mode button to main menu

* [WIP] Add mode menu. Add factory-based gameMode creation

* Add savefile migration, serialize, deserialize

* Add hidden HUD elements, zone, and zoom, boundary constraints

* Clean up lint issues

* Add building, HUD exclusion, building exclusion, and refactor

- [WIP] Add ConstantProducer building that combines ConstantSignal
and ItemProducer functionality. Currently using temp assets.
- Add pre-placement check to the zone
- Use Rectangles for zone and boundary
- Simplify zone drawing
- Account for exclusion in savegame data
- [WIP] Add puzzle play and edit buttons in puzzle mode menu

* [WIP] Add building, component, and systems for producing and
accepting user-specified items and checking goal criteria

* Add ingame puzzle mode UI elements

- Add minimal menus in puzzle mode for back, next navigation
- Add lower menu for changing zone dimenensions

Co-authored-by: Greg Considine <gconsidine@users.noreply.github.com>

* Performance optimizations (#1154)

* 1.3.1 preparations

* Minor fixes, update translations

* Fix achievements not working

* Lots of belt optimizations, ~15% performance boost

* Puzzle mode, part 1

* Puzzle mode, part 2

* Fix missing import

* Puzzle mode, part 3

* Fix typo

* Puzzle mode, part 4

* Puzzle Mode fixes: Correct zone restrictions and more (#1155)

* Hide Puzzle Editor Controls in regular game mode, fix typo

* Disallow shrinking zone if there are buildings

* Fix multi-tile buildings for shrinking

* Puzzle mode, Refactor hud

* Puzzle mode

* Fixed typo in latest puzzle commit (#1156)

* Allow completing puzzles

* Puzzle mode, almost done

* Bump version to 1.4.0

* Fixes

* [puzzle] Prevent pipette cheats (miners, emitters) (#1158)

* Puzzle mode, almost done

* Allow clearing belts with 'B'

* Multiple users for the puzzle dlc

* Bump api key

* Minor adjustments

* Update

* Minor fixes

* Fix throughput

* Fix belts

* Minor puzzle adjustments

* New difficulty

* Minor puzzle improvements

* Fix belt path

* Update translations

* Added a button to return to the menu after a puzzle is completed (#1170)

* added another button to return to the menu

* improved menu return

* fixed continue button to not go back to menu

* [Puzzle] Added ability to lock buildings in the puzzle editor! (#1164)

* initial test

* tried to get it to work

* added icon

* added test exclusion

* reverted css

* completed flow for building locking

* added lock option

* finalized look and changed locked building to same sprite

* removed unused art

* added clearing every goal acceptor on lock to prevent creating impossible puzzles

* heavily improved validation and prevented autocompletion

* validation only checks every 100 ticks to improve performance

* validation only checks every 100 ticks to improve performance

* removed clearing goal acceptors as it isn't needed because of validation

* Add soundtrack, puzzle dlc fixes

Co-authored-by: Greg Considine <gconsidine@users.noreply.github.com>
Co-authored-by: dengr1065 <dengr1065@gmail.com>
Co-authored-by: Sense101 <67970865+Sense101@users.noreply.github.com>

src/css/ingame_hud/beta_overlay.scss

@@ -1,6 +1,6 @@
 #ingame_HUD_BetaOverlay {
     position: fixed;
-    @include S(top, 10px);
+    @include S(top, 70px);
     left: 50%;
     transform: translateX(-50%);
     color: $colorRedBright;

src/css/ingame_hud/buildings_toolbar.scss

@@ -37,7 +37,7 @@
 
             .building {
                 @include S(width, 30px);
-                @include S(height, 22px);
+                @include S(height, 30px);
                 background-size: 45%;
 
                 &:not(.unlocked) {
@@ -49,63 +49,97 @@
         }
 
         .building {
-            color: $accentColorDark;
             display: flex;
-            flex-direction: column;
+            @include S(width, 40px);
             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);
+            .icon {
+                color: $accentColorDark;
+                display: flex;
+                flex-direction: column-reverse;
+                position: relative;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                @include S(border-radius, $globalBorderRadius);
 
-            background: center center / 70% no-repeat;
+                background: center center / 70% no-repeat;
+            }
 
             &:not(.unlocked) {
-                @include S(width, 20px);
-                opacity: 0.15;
-                background-image: none !important;
-
-                &::before {
-                    content: " ";
-
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    z-index: 4;
-                    & {
-                        /* @load-async */
-                        background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
-                            no-repeat;
+                @include S(width, 25px);
+                .icon {
+                    opacity: 0.15;
+                }
+                &.editor {
+                    .icon {
+                        pointer-events: all;
+                        cursor: pointer;
+                        &:hover {
+                            background-color: rgba(22, 30, 68, 0.1);
+                        }
+                    }
+                }
+                &:not(.editor) {
+                    .icon {
+                        background-image: uiResource("locked_building.png") !important;
                     }
                 }
             }
 
-            @include S(border-radius, $globalBorderRadius);
-
             &.unlocked {
-                pointer-events: all;
-                transition: all 50ms ease-in-out;
-                transition-property: background-color, transform;
+                .icon {
+                    pointer-events: all;
+                    transition: all 50ms ease-in-out;
+                    transition-property: background-color, transform;
+                    cursor: pointer;
 
-                cursor: pointer;
-                &:hover {
-                    background-color: rgba(30, 40, 90, 0.1);
+                    &:hover {
+                        background-color: rgba(30, 40, 90, 0.1);
+                    }
+
+                    &.pressed {
+                        transform: scale(0.9) !important;
+                    }
+
+                    &.selected {
+                        // transform: scale(1.05);
+                        background-color: rgba(lighten($colorBlueBright, 9), 0.4);
+
+                        .keybinding {
+                            color: #111;
+                        }
+                    }
                 }
 
-                &.pressed {
-                    transform: scale(0.9) !important;
-                }
+                .puzzle-lock {
+                    & {
+                        /* @load-async */
+                        background: uiResource("locked_building.png") center center / #{D(14px)} #{D(14px)}
+                            no-repeat;
+                    }
 
-                &.selected {
-                    // transform: scale(1.05);
-                    background-color: rgba(lighten($colorBlueBright, 9), 0.4);
+                    display: grid;
+                    grid-auto-flow: column;
 
-                    .keybinding {
-                        color: #111;
+                    position: absolute;
+                    top: -30px;
+                    left: 50%;
+                    transform: translateX(-50%) !important;
+                    transition: all 0.12s ease-in-out;
+                    transition-property: opacity, transform;
+
+                    cursor: pointer;
+                    pointer-events: all;
+
+                    @include S(width, 14px);
+                    @include S(height, 14px);
+
+                    &:hover {
+                        opacity: 0.5;
                     }
                 }
             }

src/css/ingame_hud/dialogs.scss

@@ -67,6 +67,14 @@
         * {
             color: #fff;
         }
+
+        display: flex;
+        flex-direction: column;
+
+        .text {
+            text-transform: uppercase;
+            @include S(margin-bottom, 10px);
+        }
     }
 
     > .dialogInner {
@@ -168,6 +176,11 @@
 
                 &.errored {
                     background-color: rgb(250, 206, 206);
+
+                    &::placeholder {
+                        color: #fff;
+                        opacity: 0.8;
+                    }
                 }
             }
 

src/css/ingame_hud/puzzle_back_to_menu.scss

@@ -0,0 +1,41 @@
+#ingame_HUD_PuzzleBackToMenu {
+    position: absolute;
+    @include S(top, 10px);
+    @include S(left, 0px);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    backdrop-filter: blur(D(1px));
+    padding: D(3px);
+
+    > .button {
+        @include PlainText;
+        pointer-events: all;
+        cursor: pointer;
+        position: relative;
+        color: #333438;
+        transition: all 0.12s ease-in-out;
+        transition-property: opacity, transform;
+        text-transform: uppercase;
+        @include PlainText;
+        @include S(width, 30px);
+        @include S(height, 30px);
+
+        @include DarkThemeInvert;
+
+        opacity: 1;
+        &:hover {
+            opacity: 0.9 !important;
+        }
+
+        &.pressed {
+            transform: scale(0.95) !important;
+        }
+
+        & {
+            /* @load-async */
+            background: uiResource("icons/state_back_button.png") center center / D(15px) no-repeat;
+        }
+    }
+}

src/css/ingame_hud/puzzle_complete_notification.scss

@@ -0,0 +1,171 @@
+#ingame_HUD_PuzzleCompleteNotification {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    pointer-events: all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    & {
+        /* @load-async */
+        background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
+    }
+
+    @include InlineAnimation(0.1s ease-in-out) {
+        0% {
+            opacity: 0;
+        }
+    }
+
+    > .dialog {
+        // background: rgba(#222428, 0.5);
+        @include S(border-radius, $globalBorderRadius);
+        @include S(padding, 30px);
+
+        @include InlineAnimation(0.5s ease-in-out) {
+            0% {
+                opacity: 0;
+            }
+        }
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #fff;
+        text-align: center;
+
+        > .title {
+            @include SuperHeading;
+            text-transform: uppercase;
+            @include S(font-size, 30px);
+            @include S(margin-bottom, 40px);
+            color: $colorGreenBright !important;
+
+            @include InlineAnimation(0.5s ease-in-out) {
+                0% {
+                    transform: translateY(-50vh);
+                }
+                50% {
+                    transform: translateY(5vh);
+                }
+                75% {
+                    transform: translateY(-2vh);
+                }
+            }
+        }
+
+        > .contents {
+            @include InlineAnimation(0.5s ease-in-out) {
+                0% {
+                    transform: translateX(-100vw);
+                }
+                50% {
+                    transform: translateX(5vw);
+                }
+
+                75% {
+                    transform: translateX(-2vw);
+                }
+            }
+
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: flex-start;
+
+            > .stepLike {
+                display: flex;
+                flex-direction: column;
+                @include S(margin-bottom, 10px);
+                @include SuperSmallText;
+
+                > .buttons {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    @include S(margin, 10px, 0);
+
+                    > button {
+                        @include S(width, 60px);
+                        @include S(height, 60px);
+                        @include S(margin, 0, 10px);
+                        box-sizing: border-box;
+                        border-radius: 50%;
+                        transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out;
+                        @include IncreasedClickArea(0px);
+
+                        &.liked-yes {
+                            /* @load-async */
+                            background: uiResource("icons/puzzle_action_liked_yes.png") center 55% / 60%
+                                no-repeat;
+                        }
+
+                        &:hover:not(.active) {
+                            opacity: 0.5 !important;
+                        }
+
+                        &.active {
+                            background-color: $colorRedBright !important;
+                            @include InlineAnimation(0.3s ease-in-out) {
+                                0% {
+                                    transform: scale(0);
+                                }
+                                50% {
+                                    transform: scale(1.2);
+                                }
+                                100% {
+                                    transform: scale(1);
+                                }
+                            }
+                        }
+                        &:not(.active) {
+                            opacity: 0.4;
+                        }
+                    }
+                }
+            }
+
+            > .buttonBar {
+                display: flex;
+                @include S(margin-top, 20px);
+
+                button.continue {
+                    background: #555;
+                    @include S(margin-right, 10px);
+                }
+
+                button.menu {
+                    background-color: $colorGreenBright;
+                }
+
+                > button {
+                    @include S(min-width, 100px);
+                    @include S(padding, 10px, 20px);
+                    @include IncreasedClickArea(0px);
+                }
+            }
+
+            > .actions {
+                position: absolute;
+                @include S(bottom, 40px);
+
+                display: grid;
+                @include S(grid-gap, 15px);
+                grid-auto-flow: column;
+
+                button {
+                    @include SuperSmallText;
+                }
+                .report {
+                    background-color: $accentColorDark;
+                }
+            }
+        }
+    }
+}

src/css/ingame_hud/puzzle_dlc_logo.scss

@@ -0,0 +1,19 @@
+#ingame_HUD_PuzzleDLCLogo {
+    position: absolute;
+    @include S(width, 120px);
+    @include S(height, 40px);
+    @include S(left, 40px);
+    @include S(top, 7px);
+
+    & {
+        /* @load-async */
+        background: uiResource("puzzle_dlc_logo.png") center center / contain no-repeat;
+    }
+
+    @include DarkThemeOverride {
+        & {
+            /* @load-async */
+            background: uiResource("puzzle_dlc_logo_inverse.png") center center / contain no-repeat;
+        }
+    }
+}

src/css/ingame_hud/puzzle_editor_controls.scss

@@ -0,0 +1,36 @@
+#ingame_HUD_PuzzleEditorControls {
+    position: absolute;
+
+    @include S(top, 70px);
+    @include S(left, 10px);
+
+    display: flex;
+    flex-direction: column;
+    @include SuperDuperSmallText;
+    @include S(width, 200px);
+
+    > span {
+        @include S(margin-bottom, 10px);
+
+        strong {
+            font-weight: bold;
+        }
+    }
+
+    @include DarkThemeInvert;
+}
+
+#ingame_HUD_PuzzleEditorTitle {
+    position: absolute;
+
+    @include S(top, 18px);
+    left: 50%;
+    transform: translateX(-50%);
+    text-transform: uppercase;
+    @include Heading;
+    text-align: center;
+
+    @include DarkThemeOverride {
+        color: #eee;
+    }
+}

src/css/ingame_hud/puzzle_editor_review.scss

@@ -0,0 +1,50 @@
+#ingame_HUD_PuzzleEditorReview {
+    position: absolute;
+    @include S(top, 17px);
+    @include S(right, 10px);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    backdrop-filter: blur(D(1px));
+    padding: D(3px);
+
+    > .button {
+        @include ButtonText;
+        @include IncreasedClickArea(0px);
+        pointer-events: all;
+        cursor: pointer;
+        position: relative;
+        color: #333438;
+        transition: all 0.12s ease-in-out;
+        text-transform: uppercase;
+        transition-property: opacity, transform;
+        @include PlainText;
+        @include S(padding-right, 25px);
+        opacity: 1;
+
+        @include DarkThemeInvert;
+
+        &:hover {
+            opacity: 0.9 !important;
+        }
+
+        &.pressed {
+            transform: scale(0.95) !important;
+        }
+
+        & {
+            /* @load-async */
+            background: uiResource("icons/state_next_button.png") right center / D(15px) no-repeat;
+        }
+    }
+
+    > .content {
+        @include SuperDuperSmallText;
+        @include S(width, 180px);
+        @include S(padding-right, 25px);
+        text-align: right;
+        text-transform: uppercase;
+        color: $accentColorDark;
+    }
+}

src/css/ingame_hud/puzzle_editor_settings.scss

@@ -0,0 +1,62 @@
+#ingame_HUD_PuzzleEditorSettings {
+    position: absolute;
+    background: $ingameHudBg;
+    @include S(padding, 10px);
+    @include S(bottom, 60px);
+    @include S(left, 10px);
+
+    @include SuperSmallText;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+    @include S(border-radius, $globalBorderRadius);
+
+    > .section {
+        > label {
+            text-transform: uppercase;
+        }
+
+        .plusMinus {
+            @include S(margin-top, 5px);
+            display: grid;
+            grid-template-columns: 1fr auto auto auto;
+            align-items: center;
+            @include S(grid-gap, 5px);
+
+            label {
+                @include S(margin-right, 10px);
+            }
+
+            button {
+                @include PlainText;
+                @include S(padding, 0);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                @include S(width, 15px);
+                @include S(height, 15px);
+                @include IncreasedClickArea(0px);
+            }
+
+            .value {
+                text-align: center;
+                @include S(min-width, 15px);
+            }
+        }
+
+        > .buttons {
+            > .buttonBar {
+                display: flex;
+                align-items: center;
+                @include S(margin-top, 10px);
+                > button {
+                    @include S(margin-right, 4px);
+                    @include SuperSmallText;
+                    &:last-child {
+                        margin-right: 0;
+                    }
+                }
+            }
+        }
+    }
+}

src/css/ingame_hud/puzzle_play_metadata.scss

@@ -0,0 +1,129 @@
+#ingame_HUD_PuzzlePlayMetadata {
+    position: absolute;
+
+    @include S(top, 70px);
+    @include S(left, 10px);
+
+    display: flex;
+    flex-direction: column;
+    @include S(width, 200px);
+
+    > .info {
+        display: flex;
+        flex-direction: column;
+        @include SuperSmallText;
+        @include S(margin-bottom, 5px);
+
+        > label {
+            text-transform: uppercase;
+            @include SuperDuperSmallText;
+            color: $accentColorDark;
+        }
+        > span {
+            display: flex;
+            color: darken($accentColorDark, 25);
+            @include SuperSmallText;
+            @include DarkThemeOverride {
+                color: lighten($accentColorDark, 15);
+            }
+        }
+    }
+
+    > .plays {
+        display: flex;
+        align-items: center;
+        justify-self: end;
+        align-self: end;
+        flex-direction: row;
+        @include S(margin-bottom, 10px);
+        opacity: 0.8;
+        @include DarkThemeInvert;
+        @include DarkThemeOverride {
+            opacity: 0.8;
+        }
+
+        > .downloads {
+            @include SuperSmallText;
+            color: #000;
+            align-self: start;
+            justify-self: start;
+            font-weight: bold;
+            @include S(margin-right, 10px);
+            @include S(padding-left, 14px);
+            opacity: 0.7;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+
+            & {
+                /* @load-async */
+                background: uiResource("icons/puzzle_plays.png") #{D(2px)} center / #{D(8px)} #{D(8px)} no-repeat;
+            }
+        }
+
+        > .likes {
+            @include SuperSmallText;
+            align-items: center;
+            justify-content: center;
+            color: #000;
+            align-self: start;
+            justify-self: start;
+            font-weight: bold;
+            @include S(padding-left, 14px);
+            opacity: 0.7;
+            & {
+                /* @load-async */
+                background: uiResource("icons/puzzle_upvotes.png") #{D(2px)} center / #{D(8px)} #{D(8px)} no-repeat;
+            }
+        }
+    }
+
+    > .key {
+        button {
+            @include S(margin-top, 2px);
+        }
+    }
+
+    button {
+        @include SuperSmallText;
+        align-self: start;
+        @include S(min-width, 50px);
+
+        &.report {
+            background-color: $accentColorDark;
+            @include SuperDuperSmallText;
+        }
+    }
+
+    > .buttons {
+        display: flex;
+        flex-direction: column;
+
+        > button {
+            @include S(margin-bottom, 4px);
+        }
+    }
+}
+
+#ingame_HUD_PuzzlePlayTitle {
+    position: absolute;
+
+    @include S(top, 18px);
+    left: 50%;
+    transform: translateX(-50%);
+    text-transform: uppercase;
+    @include Heading;
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+
+    > .name {
+        @include PlainText;
+        opacity: 0.5;
+    }
+
+    @include DarkThemeOverride {
+        color: #eee;
+    }
+}

src/css/ingame_hud/puzzle_play_settings.scss

@@ -0,0 +1,23 @@
+#ingame_HUD_PuzzlePlaySettings {
+    position: absolute;
+    background: $ingameHudBg;
+    @include S(padding, 10px);
+    @include S(bottom, 60px);
+    @include S(left, 10px);
+
+    @include SuperSmallText;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+    @include S(border-radius, $globalBorderRadius);
+
+    > .section {
+        display: grid;
+        @include S(grid-gap, 10px);
+        grid-auto-flow: row;
+
+        > button {
+            @include SuperSmallText;
+        }
+    }
+}