Refactor app page achievement bar

src/css/augmentedsteam.css

@@ -974,25 +974,6 @@ video.highlight_movie:hover + .html5_video_overlay {
   transition: bottom 0.2s linear;
 }
 
-/***************************************
- * App pages
- * FAchievementBar
- **************************************/
-.es-achieveBar-store {
-  float: right;
-}
-/* Taken from: https://community.cloudflare.steamstatic.com/public/css/skin_1/playerstats_generic.css */
-.es-achieveBar-store .achieveBar {
-  background: #3a3a3a;
-  padding: 1px;
-  border: 1px solid #aeaeae;
-  width: 176.9px;
-}
-.es-achieveBar-store .achieveBarProgress {
-  height: 8px;
-  background-color: #aeaeae;
-}
-
 /***************************************
  * App pages
  * FReviewToggleButton

src/js/Background/Modules/SteamCommunityApi.js

@@ -14,10 +14,6 @@ class SteamCommunityApi extends Api {
         return SteamCommunityApi.getPage(`/my/gamecards/${appid}`, border ? {"border": 1} : {}, true);
     }
 
-    static stats(path, appid) {
-        return SteamCommunityApi.getPage(`${path}/stats/${appid}`, {}, true);
-    }
-
     static async getInventory(contextId) {
         const login = LocalStorage.get("login");
         if (!login.steamId) {

src/js/Background/background.ts

@@ -100,7 +100,6 @@ const actionCallbacks = new Map([
     ["logout", SteamCommunityApi.logout],
     ["storecountry", SteamCommunityApi.storeCountry],
     ["cards", SteamCommunityApi.cards],
-    ["stats", SteamCommunityApi.stats],
     ["coupon", SteamCommunityApi.getCoupon],
     ["hasgiftsandpasses", SteamCommunityApi.hasGiftsAndPasses],
     ["hascoupon", SteamCommunityApi.hasCoupon],

src/js/Content/Features/Store/App/CApp.js

@@ -8,7 +8,7 @@ import FExtraLinks from "../Common/FExtraLinks";
 import FITADPrices from "../Common/FITADPrices";
 import FRegionalPricing from "../Common/FRegionalPricing";
 import {UserNotes} from "../Common/UserNotes";
-import FAchievementBar from "./FAchievementBar";
+import {FAchievementBar} from "./FAchievementBar.svelte";
 import FAStatsLink from "./FAStatsLink";
 import FBadgeProgress from "./FBadgeProgress";
 import FDemoAbovePurchase from "./FDemoAbovePurchase";

src/js/Content/Features/Store/App/FAchievementBar.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" context="module">
+    // @ts-ignore
+    import self_ from "./FAchievementBar.svelte";
+    import {SyncedStorage} from "../../../../modulesCore";
+    import {Feature, RequestData, User} from "../../../modulesContent";
+    import type {CApp} from "./CApp";
+
+    export class FAchievementBar extends Feature<CApp> {
+
+        override checkPrerequisites(): boolean {
+            return SyncedStorage.get("showachinstore")
+                && this.context.hasAchievements
+                && this.context.isOwnedAndPlayed;
+        }
+
+        override async apply(): Promise<void> {
+            let response;
+
+            try {
+                const token = await User.accessToken;
+                response = await RequestData.post(
+                    `https://api.steampowered.com/IPlayerService/GetAchievementsProgress/v1/?access_token=${token}`,
+                    {"steamid": User.steamId, "appids[0]": this.context.communityAppid},
+                    {"credentials": "omit"}
+                );
+            } catch (err) {
+                console.error(err);
+            }
+
+            response = response?.response?.achievement_progress?.[0];
+
+            if (!response) {
+                console.warn("Failed to retrieve achievement stats");
+                return;
+            }
+
+            /**
+             * If you don't own the game, all values will be 0,
+             * just as if you own the game but have no achievements,
+             * so it's important to check for ownership `this.context.isOwnedAndPlayed`.
+             */
+            const {unlocked, total, percentage} = response;
+
+            const target = document.querySelector("#my_activity")!;
+
+            (new self_({
+                target,
+                anchor: target.firstElementChild,
+                props: {
+                    unlocked,
+                    total,
+                    percentage: Math.round(percentage)
+                }
+            }));
+        }
+    }
+</script>
+
+<script lang="ts">
+    import {Localization} from "../../../../modulesCore";
+
+    export let unlocked: number
+    export let total: number;
+    export let percentage: number;
+
+    let achievementStr = Localization.str.achievements.summary
+        .replace("__unlocked__", unlocked)
+        .replace("__total__", total)
+        .replace("__percentage__", percentage);
+</script>
+
+
+<div class="es-achieveBar-store">
+    <div>{achievementStr}</div>
+    <div class="achieveBar">
+        <div style="width: {percentage}%;" class="achieveBarProgress"></div>
+    </div>
+</div>
+
+
+<style>
+    .es-achieveBar-store {
+        float: right;
+    }
+    .es-achieveBar-store .achieveBar {
+        background: #3a3a3a;
+        padding: 1px;
+        border: 1px solid #aeaeae;
+        width: 176.9px;
+    }
+    .es-achieveBar-store .achieveBarProgress {
+        height: 8px;
+        background-color: #aeaeae;
+    }
+</style>

src/js/Content/modulesContent.js

@@ -25,7 +25,6 @@ export {Messenger} from "./Modules/Messenger";
 export {Price} from "./Modules/Price";
 export {Prices} from "./Modules/Prices/Prices";
 export {RequestData} from "./Modules/RequestData";
-export {Stats} from "./Modules/Stats";
 export {SteamId, SteamIdDetail} from "./Modules/SteamId";
 export {UpdateHandler} from "./Modules/UpdateHandler";
 export {User} from "./Modules/User";