Add more links to main menu

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");