diff --git a/res/ui/get_on_steam_with_price.png b/res/ui/get_on_steam_with_price.png deleted file mode 100644 index e935acdc..00000000 Binary files a/res/ui/get_on_steam_with_price.png and /dev/null differ diff --git a/src/css/ingame_hud/standalone_advantages.scss b/src/css/ingame_hud/standalone_advantages.scss index 0e9a6bcf..1ab67117 100644 --- a/src/css/ingame_hud/standalone_advantages.scss +++ b/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); + } + } + } } } diff --git a/src/css/ingame_hud/watermark.scss b/src/css/ingame_hud/watermark.scss index 76ec224c..f7a3d089 100644 --- a/src/css/ingame_hud/watermark.scss +++ b/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); + } + } + } } diff --git a/src/css/resources.scss b/src/css/resources.scss index 83d5f1cb..e17d6bc7 100644 --- a/src/css/resources.scss +++ b/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; diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 9027d8a8..b82bfeb6 100644 --- a/src/css/states/main_menu.scss +++ b/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); + } + } + } } } } diff --git a/src/js/core/config.js b/src/js/core/config.js index 113b86ea..ca84c573 100644 --- a/src/js/core/config.js +++ b/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; diff --git a/src/js/game/hud/parts/standalone_advantages.js b/src/js/game/hud/parts/standalone_advantages.js index b01461af..45a2cacb 100644 --- a/src/js/game/hud/parts/standalone_advantages.js +++ b/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 {
- +
` ); 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(); }); diff --git a/src/js/game/hud/parts/watermark.js b/src/js/game/hud/parts/watermark.js index 837eaa9c..6ef7764e 100644 --- a/src/js/game/hud/parts/watermark.js +++ b/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 { [], ` ${T.ingame.watermark.title} -

${T.ingame.watermark.desc}

+

${T.ingame.watermark.desc} +

+ + ` ); this.linkElement = makeDiv( parent, "ingame_HUD_WatermarkClicker", - [], - T.ingame.watermark.get_on_steam + globalConfig.currentDiscount ? ["withDiscount"] : [""], + T.ingame.watermark.get_on_steam + + (globalConfig.currentDiscount && globalConfig.currentDiscount.until > new Date().getTime() + ? `${globalConfig.currentDiscount.amount}% off!` + : "") ); 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 ); }); } diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 10e280b9..dc9b000b 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -74,8 +74,14 @@ export class MainMenuState extends GameState { const bannerHtml = `

${T.demoBanners.title}

${T.demoBanners.intro}

+ + ${ + globalConfig.currentDiscount.active + ? `${globalConfig.currentDiscount.amount}% off!` + : "" + } - Get the shapez.io standalone! + `; return ` @@ -96,7 +102,7 @@ export class MainMenuState extends GameState {
@@ -131,9 +137,6 @@ export class MainMenuState extends GameState { showPuzzleDLC && !ownsPuzzleDLC && !hasMods ? `
- - ${T.puzzleMenu.categories.new} -