Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-06-13 13:04:03 +00:00
Code Issues Projects Releases Wiki Activity

finalized look and changed locked building to same sprite

Browse Source
This commit is contained in:
Sense101 2021-05-06 21:44:41 +01:00
parent a3b51cf7f0
commit a4d33a4c57
3 changed files with 58 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/css/ingame_hud/buildings_toolbar.scss
View File

@ -49,94 +49,91 @@
}
.building {
color: $accentColorDark;
display: flex;
flex-direction: column;
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;
@include S(padding, 5px);
@include S(padding-bottom, 1px);
@include S(width, 35px);
@include S(height, 37px);
@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;
.icon {
@include S(width, 20px);
opacity: 0.15;
}
&.editor {
pointer-events: all;
cursor: pointer;
&:hover {
background-color: rgba(22, 30, 68, 0.1);
.icon {
pointer-events: all;
cursor: pointer;
&:hover {
background-color: rgba(22, 30, 68, 0.1);
}
}
}
&::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;
&: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;
&:hover {
background-color: rgba(30, 40, 90, 0.1);
}
cursor: pointer;
&:hover {
background-color: rgba(30, 40, 90, 0.1);
}
&.pressed {
transform: scale(0.9) !important;
}
&.pressed {
transform: scale(0.9) !important;
}
&.selected {
// transform: scale(1.05);
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
&.selected {
// transform: scale(1.05);
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
.keybinding {
color: #111;
.keybinding {
color: #111;
}
}
}
.puzzle-lock {
& {
/* @load-async */
background: uiResource("locked_building.png") center center / #{D(15px)} #{D(15px)}
background: uiResource("locked_building.png") center center / #{D(14px)} #{D(14px)}
no-repeat;
}
display: grid;
grid-auto-flow: column;
@include S(margin-bottom, 58px);
@include S(margin-top, 2px);
@include S(margin-left, 16px);
@include S(margin-bottom, 29px);
position: absolute;
bottom: 20px;
transition: all 0.12s ease-in-out;
transition-property: opacity, transform;
cursor: pointer;
pointer-events: all;
@include S(width, 15px);
@include S(height, 15px);
@include S(width, 14px);
@include S(height, 14px);
&:hover {
opacity: 0.5;

4
src/css/resources.scss
View File

@ -5,7 +5,9 @@ $buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, tra
@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;
}
}
}

8
src/js/game/hud/parts/base_toolbar.js
View File

@ -1,7 +1,6 @@
import { gMetaBuildingRegistry } from "../../../core/global_registries";
import { STOP_PROPAGATION } from "../../../core/signal";
import { makeDiv, safeModulo } from "../../../core/utils";
import { MetaBeltBuilding } from "../../buildings/belt";
import { MetaBlockBuilding } from "../../buildings/block";
import { MetaConstantProducerBuilding } from "../../buildings/constant_producer";
import { MetaGoalAcceptorBuilding } from "../../buildings/goal_acceptor";
@ -114,11 +113,13 @@ export class HUDBaseToolbar extends BaseHUDPart {
itemContainer.setAttribute("data-id", metaBuilding.getId());
binding.add(() => this.selectBuildingForPlacement(metaBuilding));
this.trackClicks(itemContainer, () => this.selectBuildingForPlacement(metaBuilding), {
const icon = makeDiv(itemContainer, null, ["icon"]);
this.trackClicks(icon, () => this.selectBuildingForPlacement(metaBuilding), {
clickSound: null,
});
//new stuff
//lock icon for puzzle editor
if (this.root.gameMode.getIsEditor() && !this.inRequiredBuildings(metaBuilding)) {
const puzzleLock = makeDiv(itemContainer, null, ["puzzle-lock"]);
@ -317,7 +318,6 @@ export class HUDBaseToolbar extends BaseHUDPart {
gMetaBuildingRegistry.findByClass(MetaConstantProducerBuilding),
gMetaBuildingRegistry.findByClass(MetaGoalAcceptorBuilding),
gMetaBuildingRegistry.findByClass(MetaBlockBuilding),
gMetaBuildingRegistry.findByClass(MetaBeltBuilding),
];
return requiredBuildings.includes(metaBuilding);
}