Promote current discount

src/css/ingame_hud/standalone_advantages.scss

@@ -23,7 +23,6 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        overflow: hidden;
 
         > button {
             transition: opacity 0.12s ease-in-out;
@@ -40,7 +39,7 @@
             @include IncreasedClickArea(0px);
             @include S(margin-top, 15px);
 
-            @include InlineAnimation(5s ease-in-out) {
+            @include InlineAnimation(1s ease-in-out) {
                 0% {
                     opacity: 0.05;
                 }
@@ -60,7 +59,26 @@
             @include S(height, 40px);
             background: #171a23 center center / contain no-repeat;
 
+            overflow: visible;
             @include S(border-radius, $globalBorderRadius);
+
+            > .discount {
+                position: absolute;
+                @include S(top, -7px);
+                @include S(right, -5px);
+                background: #4c6b22;
+                color: #c5ea3f;
+                @include S(border-radius, $globalBorderRadius);
+                @include S(padding, 1px, 3px, 1px, 4px);
+                @include SuperSmallText;
+                text-transform: uppercase;
+                transform: rotate(1deg);
+                @include InlineAnimation(1.3s ease-in-out infinite) {
+                    50% {
+                        transform: rotate(4deg) scale(1.1);
+                    }
+                }
+            }
         }
     }
 

src/css/ingame_hud/watermark.scss

@@ -82,4 +82,26 @@
             background-image: uiResource("res/ui/icons/demo_steam_link_indicator.png");
         }
     }
+
+    &.withDiscount {
+        color: #4c6b22;
+    }
+
+    > .discount {
+        // position: absolute;
+        @include S(margin, 0, 5px);
+
+        background: rgba(#4c6b22, 1);
+        color: #c5ea3f;
+        @include S(border-radius, $globalBorderRadius);
+        @include S(padding, 0px, 2px, 0px, 3px);
+        @include SuperSmallText;
+        text-transform: uppercase;
+        transform: rotate(0deg);
+        @include InlineAnimation(1.3s ease-in-out infinite) {
+            50% {
+                transform: rotate(0.5deg) scale(1.05);
+            }
+        }
+    }
 }

src/css/resources.scss

@@ -83,12 +83,6 @@ $languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW
 /*
 PRICE
 */
-
-.steam_1_pr {
-    /* @load-async */
-    background-image: uiResource("get_on_steam_with_price.png") !important;
-}
-
 .steam_2_npr {
     /* @load-async */
     background-image: uiResource("get_on_steam.png") !important;

src/css/states/main_menu.scss

@@ -140,20 +140,37 @@
                 @include S(height, 40px);
                 @include S(width, 180px);
                 background: #171a23 center center / contain no-repeat;
-                overflow: hidden;
+                // overflow: hidden;
                 display: block;
-                text-indent: -999em;
                 cursor: pointer;
                 @include S(margin-top, 30px);
                 pointer-events: all;
                 transition: all 0.12s ease-in;
                 transition-property: opacity, transform;
-
+                position: relative;
                 @include S(border-radius, $globalBorderRadius);
 
                 &:hover {
                     opacity: 0.9;
                 }
+
+                > .discount {
+                    position: absolute;
+                    @include S(top, -7px);
+                    @include S(right, -5px);
+                    background: #4c6b22;
+                    color: #c5ea3f;
+                    @include S(border-radius, $globalBorderRadius);
+                    @include S(padding, 1px, 3px, 1px, 4px);
+                    @include SuperSmallText;
+                    text-transform: uppercase;
+                    transform: rotate(1deg);
+                    @include InlineAnimation(1.3s ease-in-out infinite) {
+                        50% {
+                            transform: rotate(4deg) scale(1.1);
+                        }
+                    }
+                }
             }
         }
     }

src/js/core/config.js

