After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 1.2 KiB |
@ -1,39 +1,40 @@
|
||||
#ingame_HUD_BlueprintPlacer {
|
||||
position: absolute;
|
||||
@include S(top, 50px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #333;
|
||||
z-index: 9999;
|
||||
background: $ingameHudBg;
|
||||
@include S(padding, 5px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
@include S(width, 120px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.label {
|
||||
@include PlainText;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.costContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include Heading;
|
||||
|
||||
> canvas {
|
||||
@include S(margin-left, 5px);
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.canAfford) {
|
||||
background: rgba(98, 27, 41, 0.8);
|
||||
// .costContainer {
|
||||
color: rgb(255, 97, 128);
|
||||
// }
|
||||
}
|
||||
}
|
||||
#ingame_HUD_BlueprintPlacer {
|
||||
position: absolute;
|
||||
@include S(top, 70px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: #333;
|
||||
z-index: 9999;
|
||||
background: $ingameHudBg;
|
||||
@include S(padding, 5px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
@include S(width, 120px);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
.label {
|
||||
@include PlainText;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.costContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include Heading;
|
||||
|
||||
> canvas {
|
||||
@include S(margin-left, 5px);
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.canAfford) {
|
||||
background: rgba(98, 27, 41, 0.8);
|
||||
// .costContainer {
|
||||
color: rgb(255, 97, 128);
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,171 @@
|
||||
#ingame_HUD_StandaloneAdvantages {
|
||||
.content {
|
||||
@include S(width, 440px);
|
||||
@include S(min-height, 300px);
|
||||
}
|
||||
p {
|
||||
@include PlainText;
|
||||
}
|
||||
|
||||
.points {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@include S(grid-column-gap, 10px);
|
||||
@include S(grid-row-gap, 20px);
|
||||
@include S(margin, 10px, 0, 20px);
|
||||
grid-template-rows: #{D(40px)};
|
||||
align-items: center;
|
||||
}
|
||||
.lowerBar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
> button {
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.otherCloseButton {
|
||||
@include SuperSmallText;
|
||||
@include S(margin-right, 30px);
|
||||
color: #aaa;
|
||||
@include S(margin, 0);
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(margin-top, 15px);
|
||||
|
||||
@include InlineAnimation(5s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0.05;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.05;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.steamLinkButton {
|
||||
@include IncreasedClickArea(5px);
|
||||
@include S(margin, 0);
|
||||
@include S(width, 180px);
|
||||
@include S(height, 40px);
|
||||
& {
|
||||
/* @load-async */
|
||||
background: #171a23 uiResource("get_on_steam.png") center center / contain no-repeat;
|
||||
}
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.point {
|
||||
display: grid;
|
||||
grid-template-columns: #{D(55px)} auto;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
|
||||
> strong {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> p {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
@include SuperSmallText;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
background: transparent #{D(10px)} center / #{D(30px)} no-repeat;
|
||||
|
||||
&.levels {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_new_levels.png");
|
||||
}
|
||||
> strong {
|
||||
color: #f13555;
|
||||
}
|
||||
}
|
||||
|
||||
&.upgrades {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_upgrades.png");
|
||||
}
|
||||
> strong {
|
||||
color: #8a00ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.buildings {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_buildings.png");
|
||||
}
|
||||
> strong {
|
||||
color: #3fce8b;
|
||||
}
|
||||
}
|
||||
|
||||
&.wires {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_wires.png");
|
||||
}
|
||||
> strong {
|
||||
color: #ef2fdb;
|
||||
}
|
||||
}
|
||||
|
||||
&.markers {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_markers.png");
|
||||
}
|
||||
> strong {
|
||||
color: #4294ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.savegames {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_savegames.png");
|
||||
}
|
||||
> strong {
|
||||
color: #ff9500;
|
||||
}
|
||||
}
|
||||
|
||||
&.darkmode {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_dark_mode.png");
|
||||
}
|
||||
> strong {
|
||||
color: #292c32;
|
||||
}
|
||||
}
|
||||
|
||||
&.support {
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/advantage_support.png");
|
||||
}
|
||||
> strong {
|
||||
color: #e72d2d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -1,22 +1,85 @@
|
||||
#ingame_HUD_Watermark {
|
||||
position: absolute;
|
||||
& {
|
||||
/* @load-async */
|
||||
background: uiResource("get_on_steam.png") center center / contain no-repeat;
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(top, 70px);
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
|
||||
background: rgba(207, 65, 65, 0.8);
|
||||
color: #fff;
|
||||
transform: translateX(-50%);
|
||||
@include PlainText;
|
||||
@include S(padding, 10px);
|
||||
|
||||
&:hover {
|
||||
transform: translateX(-50%) scale(1.02) !important;
|
||||
}
|
||||
|
||||
> strong {
|
||||
@include PlainText;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
> p {
|
||||
@include SuperSmallText;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@include S(width, 110px);
|
||||
@include S(height, 40px);
|
||||
@include S(top, 10px);
|
||||
opacity: 0;
|
||||
|
||||
&.visible {
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:not(.visible) {
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#ingame_HUD_WatermarkClicker {
|
||||
@include S(top, 55px);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) !important;
|
||||
@include SuperSmallText;
|
||||
color: $colorBlueBright;
|
||||
text-transform: uppercase;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include S(left, 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
transition: all 0.12s ease-in;
|
||||
transition-property: opacity, transform;
|
||||
transform: skewX(-0.5deg);
|
||||
&:hover {
|
||||
transform: skewX(-1deg) scale(1.02);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@include S(margin-left, 4px);
|
||||
content: "";
|
||||
@include S(width, 10px);
|
||||
@include S(height, 10px);
|
||||
display: inline-flex;
|
||||
background: center center / contain no-repeat;
|
||||
& {
|
||||
/* @load-async */
|
||||
background-image: uiResource("res/ui/icons/demo_steam_link_indicator.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,84 @@
|
||||
import { THIRDPARTY_URLS } from "../../../core/config";
|
||||
import { InputReceiver } from "../../../core/input_receiver";
|
||||
import { makeDiv } from "../../../core/utils";
|
||||
import { T } from "../../../translations";
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
|
||||
const showIntervalSeconds = 30 * 60;
|
||||
|
||||
export class HUDStandaloneAdvantages extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.background = makeDiv(parent, "ingame_HUD_StandaloneAdvantages", ["ingameDialog"]);
|
||||
|
||||
// DIALOG Inner / Wrapper
|
||||
this.dialogInner = makeDiv(this.background, null, ["dialogInner"]);
|
||||
this.title = makeDiv(this.dialogInner, null, ["title"], T.ingame.standaloneAdvantages.title);
|
||||
this.contentDiv = makeDiv(
|
||||
this.dialogInner,
|
||||
null,
|
||||
["content"],
|
||||
`
|
||||
<div class="points">
|
||||
${Object.entries(T.ingame.standaloneAdvantages.points)
|
||||
.map(
|
||||
([key, trans]) => `
|
||||
<div class="point ${key}">
|
||||
<strong>${trans.title}</strong>
|
||||
<p>${trans.desc}</p>
|
||||
</div>`
|
||||
)
|
||||
.join("")}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="lowerBar">
|
||||
<button class="steamLinkButton">
|
||||
<button class="otherCloseButton">${T.ingame.standaloneAdvantages.no_thanks}</button>
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
this.trackClicks(this.contentDiv.querySelector("button.steamLinkButton"), () => {
|
||||
this.root.app.analytics.trackUiClick("standalone_advantage_visit_steam");
|
||||
this.root.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.standaloneStorePage + "?ref=savs");
|
||||
this.close();
|
||||
});
|
||||
this.trackClicks(this.contentDiv.querySelector("button.otherCloseButton"), () => {
|
||||
this.root.app.analytics.trackUiClick("standalone_advantage_no_thanks");
|
||||
this.close();
|
||||
});
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.domAttach = new DynamicDomAttach(this.root, this.background, {
|
||||
attachClass: "visible",
|
||||
});
|
||||
|
||||
this.inputReciever = new InputReceiver("standalone-advantages");
|
||||
this.close();
|
||||
|
||||
this.lastShown = this.root.gameIsFresh ? this.root.time.now() : 0;
|
||||
}
|
||||
|
||||
show() {
|
||||
this.lastShown = this.root.time.now();
|
||||
this.visible = true;
|
||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||
}
|
||||
|
||||
close() {
|
||||
this.visible = false;
|
||||
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
if (!this.visible && this.root.time.now() - this.lastShown > showIntervalSeconds) {
|
||||
this.show();
|
||||
}
|
||||
|
||||
this.domAttach.update(this.visible);
|
||||
}
|
||||
}
|
@ -1,109 +1,106 @@
|
||||
import { InputReceiver } from "../../../core/input_receiver";
|
||||
import { TrackedState } from "../../../core/tracked_state";
|
||||
import { makeDiv } from "../../../core/utils";
|
||||
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
import { T } from "../../../translations";
|
||||
|
||||
const tutorialVideos = [2, 3, 4, 5, 6, 7, 9, 10, 11];
|
||||
|
||||
export class HUDPartTutorialHints extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.element = makeDiv(
|
||||
parent,
|
||||
"ingame_HUD_TutorialHints",
|
||||
[],
|
||||
`
|
||||
<div class="header">
|
||||
<span>${T.ingame.tutorialHints.title}</span>
|
||||
<button class="styledButton toggleHint">
|
||||
<span class="show">${T.ingame.tutorialHints.showHint}</span>
|
||||
<span class="hide">${T.ingame.tutorialHints.hideHint}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<video autoplay muted loop class="fullscreenBackgroundVideo">
|
||||
<source type="video/webm">
|
||||
</video>
|
||||
`
|
||||
);
|
||||
|
||||
this.videoElement = this.element.querySelector("video");
|
||||
}
|
||||
|
||||
shouldPauseGame() {
|
||||
return this.enlarged;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.trackClicks(this.element.querySelector(".toggleHint"), this.toggleHintEnlarged);
|
||||
|
||||
this.videoAttach = new DynamicDomAttach(this.root, this.videoElement, {
|
||||
timeToKeepSeconds: 0.3,
|
||||
});
|
||||
|
||||
this.videoAttach.update(false);
|
||||
this.enlarged = false;
|
||||
|
||||
this.inputReciever = new InputReceiver("tutorial_hints");
|
||||
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
|
||||
this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
|
||||
|
||||
this.domAttach = new DynamicDomAttach(this.root, this.element);
|
||||
|
||||
this.currentShownLevel = new TrackedState(this.updateVideoUrl, this);
|
||||
}
|
||||
|
||||
updateVideoUrl(level) {
|
||||
if (tutorialVideos.indexOf(level) < 0) {
|
||||
this.videoElement.querySelector("source").setAttribute("src", "");
|
||||
this.videoElement.pause();
|
||||
} else {
|
||||
this.videoElement
|
||||
.querySelector("source")
|
||||
.setAttribute("src", "https://static.shapez.io/tutorial_videos/level_" + level + ".webm");
|
||||
this.videoElement.currentTime = 0;
|
||||
this.videoElement.load();
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.enlarged = false;
|
||||
document.body.classList.remove("ingameDialogOpen");
|
||||
this.element.classList.remove("enlarged", "noBlur");
|
||||
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
|
||||
this.update();
|
||||
}
|
||||
|
||||
show() {
|
||||
this.root.app.analytics.trackUiClick("tutorial_hint_show");
|
||||
this.root.app.analytics.trackUiClick("tutorial_hint_show_lvl_" + this.root.hubGoals.level);
|
||||
|
||||
document.body.classList.add("ingameDialogOpen");
|
||||
this.element.classList.add("enlarged", "noBlur");
|
||||
this.enlarged = true;
|
||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||
this.update();
|
||||
|
||||
this.videoElement.currentTime = 0;
|
||||
this.videoElement.play();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.videoAttach.update(this.enlarged);
|
||||
|
||||
this.currentShownLevel.set(this.root.hubGoals.level);
|
||||
|
||||
const tutorialVisible = tutorialVideos.indexOf(this.root.hubGoals.level) >= 0;
|
||||
this.domAttach.update(tutorialVisible);
|
||||
}
|
||||
|
||||
toggleHintEnlarged() {
|
||||
if (this.enlarged) {
|
||||
this.close();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
import { InputReceiver } from "../../../core/input_receiver";
|
||||
import { TrackedState } from "../../../core/tracked_state";
|
||||
import { makeDiv } from "../../../core/utils";
|
||||
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
import { T } from "../../../translations";
|
||||
|
||||
const tutorialVideos = [2, 3, 4, 5, 6, 7, 9, 10, 11];
|
||||
|
||||
export class HUDPartTutorialHints extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.element = makeDiv(
|
||||
parent,
|
||||
"ingame_HUD_TutorialHints",
|
||||
[],
|
||||
`
|
||||
<div class="header">
|
||||
<span>${T.ingame.tutorialHints.title}</span>
|
||||
<button class="styledButton toggleHint">
|
||||
<span class="show">${T.ingame.tutorialHints.showHint}</span>
|
||||
<span class="hide">${T.ingame.tutorialHints.hideHint}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<video autoplay muted loop class="fullscreenBackgroundVideo">
|
||||
<source type="video/webm">
|
||||
</video>
|
||||
`
|
||||
);
|
||||
|
||||
this.videoElement = this.element.querySelector("video");
|
||||
}
|
||||
|
||||
shouldPauseGame() {
|
||||
return this.enlarged;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.trackClicks(this.element.querySelector(".toggleHint"), this.toggleHintEnlarged);
|
||||
|
||||
this.videoAttach = new DynamicDomAttach(this.root, this.videoElement, {
|
||||
timeToKeepSeconds: 0.3,
|
||||
});
|
||||
|
||||
this.videoAttach.update(false);
|
||||
this.enlarged = false;
|
||||
|
||||
this.inputReciever = new InputReceiver("tutorial_hints");
|
||||
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
|
||||
this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
|
||||
|
||||
this.domAttach = new DynamicDomAttach(this.root, this.element);
|
||||
|
||||
this.currentShownLevel = new TrackedState(this.updateVideoUrl, this);
|
||||
}
|
||||
|
||||
updateVideoUrl(level) {
|
||||
if (tutorialVideos.indexOf(level) < 0) {
|
||||
this.videoElement.querySelector("source").setAttribute("src", "");
|
||||
this.videoElement.pause();
|
||||
} else {
|
||||
this.videoElement
|
||||
.querySelector("source")
|
||||
.setAttribute("src", "https://static.shapez.io/tutorial_videos/level_" + level + ".webm");
|
||||
this.videoElement.currentTime = 0;
|
||||
this.videoElement.load();
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.enlarged = false;
|
||||
this.element.classList.remove("enlarged", "noBlur");
|
||||
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
|
||||
this.update();
|
||||
}
|
||||
|
||||
show() {
|
||||
this.root.app.analytics.trackUiClick("tutorial_hint_show");
|
||||
this.root.app.analytics.trackUiClick("tutorial_hint_show_lvl_" + this.root.hubGoals.level);
|
||||
this.element.classList.add("enlarged", "noBlur");
|
||||
this.enlarged = true;
|
||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||
this.update();
|
||||
|
||||
this.videoElement.currentTime = 0;
|
||||
this.videoElement.play();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.videoAttach.update(this.enlarged);
|
||||
|
||||
this.currentShownLevel.set(this.root.hubGoals.level);
|
||||
|
||||
const tutorialVisible = tutorialVideos.indexOf(this.root.hubGoals.level) >= 0;
|
||||
this.domAttach.update(tutorialVisible);
|
||||
}
|
||||
|
||||
toggleHintEnlarged() {
|
||||
if (this.enlarged) {
|
||||
this.close();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,44 +1,67 @@
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { DrawParameters } from "../../../core/draw_parameters";
|
||||
import { makeDiv } from "../../../core/utils";
|
||||
import { THIRDPARTY_URLS } from "../../../core/config";
|
||||
import { T } from "../../../translations";
|
||||
|
||||
export class HUDWatermark extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.element = makeDiv(parent, "ingame_HUD_Watermark");
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.trackClicks(this.element, this.onWatermarkClick);
|
||||
}
|
||||
|
||||
onWatermarkClick() {
|
||||
this.root.app.analytics.trackUiClick("watermark_click_2");
|
||||
this.root.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.standaloneStorePage);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {DrawParameters} parameters
|
||||
*/
|
||||
drawOverlays(parameters) {
|
||||
const w = this.root.gameWidth;
|
||||
const x = 280 * this.root.app.getEffectiveUiScale();
|
||||
|
||||
parameters.context.fillStyle = "#f77";
|
||||
parameters.context.font = "bold " + this.root.app.getEffectiveUiScale() * 17 + "px GameFont";
|
||||
// parameters.context.textAlign = "center";
|
||||
parameters.context.fillText(
|
||||
T.demoBanners.title.toUpperCase(),
|
||||
x,
|
||||
this.root.app.getEffectiveUiScale() * 27
|
||||
);
|
||||
|
||||
parameters.context.font = "bold " + this.root.app.getEffectiveUiScale() * 12 + "px GameFont";
|
||||
// parameters.context.textAlign = "center";
|
||||
parameters.context.fillText(T.demoBanners.intro, x, this.root.app.getEffectiveUiScale() * 45);
|
||||
|
||||
// parameters.context.textAlign = "left";
|
||||
}
|
||||
}
|
||||
import { THIRDPARTY_URLS } from "../../../core/config";
|
||||
import { makeDiv } from "../../../core/utils";
|
||||
import { T } from "../../../translations";
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
|
||||
export class HUDWatermark extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.element = makeDiv(
|
||||
parent,
|
||||
"ingame_HUD_Watermark",
|
||||
[],
|
||||
`
|
||||
<strong>${T.ingame.watermark.title}</strong>
|
||||
<p>${T.ingame.watermark.desc}</p>
|
||||
`
|
||||
);
|
||||
|
||||
this.linkElement = makeDiv(
|
||||
parent,
|
||||
"ingame_HUD_WatermarkClicker",
|
||||
[],
|
||||
T.ingame.watermark.get_on_steam
|
||||
);
|
||||
this.trackClicks(this.linkElement, () => {
|
||||
this.root.app.analytics.trackUiClick("watermark_click_2_direct");
|
||||
this.root.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.standaloneStorePage + "?ref=wtmd");
|
||||
});
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.trackClicks(this.element, this.onWatermarkClick);
|
||||
|
||||
this.domAttach = new DynamicDomAttach(this.root, this.element, {
|
||||
attachClass: "visible",
|
||||
timeToKeepSeconds: 0.5,
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
this.domAttach.update(this.root.time.realtimeNow() % (G_IS_DEV ? 20 : 180) < 5);
|
||||
}
|
||||
|
||||
onWatermarkClick() {
|
||||
this.root.app.analytics.trackUiClick("watermark_click_2_new");
|
||||
this.root.hud.parts.standaloneAdvantages.show();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {import("../../../core/draw_utils").DrawParameters} parameters
|
||||
*/
|
||||
drawOverlays(parameters) {
|
||||
const w = this.root.gameWidth;
|
||||
|
||||
parameters.context.fillStyle = "rgba(230, 230, 230, 0.9)";
|
||||
parameters.context.font = "bold " + this.root.app.getEffectiveUiScale() * 40 + "px GameFont";
|
||||
parameters.context.textAlign = "center";
|
||||
parameters.context.fillText(
|
||||
T.demoBanners.title.toUpperCase(),
|
||||
w / 2,
|
||||
this.root.app.getEffectiveUiScale() * 50
|
||||
);
|
||||
|
||||
parameters.context.textAlign = "left";
|
||||
}
|
||||
}
|
||||
|