Rework FPlayers and remove remnants of steamchart

src/css/augmentedsteam.css

@@ -245,40 +245,6 @@ img.astats_icon {
   background-color: #0003 !important;
 }
 
-.chart-stat {
-  float: left;
-  text-align: center;
-  width: 120px;
-  margin-top: 25px;
-  padding-left: 15px;
-}
-.chart-stat span {
-  font-size: 1.8em;
-  font-weight: 300;
-}
-
-.chart-content {
-  display: flex;
-  background-color: transparent;
-  width: 592px;
-  padding: 2px 12px;
-  overflow: hidden;
-  justify-content: space-between;
-  align-items: flex-end;
-}
-
-.chart-footer {
-  font-size: 11px;
-  float: right;
-  padding-top: 5px;
-  margin-bottom: 20px;
-}
-
-#steam-charts .chart-footer,
-#steam-spy .chart-footer {
-  padding-right: 13px;
-}
-
 .es_each {
   color: #626366;
   font-size: 11px;
@@ -1241,6 +1207,21 @@ video.highlight_movie:hover + .html5_video_overlay {
   font-size: 14px;
 }
 
+/***************************************
+ * App pages
+ * FPlayers
+ **************************************/
+.as_players {
+  line-height: 20px;
+}
+.as_players_stat {
+  color: #8f98a0;
+}
+.as_players_num {
+  float: right;
+  color: #67c1f5;
+}
+
 /***************************************
  * Store and Community
  * add_language_warning(),
@@ -2006,8 +1987,8 @@ video.highlight_movie:hover + .html5_video_overlay {
 }
 
 /***************************************
- * Store app pages
- * addMetacriticUserScore(),addOpenCritic()
+ * App pages
+ * FMetacriticUserScore, FOpenCritic
  **************************************/
 #game_area_userscore {
   margin-top: 6px;
@@ -2069,8 +2050,8 @@ video.highlight_movie:hover + .html5_video_overlay {
 }
 
 /***************************************
- * Store app pages
- * addBadgeProgress()
+ * App pages
+ * FBadgeProgress
  **************************************/
 .es_badges_progress_block .es_cards_numbers {
   padding-top: 10px;
@@ -2094,7 +2075,7 @@ video.highlight_movie:hover + .html5_video_overlay {
 }
 
 /***************************************
- * Store app pages
+ * App pages
  * FDLCCheckboxes
  **************************************/
 #es_selected_btn {

src/html/options.html

@@ -187,7 +187,7 @@ <h3 data-locale-text="options.store_general_thirdparty">Options for information
                     <div data-dynamic="showoc"></div>
                     <div data-dynamic="showhltb"></div>
                     <div data-dynamic="showwsgf"></div>
-                    <div data-dynamic="show_steamchart_info"></div>
+                    <div data-dynamic="show_players_info"></div>
                     <div data-dynamic="showastatslink"></div>
                     <div data-dynamic="showitadlinks"></div>
                     <div data-dynamic="showsteamdb"></div>

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

@@ -35,7 +35,7 @@ import FReplaceDevPubLinks from "./FReplaceDevPubLinks";
 import FReviewToggleButton from "./FReviewToggleButton";
 import FSaveReviewFilters from "./FSaveReviewFilters";
 import FShowCoupon from "./FShowCoupon";
-import FPlayers from "./FSteamChart";
+import FPlayers from "./FPlayers";
 import FSteamDeckCompatibility from "./FSteamDeckCompatibility";
 import FSteamPeek from "./FSteamPeek";
 import FSupportInfo from "./FSupportInfo";

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

@@ -0,0 +1,32 @@
+import {HTML, Localization} from "../../../../modulesCore";
+import {Feature} from "../../../modulesContent";
+
+export default class FPlayers extends Feature {
+
+    async checkPrerequisites() {
+        if (this.context.isDlcLike || this.context.isVideoOrHardware) {
+            return false;
+        }
+
+        const result = await this.context.data;
+        if (!result || !result.players) {
+            return false;
+        }
+
+        this._data = result.players;
+        return true;
+    }
+
+    apply() {
+
+        HTML.afterBegin(".rightcol.game_meta_data",
+            `<div class="block responsive_apppage_details_right heading">${Localization.str.charts.current}</div>
+            <div class="block responsive_apppage_details_right as_players">
+                <div class="block_content_inner">
+                    <div class="as_players_stat">${Localization.str.charts.playing_now}:<span class="as_players_num">${Number(this._data.recent)}</span></div>
+                    <div class="as_players_stat">${Localization.str.charts.peaktoday}:<span class="as_players_num">${Number(this._data.peak_today)}</span></div>
+                    <div class="as_players_stat">${Localization.str.charts.peakall}:<span class="as_players_num">${Number(this._data.peak_all)}</span></div>
+                </div>
+            </div>`);
+    }
+}

src/js/Content/Features/Store/Common/FCustomizer.js

@@ -76,7 +76,6 @@ export default class FCustomizer extends Feature {
             .add("reviews", "#game_area_reviews")
             .add("about", getParentEl("#game_area_description"))
             .add("contentwarning", getParentEl("#game_area_content_descriptors"))
-            .add("steamchart", "#steam-charts", Localization.str.charts.current)
             .add("sysreq", getParentEl(".sys_req"))
             .add("legal", getParentEl("#game_area_legal"), Localization.str.apppage_legal)
             .add("moredlcfrombasegame", "#moredlcfrombasegame_block")
@@ -151,24 +150,11 @@ FCustomizer.Customizer = class {
     }
 
     _setEnabled(name, enabled) {
-        const optionName = this.constructor.asFeatures.get(name);
-        if (typeof optionName !== "undefined") {
-            if (enabled) {
-                this.context.triggerCallbacks(name);
-            }
-            return SyncedStorage.set(optionName, enabled);
-        }
-
         this.settings[name] = enabled;
         return SyncedStorage.set(this.settingsName, this.settings);
     }
 
     _isEnabled(name) {
-        const optionName = this.constructor.asFeatures.get(name);
-        if (typeof optionName !== "undefined") {
-            return SyncedStorage.get(optionName);
-        }
-
         const enabled = this.settings[name];
         return (typeof enabled === "undefined") || enabled;
     }
@@ -178,12 +164,6 @@ FCustomizer.Customizer = class {
         let _text = text;
         let elements;
 
-        const enabled = this._isEnabled(name);
-
-        if (enabled && this.constructor.asFeatures.has(name)) {
-            this.context.triggerCallbacks(name);
-        }
-
         if (typeof targets === "string") {
             elements = document.querySelectorAll(targets);
         } else if (targets instanceof Element) {
@@ -194,6 +174,8 @@ FCustomizer.Customizer = class {
             return this;
         }
 
+        const enabled = this._isEnabled(name);
+
         for (const element of elements) {
 
             if (getComputedStyle(element).display === "none" && !forceShow) {
@@ -266,9 +248,3 @@ FCustomizer.Customizer = class {
     }
 };
 
-/**
- * Maps customizer keys corresponding to AS features to their respective storage keys
- */
-FCustomizer.Customizer.asFeatures = new Map([
-    ["steamchart", "show_steamchart_info"],
-]);

src/js/Content/Modules/UpdateHandler.js

@@ -143,6 +143,7 @@ class UpdateHandler {
             SyncedStorage.remove("addtocart_no_redirect");
             SyncedStorage.remove("show_steamspy_info");
             SyncedStorage.remove("show_survey_info");
+            SyncedStorage.remove("show_steamchart_info");
         }
     }
 }

src/js/Core/Storage/SyncedStorage.ts

@@ -134,7 +134,6 @@ const DEFAULTS = {
         "reviews": true,
         "about": true,
         "contentwarning": true,
-        "steamchart": true,
         "sysreq": true,
         "legal": true,
         "morelikethis": true,
@@ -161,7 +160,7 @@ const DEFAULTS = {
     },
 
     "show_package_info": false,
-    "show_steamchart_info": true,
+    "show_players_info": true,
     "show_early_access": true,
     "show_alternative_linux_icon": false,
     "show_itad_button": false,

src/js/Options/Modules/Data/OptionsSetup.js

@@ -117,7 +117,7 @@ export default {
     "showoc": "options.opencritic",
     "showhltb": "options.hltb",
     "showwsgf": "options.wsgf",
-    "show_steamchart_info": "options.show_steamchart_info",
+    "show_players_info": "options.show_players_info",
     "showastatslink": "options.show_astatslink",
     "showitadlinks": "options.itadlinks",
     "showsteamdb": "options.steamdb",

src/localization/en.json

@@ -412,7 +412,7 @@
         "guest": "Items you have a guest pass for",
         "collection": "Items in your ITAD Collection",
         "waitlist": "Items in your ITAD Waitlist",
-        "show_steamchart_info": "Show SteamCharts.com information",
+        "show_players_info": "Show player count information",
         "showallstats": "Show playtime stats on \"All Games\" page",
         "lowestprice_onwishlist": "Show when hovering over wishlist items",
         "steamrepapi": "Show SteamRep status",