diff --git a/res/ui/toolbar_bg.lossless.png b/res/ui/toolbar_bg.lossless.png
new file mode 100644
index 00000000..93967a91
Binary files /dev/null and b/res/ui/toolbar_bg.lossless.png differ
diff --git a/res/ui/vignette.lossless.png b/res/ui/vignette.lossless.png
new file mode 100644
index 00000000..26f05296
Binary files /dev/null and b/res/ui/vignette.lossless.png differ
diff --git a/src/css/common.scss b/src/css/common.scss
index 7b8bafd2..c0a305aa 100644
--- a/src/css/common.scss
+++ b/src/css/common.scss
@@ -563,7 +563,7 @@ canvas {
.keybinding {
background: #fff;
text-transform: uppercase;
- @include S(padding, 2px, 1px, 2px);
+ @include S(padding, 1.5px, 3px, 2px);
@include PlainText;
@include BorderRadius(2px);
&,
@@ -589,7 +589,7 @@ canvas {
box-sizing: border-box;
@include S(height, 12px);
overflow: hidden;
- border: #{D(1px)} solid $accentColorDark;
+ border: #{D(0px)} solid $accentColorDark;
.keybinding_space {
@include S(font-size, 17px);
diff --git a/src/css/ingame_hud/building_placer.scss b/src/css/ingame_hud/building_placer.scss
index 68f3d8cd..689ac598 100644
--- a/src/css/ingame_hud/building_placer.scss
+++ b/src/css/ingame_hud/building_placer.scss
@@ -1,30 +1,53 @@
#ingame_HUD_building_placer {
position: fixed;
- @include S(top, 50px);
+ @include S(top, 40px);
@include S(right, 10px);
- display: flex;
- flex-direction: column;
+ display: grid;
@include S(padding, 6px);
- justify-content: center;
- align-items: flex-start;
- @include S(border-radius, 4px);
- background: rgba(#333, 0.9);
- @include S(width, 200px);
+ @include S(border-radius, 2px);
+ @include S(width, 240px);
+ @include S(grid-column-gap, 5px);
+
+ background: rgba(#333438, 0.8);
+ grid-template-columns: 1fr auto;
+ grid-template-rows: auto 1fr;
.buildingLabel {
@include PlainText;
+ @include S(margin-bottom, 2px);
color: #fff;
text-transform: uppercase;
- @include S(margin-bottom, 2px);
+ grid-column: 1 / 3;
+ grid-row: 1 / 2;
}
- .instructions,
.description {
- color: #fff;
- opacity: 0.8;
+ color: #bbb;
@include SuperSmallText;
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ display: grid;
+ grid-template-rows: 1fr auto;
+
+ strong {
+ color: #fff;
+ }
+ }
+
+ .hotkey {
+ color: lighten($colorGreenBright, 10);
+ font-weight: bold;
+ }
+
+ .buildingImage {
+ grid-column: 2 / 3;
+ grid-row: 1 / 3;
+ @include S(width, 100px);
+ @include S(height, 100px);
+ background: top left / 100% 100% no-repeat;
+ @include S(border-radius, 2px);
}
@include StyleBelowWidth(700px) {
diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss
index 09663939..ff4d7793 100644
--- a/src/css/ingame_hud/buildings_toolbar.scss
+++ b/src/css/ingame_hud/buildings_toolbar.scss
@@ -7,14 +7,14 @@
$toolbarBg: rgba($accentColorBright, 0.9);
display: flex;
flex-direction: column;
- background-color: $toolbarBg;
- // border: $ingameHudBorder;
+ background-color: rgb(255, 255, 255);
+ background: transparent;
border-bottom-width: 0;
-
- @include S(border-radius, 4px, 4px, 0, 0);
- // box-shadow: 0 0 0 #{D(2px)} rgba(darken($toolbarBg, 20), 0.5);
transition: transform 0.12s ease-in-out;
+ background: uiResource("toolbar_bg.lossless.png") center center / 100% 100% no-repeat;
+ @include S(padding, 20px, 100px, 0);
+
&:not(.visible) {
transform: translateX(-50%) translateY(#{D(100px)});
}
@@ -32,7 +32,7 @@
align-items: center;
justify-content: center;
@include S(padding, 5px);
- @include S(padding-bottom, 7px);
+ @include S(padding-bottom, 1px);
$buildingIconSize: 32px;
&:not(.unlocked) {
@@ -59,7 +59,7 @@
}
&.selected {
- background: rgb(173, 221, 253) !important;
+ background: rgba(74, 163, 223, 0.3) !important;
transform: scale(1.05);
.keybinding {
color: #111;
@@ -67,7 +67,7 @@
}
pointer-events: all;
- transition: all 0.1s ease-in-out;
+ transition: all 0.05s ease-in-out;
transition-property: background-color, transform;
&.unlocked:hover {
background: rgba($accentColorDark, 0.1);
@@ -89,15 +89,6 @@
text-transform: uppercase;
}
- .keybinding {
- // position: relative;
- right: 50%;
- transform: translateX(50%);
- background: transparent;
- border: 0;
- @include S(bottom, 2pxpx);
- }
-
&[data-tilewidth="2"] {
.iconWrap {
@include S(width, 2 * $buildingIconSize);
@@ -107,80 +98,6 @@
&:last-child {
border: none;
}
-
- .tooltip {
- position: absolute;
- pointer-events: none;
- background: #333;
- @include S(padding, 7px);
- bottom: calc(100% + #{D(10px)});
- left: 50%;
- transform: translateX(-50%);
- box-sizing: content-box;
- @include SuperSmallText;
- @include S(width, 200px);
- @include S(border-radius, 4px);
-
- box-shadow: #{D(1px)} #{D(1px)} 0 0 rgba(0, 10, 25, 0.2);
-
- display: none;
- z-index: 9999;
-
- flex-direction: column;
-
- .title {
- color: #fff;
- @include PlainText;
- text-transform: uppercase;
- margin-bottom: 5px;
- }
-
- .desc {
- color: #aaa;
- @include SuperSmallText;
- margin-bottom: 10px;
- strong {
- color: #fff;
- }
- }
-
- .tutorialImage {
- display: inline-block;
- @include S(width, 200px);
- @include S(height, 200px);
- @include S(border-radius, 4px);
- background-size: contain;
- background-repeat: no-repeat;
- }
-
- &::after {
- top: 100%;
- left: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-top-color: #333;
- @include S(border-width, 5px);
- transform: translateX(-50%);
- }
- }
-
- &:hover .tooltip {
- display: flex;
-
- @include InlineAnimation(0.5s ease-in-out) {
- 90% {
- opacity: 0;
- }
- 0% {
- transform: translate(-50%, 5%) scale(0.9);
- opacity: 0;
- }
- }
- }
}
}
}
diff --git a/src/css/ingame_hud/keybindings_overlay.scss b/src/css/ingame_hud/keybindings_overlay.scss
index c0377e32..aa6248a0 100644
--- a/src/css/ingame_hud/keybindings_overlay.scss
+++ b/src/css/ingame_hud/keybindings_overlay.scss
@@ -38,6 +38,7 @@
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
}
}
+
label {
color: $accentColorDark;
@include SuperSmallText;
@@ -49,6 +50,7 @@
&:not(.placementActive) .binding.placementOnly {
display: none;
}
+
&.placementActive .binding.noPlacementOnly {
display: none;
}
diff --git a/src/css/ingame_hud/vignette_overlay.scss b/src/css/ingame_hud/vignette_overlay.scss
new file mode 100644
index 00000000..c973b16e
--- /dev/null
+++ b/src/css/ingame_hud/vignette_overlay.scss
@@ -0,0 +1,9 @@
+#ingame_VignetteOverlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: uiResource("vignette.lossless.png") center center / cover no-repeat;
+ pointer-events: none;
+}
diff --git a/src/css/main.scss b/src/css/main.scss
index 43e6db60..4aa0aa31 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -34,11 +34,12 @@
@import "ingame_hud/blur_overlay";
@import "ingame_hud/dialogs";
@import "ingame_hud/mass_selector";
+@import "ingame_hud/vignette_overlay";
// Z-Index
-$elements: ingame_Canvas, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu,
- ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector,
- ingame_HUD_UnlockNotification;
+$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar,
+ ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay,
+ ingame_HUD_MassSelector, ingame_HUD_UnlockNotification;
$zindex: 100;
diff --git a/src/css/states/ingame.scss b/src/css/states/ingame.scss
index 04e9383a..e131c1d7 100644
--- a/src/css/states/ingame.scss
+++ b/src/css/states/ingame.scss
@@ -13,4 +13,12 @@
background: $mainBgColor;
flex-direction: column;
}
+
+ #ingame_Canvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
}
diff --git a/src/js/application.js b/src/js/application.js
index 0690ec55..9f1bf55e 100644
--- a/src/js/application.js
+++ b/src/js/application.js
@@ -28,6 +28,8 @@ import { GoogleAnalyticsImpl } from "./platform/browser/google_analytics";
import { Loader } from "./core/loader";
import { GameAnalyticsInterface } from "./platform/game_analytics";
import { ShapezGameAnalytics } from "./platform/browser/game_analytics";
+import { queryParamOptions } from "./core/query_parameters";
+import { NoGameAnalytics } from "./platform/browser/no_game_analytics";
const logger = createLogger("application");
@@ -121,7 +123,12 @@ export class Application {
this.sound = new SoundImplBrowser(this);
this.platformWrapper = new PlatformWrapperImplBrowser(this);
this.analytics = new GoogleAnalyticsImpl(this);
- this.gameAnalytics = new ShapezGameAnalytics(this);
+
+ if (queryParamOptions.betaMode) {
+ this.gameAnalytics = new NoGameAnalytics(this);
+ } else {
+ this.gameAnalytics = new ShapezGameAnalytics(this);
+ }
}
/**
diff --git a/src/js/game/hud/hud.js b/src/js/game/hud/hud.js
index 3e4102d4..7533585a 100644
--- a/src/js/game/hud/hud.js
+++ b/src/js/game/hud/hud.js
@@ -14,6 +14,7 @@ import { HUDGameMenu } from "./parts/game_menu";
import { HUDShop } from "./parts/shop";
import { IS_MOBILE } from "../../core/config";
import { HUDMassSelector } from "./parts/mass_selector";
+import { HUDVignetteOverlay } from "./parts/vignette_overlay";
export class GameHUD {
/**
@@ -45,6 +46,8 @@ export class GameHUD {
shop: new HUDShop(this.root),
+ vignetteOverlay: new HUDVignetteOverlay(this.root),
+
// betaOverlay: new HUDBetaOverlay(this.root),
};
diff --git a/src/js/game/hud/parts/building_placer.js b/src/js/game/hud/parts/building_placer.js
index ff313b5b..4d2f2268 100644
--- a/src/js/game/hud/parts/building_placer.js
+++ b/src/js/game/hud/parts/building_placer.js
@@ -57,8 +57,12 @@ export class HUDBuildingPlacer extends BaseHUDPart {
createElements(parent) {
this.element = makeDiv(parent, "ingame_HUD_building_placer", [], ``);
- this.buildingLabel = makeDiv(this.element, null, ["buildingLabel"], "Extract");
- this.buildingDescription = makeDiv(this.element, null, ["description"], "");
+ this.buildingInfoElements = {};
+ this.buildingInfoElements.label = makeDiv(this.element, null, ["buildingLabel"], "Extract");
+ this.buildingInfoElements.desc = makeDiv(this.element, null, ["description"], "");
+ this.buildingInfoElements.descText = makeDiv(this.buildingInfoElements.desc, null, ["text"], "");
+ this.buildingInfoElements.hotkey = makeDiv(this.buildingInfoElements.desc, null, ["hotkey"], "");
+ this.buildingInfoElements.tutorialImage = makeDiv(this.element, null, ["buildingImage"]);
}
abortPlacement() {
@@ -179,8 +183,14 @@ export class HUDBuildingPlacer extends BaseHUDPart {
onSelectedMetaBuildingChanged(metaBuilding) {
this.root.hud.signals.selectedPlacementBuildingChanged.dispatch(metaBuilding);
if (metaBuilding) {
- this.buildingLabel.innerHTML = metaBuilding.getName();
- this.buildingDescription.innerHTML = metaBuilding.getDescription();
+ this.buildingInfoElements.label.innerHTML = metaBuilding.getName();
+ this.buildingInfoElements.descText.innerHTML = metaBuilding.getDescription();
+
+ const binding = this.root.gameState.keyActionMapper.getBinding(
+ "building_" + metaBuilding.getId()
+ );
+
+ this.buildingInfoElements.hotkey.innerHTML = "Hotkey: " + binding.getKeyCodeString();
this.fakeEntity = new Entity(null);
metaBuilding.setupEntityComponents(this.fakeEntity, null);
@@ -191,6 +201,11 @@ export class HUDBuildingPlacer extends BaseHUDPart {
tileSize: metaBuilding.getDimensions().copy(),
})
);
+
+ this.buildingInfoElements.tutorialImage.setAttribute(
+ "data-icon",
+ "building_tutorials/" + metaBuilding.getId() + ".png"
+ );
} else {
this.currentlyDragging = false;
this.fakeEntity = null;
diff --git a/src/js/game/hud/parts/buildings_toolbar.js b/src/js/game/hud/parts/buildings_toolbar.js
index ef68886d..564d95e6 100644
--- a/src/js/game/hud/parts/buildings_toolbar.js
+++ b/src/js/game/hud/parts/buildings_toolbar.js
@@ -71,23 +71,10 @@ export class HUDBuildingsToolbar extends BaseHUDPart {
const label = makeDiv(itemContainer, null, ["label"]);
label.innerText = metaBuilding.getName();
- const tooltip = makeDiv(
- itemContainer,
- null,
- ["tooltip"],
- `
- ${metaBuilding.getName()}
- ${metaBuilding.getDescription()}
-
- `
- );
-
const sprite = metaBuilding.getPreviewSprite(0);
const spriteWrapper = makeDiv(itemContainer, null, ["iconWrap"]);
spriteWrapper.innerHTML = sprite.getAsHTML(iconSize * dimensions.x, iconSize * dimensions.y);
-
- binding.appendLabelToElement(itemContainer);
binding.add(() => this.selectBuildingForPlacement(metaBuilding));
this.trackClicks(itemContainer, () => this.selectBuildingForPlacement(metaBuilding), {});
diff --git a/src/js/game/hud/parts/vignette_overlay.js b/src/js/game/hud/parts/vignette_overlay.js
new file mode 100644
index 00000000..dc0e5db7
--- /dev/null
+++ b/src/js/game/hud/parts/vignette_overlay.js
@@ -0,0 +1,10 @@
+import { BaseHUDPart } from "../base_hud_part";
+import { makeDiv } from "../../../core/utils";
+
+export class HUDVignetteOverlay extends BaseHUDPart {
+ createElements(parent) {
+ this.element = makeDiv(parent, "ingame_VignetteOverlay");
+ }
+
+ initialize() {}
+}
diff --git a/src/js/platform/browser/no_game_analytics.js b/src/js/platform/browser/no_game_analytics.js
new file mode 100644
index 00000000..805e6fb1
--- /dev/null
+++ b/src/js/platform/browser/no_game_analytics.js
@@ -0,0 +1,7 @@
+import { GameAnalyticsInterface } from "../game_analytics";
+
+export class NoGameAnalytics extends GameAnalyticsInterface {
+ initialize() {
+ return Promise.resolve();
+ }
+}