From 28b2dc008c933a6815d8d890c17000a0ecc44809 Mon Sep 17 00:00:00 2001 From: tobspr Date: Mon, 22 Jun 2020 15:21:47 +0200 Subject: [PATCH] Add more links to main menu --- res/ui/main_menu/changelog.svg | 2 + res/ui/main_menu/reddit.svg | 1 + res/ui/main_menu/translate.svg | 2 + src/css/states/main_menu.scss | 74 +++++++++++++++++++++++++++------- src/js/core/config.js | 1 + src/js/states/main_menu.js | 16 ++++++-- translations/base-en.yaml | 1 + 7 files changed, 79 insertions(+), 18 deletions(-) create mode 100644 res/ui/main_menu/changelog.svg create mode 100644 res/ui/main_menu/reddit.svg create mode 100644 res/ui/main_menu/translate.svg diff --git a/res/ui/main_menu/changelog.svg b/res/ui/main_menu/changelog.svg new file mode 100644 index 00000000..f12bff7b --- /dev/null +++ b/res/ui/main_menu/changelog.svg @@ -0,0 +1,2 @@ + + diff --git a/res/ui/main_menu/reddit.svg b/res/ui/main_menu/reddit.svg new file mode 100644 index 00000000..46310cbf --- /dev/null +++ b/res/ui/main_menu/reddit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/ui/main_menu/translate.svg b/res/ui/main_menu/translate.svg new file mode 100644 index 00000000..e38b3392 --- /dev/null +++ b/res/ui/main_menu/translate.svg @@ -0,0 +1,2 @@ + + diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 7812de62..f14cfc8b 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -343,33 +343,42 @@ } .footer { - display: flex; + display: grid; flex-grow: 1; justify-content: center; align-items: flex-end; width: 100%; + grid-template-columns: auto auto auto 1fr; + @include S(padding, 10px); + box-sizing: border-box; + @include S(grid-gap, 5px); .author { flex-grow: 1; text-align: right; - @include S(padding-right, 10px); + @include PlainText; + color: #888a8f; + a { + color: #333438; + } } @include S(padding, 15px); - > a { + + > .boxLink { display: grid; align-items: center; grid-template-columns: 1fr auto; justify-content: center; - background: #fafafa; + background: #fdfdfd; @include S(padding, 5px); @include S(padding-left, 10px); @include S(border-radius, $globalBorderRadius); - @include S(margin-left, 10px); @include SuperSmallText(); font-weight: bold; + box-sizing: border-box; text-transform: uppercase; color: #616266; @@ -377,19 +386,11 @@ transition-property: background-color, transform; pointer-events: all; @include S(width, 120px); - @include S(height, 50px); + @include S(height, 60px); + cursor: pointer; &:hover { background-color: #fff; - transform: scale(1.01); - } - - &:not(.boxLink) { - align-self: flex-end; - justify-self: flex-end; - height: unset; - width: unset; - @include S(padding, 3px); } .thirdpartyLogo { @@ -406,6 +407,49 @@ } } } + + > .sidelinks { + display: grid; + align-items: flex-start; + justify-content: flex-start; + grid-template-rows: 1fr 1fr 1fr; + @include S(grid-gap, 2px); + @include S(height, 60px); + + > a { + color: #616266; + background: #fdfdfd; + height: 100%; + + &:hover { + background-color: #fff; + } + @include SuperSmallText; + text-transform: uppercase; + width: 100%; + @include S(padding, 2px, 10px); + display: flex; + align-items: center; + justify-content: flex-start; + + @include S(padding-left, 25px); + box-sizing: border-box; + font-weight: bold; + background-position: #{D(5px)} center; + background-size: #{D(12px)}; + background-repeat: no-repeat; + + &.redditLink { + background-image: uiResource("main_menu/reddit.svg"); + } + &.changelog { + background-image: uiResource("main_menu/changelog.svg"); + } + &.helpTranslate { + background-image: uiResource("main_menu/translate.svg"); + } + } + } } @include DarkThemeOverride { diff --git a/src/js/core/config.js b/src/js/core/config.js index aad3d245..62e5d87d 100644 --- a/src/js/core/config.js +++ b/src/js/core/config.js @@ -19,6 +19,7 @@ const smoothCanvas = true; export const THIRDPARTY_URLS = { discord: "https://discord.gg/HN7EVzV", github: "https://github.com/tobspr/shapez.io", + reddit: "https://www.reddit.com/r/shapezio", standaloneStorePage: "https://store.steampowered.com/app/1318690/shapezio/", }; diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 29677686..8f7d4a93 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -91,10 +91,14 @@ export class MainMenuState extends GameState { - ${T.changelog.title} - - ${T.mainMenu.helpTranslate} +
+ ${T.mainMenu.subreddit} + ${T.changelog.title} + + ${T.mainMenu.helpTranslate} +
+
${T.mainMenu.madeBy.replace( "", 'Tobias Springer' @@ -215,6 +219,7 @@ export class MainMenuState extends GameState { this.trackClicks(qs(".settingsButton"), this.onSettingsButtonClicked); this.trackClicks(qs(".changelog"), this.onChangelogClicked); + this.trackClicks(qs(".redditLink"), this.onRedditClicked); this.trackClicks(qs(".languageChoose"), this.onLanguageChooseClicked); this.trackClicks(qs(".helpTranslate"), this.onTranslationHelpLinkClicked); @@ -307,6 +312,11 @@ export class MainMenuState extends GameState { this.moveToState("ChangelogState"); } + onRedditClicked() { + this.app.analytics.trackUiClick("main_menu_reddit_link"); + this.app.platformWrapper.openExternalLink(THIRDPARTY_URLS.reddit); + } + onContestClicked() { this.app.analytics.trackUiClick("contest_click"); diff --git a/translations/base-en.yaml b/translations/base-en.yaml index d0a743ab..2ad5ef07 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -121,6 +121,7 @@ mainMenu: continue: Continue newGame: New Game changelog: Changelog + subreddit: Reddit importSavegame: Import openSourceHint: This game is open source! discordLink: Official Discord Server