Further ui improvements, fix simple belts with wires
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 7.7 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 7.1 KiB |
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 7.2 KiB |
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.8 KiB |
@ -1,6 +1,6 @@
|
|||||||
.ingame_buildingsToolbar {
|
.ingame_buildingsToolbar {
|
||||||
position: fixed;
|
position: absolute;
|
||||||
@include S(bottom, 0px);
|
@include S(bottom, 5px);
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
@ -8,23 +8,25 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-bottom-width: 0;
|
|
||||||
transition: transform 120ms ease-in-out;
|
transition: transform 120ms ease-in-out;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
|
|
||||||
backdrop-filter: blur(D(5px));
|
backdrop-filter: blur(D(3px));
|
||||||
|
background-color: rgba(0, 40, 80, 0.05);
|
||||||
|
@include S(border-radius, $globalBorderRadius);
|
||||||
|
|
||||||
@include DarkThemeOverride {
|
@include DarkThemeOverride {
|
||||||
background-color: darken($darkModeGameBackground, 15);
|
background-color: rgba(darken($darkModeGameBackground, 15), 0.4);
|
||||||
|
|
||||||
|
&#ingame_HUD_wires_toolbar {
|
||||||
|
background-color: rgba(darken($darkModeGameBackground, 5), 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.visible) {
|
&:not(.visible) {
|
||||||
transform: translateX(-50%) translateY(#{D(100px)});
|
transform: translateX(-50%) translateY(#{D(100px)});
|
||||||
}
|
}
|
||||||
|
|
||||||
@include S(border-top-left-radius, $globalBorderRadius);
|
|
||||||
@include S(border-top-right-radius, $globalBorderRadius);
|
|
||||||
|
|
||||||
.buildings {
|
.buildings {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
@ -41,7 +43,7 @@
|
|||||||
@include S(width, 35px);
|
@include S(width, 35px);
|
||||||
@include S(height, 40px);
|
@include S(height, 40px);
|
||||||
|
|
||||||
background: center center / 65% no-repeat;
|
background: center center / 70% no-repeat;
|
||||||
|
|
||||||
&:not(.unlocked) {
|
&:not(.unlocked) {
|
||||||
@include S(width, 20px);
|
@include S(width, 20px);
|
||||||
@ -67,25 +69,10 @@
|
|||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
transition: all 50ms ease-in-out;
|
transition: all 50ms ease-in-out;
|
||||||
transition-property: background-color, transform;
|
transition-property: background-color, transform;
|
||||||
|
|
||||||
cursor: pointer;
|
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 {
|
&:hover {
|
||||||
&::before {
|
background-color: rgba(30, 40, 90, 0.1);
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pressed {
|
&.pressed {
|
||||||
@ -94,13 +81,7 @@
|
|||||||
|
|
||||||
&.selected {
|
&.selected {
|
||||||
// transform: scale(1.05);
|
// transform: scale(1.05);
|
||||||
|
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
|
||||||
&::before {
|
|
||||||
background-color: rgba($colorBlueBright, 0.2);
|
|
||||||
opacity: 1;
|
|
||||||
border-top: D(3px) solid $colorBlueBright;
|
|
||||||
@include S(top, -3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.keybinding {
|
.keybinding {
|
||||||
color: #111;
|
color: #111;
|
||||||
|
@ -1190,6 +1190,11 @@ export class BeltPath extends BasicSerializableObject {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.root.currentLayer !== "regular") {
|
||||||
|
// Not in regular layer
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
const mousePos = this.root.app.mousePosition;
|
const mousePos = this.root.app.mousePosition;
|
||||||
if (!mousePos) {
|
if (!mousePos) {
|
||||||
// Mouse not registered
|
// Mouse not registered
|
||||||
|
@ -501,7 +501,7 @@ export class BeltSystem extends GameSystemWithFilter {
|
|||||||
// POTATO Mode: Only show items when belt is hovered
|
// POTATO Mode: Only show items when belt is hovered
|
||||||
let hoveredBeltPath = null;
|
let hoveredBeltPath = null;
|
||||||
const mousePos = this.root.app.mousePosition;
|
const mousePos = this.root.app.mousePosition;
|
||||||
if (mousePos) {
|
if (mousePos && this.root.currentLayer === "regular") {
|
||||||
const tile = this.root.camera.screenToWorld(mousePos).toTileSpace();
|
const tile = this.root.camera.screenToWorld(mousePos).toTileSpace();
|
||||||
const contents = this.root.map.getLayerContentXY(tile.x, tile.y, "regular");
|
const contents = this.root.map.getLayerContentXY(tile.x, tile.y, "regular");
|
||||||
if (contents && contents.components.Belt) {
|
if (contents && contents.components.Belt) {
|
||||||
|