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

Add tutorial images for all building variants

Browse Source
This commit is contained in:
tobspr
2020-05-21 11:40:26 +02:00
parent c6228f8d32
commit 8dd3a7c748
22 changed files with 156 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/icons.scss
View File

@@ -1,14 +1,20 @@
$buildings: belt, cutter, miner, mixer, painter, rotater, splitter, stacker, trash, underground_belt;
@each $building in $buildings {
[data-icon="building_tutorials/#{$building}.png"] {
background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
}
[data-icon="building_icons/#{$building}.png"] {
background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
}
}
$buildingsAndVariants: belt, splitter, splitter-compact, splitter-compact-inverse, underground_belt,
underground_belt-tier2, miner, miner-chainable, cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer,
painter, painter-double, painter-quad, trash, trash-storage;
@each $building in $buildingsAndVariants {
[data-icon="building_tutorials/#{$building}.png"] {
background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
}
}
$icons: notification_saved, notification_success, notification_upgrade;
@each $icon in $icons {
[data-icon="icons/#{$icon}.png"] {

103
src/css/ingame_hud/building_placer.scss
View File

@@ -79,16 +79,18 @@
#ingame_HUD_PlacerVariants {
position: absolute;
@include S(left, 10px);
@include S(bottom, 80px);
display: grid;
grid-auto-flow: row;
justify-items: start;
@include S(right, 10px);
@include S(top, 200px);
display: flex;
@include S(grid-gap, 5px);
flex-direction: column;
align-items: flex-end;
.explanation {
text-transform: uppercase;
grid-row: 1 / 2;
@include SuperSmallText;
text-align: right;
.keybinding {
position: relative;
}
@@ -98,53 +100,60 @@
}
}
.variant {
@include S(border-radius, $globalBorderRadius);
background: rgba(0, 10, 20, 0.1);
display: flex;
position: relative;
align-items: center;
@include S(padding, 5px);
@include S(grid-gap, 10px);
.variants {
display: grid;
@include S(grid-gap, 5px);
&.active {
background-color: rgba(74, 163, 223, 0.6);
}
$iconSize: 25px;
.iconWrap {
grid-column: 1 / 2;
grid-row: 1 / 2;
.variant {
grid-row: 2 / 3;
@include S(border-radius, $globalBorderRadius);
background: rgba(0, 10, 20, 0.2);
display: inline-flex;
vertical-align: top;
position: relative;
@include S(width, $iconSize);
@include S(height, $iconSize);
background: center center / contain no-repeat;
align-items: center;
@include S(padding, 3px);
@include S(grid-gap, 10px);
&[data-tile-w="2"] {
@include S(width, 2 * $iconSize);
&.active {
background-color: rgba(74, 163, 223, 0.6);
}
&[data-tile-w="3"] {
@include S(width, 3 * $iconSize);
}
&[data-tile-w="4"] {
@include S(width, 4 * $iconSize);
}
&[data-tile-h="2"] {
@include S(height, 2 * $iconSize);
}
&[data-tile-h="3"] {
@include S(height, 3 * $iconSize);
}
}
.label {
display: none;
grid-column: 2 / 3;
text-transform: uppercase;
grid-row: 1 / 2;
@include SuperSmallText;
color: #fff;
$iconSize: 25px;
.iconWrap {
grid-column: 1 / 2;
grid-row: 1 / 2;
position: relative;
@include S(width, $iconSize);
@include S(height, $iconSize);
background: center center / contain no-repeat;
&[data-tile-w="2"] {
@include S(width, 2 * $iconSize);
}
&[data-tile-h="2"] {
@include S(height, 2 * $iconSize);
}
&[data-tile-h="3"] {
@include S(height, 3 * $iconSize);
}
&[data-tile-w="3"] {
@include S(width, 3 * $iconSize);
}
&[data-tile-w="4"] {
@include S(width, 4 * $iconSize);
}
}
.label {
display: none;
grid-column: 2 / 3;
text-transform: uppercase;
grid-row: 1 / 2;
@include SuperSmallText;
color: #fff;
}
}
}
}