diff --git a/res/ui/kiwi_clicker.png b/res/ui/kiwi_clicker.png new file mode 100644 index 00000000..bc411e93 Binary files /dev/null and b/res/ui/kiwi_clicker.png differ diff --git a/res/ui/puzzle_460x215_15.png b/res/ui/puzzle_460x215_15.png new file mode 100644 index 00000000..1698b924 Binary files /dev/null and b/res/ui/puzzle_460x215_15.png differ diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 14302c22..ead757d6 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -105,7 +105,7 @@ position: relative; z-index: 10; - grid-template-rows: D(31px) 1fr D(93px); + grid-template-rows: 1fr; &[data-columns="1"] { grid-template-columns: 1fr; @@ -113,6 +113,105 @@ &[data-columns="2"] { grid-template-columns: D(290px) 1fr; } + } + + .logo { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + z-index: 20; + + flex-direction: column; + @include S(padding-top, 0px); + + img { + @include S(width, 710px / 3); + @include S(height, 180px / 3); + } + position: relative; + @include S(left, -8px); + + .updateLabel { + position: absolute; + transform: translateX(50%) rotate(-5deg); + color: #fff; + @include PlainText; + font-weight: bold; + @include S(right, 40px); + @include S(bottom, 20px); + background: $modsColor; + @include S(border-radius, $globalBorderRadius); + @include S(padding, 0, 5px, 1px, 5px); + + @include InlineAnimation(1.3s ease-in-out infinite) { + 50% { + transform: translateX(50%) rotate(-7deg) scale(1.1); + } + } + } + } + + .betaWarning { + @include S(width, 400px); + @include PlainText; + background: $colorRedBright; + @include S(padding, 10px); + @include S(border-radius, $globalBorderRadius); + color: #fff; + @include S(margin-top, 10px); + border: #{D(2px)} solid rgba(0, 10, 20, 0.1); + } + + .sideContainer { + display: flex; + width: 100%; + grid-column: 2 / 3; + flex-direction: column; + @include S(grid-gap, 20px); + height: 100%; + + .mainNews { + background: rgb(248, 232, 130); + &::before { + background: uiResource("kiwi_clicker.png") center center / 100% no-repeat; + content: ""; + @include S(width, 130px); + @include S(height, 130px); + position: absolute; + top: 50%; + right: -5%; + pointer-events: none; + transform: translateY(-50%); + } + box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2); + width: 100%; + display: flex; + flex-direction: column; + @include S(min-height, 60px); + @include S(max-height, 150px); + pointer-events: all; + flex-grow: 1; + z-index: 100; + position: relative; + grid-row: 2 / 3; + @include S(border-radius, $globalBorderRadius); + justify-content: center; + @include S(padding, 10px); + @include S(padding-right, 100px); + box-sizing: border-box; + + cursor: pointer; + &:hover { + opacity: 0.95; + } + + .text { + @include SuperSmallText; + @include S(width, 120px); + color: rgba(0, 10, 20, 0.7); + } + } .standaloneBanner { background: transparent; @@ -121,6 +220,7 @@ @include S(max-width, 370px); width: 100%; box-sizing: border-box; + grid-row: 1 / 3; display: flex; flex-direction: column; @@ -329,230 +429,220 @@ } } } - } - .logo { - display: flex; - flex-grow: 1; - align-items: center; - justify-content: center; - z-index: 20; - - flex-direction: column; - @include S(padding-top, 0px); + .puzzleContainer { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background: $colorBlueBright; + grid-row: 1 / 2; + width: 100%; + box-sizing: border-box; + position: relative; + @include S(border-radius, $globalBorderRadius); + box-shadow: 0 D(5px) D(10px) rgba(#000, 0.4); + border: D(1px) solid rgba(#000, 0.1); + overflow: hidden; - img { - @include S(width, 710px / 3); - @include S(height, 180px / 3); - } - position: relative; - @include S(left, -8px); + > .badge { + color: #fff; + text-transform: uppercase; + font-weight: bold; + position: absolute; + @include S(top, 10px); + @include S(right, 10px); - .updateLabel { - position: absolute; - transform: translateX(50%) rotate(-5deg); - color: #fff; - @include PlainText; - font-weight: bold; - @include S(right, 40px); - @include S(bottom, 20px); - background: $modsColor; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 0, 5px, 1px, 5px); + transform: translateX(50%) rotate(10deg); + @include Heading; + font-weight: bold; - @include InlineAnimation(1.3s ease-in-out infinite) { - 50% { - transform: translateX(50%) rotate(-7deg) scale(1.1); + @include InlineAnimation(1.3s ease-in-out infinite) { + 50% { + transform: translateX(50%) rotate(12deg) scale(1.1); + } } } - } - } - .betaWarning { - @include S(width, 400px); - @include PlainText; - background: $colorRedBright; - @include S(padding, 10px); - @include S(border-radius, $globalBorderRadius); - color: #fff; - @include S(margin-top, 10px); - border: #{D(2px)} solid rgba(0, 10, 20, 0.1); - } - - .sideContainer { - display: flex; - flex-direction: column; - width: 100%; - grid-row: 1 / 4; - grid-column: 2 / 3; - - .standaloneBanner { - flex-grow: 1; - } - } + > .hint { + @include SuperDuperSmallText; + @include S(margin-top, 10px); + @include S(width, 200px); + } - .puzzleContainer { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: $colorBlueBright; - height: 100%; - grid-row: 1 / 4; - width: 100%; - box-sizing: border-box; - position: relative; - @include S(padding, 20px); - @include S(border-radius, $globalBorderRadius); - box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2); + > .dlcLogo { + @include S(width, 120px); + } - > .badge { - color: #fff; - text-transform: uppercase; - font-weight: bold; - position: absolute; - @include S(top, 10px); - @include S(right, 10px); + > button { + @include S(margin-top, 20px); + @include Heading; + @include S(padding, 10px, 30px); + background-color: #333; + color: #fff; + } - transform: translateX(50%) rotate(10deg); - @include Heading; - font-weight: bold; + &.owned { + @include S(height, 118px); + @include S(width, 250px); + background: uiResource("puzzle_460x215_15.png") center D(-5px) / cover repeat; + .dlcLogo { + display: none; + } - @include InlineAnimation(1.3s ease-in-out infinite) { - 50% { - transform: translateX(50%) rotate(12deg) scale(1.1); + > button { + margin: 0; + @include S(padding, 2px, 10px); + position: absolute; + @include S(top, 10px); + @include S(right, 10px); } } - } - - > .hint { - @include SuperDuperSmallText; - @include S(margin-top, 10px); - @include S(width, 200px); - } - - > .dlcLogo { - @include S(width, 190px); - } - > button { - @include S(margin-top, 20px); - @include Heading; - @include S(padding, 10px, 30px); - background-color: #333; - color: #fff; - } + &.notOwned { + @include S(height, 200px); + @include S(width, 250px); + border: 0; + background: uiResource("puzzle_460x215_15.png") center D(-5px) / 100% repeat; + .dlcLogo { + display: none; + } + &::before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(180deg, rgba(#222529, 0.1) 40%, rgba(#222529, 1) 70%); + } - &.notOwned { - p { - @include PlainText; - color: #333; - @include S(margin-top, 10px); - @include S(width, 190px); - } - > button { - box-sizing: border-box; - @include S(margin-top, 10px); - @include S(width, 190px); - @include S(padding, 10px, 20px); + p { + position: absolute; + left: 0; + right: 0; + @include S(bottom, 35px); + z-index: 50; + box-sizing: border-box; + display: block; + @include PlainText; + color: rgba(#fff, 0.9); + @include S(padding, 10px); + @include SuperSmallText; + } + > button { + pointer-events: all; + @include S(padding, 4px, 10px); + margin: 0; + background: #47c599; + box-sizing: border-box; + position: absolute; + @include S(bottom, 10px); + @include S(right, 10px); + z-index: 100; + @include PlainText; + z-index: 200; + color: #111215; + box-shadow: 0 D(2px) D(4px) rgba(#000, 1); + } } } - } - - .modsOverview { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: #fff; - grid-row: 1 / 2; - position: relative; - text-align: left; - align-items: flex-start; - @include S(width, 250px); - @include S(padding, 15px); - @include S(padding-bottom, 10px); - @include S(border-radius, $globalBorderRadius); - box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2); - .header { + .modsOverview { display: flex; - width: 100%; align-items: center; - text-transform: uppercase; + justify-content: center; + flex-direction: column; + background: #fff; + grid-row: 1 / 2; + position: relative; + text-align: left; + align-items: flex-start; + @include S(width, 250px); + @include S(padding, 15px); + @include S(padding-bottom, 10px); + @include S(border-radius, $globalBorderRadius); + box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2); - @include S(margin-bottom, 10px); + .header { + display: flex; + width: 100%; + align-items: center; + text-transform: uppercase; - .editMods { - margin-left: auto; - @include S(width, 20px); - @include S(height, 20px); - padding: 0; - opacity: 0.5; - background: transparent center center/ 80% no-repeat; - & { - background-image: uiResource("icons/edit_key.png") !important; - } - @include DarkThemeInvert; - &:hover { - opacity: 0.6; + @include S(margin-bottom, 10px); + + .editMods { + margin-left: auto; + @include S(width, 20px); + @include S(height, 20px); + padding: 0; + opacity: 0.5; + background: transparent center center/ 80% no-repeat; + & { + background-image: uiResource("icons/edit_key.png") !important; + } + @include DarkThemeInvert; + &:hover { + opacity: 0.6; + } } } - } - h3 { - @include Heading; - color: $modsColor; - margin: 0; - } + h3 { + @include Heading; + color: $modsColor; + margin: 0; + } - .dlcHint { - @include SuperSmallText; - @include S(margin-top, 10px); - width: 100%; + .dlcHint { + @include SuperSmallText; + @include S(margin-top, 10px); + width: 100%; - display: grid; - grid-template-columns: 1fr auto; - grid-gap: 20px; - align-items: center; - } + display: grid; + grid-template-columns: 1fr auto; + grid-gap: 20px; + align-items: center; + } - .mod { - background: #eee; - width: 100%; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 5px); - box-sizing: border-box; - @include PlainText; - @include S(margin-bottom, 5px); - display: flex; - flex-direction: column; + .mod { + background: #eee; + width: 100%; + @include S(border-radius, $globalBorderRadius); + @include S(padding, 5px); + box-sizing: border-box; + @include PlainText; + @include S(margin-bottom, 5px); + display: flex; + flex-direction: column; - .author, - .version { - @include SuperSmallText; - align-self: end; - opacity: 0.4; - } - .name { - overflow: hidden; + .author, + .version { + @include SuperSmallText; + align-self: end; + opacity: 0.4; + } + .name { + overflow: hidden; + } } - } - .modsList { - box-sizing: border-box; - @include S(height, 100px); - @include S(padding, 5px); - border: D(1px) solid #eee; - overflow-y: scroll; - width: 100%; - display: flex; - flex-direction: column; - @include S(border-radius, $globalBorderRadius); - pointer-events: all; + .modsList { + box-sizing: border-box; + @include S(height, 100px); + @include S(padding, 5px); + border: D(1px) solid #eee; + overflow-y: scroll; + width: 100%; + display: flex; + flex-direction: column; + @include S(border-radius, $globalBorderRadius); + pointer-events: all; - :last-child { - margin-bottom: auto; + :last-child { + margin-bottom: auto; + } } } } @@ -570,7 +660,6 @@ position: relative; align-self: center; justify-self: center; - grid-row: 1 / 4; grid-column: 1 / 2; @include S(max-width, 400px); overflow: hidden; diff --git a/src/js/core/config.js b/src/js/core/config.js index 51820024..344c673e 100644 --- a/src/js/core/config.js +++ b/src/js/core/config.js @@ -25,7 +25,7 @@ export const THIRDPARTY_URLS = { standaloneCampaignLink: G_IS_STANDALONE ? "https://get.shapez.io/bundle/$campaign" : "https://get.shapez.io/$campaign", - puzzleDlcStorePage: "https://store.steampowered.com/app/1625400/shapezio__Puzzle_DLC", + puzzleDlcStorePage: "https://get.shapez.io/mm_puzzle_dlc?target=dlc", levelTutorialVideos: { 21: "https://www.youtube.com/watch?v=0nUfRLMCcgo&", diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index efadf2f8..34393b7e 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -41,7 +41,8 @@ export class MainMenuState extends GameState { const showLanguageIcon = !G_CHINA_VERSION && !G_WEGAME_VERSION; const showExitAppButton = G_IS_STANDALONE; const showPuzzleDLC = - !G_WEGAME_VERSION && (G_IS_STANDALONE || WEB_STEAM_SSO_AUTHENTICATED) && !G_IS_STEAM_DEMO; + G_IS_DEV || + (!G_WEGAME_VERSION && (G_IS_STANDALONE || WEB_STEAM_SSO_AUTHENTICATED) && !G_IS_STEAM_DEMO); const showWegameFooter = G_WEGAME_VERSION; const hasMods = MODS.anyModsActive(); @@ -67,7 +68,6 @@ export class MainMenuState extends GameState { showExternalLinks && this.app.restrictionMgr.getIsStandaloneMarketingActive(); const ownsPuzzleDLC = - G_IS_DEV || WEB_STEAM_SSO_AUTHENTICATED || (G_IS_STANDALONE && !G_IS_STEAM_DEMO && @@ -165,39 +165,41 @@ export class MainMenuState extends GameState {
${showDemoAdvertisement ? `
${bannerHtml}
` : ""} -
${ - showPuzzleDLC && ownsPuzzleDLC && !hasMods + showPuzzleDLC ? ` -
- - -
` - : "" - } - ${ - showPuzzleDLC && !ownsPuzzleDLC && !hasMods - ? ` -
- -

${T.mainMenu.puzzleDlcText}

- -
` + ${ + ownsPuzzleDLC && !hasMods + ? ` +
+ +
` + : "" + } + + ${ + !ownsPuzzleDLC && !hasMods + ? ` +
+

${T.mainMenu.puzzleDlcText}

+ +
` + : "" + } + + +
+
Check out this small side project I am working on right now!
+ +
+ ` : "" } + + ${ hasMods ? ` @@ -230,6 +232,9 @@ export class MainMenuState extends GameState { : "" } + + + ${ @@ -441,6 +446,7 @@ export class MainMenuState extends GameState { ".exitAppButton": this.onExitAppButtonClicked, ".steamLink": this.onSteamLinkClicked, ".steamLinkSocial": this.onSteamLinkClickedSocial, + ".kiwiClicker": this.onKiwiClickerClicked, ".discordLink": () => { this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.discord); }, @@ -552,7 +558,13 @@ export class MainMenuState extends GameState { } onPuzzleWishlistButtonClicked() { - this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.puzzleDlcStorePage + "?utm_medium=mmsl2"); + this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.puzzleDlcStorePage); + } + + onKiwiClickerClicked() { + this.app.platformWrapper.openExternalLink( + "https://store.steampowered.com/app/1980530/Kiwi_Clicker/?utm_medium=shapez" + ); } onBackButtonClicked() {