Refactor FPlayers to a svelte feature

src/css/augmentedsteam.css

@@ -1167,20 +1167,6 @@ 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

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

@@ -28,14 +28,14 @@ import FOwnedElsewhere from "./FOwnedElsewhere";
 import FPackageInfoButton from "./FPackageInfoButton";
 import FPackBreakdown from "./FPackBreakdown";
 import FPatchHighlightPlayer from "./FPatchHighlightPlayer";
+import {FPlayers} from "./FPlayers.svelte";
 import FPurchaseDate from "./FPurchaseDate";
 import FRemoveBroadcasts from "./FRemoveBroadcasts";
 import FRemoveDupeScreenshots from "./FRemoveDupeScreenshots";
 import FReplaceDevPubLinks from "./FReplaceDevPubLinks";
 import FReviewToggleButton from "./FReviewToggleButton";
 import FSaveReviewFilters from "./FSaveReviewFilters";
 import FShowCoupon from "./FShowCoupon";
-import FPlayers from "./FPlayers";
 import FSteamDeckCompatibility from "./FSteamDeckCompatibility";
 import FSteamPeek from "./FSteamPeek";
 import FSupportInfo from "./FSupportInfo";
@@ -136,10 +136,6 @@ export class CApp extends CStoreBase {
         this.userNotes = new UserNotes();
         this.data = this.storePageDataPromise().catch(err => { console.error(err); });
 
-        // The customizer has to wait on this data to be added in order to find the HTML elements
-        FCustomizer.dependencies = [FPlayers];
-        FCustomizer.weakDependency = true;
-
         // FPackBreakdown skips purchase options with a package info button to avoid false positives
         FPackageInfoButton.dependencies = [FPackBreakdown];
         FPackageInfoButton.weakDependency = true;

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

@@ -0,0 +1,94 @@
+<script lang="ts" context="module">
+    // @ts-ignore
+    import self_ from "./FPlayers.svelte";
+    import {Feature} from "../../../modulesContent";
+    import type {CApp} from "./CApp";
+
+    export class FPlayers extends Feature<CApp> {
+        private _data: any;
+
+        override async checkPrerequisites(): Promise<boolean> {
+            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;
+        }
+
+        override apply(): void {
+            let target = document.querySelector(".rightcol.game_meta_data");
+            if (!target) {
+                throw new Error("Node not found");
+            }
+
+            (new self_({
+                target,
+                anchor: target.firstElementChild,
+                props: {
+                    recent: Number(this._data.recent),
+                    peakToday: Number(this._data.peak_today),
+                    peakAll: Number(this._data.peak_all)
+                }
+            }));
+        }
+    }
+</script>
+
+<script lang="ts">
+    import {Localization} from "../../../../modulesCore";
+
+    export let recent: number
+    export let peakToday: number;
+    export let peakAll: number;
+
+    let formatter = new Intl.NumberFormat(navigator.language);
+</script>
+
+
+<div class="block responsive_apppage_details_right heading">{Localization.str.charts.current}</div>
+<div class="block responsive_apppage_details_right">
+    <div class="block_content_inner as_players">
+        <div class="as_stat">
+            <span>{Localization.str.charts.playing_now}</span>
+            {formatter.format(recent)}
+        </div>
+        <div class="as_stat">
+            <span>{Localization.str.charts.peaktoday}</span>
+            {formatter.format(peakToday)}
+        </div>
+        <div class="as_stat">
+            <span>{Localization.str.charts.peakall}</span>
+            {formatter.format(peakAll)}
+        </div>
+    </div>
+</div>
+
+
+<style>
+    .as_players {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+    .as_stat {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        color: #67c1f5;
+        font-size: 15px;
+    }
+
+    span {
+        font-family: Arial, Helvetica, sans-serif;
+        color: #556772;
+        font-weight: normal;
+        text-transform: uppercase;
+        font-size: 10px;
+    }
+</style>