Compare commits
9 Commits
master
...
1.1.19-spi
Author | SHA1 | Date |
---|---|---|
Tobias Springer | a2992373c1 | |
Tobias Springer | 1bf97f1ef9 | |
tobspr | 2f0b77b3cc | |
tobspr | cde4c6e6c4 | |
tobspr | ef54f36834 | |
tobspr | a3e85fd401 | |
tobspr | 59f5d75daa | |
tobspr | 2a5afbb11c | |
tobspr | 60aa5b06b4 |
|
@ -199,7 +199,8 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.timedButton {
|
&.timedButton,
|
||||||
|
&.timedButtonSlow {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -214,13 +215,27 @@
|
||||||
content: " ";
|
content: " ";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: rgba(#fff, 0.6);
|
background: rgba(#fff, 0.6);
|
||||||
@include InlineAnimation(5s linear) {
|
}
|
||||||
0% {
|
}
|
||||||
width: 100%;
|
|
||||||
}
|
&.timedButton::after {
|
||||||
100% {
|
@include InlineAnimation(5s linear) {
|
||||||
width: 0%;
|
0% {
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.timedButtonSlow::after {
|
||||||
|
@include InlineAnimation(10s linear) {
|
||||||
|
0% {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
width: 0%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -82,7 +82,8 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
&.demo {
|
&.demo,
|
||||||
|
&.noDemo {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -183,6 +184,82 @@
|
||||||
@include S(margin-bottom, 10px);
|
@include S(margin-bottom, 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wiresAnnouncement {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: rgb(32, 187, 166);
|
||||||
|
@include S(padding, 15px);
|
||||||
|
|
||||||
|
@include S(border-radius, 10px);
|
||||||
|
pointer-events: all;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcementHeader {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
grid-template-rows: auto auto;
|
||||||
|
align-items: start;
|
||||||
|
@include S(margin-bottom, 5px);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@include PlainText;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
@include S(margin-bottom, 5px);
|
||||||
|
|
||||||
|
grid-column: 1 / 2;
|
||||||
|
grid-row: 1 / 3;
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 300;
|
||||||
|
@include S(font-size, 35px);
|
||||||
|
@include S(line-height, 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timer {
|
||||||
|
@include Heading;
|
||||||
|
justify-self: end;
|
||||||
|
color: #fff;
|
||||||
|
align-self: end;
|
||||||
|
margin: 0;
|
||||||
|
grid-row: 1 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timerDay {
|
||||||
|
grid-row: 2 / 3;
|
||||||
|
justify-self: end;
|
||||||
|
align-self: start;
|
||||||
|
@include SuperSmallText;
|
||||||
|
color: rgba(#fff, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: rgba(#fff, 0.8);
|
||||||
|
@include Text;
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
@include S(margin-bottom, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: #fff;
|
||||||
|
color: #333538;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.contest {
|
.contest {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
background: rgb(32, 187, 166);
|
background: rgb(32, 187, 166);
|
||||||
|
|
|
@ -14,6 +14,8 @@ export const IS_DEMO = queryParamOptions.fullVersion
|
||||||
|
|
||||||
export const SUPPORT_TOUCH = false;
|
export const SUPPORT_TOUCH = false;
|
||||||
|
|
||||||
|
export const IS_MAC = navigator.userAgent.toLowerCase().indexOf("mac os x") >= 0;
|
||||||
|
|
||||||
const smoothCanvas = true;
|
const smoothCanvas = true;
|
||||||
|
|
||||||
export const THIRDPARTY_URLS = {
|
export const THIRDPARTY_URLS = {
|
||||||
|
|
|
@ -151,6 +151,7 @@ export class Dialog {
|
||||||
|
|
||||||
const params = (rawParams || "").split("/");
|
const params = (rawParams || "").split("/");
|
||||||
const useTimeout = params.indexOf("timeout") >= 0;
|
const useTimeout = params.indexOf("timeout") >= 0;
|
||||||
|
const useTimeoutSlow = params.indexOf("timeoutSlow") >= 0;
|
||||||
|
|
||||||
const isEnter = params.indexOf("enter") >= 0;
|
const isEnter = params.indexOf("enter") >= 0;
|
||||||
const isEscape = params.indexOf("escape") >= 0;
|
const isEscape = params.indexOf("escape") >= 0;
|
||||||
|
@ -167,6 +168,16 @@ export class Dialog {
|
||||||
}, 5000);
|
}, 5000);
|
||||||
this.timeouts.push(timeout);
|
this.timeouts.push(timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (useTimeoutSlow) {
|
||||||
|
button.classList.add("timedButtonSlow");
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
button.classList.remove("timedButtonSlow");
|
||||||
|
arrayDeleteValue(this.timeouts, timeout);
|
||||||
|
}, 10000);
|
||||||
|
this.timeouts.push(timeout);
|
||||||
|
}
|
||||||
|
|
||||||
if (isEnter || isEscape) {
|
if (isEnter || isEscape) {
|
||||||
// if (this.app.settings.getShowKeyboardShortcuts()) {
|
// if (this.app.settings.getShowKeyboardShortcuts()) {
|
||||||
// Show keybinding
|
// Show keybinding
|
||||||
|
|
|
@ -16,7 +16,7 @@ import { HUDKeybindingOverlay } from "./parts/keybinding_overlay";
|
||||||
import { HUDUnlockNotification } from "./parts/unlock_notification";
|
import { HUDUnlockNotification } from "./parts/unlock_notification";
|
||||||
import { HUDGameMenu } from "./parts/game_menu";
|
import { HUDGameMenu } from "./parts/game_menu";
|
||||||
import { HUDShop } from "./parts/shop";
|
import { HUDShop } from "./parts/shop";
|
||||||
import { IS_MOBILE, globalConfig, IS_DEMO } from "../../core/config";
|
import { IS_MOBILE, globalConfig, IS_DEMO, IS_MAC } from "../../core/config";
|
||||||
import { HUDMassSelector } from "./parts/mass_selector";
|
import { HUDMassSelector } from "./parts/mass_selector";
|
||||||
import { HUDVignetteOverlay } from "./parts/vignette_overlay";
|
import { HUDVignetteOverlay } from "./parts/vignette_overlay";
|
||||||
import { HUDStatistics } from "./parts/statistics";
|
import { HUDStatistics } from "./parts/statistics";
|
||||||
|
@ -38,6 +38,7 @@ import { HUDColorBlindHelper } from "./parts/color_blind_helper";
|
||||||
import { HUDShapeViewer } from "./parts/shape_viewer";
|
import { HUDShapeViewer } from "./parts/shape_viewer";
|
||||||
import { HUDWiresOverlay } from "./parts/wires_overlay";
|
import { HUDWiresOverlay } from "./parts/wires_overlay";
|
||||||
import { HUDChangesDebugger } from "./parts/debug_changes";
|
import { HUDChangesDebugger } from "./parts/debug_changes";
|
||||||
|
import { HUDStandaloneReminder } from "./parts/standalone_reminder";
|
||||||
|
|
||||||
export class GameHUD {
|
export class GameHUD {
|
||||||
/**
|
/**
|
||||||
|
@ -105,6 +106,10 @@ export class GameHUD {
|
||||||
this.parts.watermark = new HUDWatermark(this.root);
|
this.parts.watermark = new HUDWatermark(this.root);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (IS_DEMO && !IS_MAC) {
|
||||||
|
this.parts.standaloneReminder = new HUDStandaloneReminder(this.root);
|
||||||
|
}
|
||||||
|
|
||||||
if (G_IS_DEV && globalConfig.debug.renderChanges) {
|
if (G_IS_DEV && globalConfig.debug.renderChanges) {
|
||||||
this.parts.changesDebugger = new HUDChangesDebugger(this.root);
|
this.parts.changesDebugger = new HUDChangesDebugger(this.root);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
import { BaseHUDPart } from "../base_hud_part";
|
||||||
|
import { T } from "../../../translations";
|
||||||
|
import { THIRDPARTY_URLS } from "../../../core/config";
|
||||||
|
|
||||||
|
// How often to show the dialog
|
||||||
|
const DIALOG_INTERVAL = 30;
|
||||||
|
|
||||||
|
// When to start showing the dialogs
|
||||||
|
const DIALOG_START_INTERVAL = 15;
|
||||||
|
|
||||||
|
export class HUDStandaloneReminder extends BaseHUDPart {
|
||||||
|
initialize() {
|
||||||
|
this.lastMinutesHintShown = DIALOG_START_INTERVAL - DIALOG_INTERVAL;
|
||||||
|
}
|
||||||
|
|
||||||
|
getMinutesPlayed() {
|
||||||
|
return Math.floor(this.root.time.now() / 60.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
showHint() {
|
||||||
|
this.root.app.analytics.trackUiClick("demonotice_show");
|
||||||
|
const { getStandalone } = this.root.hud.parts.dialogs.showWarning(
|
||||||
|
T.dialogs.buyFullVersion.title,
|
||||||
|
T.dialogs.buyFullVersion.desc.replace("<minutes>", "" + this.getMinutesPlayed()),
|
||||||
|
["later:bad:timeoutSlow", "getStandalone:good"]
|
||||||
|
);
|
||||||
|
getStandalone.add(() => {
|
||||||
|
this.root.app.analytics.trackUiClick("demonotice_click");
|
||||||
|
this.root.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.standaloneStorePage);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
const minutesPlayed = this.getMinutesPlayed();
|
||||||
|
if (this.lastMinutesHintShown + DIALOG_INTERVAL < minutesPlayed) {
|
||||||
|
this.lastMinutesHintShown = minutesPlayed;
|
||||||
|
this.showHint();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -65,6 +65,18 @@ export class MainMenuState extends GameState {
|
||||||
|
|
||||||
<div class="sideContainer">
|
<div class="sideContainer">
|
||||||
${IS_DEMO ? `<div class="standaloneBanner">${bannerHtml}</div>` : ""}
|
${IS_DEMO ? `<div class="standaloneBanner">${bannerHtml}</div>` : ""}
|
||||||
|
|
||||||
|
<div class="wiresAnnouncement">
|
||||||
|
|
||||||
|
<div class="announcementHeader">
|
||||||
|
<h3>Wires</h3>
|
||||||
|
<span class="timer">-</span>
|
||||||
|
<span class="timerDay">9th October, 10 AM CEST</span>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
The BIGGEST UPDATE in the game's history! Click <strong>here</strong> for more information!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mainContainer">
|
<div class="mainContainer">
|
||||||
|
@ -260,6 +272,28 @@ export class MainMenuState extends GameState {
|
||||||
() => this.app.platformWrapper.openExternalLink("https://tobspr.com"),
|
() => this.app.platformWrapper.openExternalLink("https://tobspr.com"),
|
||||||
{ preventClick: true }
|
{ preventClick: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const wiresAnnouncement = qs(".wiresAnnouncement");
|
||||||
|
if (wiresAnnouncement) {
|
||||||
|
this.trackClicks(wiresAnnouncement, () => {
|
||||||
|
this.app.analytics.trackUiClick("main_menu_wires");
|
||||||
|
this.app.platformWrapper.openExternalLink("https://shapez.io/wires");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onRender() {
|
||||||
|
const now = new Date();
|
||||||
|
const releaseDate = Date.parse("09 Oct 2020 10:00:00 UTC+2");
|
||||||
|
const seconds = Math.max(0, Math.floor((+releaseDate - +now) / 1000.0));
|
||||||
|
|
||||||
|
const secondsLeft = seconds % 60;
|
||||||
|
const minutesLeft = Math.floor(seconds / 60) % 60;
|
||||||
|
const hoursLeft = Math.floor(seconds / 3600) % 24;
|
||||||
|
const daysLeft = Math.floor(seconds / (24 * 3600));
|
||||||
|
|
||||||
|
const text = `${daysLeft}d ${hoursLeft}h ${minutesLeft}m ${secondsLeft}s`;
|
||||||
|
this.htmlElement.querySelector(".wiresAnnouncement .timer").innerText = text;
|
||||||
}
|
}
|
||||||
|
|
||||||
renderMainMenu() {
|
renderMainMenu() {
|
||||||
|
|
|
@ -268,6 +268,11 @@ dialogs:
|
||||||
title: Export screenshot
|
title: Export screenshot
|
||||||
desc: You requested to export your base as a screenshot. Please note that this can be quite slow for a big base and even crash your game!
|
desc: You requested to export your base as a screenshot. Please note that this can be quite slow for a big base and even crash your game!
|
||||||
|
|
||||||
|
buyFullVersion:
|
||||||
|
title: Enjoying the game?
|
||||||
|
desc: >-
|
||||||
|
You have been playing the demo for <minutes> minutes! Please get the standalone on steam for all features and to support me!<br><br>PS: It has a dark mode, and you can import your savegame to continue where you left! :P
|
||||||
|
|
||||||
ingame:
|
ingame:
|
||||||
# This is shown in the top left corner and displays useful keybindings in
|
# This is shown in the top left corner and displays useful keybindings in
|
||||||
# every situation
|
# every situation
|
||||||
|
|
Loading…
Reference in New Issue