v1.5.2

electron/package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "async-lock": "^1.2.8",
-        "electron": "16.0.7",
+        "electron": "18.3.0",
         "electron-window-state": "^5.0.3"
     }
 }

electron/yarn.lock

@@ -30,10 +30,10 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@types/node@^14.6.2":
+"@types/node@^16.11.26":
-  version "14.18.5"
+  version "16.11.38"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.5.tgz#0dd636fe7b2c6055cbed0d4ca3b7fb540f130a96"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.38.tgz#be0edd097b23eace6c471c525a74b3f98803017f"
-  integrity sha512-LMy+vDDcQR48EZdEx5wRX1q/sEl6NdGuHXPnfeL8ixkwCOSZ2qnIyIZmcCbdX0MeRqHhAcHmX+haCbrS8Run+A==
+  integrity sha512-hjO/0K140An3GWDw2HJfq7gko3wWeznbjXgg+rzPdVzhe198hp4x2i1dgveAOEiFKd8sOilAxzoSJiVv5P/CUg==
 
 async-lock@^1.2.8:
   version "1.2.8"
@@ -149,13 +149,13 @@ electron-window-state@^5.0.3:
     jsonfile "^4.0.0"
     mkdirp "^0.5.1"
 
-electron@16.0.7:
+electron@18.3.0:
-  version "16.0.7"
+  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-16.0.7.tgz#87eaccd05ab61563d3c17dfbad2949bba7ead162"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-18.3.0.tgz#43de95979341e63f1b209c569a0ad148d98ae5b7"
-  integrity sha512-/IMwpBf2svhA1X/7Q58RV+Nn0fvUJsHniG4TizaO7q4iKFYSQ6hBvsLz+cylcZ8hRMKmVy5G1XaMNJID2ah23w==
+  integrity sha512-2+pAUIViVvFOGE5mJKKi8F6ruyvQrcqdfsm/AUfz+6P05vbvR5ZsR6WBkr90mlyojHW5w/nAVX9ZSOtz3aHs4A==
   dependencies:
     "@electron/get" "^1.13.0"
-    "@types/node" "^14.6.2"
+    "@types/node" "^16.11.26"
     extract-zip "^1.0.3"
 
 encodeurl@^1.0.2:

src/css/common.scss

