Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Allow pinning shapes

Browse Source
This commit is contained in:
tobspr
2020-05-14 13:29:42 +02:00
parent e43a22b56d
commit 38970141d8
13 changed files with 303 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/ingame_hud/blur_overlay.scss
View File

@@ -1,8 +0,0 @@
body.ingameDialogOpen {
#ingame_Canvas,
#ingame_HUD_GameMenu,
#ingame_HUD_KeybindingOverlay,
#ingame_HUD_buildings_toolbar {
filter: blur(5px);
}
}

2
src/css/ingame_hud/keybindings_overlay.scss
View File

@@ -20,7 +20,7 @@
@include S(height, 10px);
width: 1px;
@include S(margin, 0, 3px);
background-color: #ccc;
background-color: #888;
transform: rotate(10deg);
// @include S(margin, 0, 3px);
}

54
src/css/ingame_hud/pinned_shapes.scss Normal file
View File

@@ -0,0 +1,54 @@
#ingame_HUD_PinnedShapes {
position: absolute;
@include S(left, 9px);
@include S(top, 120px);
@include PlainText;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
> .shape {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
@include S(margin-bottom, 5px);
&.unpinable {
> canvas {
cursor: pointer;
pointer-events: all;
}
}
> canvas {
@include S(width, 25px);
@include S(height, 25px);
}
> .amountLabel {
@include S(margin-left, 5px);
@include SuperSmallText;
font-weight: bold;
display: inline-flex;
align-items: center;
flex-direction: row;
}
&.marked .amountLabel {
&::after {
content: " ";
position: absolute;
display: inline-block;
@include S(width, 9px);
@include S(height, 9px);
opacity: 0.8;
@include S(top, -4px);
@include S(left, -4px);
background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
}
}
}
}

44
src/css/ingame_hud/shop.scss
View File

@@ -100,6 +100,50 @@
flex-direction: column;
align-items: center;
button.pin {
@include S(width, 12px);
@include S(height, 12px);
background: uiResource("icons/pin.png") center center / 95% no-repeat;
position: absolute;
@include S(top, -2px);
@include S(right, -2px);
opacity: 0.6;
cursor: pointer;
pointer-events: all;
@include IncreasedClickArea(5px);
transition: opacity 0.12s ease-in-out;
&:hover {
opacity: 0.7;
}
&.alreadyPinned {
opacity: 0.1 !important;
pointer-events: none;
cursor: default;
}
&.pinned {
opacity: 0.1;
pointer-events: none;
cursor: default;
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 1;
transform: scale(0.8);
}
30% {
opacity: 1;
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
}
}
canvas {
@include S(width, 40px);
@include S(height, 40px);

20
src/css/main.scss
View File

@@ -31,16 +31,16 @@
@import "ingame_hud/unlock_notification";
@import "ingame_hud/shop";
@import "ingame_hud/game_menu";
@import "ingame_hud/blur_overlay";
@import "ingame_hud/dialogs";
@import "ingame_hud/mass_selector";
@import "ingame_hud/vignette_overlay";
@import "ingame_hud/statistics";
@import "ingame_hud/pinned_shapes";
// Z-Index
$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar,
ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_Statistics,
ingame_HUD_BetaOverlay, ingame_HUD_MassSelector, ingame_HUD_UnlockNotification;
$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_PinnedShapes,
ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop,
ingame_HUD_Statistics, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector, ingame_HUD_UnlockNotification;
$zindex: 100;
@@ -56,7 +56,17 @@ body.uiHidden {
#ingame_HUD_buildings_toolbar,
#ingame_HUD_building_placer,
#ingame_HUD_GameMenu,
#ingame_HUD_MassSelector {
#ingame_HUD_MassSelector,
#ingame_HUD_PinnedShapes {
display: none !important;
}
}
body.ingameDialogOpen {
#ingame_Canvas,
#ingame_HUD_GameMenu,
#ingame_HUD_KeybindingOverlay,
#ingame_HUD_buildings_toolbar,
#ingame_HUD_PinnedShapes {
filter: blur(5px);
}
}