Fix typo

src/css/ingame_hud/dialogs.scss

@@ -199,7 +199,8 @@
                     color: #fff;
                 }
 
-                &.timedButton {
+                &.timedButton,
+                &.timedButtonSlow {
                     pointer-events: none;
                     cursor: default;
                     position: relative;
@@ -214,13 +215,27 @@
                         content: " ";
                         display: inline-block;
                         background: rgba(#fff, 0.6);
-                        @include InlineAnimation(5s linear) {
-                            0% {
-                                width: 100%;
-                            }
-                            100% {
-                                width: 0%;
-                            }
+                    }
+                }
+
+                &.timedButton::after {
+                    @include InlineAnimation(5s linear) {
+                        0% {
+                            width: 100%;
+                        }
+                        100% {
+                            width: 0%;
+                        }
+                    }
+                }
+
+                &.timedButtonSlow::after {
+                    @include InlineAnimation(10s linear) {
+                        0% {
+                            width: 100%;
+                        }
+                        100% {
+                            width: 0%;
                         }
                     }
                 }

src/css/states/main_menu.scss

@@ -82,7 +82,8 @@
         display: grid;
         grid-template-columns: 1fr;
 
-        &.demo {
+        &.demo,
+        &.noDemo {
             grid-template-columns: 1fr 1fr;
         }
 
@@ -183,6 +184,82 @@
             @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 {
             flex-grow: 1;
             background: rgb(32, 187, 166);

src/js/core/config.js

@@ -14,6 +14,8 @@ export const IS_DEMO = queryParamOptions.fullVersion
 
 export const SUPPORT_TOUCH = false;
 
+export const IS_MAC = navigator.userAgent.toLowerCase().indexOf("mac os x") >= 0;
+
 const smoothCanvas = true;
 
 export const THIRDPARTY_URLS = {

src/js/core/modal_dialog_elements.js

@@ -151,6 +151,7 @@ export class Dialog {
 
                 const params = (rawParams || "").split("/");
                 const useTimeout = params.indexOf("timeout") >= 0;
+                const useTimeoutSlow = params.indexOf("timeoutSlow") >= 0;
 
                 const isEnter = params.indexOf("enter") >= 0;
                 const isEscape = params.indexOf("escape") >= 0;
@@ -167,6 +168,16 @@ export class Dialog {
                     }, 5000);
                     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 (this.app.settings.getShowKeyboardShortcuts()) {
                     // Show keybinding

src/js/game/hud/hud.js

@@ -16,7 +16,7 @@ import { HUDKeybindingOverlay } from "./parts/keybinding_overlay";
 import { HUDUnlockNotification } from "./parts/unlock_notification";
 import { HUDGameMenu } from "./parts/game_menu";
 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 { HUDVignetteOverlay } from "./parts/vignette_overlay";
 import { HUDStatistics } from "./parts/statistics";
@@ -38,6 +38,7 @@ import { HUDColorBlindHelper } from "./parts/color_blind_helper";
 import { HUDShapeViewer } from "./parts/shape_viewer";
 import { HUDWiresOverlay } from "./parts/wires_overlay";
 import { HUDChangesDebugger } from "./parts/debug_changes";
+import { HUDStandaloneReminder } from "./parts/standalone_reminder";
 
 export class GameHUD {
     /**
@@ -105,6 +106,10 @@ export class GameHUD {
             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) {
             this.parts.changesDebugger = new HUDChangesDebugger(this.root);
         }

src/js/game/hud/parts/standalone_reminder.js

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

src/js/states/main_menu.js

@@ -65,6 +65,18 @@ export class MainMenuState extends GameState {
 
                 <div class="sideContainer">
                     ${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 class="mainContainer">
@@ -260,6 +272,28 @@ export class MainMenuState extends GameState {
             () => this.app.platformWrapper.openExternalLink("https://tobspr.com"),
             { 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() {

translations/base-en.yaml

@@ -268,6 +268,11 @@ dialogs:
         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!
 
+    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:
     # This is shown in the top left corner and displays useful keybindings in
     # every situation

version

@@ -1 +1 @@
-1.1.18
+1.1.19