diff --git a/artwork/ui/building_tutorials.psd b/artwork/ui/building_tutorials.psd
index 0b46038b..e286298f 100644
Binary files a/artwork/ui/building_tutorials.psd and b/artwork/ui/building_tutorials.psd differ
diff --git a/res/ui/building_tutorials/belt.png b/res/ui/building_tutorials/belt.png
index ffeed6b5..58209c6f 100644
Binary files a/res/ui/building_tutorials/belt.png and b/res/ui/building_tutorials/belt.png differ
diff --git a/res/ui/building_tutorials/cutter-quad.png b/res/ui/building_tutorials/cutter-quad.png
new file mode 100644
index 00000000..22137353
Binary files /dev/null and b/res/ui/building_tutorials/cutter-quad.png differ
diff --git a/res/ui/building_tutorials/cutter.png b/res/ui/building_tutorials/cutter.png
index 128b2784..cbbb2fac 100644
Binary files a/res/ui/building_tutorials/cutter.png and b/res/ui/building_tutorials/cutter.png differ
diff --git a/res/ui/building_tutorials/miner-chainable.png b/res/ui/building_tutorials/miner-chainable.png
new file mode 100644
index 00000000..565abe75
Binary files /dev/null and b/res/ui/building_tutorials/miner-chainable.png differ
diff --git a/res/ui/building_tutorials/miner.png b/res/ui/building_tutorials/miner.png
index a7f7c0ad..8f8978e8 100644
Binary files a/res/ui/building_tutorials/miner.png and b/res/ui/building_tutorials/miner.png differ
diff --git a/res/ui/building_tutorials/painter-double.png b/res/ui/building_tutorials/painter-double.png
new file mode 100644
index 00000000..3833c53c
Binary files /dev/null and b/res/ui/building_tutorials/painter-double.png differ
diff --git a/res/ui/building_tutorials/painter-quad.png b/res/ui/building_tutorials/painter-quad.png
new file mode 100644
index 00000000..57536440
Binary files /dev/null and b/res/ui/building_tutorials/painter-quad.png differ
diff --git a/res/ui/building_tutorials/rotater-ccw.png b/res/ui/building_tutorials/rotater-ccw.png
new file mode 100644
index 00000000..a76b7179
Binary files /dev/null and b/res/ui/building_tutorials/rotater-ccw.png differ
diff --git a/res/ui/building_tutorials/rotater.png b/res/ui/building_tutorials/rotater.png
index ed1ef55e..c8ecb8b0 100644
Binary files a/res/ui/building_tutorials/rotater.png and b/res/ui/building_tutorials/rotater.png differ
diff --git a/res/ui/building_tutorials/splitter-compact-inverse.png b/res/ui/building_tutorials/splitter-compact-inverse.png
new file mode 100644
index 00000000..38965f4d
Binary files /dev/null and b/res/ui/building_tutorials/splitter-compact-inverse.png differ
diff --git a/res/ui/building_tutorials/splitter-compact.png b/res/ui/building_tutorials/splitter-compact.png
new file mode 100644
index 00000000..17367926
Binary files /dev/null and b/res/ui/building_tutorials/splitter-compact.png differ
diff --git a/res/ui/building_tutorials/splitter.png b/res/ui/building_tutorials/splitter.png
index a29d76e4..25f54f33 100644
Binary files a/res/ui/building_tutorials/splitter.png and b/res/ui/building_tutorials/splitter.png differ
diff --git a/res/ui/building_tutorials/trash-storage.png b/res/ui/building_tutorials/trash-storage.png
new file mode 100644
index 00000000..50c77719
Binary files /dev/null and b/res/ui/building_tutorials/trash-storage.png differ
diff --git a/res/ui/building_tutorials/underground_belt-tier2.png b/res/ui/building_tutorials/underground_belt-tier2.png
new file mode 100644
index 00000000..476ad4da
Binary files /dev/null and b/res/ui/building_tutorials/underground_belt-tier2.png differ
diff --git a/res/ui/building_tutorials/underground_belt.png b/res/ui/building_tutorials/underground_belt.png
index e7f2a797..ed2916f6 100644
Binary files a/res/ui/building_tutorials/underground_belt.png and b/res/ui/building_tutorials/underground_belt.png differ
diff --git a/src/css/icons.scss b/src/css/icons.scss
index 36165c35..b2af1b64 100644
--- a/src/css/icons.scss
+++ b/src/css/icons.scss
@@ -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"] {
diff --git a/src/css/ingame_hud/building_placer.scss b/src/css/ingame_hud/building_placer.scss
index b2c67ec4..bcfddc8a 100644
--- a/src/css/ingame_hud/building_placer.scss
+++ b/src/css/ingame_hud/building_placer.scss
@@ -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);
-
- &.active {
- background-color: rgba(74, 163, 223, 0.6);
- }
-
- $iconSize: 25px;
-
- .iconWrap {
- grid-column: 1 / 2;
- grid-row: 1 / 2;
+ .variants {
+ display: grid;
+ @include S(grid-gap, 5px);
+
+ .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);
- }
- &[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);
+ &.active {
+ background-color: rgba(74, 163, 223, 0.6);
}
- &[data-tile-h="3"] {
- @include S(height, 3 * $iconSize);
+
+ $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;
+ .label {
+ display: none;
+ grid-column: 2 / 3;
+ text-transform: uppercase;
+ grid-row: 1 / 2;
+ @include SuperSmallText;
+ color: #fff;
+ }
}
}
}
diff --git a/src/js/core/config.js b/src/js/core/config.js
index 04c7b1a3..77d9bb0c 100644
--- a/src/js/core/config.js
+++ b/src/js/core/config.js
@@ -57,8 +57,8 @@ export const globalConfig = {
rotater: 1 / 1,
rotaterCCW: 1 / 1,
painter: 1 / 6,
- painterDouble: 1 / 7,
- painterQuad: 1 / 7,
+ painterDouble: 1 / 8,
+ painterQuad: 1 / 8,
mixer: 1 / 5,
stacker: 1 / 6,
},
@@ -83,7 +83,7 @@ export const globalConfig = {
debug: {
/* dev:start */
- // fastGameEnter: true,
+ fastGameEnter: true,
noArtificialDelays: true,
// disableSavegameWrite: true,
// showEntityBounds: true,
@@ -93,8 +93,8 @@ export const globalConfig = {
// disableZoomLimits: true,
// showChunkBorders: true,
// rewardsInstant: true,
- // allBuildingsUnlocked: true,
- // upgradesNoCost: true,
+ allBuildingsUnlocked: true,
+ upgradesNoCost: true,
// disableUnlockDialog: true,
// disableLogicTicks: true,
// testClipping: true,
diff --git a/src/js/game/camera.js b/src/js/game/camera.js
index 99df0675..d7608ce9 100644
--- a/src/js/game/camera.js
+++ b/src/js/game/camera.js
@@ -99,6 +99,13 @@ export class Camera extends BasicSerializableObject {
this.internalInitEvents();
this.clampZoomLevel();
this.bindKeys();
+ if (G_IS_DEV) {
+ window.addEventListener("keydown", ev => {
+ if (ev.key === "l") {
+ this.zoomLevel = 3;
+ }
+ });
+ }
}
// Serialization
diff --git a/src/js/game/hud/parts/building_placer.js b/src/js/game/hud/parts/building_placer.js
index a581a0b3..f83970a3 100644
--- a/src/js/game/hud/parts/building_placer.js
+++ b/src/js/game/hud/parts/building_placer.js
@@ -258,11 +258,6 @@ export class HUDBuildingPlacer extends BaseHUDPart {
})
);
metaBuilding.updateVariants(this.fakeEntity, 0, this.currentVariant.get());
-
- this.buildingInfoElements.tutorialImage.setAttribute(
- "data-icon",
- "building_tutorials/" + metaBuilding.getId() + ".png"
- );
} else {
this.fakeEntity = null;
}
@@ -281,8 +276,10 @@ export class HUDBuildingPlacer extends BaseHUDPart {
return;
}
- this.buildingInfoElements.label.innerHTML = T.buildings[metaBuilding.id].name;
- this.buildingInfoElements.descText.innerHTML = T.buildings[metaBuilding.id].description;
+ const variant = this.currentVariant.get();
+
+ this.buildingInfoElements.label.innerHTML = T.buildings[metaBuilding.id][variant].name;
+ this.buildingInfoElements.descText.innerHTML = T.buildings[metaBuilding.id][variant].description;
const binding = this.root.keyMapper.getBinding(KEYMAPPINGS.buildings[metaBuilding.getId()]);
this.buildingInfoElements.hotkey.innerHTML = T.ingame.buildingPlacement.hotkeyLabel.replace(
@@ -290,6 +287,14 @@ export class HUDBuildingPlacer extends BaseHUDPart {
"" + binding.getKeyCodeString() + ""
);
+ this.buildingInfoElements.tutorialImage.setAttribute(
+ "data-icon",
+ "building_tutorials/" +
+ metaBuilding.getId() +
+ (variant === defaultBuildingVariant ? "" : "-" + variant) +
+ ".png"
+ );
+
removeAllChildren(this.buildingInfoElements.additionalInfo);
const additionalInfo = metaBuilding.getAdditionalStatistics(this.root, this.currentVariant.get());
for (let i = 0; i < additionalInfo.length; ++i) {
@@ -332,10 +337,12 @@ export class HUDBuildingPlacer extends BaseHUDPart {
)
);
+ const container = makeDiv(this.variantsElement, null, ["variants"]);
+
for (let i = 0; i < availableVariants.length; ++i) {
const variant = availableVariants[i];
- const element = makeDiv(this.variantsElement, null, ["variant"]);
+ const element = makeDiv(container, null, ["variant"]);
element.classList.toggle("active", variant === this.currentVariant.get());
makeDiv(element, null, ["label"], variant);
diff --git a/translations/base-en.yaml b/translations/base-en.yaml
index 05de5157..8679b5af 100644
--- a/translations/base-en.yaml
+++ b/translations/base-en.yaml
@@ -253,44 +253,86 @@ shopUpgrades:
# Buildings and their name / description
buildings:
belt:
- name: &belt Conveyor Belt
- description: Transports items, hold and drag to place multiple.
+ default:
+ name: &belt Conveyor Belt
+ description: Transports items, hold and drag to place multiple.
miner: # Internal name for the Extractor
- name: &miner Extractor
- description: Place over a shape or color to extract it.
+ default:
+ name: &miner Extractor
+ description: Place over a shape or color to extract it.
+
+ chainable:
+ name: Extractor (Chain)
+ description: Place over a shape or color to extract it. Can be chained.
underground_belt: # Internal name for the Tunnel
- name: &underground_belt Tunnel
- description: Allows to tunnel resources under buildings and belts.
+ default:
+ name: &underground_belt Tunnel
+ description: Allows to tunnel resources under buildings and belts.
+
+ tier2:
+ name: Tunnel Tier II
+ description: Allows to tunnel resources under buildings and belts.
splitter: # Internal name for the Balancer
- name: &splitter Balancer
- description: Multifunctional - Evenly distributes all inputs onto all outputs.
+ default:
+ name: &splitter Balancer
+ description: Multifunctional - Evenly distributes all inputs onto all outputs.
+
+ compact:
+ name: Merger (compact)
+ description: Merges two conveyor belts into one.
+
+ compact-inverse:
+ name: Merger (compact)
+ description: Merges two conveyor belts into one.
cutter:
- name: &cutter Cutter
- description: Cuts shapes from top to bottom and outputs both halfs. If you use only one part, be sure to destroy the other part or it will stall!
+ default:
+ name: &cutter Cutter
+ description: Cuts shapes from top to bottom and outputs both halfs. If you use only one part, be sure to destroy the other part or it will stall!
+ quad:
+ name: Cutter (Quad)
+ description: Cuts shapes into four parts. If you use only one part, be sure to destroy the other part or it will stall!
rotater:
- name: &rotater Rotate
- description: Rotates shapes clockwise by 90 degrees.
-
- stacker: # Internal name for the Combiner
- name: &stacker Stacker
- description: Stacks both items. If they can not be merged, the right item is placed above the left item.
+ default:
+ name: &rotater Rotate
+ description: Rotates shapes clockwise by 90 degrees.
+ ccw:
+ name: Rotate (CCW)
+ description: Rotates shapes counter clockwise by 90 degrees.
+
+ stacker:
+ default:
+ name: &stacker Stacker
+ description: Stacks both items. If they can not be merged, the right item is placed above the left item.
mixer:
- name: &mixer Color Mixer
- description: Mixes two colors using additive blending.
+ default:
+ name: &mixer Color Mixer
+ description: Mixes two colors using additive blending.
painter:
- name: &painter Painter
- description: Colors the whole shape on the left input with the color from the right input.
-
- trash: # Internal name for the destroyer
- name: &trash Trash
- description: Accepts inputs from all sides and destroys them. Forever.
+ default:
+ name: &painter Painter
+ description: Colors the whole shape on the left input with the color from the right input.
+ double:
+ name: Painter (Double)
+ description: Colors the both shapes on the left input with the color from the right input.
+ quad:
+ name: Painter (Quad)
+ description: Allows to color each quadrant of the shape with a different color.
+
+ trash:
+ default:
+ name: &trash Trash
+ description: Accepts inputs from all sides and destroys them. Forever.
+
+ storage:
+ name: Storage
+ description: Stores excess items, up to a given capacity. Can be used as an overflow gate.
storyRewards:
# Those are the rewards gained from completing the store