From 730f0e549d908b50fe0cb5fa67699a572c033419 Mon Sep 17 00:00:00 2001 From: candela97 <54083835+candela97@users.noreply.github.com> Date: Thu, 14 Mar 2024 04:28:25 +0800 Subject: [PATCH] Rework FPlayers and remove remnants of steamchart --- src/css/augmentedsteam.css | 59 +++++++------------ src/html/options.html | 2 +- src/js/Content/Features/Store/App/CApp.js | 2 +- .../Features/Store/App/CustomizerFeature.js | 41 ------------- src/js/Content/Features/Store/App/FPlayers.js | 33 +++++++++++ .../Content/Features/Store/App/FSteamChart.js | 32 ---------- .../Features/Store/Common/FCustomizer.js | 28 +-------- src/js/Content/Modules/UpdateHandler.js | 1 + src/js/Core/Storage/SyncedStorage.ts | 3 +- src/js/Options/Modules/Data/OptionsSetup.js | 2 +- src/localization/en.json | 2 +- 11 files changed, 61 insertions(+), 144 deletions(-) delete mode 100644 src/js/Content/Features/Store/App/CustomizerFeature.js create mode 100644 src/js/Content/Features/Store/App/FPlayers.js delete mode 100644 src/js/Content/Features/Store/App/FSteamChart.js diff --git a/src/css/augmentedsteam.css b/src/css/augmentedsteam.css index 4a943f61d..f55caf1fb 100644 --- a/src/css/augmentedsteam.css +++ b/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 { diff --git a/src/html/options.html b/src/html/options.html index 71e2691d0..ec9457be3 100644 --- a/src/html/options.html +++ b/src/html/options.html @@ -187,7 +187,7 @@

Options for information
-
+
diff --git a/src/js/Content/Features/Store/App/CApp.js b/src/js/Content/Features/Store/App/CApp.js index d35e20fe7..8344ff8d1 100644 --- a/src/js/Content/Features/Store/App/CApp.js +++ b/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"; diff --git a/src/js/Content/Features/Store/App/CustomizerFeature.js b/src/js/Content/Features/Store/App/CustomizerFeature.js deleted file mode 100644 index 51357fe22..000000000 --- a/src/js/Content/Features/Store/App/CustomizerFeature.js +++ /dev/null @@ -1,41 +0,0 @@ -import {HTML, SyncedStorage} from "../../../../modulesCore"; -import {CallbackFeature} from "../../../modulesContent"; - -export default class CustomizerFeature extends CallbackFeature { - constructor(context, id, storageKey, customizerKey) { - super(context); - - this.id = id; - this.storageKey = storageKey; - this.customizerKey = customizerKey; - } - - setup() { - this._initialized = false; - - HTML.beforeBegin( - document.querySelector(".sys_req").parentNode, - `
`, - ); - - if (SyncedStorage.get(this.storageKey)) { - this.callback(this.customizerKey); - } - } - - callback(type) { - if (type !== this.customizerKey || this._initialized) { return; } - this._initialized = true; - - const node = document.getElementById(this.id); - - // This class adds a margin, so it'd waste space if it were already added before - node.classList.add("game_area_description"); - - HTML.inner(node, this.getContent()); - } - - getContent() { - throw new Error("not implemented"); - } -} diff --git a/src/js/Content/Features/Store/App/FPlayers.js b/src/js/Content/Features/Store/App/FPlayers.js new file mode 100644 index 000000000..50f98aec5 --- /dev/null +++ b/src/js/Content/Features/Store/App/FPlayers.js @@ -0,0 +1,33 @@ +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", + `
${Localization.str.charts.current}
+
+
+
${Localization.str.charts.playing_now}:${Number(this._data.recent)}
+
${Localization.str.charts.peaktoday}:${Number(this._data.peak_today)}
+
${Localization.str.charts.peakall}:${Number(this._data.peak_all)}
+
+
` + ); + } +} diff --git a/src/js/Content/Features/Store/App/FSteamChart.js b/src/js/Content/Features/Store/App/FSteamChart.js deleted file mode 100644 index a85c716c4..000000000 --- a/src/js/Content/Features/Store/App/FSteamChart.js +++ /dev/null @@ -1,32 +0,0 @@ -import CustomizerFeature from "./CustomizerFeature"; -import {HTML, Localization} from "../../../../modulesCore"; - -export default class FSteamChart extends CustomizerFeature { - - constructor(context) { - super(context, "steam-charts", "show_steamchart_info", "steamchart"); - } - - async checkPrerequisites() { - if (this.context.isDlcLike || this.context.isVideoOrHardware) { - return false; - } - - const result = await this.context.data; - if (!result || !result.players) { - return false; - } - - this._chart = result.players; - return true; - } - - getContent() { - return `

${Localization.str.charts.current}

-
-
${Number(this._chart.recent)}
${Localization.str.charts.playing_now}
-
${Number(this._chart.peak_today)}
${Localization.str.charts.peaktoday}
-
${Number(this._chart.peak_all)}
${Localization.str.charts.peakall}
-
`; - } -} diff --git a/src/js/Content/Features/Store/Common/FCustomizer.js b/src/js/Content/Features/Store/Common/FCustomizer.js index 5ff6f9ed2..001711b74 100644 --- a/src/js/Content/Features/Store/Common/FCustomizer.js +++ b/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"], -]); diff --git a/src/js/Content/Modules/UpdateHandler.js b/src/js/Content/Modules/UpdateHandler.js index 02d14c9ae..a589237a3 100644 --- a/src/js/Content/Modules/UpdateHandler.js +++ b/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"); } } } diff --git a/src/js/Core/Storage/SyncedStorage.ts b/src/js/Core/Storage/SyncedStorage.ts index f1be9da4a..64f86d1d6 100644 --- a/src/js/Core/Storage/SyncedStorage.ts +++ b/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, diff --git a/src/js/Options/Modules/Data/OptionsSetup.js b/src/js/Options/Modules/Data/OptionsSetup.js index e96dfe3ec..ff9652518 100644 --- a/src/js/Options/Modules/Data/OptionsSetup.js +++ b/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", diff --git a/src/localization/en.json b/src/localization/en.json index ee6d4aa0d..11da5ae65 100644 --- a/src/localization/en.json +++ b/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",