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

Update demo hint and lock demo to lvl 14

Browse Source
This commit is contained in:
tobspr
2020-09-29 16:46:29 +02:00
parent 9b7225bf44
commit 5a3807883e
29 changed files with 745 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/js/game/hud/hud.js
View File

@@ -46,6 +46,7 @@ import { HUDLayerPreview } from "./parts/layer_preview";
import { HUDMinerHighlight } from "./parts/miner_highlight";
import { HUDBetaOverlay } from "./parts/beta_overlay";
import { HUDPerformanceWarning } from "./parts/performance_warning";
import { HUDStandaloneAdvantages } from "./parts/standalone_advantages";
export class GameHUD {
/**
@@ -116,6 +117,7 @@ export class GameHUD {
if (IS_DEMO) {
this.parts.watermark = new HUDWatermark(this.root);
this.parts.standaloneAdvantages = new HUDStandaloneAdvantages(this.root);
}
if (G_IS_DEV && globalConfig.debug.renderChanges) {
@@ -139,9 +141,9 @@ export class GameHUD {
this.parts.sandboxController = new HUDSandboxController(this.root);
}
// if (!G_IS_RELEASE) {
this.parts.betaOverlay = new HUDBetaOverlay(this.root);
// }
if (!G_IS_RELEASE && !G_IS_DEV) {
this.parts.betaOverlay = new HUDBetaOverlay(this.root);
}
const frag = document.createDocumentFragment();
for (const key in this.parts) {

2
src/js/game/hud/parts/modal_dialogs.js
View File

@@ -122,7 +122,7 @@ export class HUDModalDialogs extends BaseHUDPart {
dialog.buttonSignals.getStandalone.add(() => {
this.app.analytics.trackUiClick("demo_dialog_click");
window.open(THIRDPARTY_URLS.standaloneStorePage);
window.open(THIRDPARTY_URLS.standaloneStorePage + "?ref=ddc");
});
return dialog.buttonSignals;

6
src/js/game/hud/parts/settings_menu.js
View File

@@ -88,13 +88,8 @@ export class HUDSettingsMenu extends BaseHUDPart {
this.close();
}
cleanup() {
document.body.classList.remove("ingameDialogOpen");
}
show() {
this.visible = true;
document.body.classList.add("ingameDialogOpen");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
@@ -120,7 +115,6 @@ export class HUDSettingsMenu extends BaseHUDPart {
close() {
this.visible = false;
document.body.classList.remove("ingameDialogOpen");
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
this.update();
}

9
src/js/game/hud/parts/shape_viewer.js
View File

@@ -67,7 +67,6 @@ export class HUDShapeViewer extends BaseHUDPart {
*/
close() {
this.visible = false;
document.body.classList.remove("ingameDialogOpen");
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
this.update();
}
@@ -78,7 +77,6 @@ export class HUDShapeViewer extends BaseHUDPart {
*/
renderForShape(definition) {
this.visible = true;
document.body.classList.add("ingameDialogOpen");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
removeAllChildren(this.renderArea);
@@ -124,13 +122,6 @@ export class HUDShapeViewer extends BaseHUDPart {
}
}
/**
* Cleans up everything
*/
cleanup() {
document.body.classList.remove("ingameDialogOpen");
}
update() {
this.domAttach.update(this.visible);
}

5
src/js/game/hud/parts/shop.js
View File

@@ -205,8 +205,6 @@ export class HUDShop extends BaseHUDPart {
}
cleanup() {
document.body.classList.remove("ingameDialogOpen");
// Cleanup detectors
for (const upgradeId in this.upgradeToElements) {
const handle = this.upgradeToElements[upgradeId];
@@ -222,15 +220,12 @@ export class HUDShop extends BaseHUDPart {
show() {
this.visible = true;
document.body.classList.add("ingameDialogOpen");
// this.background.classList.add("visible");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
this.rerenderFull();
}
close() {
this.visible = false;
document.body.classList.remove("ingameDialogOpen");
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
this.update();
}

84
src/js/game/hud/parts/standalone_advantages.js Normal file
View File

@@ -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);
}
}

6
src/js/game/hud/parts/statistics.js
View File

@@ -151,17 +151,12 @@ export class HUDStatistics extends BaseHUDPart {
}
}
cleanup() {
document.body.classList.remove("ingameDialogOpen");
}
isBlockingOverlay() {
return this.visible;
}
show() {
this.visible = true;
document.body.classList.add("ingameDialogOpen");
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
this.rerenderFull();
this.update();
@@ -169,7 +164,6 @@ export class HUDStatistics extends BaseHUDPart {
close() {
this.visible = false;
document.body.classList.remove("ingameDialogOpen");
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
this.update();
}

215
src/js/game/hud/parts/tutorial_hints.js
View File

@@ -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();
}
}
}

111
src/js/game/hud/parts/watermark.js
View File

@@ -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";
}
}