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 { .building {
color: $accentColorDark; .icon {
display: flex; color: $accentColorDark;
flex-direction: column; display: flex;
position: relative; flex-direction: column-reverse;
align-items: center; position: relative;
justify-content: center; align-items: center;
@include S(padding, 5px); justify-content: center;
@include S(padding-bottom, 1px); @include S(padding, 5px);
@include S(width, 35px); @include S(padding-bottom, 1px);
@include S(height, 40px); @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) { &:not(.unlocked) {
@include S(width, 20px); .icon {
opacity: 0.15; @include S(width, 20px);
background-image: none !important; opacity: 0.15;
}
&.editor { &.editor {
pointer-events: all; .icon {
cursor: pointer; pointer-events: all;
&:hover { cursor: pointer;
background-color: rgba(22, 30, 68, 0.1); &:hover {
background-color: rgba(22, 30, 68, 0.1);
}
} }
} }
&:not(.editor) {
&::before { .icon {
content: " "; background-image: uiResource("locked_building.png") !important;
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(border-radius, $globalBorderRadius);
&.unlocked { &.unlocked {
pointer-events: all; .icon {
transition: all 50ms ease-in-out; pointer-events: all;
transition-property: background-color, transform; transition: all 50ms ease-in-out;
transition-property: background-color, transform;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(30, 40, 90, 0.1); background-color: rgba(30, 40, 90, 0.1);
} }
&.pressed { &.pressed {
transform: scale(0.9) !important; transform: scale(0.9) !important;
} }
&.selected { &.selected {
// transform: scale(1.05); // transform: scale(1.05);
background-color: rgba(lighten($colorBlueBright, 9), 0.4); background-color: rgba(lighten($colorBlueBright, 9), 0.4);
.keybinding { .keybinding {
color: #111; color: #111;
}
} }
} }
.puzzle-lock { .puzzle-lock {
& { & {
/* @load-async */ /* @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; no-repeat;
} }
display: grid; display: grid;
grid-auto-flow: column; 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; position: absolute;
bottom: 20px;
transition: all 0.12s ease-in-out; transition: all 0.12s ease-in-out;
transition-property: opacity, transform; transition-property: opacity, transform;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
@include S(width, 15px); @include S(width, 14px);
@include S(height, 15px); @include S(height, 14px);
&:hover { &:hover {
opacity: 0.5; 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 { @each $building in $buildings {
[data-icon="building_icons/#{$building}.png"] { [data-icon="building_icons/#{$building}.png"] {
/* @load-async */ /* @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 { gMetaBuildingRegistry } from "../../../core/global_registries";
import { STOP_PROPAGATION } from "../../../core/signal"; import { STOP_PROPAGATION } from "../../../core/signal";
import { makeDiv, safeModulo } from "../../../core/utils"; import { makeDiv, safeModulo } from "../../../core/utils";
import { MetaBeltBuilding } from "../../buildings/belt";
import { MetaBlockBuilding } from "../../buildings/block"; import { MetaBlockBuilding } from "../../buildings/block";
import { MetaConstantProducerBuilding } from "../../buildings/constant_producer"; import { MetaConstantProducerBuilding } from "../../buildings/constant_producer";
import { MetaGoalAcceptorBuilding } from "../../buildings/goal_acceptor"; import { MetaGoalAcceptorBuilding } from "../../buildings/goal_acceptor";
@ -114,11 +113,13 @@ export class HUDBaseToolbar extends BaseHUDPart {
itemContainer.setAttribute("data-id", metaBuilding.getId()); itemContainer.setAttribute("data-id", metaBuilding.getId());
binding.add(() => this.selectBuildingForPlacement(metaBuilding)); 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, clickSound: null,
}); });
//new stuff //lock icon for puzzle editor
if (this.root.gameMode.getIsEditor() && !this.inRequiredBuildings(metaBuilding)) { if (this.root.gameMode.getIsEditor() && !this.inRequiredBuildings(metaBuilding)) {
const puzzleLock = makeDiv(itemContainer, null, ["puzzle-lock"]); const puzzleLock = makeDiv(itemContainer, null, ["puzzle-lock"]);
@ -317,7 +318,6 @@ export class HUDBaseToolbar extends BaseHUDPart {
gMetaBuildingRegistry.findByClass(MetaConstantProducerBuilding), gMetaBuildingRegistry.findByClass(MetaConstantProducerBuilding),
gMetaBuildingRegistry.findByClass(MetaGoalAcceptorBuilding), gMetaBuildingRegistry.findByClass(MetaGoalAcceptorBuilding),
gMetaBuildingRegistry.findByClass(MetaBlockBuilding), gMetaBuildingRegistry.findByClass(MetaBlockBuilding),
gMetaBuildingRegistry.findByClass(MetaBeltBuilding),
]; ];
return requiredBuildings.includes(metaBuilding); return requiredBuildings.includes(metaBuilding);
} }