Add more links to main menu

res/ui/main_menu/changelog.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px" class=""><g><path d="m106 512h300c24.814 0 45-20.186 45-45v-317h-105c-24.814 0-45-20.186-45-45v-105h-195c-24.814 0-45 20.186-45 45v422c0 24.814 20.186 45 45 45zm60-301h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h180c8.291 0 15 6.709 15 15s-6.709 15-15 15h-180c-8.291 0-15-6.709-15-15s6.709-15 15-15zm0 60h120c8.291 0 15 6.709 15 15s-6.709 15-15 15h-120c-8.291 0-15-6.709-15-15s6.709-15 15-15z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#00AF80"/><path d="m346 120h96.211l-111.211-111.211v96.211c0 8.276 6.724 15 15 15z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#00AF80"/></g> </svg>

res/ui/main_menu/reddit.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m21.325 9.308c-.758 0-1.425.319-1.916.816-1.805-1.268-4.239-2.084-6.936-2.171l1.401-6.406 4.461 1.016c0 1.108.89 2.013 1.982 2.013 1.113 0 2.008-.929 2.008-2.038s-.889-2.038-2.007-2.038c-.779 0-1.451.477-1.786 1.129l-4.927-1.108c-.248-.067-.491.113-.557.365l-1.538 7.062c-2.676.113-5.084.928-6.895 2.197-.491-.518-1.184-.837-1.942-.837-2.812 0-3.733 3.829-1.158 5.138-.091.405-.132.837-.132 1.268 0 4.301 4.775 7.786 10.638 7.786 5.888 0 10.663-3.485 10.663-7.786 0-.431-.045-.883-.156-1.289 2.523-1.314 1.594-5.115-1.203-5.117zm-15.724 5.41c0-1.129.89-2.038 2.008-2.038 1.092 0 1.983.903 1.983 2.038 0 1.109-.89 2.013-1.983 2.013-1.113.005-2.008-.904-2.008-2.013zm10.839 4.798c-1.841 1.868-7.036 1.868-8.878 0-.203-.18-.203-.498 0-.703.177-.18.491-.18.668 0 1.406 1.463 6.07 1.488 7.537 0 .177-.18.491-.18.668 0 .207.206.207.524.005.703zm-.041-2.781c-1.092 0-1.982-.903-1.982-2.011 0-1.129.89-2.038 1.982-2.038 1.113 0 2.008.903 2.008 2.038-.005 1.103-.895 2.011-2.008 2.011z" fill="#ff5722"/></svg>

res/ui/main_menu/translate.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512px" viewBox="0 0 512 512" width="512px"><g><g><g><path d="m496 0h-210c-8.284 0-15 6.716-15 15v260c0 8.284 6.716 15 15 15h143.787l55.606 55.606c2.869 2.87 6.706 4.394 10.609 4.394 1.933 0 3.882-.374 5.737-1.142 5.605-2.322 9.26-7.792 9.26-13.858v-320c.001-8.284-6.715-15-14.999-15zm-40 130h-10.978c-3.123 23.867-13.59 45.455-29.054 62.414 10.691 4.857 22.545 7.586 35.032 7.586 8.284 0 15 6.716 15 15s-6.716 15-15 15c-21.972 0-42.521-6.198-60-16.931-17.478 10.733-38.028 16.931-60 16.931-8.284 0-15-6.716-15-15s6.716-15 15-15c12.487 0 24.342-2.729 35.032-7.586-15.464-16.959-25.932-38.547-29.054-62.414h-10.978c-8.284 0-15-6.716-15-15s6.716-15 15-15h50v-25c0-8.284 6.716-15 15-15s15 6.716 15 15v25h50c8.284 0 15 6.716 15 15s-6.716 15-15 15z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#4949E7"/><path d="m391 175.148c12.068-12.039 20.523-27.681 23.648-45.148h-47.295c3.124 17.467 11.579 33.11 23.647 45.148z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#4949E7"/></g><g><path d="m100.59 327.624h41.01l-20.411-54.086z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#4949E7"/><path d="m226 162h-210c-8.284 0-15 6.716-15 15v320c0 6.067 3.654 11.537 9.26 13.858 1.855.769 3.805 1.142 5.737 1.142 3.903 0 7.74-1.524 10.609-4.394l55.607-55.606h143.787c8.284 0 15-6.716 15-15v-260c0-8.284-6.716-15-15-15zm-44.438 229.034c-1.743.658-3.534.97-5.293.97-6.062 0-11.77-3.701-14.037-9.708l-9.311-24.673h-63.757l-9.413 24.715c-2.948 7.741-11.61 11.628-19.356 8.679-7.741-2.948-11.627-11.615-8.679-19.356l52.569-138.028c.043-.114.088-.228.135-.34 2.803-6.852 9.397-11.284 16.8-11.292h.021c7.396 0 13.99 4.416 16.806 11.256.057.137.11.275.163.413l52.092 138.034c2.924 7.751-.989 16.405-8.74 19.33z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#4949E7"/></g></g></g> </svg>

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 {

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/",
 };

src/js/states/main_menu.js

@@ -91,10 +91,14 @@ export class MainMenuState extends GameState {
                     <span class="thirdpartyLogo  discordLogo"></span>
                 </a>
 
-                <a class="changelog">${T.changelog.title}</a>
-
-                <a class="helpTranslate">${T.mainMenu.helpTranslate}</a>
+                <div class="sidelinks">
+                    <a class="redditLink">${T.mainMenu.subreddit}</a>
 
+                    <a class="changelog">${T.changelog.title}</a>
+                
+                    <a class="helpTranslate">${T.mainMenu.helpTranslate}</a>
+                </div>
+            
                 <div class="author">${T.mainMenu.madeBy.replace(
                     "<author-link>",
                     '<a class="producerLink" target="_blank">Tobias Springer</a>'
@@ -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");
 

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