@@ -117,6 +117,13 @@ export const globalConfig = {
     rendering: {},
     debug: require("./config.local").default,
 
+    currentDiscount: {
+        amount: 50,
+        until: Date.parse("April 25 2022 23:59 +2:00"),
+
+        active: false, // computed later
+    },
+
     // Secret vars
     info: {
         // Binary file salt
@@ -161,3 +168,5 @@ if (G_IS_DEV && globalConfig.debug.noArtificialDelays) {
     globalConfig.warmupTimeSecondsFast = 0;
     globalConfig.warmupTimeSecondsRegular = 0;
 }
+
+globalConfig.currentDiscount.active = new Date().getTime() < globalConfig.currentDiscount.until;

src/js/game/hud/parts/standalone_advantages.js

@@ -1,4 +1,4 @@
-import { A_B_TESTING_LINK_TYPE, THIRDPARTY_URLS } from "../../../core/config";
+import { A_B_TESTING_LINK_TYPE, globalConfig, THIRDPARTY_URLS } from "../../../core/config";
 import { InputReceiver } from "../../../core/input_receiver";
 import { makeDiv } from "../../../core/utils";
 import { T } from "../../../translations";
@@ -33,16 +33,26 @@ export class HUDStandaloneAdvantages extends BaseHUDPart {
             </div>
 
             <div class="lowerBar">
-            <button class="steamLinkButton ${A_B_TESTING_LINK_TYPE}"></button>
+            <button class="steamLinkButton ${A_B_TESTING_LINK_TYPE}">
+            ${
+                globalConfig.currentDiscount && globalConfig.currentDiscount.until > new Date().getTime()
+                    ? `<span class='discount'>${globalConfig.currentDiscount.amount}% off!</span>`
+                    : ""
+            }
+            </button>
             <button class="otherCloseButton">${T.ingame.standaloneAdvantages.no_thanks}</button>
             </div>
         `
         );
 
         this.trackClicks(this.contentDiv.querySelector("button.steamLinkButton"), () => {
+            const discount = globalConfig.currentDiscount.active
+                ? "_discount" + globalConfig.currentDiscount.amount
+                : "";
+
             this.root.app.analytics.trackUiClick("standalone_advantage_visit_steam");
             this.root.app.platformWrapper.openExternalLink(
-                THIRDPARTY_URLS.stanaloneCampaignLink + "/shapez_std_advg"
+                THIRDPARTY_URLS.stanaloneCampaignLink + "/shapez_std_advg" + discount
             );
             this.close();
         });

src/js/game/hud/parts/watermark.js

@@ -1,4 +1,4 @@
-import { THIRDPARTY_URLS } from "../../../core/config";
+import { globalConfig, THIRDPARTY_URLS } from "../../../core/config";
 import { makeDiv } from "../../../core/utils";
 import { T } from "../../../translations";
 import { BaseHUDPart } from "../base_hud_part";
@@ -15,20 +15,30 @@ export class HUDWatermark extends BaseHUDPart {
             [],
             `
             <strong>${T.ingame.watermark.title}</strong>
-            <p>${T.ingame.watermark.desc}</p>
+            <p>${T.ingame.watermark.desc}
+            </p>
+
+
         `
         );
 
         this.linkElement = makeDiv(
             parent,
             "ingame_HUD_WatermarkClicker",
-            [],
+            globalConfig.currentDiscount ? ["withDiscount"] : [""],
-            T.ingame.watermark.get_on_steam
+            T.ingame.watermark.get_on_steam +
+                (globalConfig.currentDiscount && globalConfig.currentDiscount.until > new Date().getTime()
+                    ? `<span class='discount'>${globalConfig.currentDiscount.amount}% off!</span>`
+                    : "")
         );
         this.trackClicks(this.linkElement, () => {
             this.root.app.analytics.trackUiClick("watermark_click_2_direct");
+            const discount = globalConfig.currentDiscount.active
+                ? "_discount" + globalConfig.currentDiscount.amount
+                : "";
+
             this.root.app.platformWrapper.openExternalLink(
-                THIRDPARTY_URLS.stanaloneCampaignLink + "/shapez_watermark"
+                THIRDPARTY_URLS.stanaloneCampaignLink + "/shapez_watermark" + discount
             );
         });
     }

src/js/states/main_menu.js

@@ -74,8 +74,14 @@ export class MainMenuState extends GameState {
         const bannerHtml = `
             <h3>${T.demoBanners.title}</h3>
             <p>${T.demoBanners.intro}</p>
+            <a href="#" class="steamLink ${A_B_TESTING_LINK_TYPE}" target="_blank">
+                ${
+                    globalConfig.currentDiscount.active
+                        ? `<span class='discount'>${globalConfig.currentDiscount.amount}% off!</span>`
+                        : ""
+                }
 
-                    <a href="#" class="steamLink ${A_B_TESTING_LINK_TYPE}" target="_blank">Get the shapez.io standalone!</a>
+            </a>
         `;
 
         return `
@@ -96,7 +102,7 @@ export class MainMenuState extends GameState {
 
             <div class="logo">
                 <img src="${cachebust("res/" + getLogoSprite())}" alt="shapez.io Logo">
-                ${showUpdateLabel ? `<span class="updateLabel">MODS UPDATE!</span>` : ""}
+                ${/*showUpdateLabel ? `<span class="updateLabel">MODS UPDATE!</span>` : ""*/ ""}
             </div>
 
             <div class="mainWrapper" data-columns="${showDemoAdvertisement || showPuzzleDLC ? 2 : 1}">
@@ -131,9 +137,6 @@ export class MainMenuState extends GameState {
                     showPuzzleDLC && !ownsPuzzleDLC && !hasMods
                         ? `
                     <div class="puzzleContainer notOwned">
-                        <span class="badge">
-                            ${T.puzzleMenu.categories.new}
-                        </span>
                         <img class="dlcLogo" src="${cachebust(
                             G_CHINA_VERSION || G_WEGAME_VERSION
                                 ? "res/puzzle_dlc_logo_china.png"
@@ -454,7 +457,12 @@ export class MainMenuState extends GameState {
 
     onSteamLinkClicked() {
         this.app.analytics.trackUiClick("main_menu_steam_link_" + A_B_TESTING_LINK_TYPE);
-        this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.stanaloneCampaignLink + "/shapez_mainmenu");
+        const discount = globalConfig.currentDiscount.active
+            ? "_discount" + globalConfig.currentDiscount.amount
+            : "";
+        this.app.platformWrapper.openExternalLink(
+            THIRDPARTY_URLS.stanaloneCampaignLink + "/shapez_mainmenu" + discount
+        );
 
         return false;
     }