Achievements ingame

electron/steam.js

@@ -52,7 +52,9 @@ function listen() {
     console.log("Adding listeners");
 
     ipcMain.handle("steam:get-achievement-names", getAchievementNames);
+    ipcMain.handle("steam:get-achievement", getAchievement);
     ipcMain.handle("steam:activate-achievement", activateAchievement);
+    ipcMain.handle("steam:deactivate-achievement", deactivateAchievement);
 
     function bufferToHex(buffer) {
         return Array.from(new Uint8Array(buffer))
@@ -96,6 +98,16 @@ function getAchievementNames(event) {
     });
 }
 
+function getAchievement(event, id) {
+    return new Promise((resolve, reject) => {
+        greenworks.getAchievement(
+            id,
+            () => resolve(),
+            err => reject(err)
+        );
+    });
+}
+
 function activateAchievement(event, id) {
     return new Promise((resolve, reject) => {
         greenworks.activateAchievement(
@@ -106,6 +118,16 @@ function activateAchievement(event, id) {
     });
 }
 
+function deactivateAchievement(event, id) {
+    return new Promise((resolve, reject) => {
+        greenworks.clearAchievement(
+            id,
+            () => resolve(),
+            err => reject(err)
+        );
+    });
+}
+
 module.exports = {
     init,
     listen,

package.json

@@ -7,7 +7,7 @@
     "license": "MIT",
     "private": true,
     "scripts": {
-        "dev": "cd gulp && yarn gulp main.serveDev",
+        "dev": "cd gulp && yarn gulp",
         "devStandalone": "cd gulp && yarn gulp main.serveStandalone",
         "tslint": "cd src/js && tsc",
         "lint": "eslint src/js",

src/css/ingame_hud/achievements.scss

@@ -0,0 +1,121 @@
+#ingame_HUD_Achievements {
+    .content {
+        @include S(padding-right, 10px);
+        display: flex;
+        flex-direction: column;
+        @include S(width, 500px);
+
+        .achievement {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            background: #eee;
+            @include S(border-radius, $globalBorderRadius);
+            @include S(margin-bottom, 4px);
+            @include S(padding, 5px, 10px);
+            @include S(grid-row-gap, 1px);
+            @include S(height, 85px);
+            grid-template-rows: #{D(20px)} auto;
+
+            &.hidden {
+                display: none;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            @include DarkThemeOverride {
+                background: $darkModeControlsBackground;
+            }
+
+            .icon {
+                @include S(width, 70px);
+                @include S(height, 70px);
+                background: center center / 80% no-repeat;
+                align-self: center;
+                justify-self: center;
+                grid-column: 1;
+                grid-row: 1 / 4;
+            }
+
+            .info {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                grid-column: 2;
+                grid-row: 2 / 3;
+                .title {
+                    @include PlainText;
+                    display: flex;
+                    align-items: center;
+                    flex-direction: row-reverse;
+                    justify-content: flex-end;
+                    color: $colorGreenBright;
+                }
+                .description {
+                    @include PlainText;
+                    color: lighten($colorGreenBright, 20);
+                    align-self: start;
+                    justify-self: end;
+                }
+            }
+
+            button.reset {
+                grid-column: 3;
+                grid-row: 2;
+                align-self: center;
+                justify-self: end;
+
+                transition: all 0.2s ease-in-out;
+                transition-property: background-color, opacity;
+
+                background-color: $colorGreenBright;
+                color: #fff;
+
+                &:hover {
+                    background-color: lighten($colorGreenBright, 10);
+                }
+            }
+
+            &.reset {
+                button.reset {
+                    background-color: $colorRedBright;
+
+                    &:hover {
+                        background-color: darken($colorRedBright, 10);
+                    }
+                }
+
+                .info {
+                    .title {
+                        font-weight: bold;
+                        color: $colorRedBright;
+                    }
+                    .description {
+                        color: lighten($colorRedBright, 10);
+                    }
+                }
+            }
+
+            &:not(.unlocked) {
+                button.reset {
+                    background-color: #aaa;
+                    cursor: default;
+                    pointer-events: none;
+                    opacity: 0.3;
+                }
+                .info {
+                    .title {
+                        color: black;
+                        @include DarkThemeOverride {
+                            color: #fff;
+                        }
+                    }
+                    .description {
+                        color: #aaa;
+                    }
+                }
+            }
+        }
+    }
+}

src/css/ingame_hud/game_menu.scss

@@ -8,6 +8,10 @@
 
     backdrop-filter: blur(D(1px));
 
+    .stats ~ .achievements {
+        grid-column: 1;
+    }
+
     > button,
     > .button {
         @include PlainText;
@@ -53,12 +57,20 @@
             }
         }
 
+        &.achievements {
+            grid-column: 3;
+            & {
+                /* @load-async */
+                background-image: uiResource("icons/achievements.png");
+            }
+        }
+
         &.save {
             & {
                 /* @load-async */
                 background-image: uiResource("icons/save.png");
             }
-            grid-column: 3;
+            grid-column: 4;
             @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
                 0% {
                     transform: scale(1, 1);
@@ -92,7 +104,7 @@
         }
 
         &.settings {
-            grid-column: 4;
+            grid-column: 5;
             & {
                 /* @load-async */
                 background-image: uiResource("icons/settings_menu_settings.png");

src/css/main.scss

@@ -32,6 +32,7 @@
 @import "states/puzzle_menu";
 @import "states/mods";
 
+@import "ingame_hud/achievements.scss";
 @import "ingame_hud/buildings_toolbar";
 @import "ingame_hud/building_placer";
 @import "ingame_hud/beta_overlay";
@@ -109,6 +110,7 @@ ingame_HUD_SandboxController,
 ingame_HUD_BetaOverlay,
 
 // Dialogs
+ingame_HUD_Achievements,
 ingame_HUD_Shop,
 ingame_HUD_Statistics,
 ingame_HUD_ShapeViewer,

src/css/resources.scss

@@ -62,14 +62,28 @@ $buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2,
 }
 
 $icons: notification_saved, notification_success, notification_upgrade, notification_info,
-    notification_warning, notification_error;
+    notification_warning, notification_error, notification_achievement;
 @each $icon in $icons {
     [data-icon="icons/#{$icon}.png"] {
         /* @load-async */
         background-image: uiResource("res/ui/icons/#{$icon}.png") !important;
     }
 }
 
+$achievements: reset, hidden, belt500Tiles, blueprint100k, blueprint1m, completeLvl26, cutShape, darkMode,
+    destroy1000, irrelevantShape, level100, level50, logoBefore18, mam, mapMarkers15, noBeltUpgradesUntilBp,
+    noInverseRotater, oldLevel17, openWires, paintShape, place5000Wires, placeBlueprint, placeBp1000, play1h,
+    play10h, play20h, produceLogo, produceMsLogo, produceRocket, rotateShape, speedrunBp30, speedrunBp60,
+    speedrunBp120, stack4Layers, stackShape, store100Unique, storeShape, throughputBp25, throughputBp50,
+    throughputLogo25, throughputLogo50, throughputRocket10, throughputRocket20, trash1000, unlockWires,
+    upgradesTier5, upgradesTier8;
+@each $achievement in $achievements {
+    [data-icon="achievements/#{$achievement}.png"] {
+        /* @load-async */
+        background-image: uiResource("res/ui/achievements/#{$achievement}.png") !important;
+    }
+}
+
 $languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW, zh-CN, nb, mt-MT, ar, nl, vi,
     th, hu, pl, ja, kor, no, pt-PT, fi, ro, he;