Update main menu styles

gulp/html.js

@@ -133,7 +133,7 @@ function gulptasksHTML($, gulp, buildFolder, browserSync) {
                         const images = buildUtils.getAllResourceImages();
 
                         // Preload essentials
-                        const preloads = ["fonts/LouisGeorgeCafe.woff2"];
+                        const preloads = ["fonts/GameFont.woff2"];
 
                         // for (let i = 0; i < images.length; ++i) {
                         //     if (preloads.indexOf(images[i]) < 0) {
@@ -180,7 +180,7 @@ function gulptasksHTML($, gulp, buildFolder, browserSync) {
                         font-style: normal;
                         font-weight: normal;
                         font-display: swap;
-                        src: url('${cachebust("res/fonts/LouisGeorgeCafe.woff2")}') format('woff2');
+                        src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
                     }
             
                     #ll_fp {

res_raw/atlas.tps

@@ -284,6 +284,9 @@
             <key type="filename">sprites/belt/right_3.png</key>
             <key type="filename">sprites/belt/right_4.png</key>
             <key type="filename">sprites/belt/right_5.png</key>
+            <key type="filename">sprites/blueprints/belt_left.png</key>
+            <key type="filename">sprites/blueprints/belt_right.png</key>
+            <key type="filename">sprites/blueprints/belt_top.png</key>
             <key type="filename">sprites/buildings/belt_left.png</key>
             <key type="filename">sprites/buildings/belt_right.png</key>
             <key type="filename">sprites/buildings/belt_top.png</key>
@@ -301,6 +304,46 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
+            <key type="filename">sprites/blueprints/cutter.png</key>
+            <key type="filename">sprites/blueprints/mixer.png</key>
+            <key type="filename">sprites/blueprints/painter.png</key>
+            <key type="filename">sprites/blueprints/splitter.png</key>
+            <key type="filename">sprites/blueprints/stacker.png</key>
+            <struct type="IndividualSpriteSettings">
+                <key>pivotPoint</key>
+                <point_f>0.5,0.5</point_f>
+                <key>spriteScale</key>
+                <double>1</double>
+                <key>scale9Enabled</key>
+                <false/>
+                <key>scale9Borders</key>
+                <rect>96,48,192,96</rect>
+                <key>scale9Paddings</key>
+                <rect>96,48,192,96</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
+            <key type="filename">sprites/blueprints/miner.png</key>
+            <key type="filename">sprites/blueprints/rotater.png</key>
+            <key type="filename">sprites/blueprints/trash.png</key>
+            <key type="filename">sprites/blueprints/underground_belt_entry.png</key>
+            <key type="filename">sprites/blueprints/underground_belt_exit.png</key>
+            <key type="filename">sprites/buildings/underground_belt_entry.png</key>
+            <key type="filename">sprites/buildings/underground_belt_exit.png</key>
+            <struct type="IndividualSpriteSettings">
+                <key>pivotPoint</key>
+                <point_f>0.5,0.5</point_f>
+                <key>spriteScale</key>
+                <double>1</double>
+                <key>scale9Enabled</key>
+                <false/>
+                <key>scale9Borders</key>
+                <rect>48,48,96,96</rect>
+                <key>scale9Paddings</key>
+                <rect>48,48,96,96</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
             <key type="filename">sprites/buildings/cutter.png</key>
             <key type="filename">sprites/buildings/mixer.png</key>
             <key type="filename">sprites/buildings/painter.png</key>
@@ -335,22 +378,6 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
-            <key type="filename">sprites/buildings/underground_belt_entry.png</key>
-            <key type="filename">sprites/buildings/underground_belt_exit.png</key>
-            <struct type="IndividualSpriteSettings">
-                <key>pivotPoint</key>
-                <point_f>0.5,0.5</point_f>
-                <key>spriteScale</key>
-                <double>1</double>
-                <key>scale9Enabled</key>
-                <false/>
-                <key>scale9Borders</key>
-                <rect>48,48,96,96</rect>
-                <key>scale9Paddings</key>
-                <rect>48,48,96,96</rect>
-                <key>scale9FromFile</key>
-                <false/>
-            </struct>
             <key type="filename">sprites/debug/acceptor_slot.png</key>
             <key type="filename">sprites/debug/ejector_slot.png</key>
             <key type="filename">sprites/map_overview/belt_forward.png</key>
@@ -370,6 +397,7 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
+            <key type="filename">sprites/misc/deletion_marker.png</key>
             <key type="filename">sprites/misc/slot_bad_arrow.png</key>
             <key type="filename">sprites/misc/slot_good_arrow.png</key>
             <struct type="IndividualSpriteSettings">

src/css/ingame_hud/mass_selector.scss

@@ -3,10 +3,9 @@
     @include S(top, 50px);
     left: 50%;
     transform: translateX(-50%);
-    @include S(width, 300px);
+    background: rgba(#f77, 0.8);
-    background: #f77;
     @include S(border-radius, 4px);
-    @include S(padding, 10px);
+    @include S(padding, 9px);
     @include PlainText;
     color: #fff;
 

src/css/states/main_menu.scss

@@ -3,7 +3,8 @@
     justify-content: center;
     flex-direction: column;
 
-    background: uiResource("menu_bg.noinline.jpg") center center / cover no-repeat !important;
+    background: $colorGreenBright uiResource("main_menu/bg_pattern.png") top left / #{D(10px)} !important;
+    // background: $colorGreenBright !important;
 
     .logo {
         display: flex;
@@ -21,46 +22,49 @@
         flex-grow: 1;
         align-items: flex-start;
         justify-content: center;
+
         .playButton {
             @include SuperHeading;
-            @include S(width, 150px);
+            @include S(width, 130px);
-            @include S(padding, 15px, 20px);
+            @include S(padding, 15px, 20px, 10px);
+            letter-spacing: 0.3em !important;
             color: #fff;
-            background-color: $accentColorDark;
+            background-color: #55585a;
+            text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1);
         }
     }
 
     .footer {
         display: flex;
-        justify-content: flex-end;
+        justify-content: center;
 
         @include S(padding, 15px);
         > a {
             display: flex;
-            flex-direction: column;
+            flex-direction: row;
             align-items: center;
 
             justify-content: center;
-            background: #eee;
+            background: lighten(#44484a, 55);
             @include S(padding, 5px);
             @include S(border-radius, 4px);
             @include S(margin-left, 10px);
             @include SuperSmallText();
-            border: #{D(1px)} solid #aaa;
+            border: #{D(1px)} solid #44484a;
-            border-bottom: #{D(3px)} solid #aaa;
+            border-bottom: #{D(3px)} solid #44484a;
             box-shadow: #{D(1px)} #{D(2px)} #{D(3px)} 0 rgba(0, 10, 20, 0.1);
 
             font-weight: bold;
             text-transform: uppercase;
-            color: #999da3;
+            color: #616266;
 
             transition: background-color 0.12s ease-in-out;
             pointer-events: all;
-            @include S(width, 50px);
+            @include S(width, 120px);
             @include S(height, 50px);
             cursor: pointer;
             &:hover {
-                background-color: #fafafa;
+                background-color: lighten(#44484a, 65);
             }
 
             .thirdpartyLogo {

src/css/variables.scss

@@ -18,7 +18,6 @@ $plainTextLineHeight: 17px;
 
 $supersmallTextFontSize: 10px;
 $supersmallTextLineHeight: 13px;
-
 $buttonFontSize: 14px;
 $buttonLineHeight: 18px;
 

src/js/game/hud/parts/mass_selector.js

@@ -19,7 +19,7 @@ export class HUDMassSelector extends BaseHUDPart {
             [],
             `
             Press <code class="keybinding">DEL</code> to remove selected buildings
-            and <code class="keybinding">ESCAPE</code> to cancel.
+            and <code class="keybinding">ESC</code> to cancel.
         `
         );
     }

src/js/states/main_menu.js

@@ -21,11 +21,13 @@ export class MainMenuState extends GameState {
             <div class="footer">
 
                 <a href="https://github.com/tobspr/shapez.io" target="_blank">
+                    This game is open source!
                     <span class="thirdpartyLogo githubLogo"></span>
                 </a>    
 
                 <a href="https://discord.gg/HN7EVzV" target="_blank">
-                    <span class="thirdpartyLogo  discordLogo"></span>
+                Official discord server
+                <span class="thirdpartyLogo  discordLogo"></span>
                 </a>    
 
             </div>