mirror of
https://github.com/tobspr/shapez.io.git
synced 2026-03-02 03:39:21 +00:00
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>
This commit is contained in:
tobspr
GitHub
@@ -1,6 +1,6 @@
|
||||
#ingame_HUD_BetaOverlay {
|
||||
position: fixed;
|
||||
@include S(top, 10px);
|
||||
@include S(top, 70px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: $colorRedBright;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
41
src/css/ingame_hud/puzzle_back_to_menu.scss
Normal file
41
src/css/ingame_hud/puzzle_back_to_menu.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
171
src/css/ingame_hud/puzzle_complete_notification.scss
Normal file
171
src/css/ingame_hud/puzzle_complete_notification.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
src/css/ingame_hud/puzzle_dlc_logo.scss
Normal file
19
src/css/ingame_hud/puzzle_dlc_logo.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/css/ingame_hud/puzzle_editor_controls.scss
Normal file
36
src/css/ingame_hud/puzzle_editor_controls.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
50
src/css/ingame_hud/puzzle_editor_review.scss
Normal file
50
src/css/ingame_hud/puzzle_editor_review.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
62
src/css/ingame_hud/puzzle_editor_settings.scss
Normal file
62
src/css/ingame_hud/puzzle_editor_settings.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
src/css/ingame_hud/puzzle_play_metadata.scss
Normal file
129
src/css/ingame_hud/puzzle_play_metadata.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
23
src/css/ingame_hud/puzzle_play_settings.scss
Normal file
23
src/css/ingame_hud/puzzle_play_settings.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,7 @@
|
||||
@import "states/about";
|
||||
@import "states/mobile_warning";
|
||||
@import "states/changelog";
|
||||
@import "states/puzzle_menu";
|
||||
|
||||
@import "ingame_hud/buildings_toolbar";
|
||||
@import "ingame_hud/building_placer";
|
||||
@@ -55,12 +56,21 @@
|
||||
@import "ingame_hud/sandbox_controller";
|
||||
@import "ingame_hud/standalone_advantages";
|
||||
@import "ingame_hud/cat_memes";
|
||||
@import "ingame_hud/puzzle_back_to_menu";
|
||||
@import "ingame_hud/puzzle_editor_review";
|
||||
@import "ingame_hud/puzzle_dlc_logo";
|
||||
@import "ingame_hud/puzzle_editor_controls";
|
||||
@import "ingame_hud/puzzle_editor_settings";
|
||||
@import "ingame_hud/puzzle_play_settings";
|
||||
@import "ingame_hud/puzzle_play_metadata";
|
||||
@import "ingame_hud/puzzle_complete_notification";
|
||||
|
||||
// prettier-ignore
|
||||
$elements:
|
||||
// Base
|
||||
ingame_Canvas,
|
||||
ingame_VignetteOverlay,
|
||||
ingame_HUD_PuzzleDLCLogo,
|
||||
|
||||
// Ingame overlays
|
||||
ingame_HUD_Waypoints,
|
||||
@@ -71,6 +81,14 @@ ingame_HUD_PlacerVariants,
|
||||
ingame_HUD_PinnedShapes,
|
||||
ingame_HUD_GameMenu,
|
||||
ingame_HUD_KeybindingOverlay,
|
||||
ingame_HUD_PuzzleBackToMenu,
|
||||
ingame_HUD_PuzzleEditorReview,
|
||||
ingame_HUD_PuzzleEditorControls,
|
||||
ingame_HUD_PuzzleEditorTitle,
|
||||
ingame_HUD_PuzzleEditorSettings,
|
||||
ingame_HUD_PuzzlePlaySettings,
|
||||
ingame_HUD_PuzzlePlayMetadata,
|
||||
ingame_HUD_PuzzlePlayTitle,
|
||||
ingame_HUD_Notifications,
|
||||
ingame_HUD_DebugInfo,
|
||||
ingame_HUD_EntityDebugger,
|
||||
@@ -94,6 +112,7 @@ ingame_HUD_Statistics,
|
||||
ingame_HUD_ShapeViewer,
|
||||
ingame_HUD_StandaloneAdvantages,
|
||||
ingame_HUD_UnlockNotification,
|
||||
ingame_HUD_PuzzleCompleteNotification,
|
||||
ingame_HUD_SettingsMenu,
|
||||
ingame_HUD_ModalDialogs,
|
||||
ingame_HUD_CatMemes;
|
||||
@@ -113,6 +132,8 @@ body.uiHidden {
|
||||
#ingame_HUD_PlacementHints,
|
||||
#ingame_HUD_GameMenu,
|
||||
#ingame_HUD_PinnedShapes,
|
||||
#ingame_HUD_PuzzleBackToMenu,
|
||||
#ingame_HUD_PuzzleEditorReview,
|
||||
#ingame_HUD_Notifications,
|
||||
#ingame_HUD_TutorialHints,
|
||||
#ingame_HUD_Waypoints,
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
$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, storage,
|
||||
transistor, analyzer, comparator, item_producer;
|
||||
transistor, analyzer, comparator, item_producer, constant_producer, goal_acceptor, block;
|
||||
|
||||
@each $building in $buildings {
|
||||
[data-icon="building_icons/#{$building}.png"] {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
|
||||
.icon {
|
||||
background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +15,8 @@ $buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2,
|
||||
cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer, painter-double, painter-quad, trash, storage,
|
||||
reader, rotater-rotate180, display, constant_signal, wire, wire_tunnel, logic_gate-or, logic_gate-not,
|
||||
logic_gate-xor, analyzer, virtual_processor-rotater, virtual_processor-unstacker, item_producer,
|
||||
virtual_processor-stacker, virtual_processor-painter, wire-second, painter, painter-mirrored, comparator;
|
||||
constant_producer, virtual_processor-stacker, virtual_processor-painter, wire-second, painter,
|
||||
painter-mirrored, comparator, goal_acceptor, block;
|
||||
@each $building in $buildingsAndVariants {
|
||||
[data-icon="building_tutorials/#{$building}.png"] {
|
||||
/* @load-async */
|
||||
@@ -67,7 +70,7 @@ $icons: notification_saved, notification_success, notification_upgrade;
|
||||
}
|
||||
|
||||
$languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW, zh-CN, nb, mt-MT, ar, nl, vi,
|
||||
th, hu, pl, ja, kor, no, pt-PT, fi, ro;
|
||||
th, hu, pl, ja, kor, no, pt-PT, fi, ro, he;
|
||||
|
||||
@each $language in $languages {
|
||||
[data-languageicon="#{$language}"] {
|
||||
|
||||
@@ -88,11 +88,7 @@
|
||||
|
||||
@include S(grid-column-gap, 10px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
&.demo {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
.standaloneBanner {
|
||||
background: rgb(255, 75, 84);
|
||||
@@ -183,7 +179,7 @@
|
||||
.updateLabel {
|
||||
position: absolute;
|
||||
transform: translateX(50%) rotate(-5deg);
|
||||
color: #3291e9;
|
||||
color: #ff590b;
|
||||
@include Heading;
|
||||
font-weight: bold;
|
||||
@include S(right, 40px);
|
||||
@@ -223,9 +219,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
.puzzleContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #4cc98a;
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
@include S(padding, 20px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
> .dlcLogo {
|
||||
@include S(width, 200px);
|
||||
}
|
||||
|
||||
> button {
|
||||
@include S(margin-top, 20px);
|
||||
@include Heading;
|
||||
@include S(padding, 10px, 30px);
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-row: 1 / 2;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #fafafa;
|
||||
@@ -242,6 +262,16 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modeButtons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@include S(grid-column-gap, 10px);
|
||||
align-items: start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.browserWarning {
|
||||
@include S(margin-bottom, 10px);
|
||||
background-color: $colorRedBright;
|
||||
@@ -285,6 +315,18 @@
|
||||
@include S(margin-left, 15px);
|
||||
}
|
||||
|
||||
.playModeButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(margin-top, 15px);
|
||||
@include S(margin-left, 15px);
|
||||
}
|
||||
|
||||
.editModeButton {
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(margin-top, 15px);
|
||||
@include S(margin-left, 15px);
|
||||
}
|
||||
|
||||
.savegames {
|
||||
@include S(max-height, 105px);
|
||||
overflow-y: auto;
|
||||
@@ -439,6 +481,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bottomContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
@include S(padding-top, 10px);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@include S(grid-column-gap, 10px);
|
||||
align-items: start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
@include S(border-radius, 3px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #424242;
|
||||
background: #33343c;
|
||||
}
|
||||
|
||||
.version {
|
||||
|
||||
277
src/css/states/puzzle_menu.scss
Normal file
277
src/css/states/puzzle_menu.scss
Normal file
@@ -0,0 +1,277 @@
|
||||
#state_PuzzleMenuState {
|
||||
> .headerBar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
> h1 {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.createPuzzle {
|
||||
background-color: $colorGreenBright;
|
||||
@include S(margin-left, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
> .container {
|
||||
> .mainContent {
|
||||
overflow: hidden;
|
||||
|
||||
> .categoryChooser {
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 2px);
|
||||
@include S(padding-right, 10px);
|
||||
|
||||
> .category {
|
||||
background: $accentColorBright;
|
||||
border-radius: 0;
|
||||
color: $accentColorDark;
|
||||
transition: all 0.12s ease-in-out;
|
||||
transition-property: opacity, background-color, color;
|
||||
|
||||
&:first-child {
|
||||
@include S(border-top-left-radius, $globalBorderRadius);
|
||||
@include S(border-bottom-left-radius, $globalBorderRadius);
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: $globalBorderRadius;
|
||||
border-bottom-right-radius: $globalBorderRadius;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $colorBlueBright;
|
||||
opacity: 1 !important;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: $accentColorDark;
|
||||
color: #bbbbc4;
|
||||
|
||||
&.active {
|
||||
background: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .puzzles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(D(180px), 1fr));
|
||||
@include S(grid-auto-rows, 65px);
|
||||
@include S(grid-gap, 7px);
|
||||
@include S(margin-top, 10px);
|
||||
@include S(padding-right, 4px);
|
||||
@include S(height, 360px);
|
||||
overflow-y: scroll;
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
|
||||
> .puzzle {
|
||||
width: 100%;
|
||||
@include S(height, 65px);
|
||||
background: #f3f3f8;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: D(15px) D(15px) 1fr;
|
||||
@include S(padding, 5px);
|
||||
@include S(grid-column-gap, 5px);
|
||||
box-sizing: border-box;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@include S(padding-left, 10px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: rgba(0, 0, 10, 0.2);
|
||||
}
|
||||
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f0f0f8;
|
||||
}
|
||||
|
||||
> .title {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@include S(padding, 2px, 5px);
|
||||
@include S(height, 17px);
|
||||
}
|
||||
|
||||
> .author {
|
||||
grid-column: 2 / 2;
|
||||
grid-row: 2 / 3;
|
||||
@include SuperSmallText;
|
||||
color: $accentColorDark;
|
||||
align-self: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@include S(padding, 2px, 5px);
|
||||
}
|
||||
|
||||
> .icon {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 4;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
@include S(width, 45px);
|
||||
@include S(height, 45px);
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> .stats {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
justify-content: center;
|
||||
align-self: end;
|
||||
@include S(height, 14px);
|
||||
|
||||
> .downloads {
|
||||
@include SuperSmallText;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
@include S(margin-right, 5px);
|
||||
@include S(padding-left, 12px);
|
||||
opacity: 0.7;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include DarkThemeInvert;
|
||||
|
||||
& {
|
||||
/* @load-async */
|
||||
background: uiResource("icons/puzzle_plays.png") #{D(2px)} #{D(2.5px)} / #{D(
|
||||
8px
|
||||
)} #{D(8px)} no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
> .likes {
|
||||
@include SuperSmallText;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
@include S(padding-left, 14px);
|
||||
opacity: 0.7;
|
||||
@include DarkThemeInvert;
|
||||
|
||||
& {
|
||||
/* @load-async */
|
||||
background: uiResource("icons/puzzle_upvotes.png") #{D(2px)} #{D(2.4px)} / #{D(
|
||||
9px
|
||||
)} #{D(9px)} no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
> .difficulty {
|
||||
@include SuperSmallText;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
@include S(margin-right, 3px);
|
||||
opacity: 0.7;
|
||||
|
||||
&.stage--easy {
|
||||
color: $colorGreenBright;
|
||||
}
|
||||
&.stage--normal {
|
||||
color: #000;
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
&.stage--medium {
|
||||
color: $colorOrangeBright;
|
||||
}
|
||||
&.stage--hard {
|
||||
color: $colorRedBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed {
|
||||
> .icon,
|
||||
> .stats,
|
||||
> .author,
|
||||
> .title {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
background: #fafafa;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@include S(top, 10px);
|
||||
@include S(right, 10px);
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
opacity: 0.1;
|
||||
|
||||
& {
|
||||
/* @load-async */
|
||||
background: uiResource("icons/puzzle_complete_indicator.png") center center /
|
||||
contain no-repeat;
|
||||
}
|
||||
}
|
||||
@include DarkThemeOverride {
|
||||
&::after {
|
||||
/* @load-async */
|
||||
background: uiResource("icons/puzzle_complete_indicator_inverse.png") center
|
||||
center / contain no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .loader,
|
||||
> .empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $accentColorDark;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,8 +18,10 @@ $textLineHeight: 21px;
|
||||
$plainTextFontSize: 13px;
|
||||
$plainTextLineHeight: 17px;
|
||||
|
||||
$supersmallTextFontSize: 10px;
|
||||
$supersmallTextLineHeight: 13px;
|
||||
$superDuperSmallTextFontSize: 8px;
|
||||
$superDuperSmallTextLineHeight: 9px;
|
||||
$superSmallTextFontSize: 10px;
|
||||
$superSmallTextLineHeight: 13px;
|
||||
$buttonFontSize: 14px;
|
||||
$buttonLineHeight: 18px;
|
||||
|
||||
@@ -33,6 +35,7 @@ $accentColorDark: #7d808a;
|
||||
$colorGreenBright: #66bb6a;
|
||||
$colorBlueBright: rgb(74, 151, 223);
|
||||
$colorRedBright: #ef5072;
|
||||
$colorOrangeBright: #ef9d50;
|
||||
$themeColor: #393747;
|
||||
$ingameHudBg: rgba(#333438, 0.9);
|
||||
|
||||
@@ -76,8 +79,16 @@ $mainFontScale: 1;
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin SuperDuperSmallText {
|
||||
@include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
@include DebugText(green);
|
||||
}
|
||||
|
||||
@mixin SuperSmallText {
|
||||
@include ScaleFont($supersmallTextFontSize, $supersmallTextLineHeight);
|
||||
@include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
Reference in New Issue
Block a user