@@ -196,11 +196,11 @@ button {
     background: $colorBlueBright;
     color: #fff;
 
-    @include S(border-radius, $globalBorderRadius);
+    @include S(border-radius, 0.8 * $globalBorderRadius);
     // border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
     @include S(border-bottom-width, 2px);
     // color: $accentColorDark;
-    letter-spacing: 0.05em !important;
+    letter-spacing: 0em !important;
     // box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
     .keybinding {
         @include S(bottom, -2.5px);

src/css/ingame_hud/buildings_toolbar.scss

@@ -1,6 +1,6 @@
 .ingame_buildingsToolbar {
     position: absolute;
-    @include S(bottom, 5px);
+    @include S(bottom, 10px);
     left: 50%;
     transform: translateX(-50%);
 
@@ -22,10 +22,12 @@
         grid-auto-flow: column;
         justify-items: center;
         align-self: center;
+        grid-gap: D(2px);
         grid-row: 2 / 3;
 
-        background-color: rgba(240, 241, 243, 0.5);
         @include S(border-radius, $globalBorderRadius);
+        @include S(padding, 2px);
+        background-color: rgba($ingameHudBg, 0.07);
 
         @include DarkThemeOverride {
             background-color: rgba(darken($darkModeGameBackground, 15), 0.95);
@@ -51,6 +53,7 @@
             display: flex;
             @include S(width, 40px);
             position: relative;
+            overflow: hidden;
             @include S(height, 40px);
             .icon {
                 color: $accentColorDark;
@@ -63,7 +66,6 @@
                 height: 100%;
                 padding: 0;
                 margin: 0;
-                @include S(border-radius, $globalBorderRadius);
 
                 background: center center / 70% no-repeat;
             }
@@ -90,14 +92,20 @@
             }
 
             &.unlocked {
+                @include S(border-radius, $globalBorderRadius * 0.9);
+
                 .icon {
                     pointer-events: all;
-                    transition: all 50ms ease-in-out;
+                    transition: all 0.12s ease-in-out;
                     transition-property: background-color, transform;
                     cursor: pointer;
 
                     &:hover {
                         background-color: rgba(30, 40, 90, 0.1);
+
+                        @include DarkThemeOverride {
+                            background-color: rgba(255, 255, 255, 0.07);
+                        }
                     }
 
                     &.pressed {
@@ -107,7 +115,7 @@
                 &.selected {
                     // transform: scale(1.05);
                     background-color: rgba(lighten($colorBlueBright, 9), 0.4);
-                    @include S(border-radius, $globalBorderRadius);
+                    // @include S(border-radius, $globalBorderRadius);
 
                     .keybinding {
                         color: #111;

src/css/ingame_hud/dialogs.scss

@@ -84,6 +84,8 @@
         display: flex;
         flex-direction: column;
         @include S(padding, 12px);
+
+        box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
         pointer-events: all;
 
         @include DarkThemeOverride {
@@ -94,6 +96,7 @@
             .optionParent {
                 display: grid;
                 @include S(grid-gap, 5px);
+                @include S(padding-right, 5px);
                 grid-template-columns: 1fr 1fr;
                 .option {
                     @include S(border-radius, $globalBorderRadius);

src/css/ingame_hud/shop.scss

@@ -131,7 +131,7 @@
 
                         @include DarkThemeInvert;
 
-                        $disabledOpacity: 0.2;
+                        $disabledOpacity: 0.6;
                         $enabledOpacity: 0.6;
 
                         &:hover {
@@ -157,6 +157,12 @@
 
                         &.pinned {
                             opacity: $disabledOpacity;
+
+                            & {
+                                /* @load-async */
+                                background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important;
+                            }
+
                             @include InlineAnimation(0.3s ease-in-out) {
                                 0% {
                                     opacity: 1;

src/css/states/keybindings.scss

@@ -10,8 +10,9 @@
         .hint {
             display: block;
             background: #eee;
-            @include S(padding, 4px);
+            @include S(padding, 6px, 10px);
             @include PlainText;
+            @include S(border-radius, $globalBorderRadius);
         }
 
         .category {

src/css/states/main_menu.scss

@@ -183,11 +183,14 @@
 
         flex-direction: column;
         @include S(padding-top, 20px);
+
         img {
             @include S(width, 300px);
         }
 
         position: relative;
+        @include S(left, -22px);
+
         .updateLabel {
             position: absolute;
             transform: translateX(50%) rotate(-5deg);
@@ -311,11 +314,14 @@
         @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 {
             display: flex;
             width: 100%;
             align-items: center;
+            text-transform: uppercase;
+
             @include S(margin-bottom, 10px);
 
             .editMods {
@@ -330,6 +336,9 @@
                     background-image: uiResource("icons/edit_key.png") !important;
                 }
                 @include DarkThemeInvert;
+                &:hover {
+                    opacity: 0.6;
+                }
             }
         }
 
@@ -437,7 +446,7 @@
             @include SuperHeading;
             @include S(min-width, 130px);
             @include S(padding, 15px, 20px);
-            letter-spacing: 0.3em !important;
+            letter-spacing: 0.2em !important;
             @include IncreasedClickArea(0px);
             font-weight: bold;
             color: #fff;
@@ -720,12 +729,9 @@
 
         .author {
             margin-left: auto;
-            text-align: right;
-            @include PlainText;
-            color: #000;
 
             a {
-                &:hover {
+                &:hover img {
                     opacity: 0.8;
                 }
                 display: flex;
@@ -733,10 +739,10 @@
                 justify-content: center;
 
                 img {
-                    @include S(margin-left, 5px);
+                    transition: opacity 0.12s ease-in-out;
-                    @include S(margin-top, 3px);
+                    @include S(width, 80px);
-                    @include S(width, 50px);
                     filter: invert(100%);
+                    opacity: 0.6;
                 }
             }
         }
@@ -744,7 +750,7 @@
         @include S(padding, 15px);
 
         $linkBg: rgba(#fdfdff, 0.5);
-        $linkBgHover: darken($linkBg, 2);
+        $linkBgHover: darken($linkBg, 5);
         $linkColor: #55586a;
 
         > .boxLink {

src/css/states/mods.scss

@@ -92,7 +92,7 @@
 
         .mod {
             @include S(border-radius, $globalBorderRadius);
-            background: $accentColorBright;
+            background: #eeeff4;
             @include S(margin-bottom, 4px);
             @include S(padding, 7px, 10px);
             @include S(grid-gap, 15px);
@@ -113,14 +113,14 @@
                 flex-direction: column;
 
                 .description {
-                    @include SuperSmallText;
+                    @include PlainText;
                     @include S(margin-top, 5px);
                     color: $accentColorDark;
                 }
                 .website {
                     text-transform: uppercase;
                     align-self: start;
-                    @include SuperSmallText;
+                    @include PlainText;
                     @include S(margin-top, 5px);
                 }
             }

src/css/states/preload.scss

@@ -7,14 +7,15 @@
     }
 
     .changelogDialogEntry {
-        margin-top: 10px;
+        @include S(margin-top, 10px);
+
         width: 100%;
         flex-direction: column;
         text-align: left;
         padding: 10px;
         box-sizing: border-box;
         background: #eef1f4;
-        @include S(border-radius, 3px);
+        @include S(border-radius, $globalBorderRadius);
 
         @include DarkThemeOverride {
             background: #33343c;
@@ -34,6 +35,7 @@
         .changes {
             @include PlainText;
             @include S(padding-left, 15px);
+            @include S(margin-top, 10px);
             strong {
                 background: $colorBlueBright;
                 color: #fff;
@@ -46,7 +48,7 @@
             }
             li {
                 @include SuperSmallText;
-                @include S(margin-bottom, 10px);
+                @include S(margin-bottom, 5px);
             }
         }
     }

src/css/variables.scss

@@ -37,7 +37,7 @@ $colorBlueBright: rgb(74, 151, 223);
 $colorRedBright: #ef5072;
 $colorOrangeBright: #ef9d50;
 $themeColor: #393747;
-$ingameHudBg: rgba(#333438, 0.9);
+$ingameHudBg: rgba(#33343b, 0.9);
 $modsColor: rgb(214, 60, 228);
 
 $text3dColor: #f4ffff;
@@ -69,7 +69,7 @@ $numberFont: $mainFont;
 $textFont: $mainFont;
 
 $mainFontWeight: 400;
-$mainFontSpacing: 0.04em;
+$mainFontSpacing: 0.01em;
 $mainFontScale: 1;
 
 @mixin DebugText($color) {

src/js/changelog.js

@@ -1,4 +1,17 @@
 export const CHANGELOG = [
+    {
+        version: "1.5.2",
+        date: "02.06.2022",
+        entries: [
+            "Attempted to fix the 'vram glitch', where the map background would not redraw anymore, especially in fullscreen. If the issue still persists, please let me know in the discord server!",
+            "The game has been renamed from 'shapez.io' to 'shapez', since it is not really an .io game",
+            "Various performance improvements",
+            "Upgrades should now show the full precision",
+            "UI Polishing & Cleanup",
+            "Updated translations",
+            "PS: We are already working on shapez 2, more information will follow in the <a href='https://discord.com/invite/HN7EVzV' target='_blank'>discord</a> soon!",
+        ],
+    },
     {
         version: "1.5.1",
         date: "25.02.2022",

src/js/game/hud/parts/shop.js

@@ -98,8 +98,8 @@ export class HUDShop extends BaseHUDPart {
 
             // Set description
             handle.elemDescription.innerText = T.shopUpgrades[upgradeId].description
-                .replace("<currentMult>", formatBigNumber(currentTierMultiplier))
+                .replace("<currentMult>", currentTierMultiplier.toFixed(2))
-                .replace("<newMult>", formatBigNumber(currentTierMultiplier + tierHandle.improvement));
+                .replace("<newMult>", (currentTierMultiplier + tierHandle.improvement).toFixed(2));
 
             tierHandle.required.forEach(({ shape, amount }) => {
                 const container = makeDiv(handle.elemRequirements, null, ["requirement"]);

src/js/states/main_menu.js

@@ -227,10 +227,9 @@ export class MainMenuState extends GameState {
 
                         ${showExternalLinks ? `<a class="helpTranslate">${T.mainMenu.helpTranslate}</a>` : ""}
                     </div>
-                    <div class="author"><a class="producerLink" target="_blank">${T.mainMenu.madeBy.replace(
+                    <div class="author"><a class="producerLink" target="_blank" title="tobspr Games" rel="follow">
-                        "<author-link>",
+                        <img src="${cachebust("res/logo-tobspr-games.svg")}">
-                        `<img src="${cachebust("res/logo-tobspr-games.svg")}">`
+                    </a></div>
-                    )}</a></div>
                 </div>
 
                 ${

translations/base-en.yaml

@@ -1110,7 +1110,7 @@ mods:
     browseMods: Browse Mods
 
     modsInfo: >-
-        To install and manage mods, copy them to the mods folder within the game directory. You can also use the 'Open Mods Folder' button on the top right.
+        To install and manage mods, copy them to the mods folder (use the 'Open Mods Folder' button). Be sure to restart the game afterwards, otherwise the mods will not show up.
     noModSupport: You need the full version on Steam to install mods.
 
     togglingComingSoon:
@@ -1229,7 +1229,7 @@ settings:
             title: Tick Rate
             description: >-
                 This determines how many game ticks happen per second. In general, a higher tick rate means better precision but also worse performance. On lower tickrates, the throughput may not be
-                exact.
+                exact. Anything above 60 Hz is expected to be laggy!
 
         alwaysMultiplace:
             title: Multiplace

version

@@ -1 +1 @@
-1.5.1
+1.5.2