Add owns column to store table

Author: Citrinate

src/components/store_table.js

@@ -20,6 +20,7 @@ export default class StoreTable extends Table {
 	};
 
 	#actionButtonElement;
+	#oldNotificationElement;
 
 	static TAB = {
 		GENERAL: 0,
@@ -75,6 +76,21 @@ export default class StoreTable extends Table {
 		}
 
 		// Build Table Header
+		const cachedNotificationElement = CreateElement("span", {
+			text: "(Cached)"
+		});
+
+		BindTooltip(cachedNotificationElement, "The information below was loaded from cache and may no longer be accurate.");
+
+		this.#oldNotificationElement = CreateElement("span", {
+			text: "(Old)",
+			style: {
+				display: "none",
+			}
+		});
+
+		BindTooltip(this.#oldNotificationElement, "The information below may be outdated and will be updated when the page is refreshed.");
+
 		const tableHeaderElement = CreateElement("thead", {
 			children: [
 				CreateElement("tr", {
@@ -175,6 +191,26 @@ export default class StoreTable extends Table {
 								})
 							]
 						}),
+						this.#store.inventoryLoaded && CreateElement("th", {
+							class: "cs2s_table_store_owned_column",
+							children: [
+								CreateElement("span", {
+									class: "cs2s_table_column",
+									id: "owned_column",
+									text: "Owned",
+									children: [
+										CreateElement("div", {
+											class: "cs2s_table_column_sort",
+										})
+									],
+									onclick: (event) => {
+										this._SortRows({ event: event, columns: ["owned"]});
+									}
+								}),
+								this.#store.inventoryLoadedFromCache && cachedNotificationElement,
+								this.#oldNotificationElement
+							]
+						}),
 						CreateElement("th", {
 							class: "cs2s_table_store_price_column",
 							children: [
@@ -319,6 +355,10 @@ export default class StoreTable extends Table {
 						html: `${item.section_name} — ${item.team_1} (${item.team_1_score}) — ${item.team_2} (${item.team_2_score})`
 					})
 				),
+				this.#store.inventoryLoaded && CreateElement("td", {
+					class: "cs2s_table_store_owned_column",
+					text: item.owned
+				}),
 				CreateElement("td", {
 					class: "cs2s_table_store_price_column",
 					children: [
@@ -585,7 +625,14 @@ export default class StoreTable extends Table {
 						}
 
 						newTab.location.href = purchaseUrl;
-						this.#inventoryChanged = true;
+
+						if (!this.#inventoryChanged) {
+							this.#inventoryChanged = true;
+
+							if (this.#store.inventoryLoaded && !this.#store.inventoryLoadedFromCache) {
+								this.#oldNotificationElement.style.display = "";
+							}
+						}
 
 						loadingPopup.Hide();
 					} catch (e) {

src/components/table.js

@@ -255,9 +255,9 @@ export default class Table {
 
 			if (!resetSort) {
 				if (asc) {
-					options.event.target.querySelector(".cs2s_table_column_sort").classList.add("cs2s_table_column_sort_asc");
+					options.event.currentTarget.querySelector(".cs2s_table_column_sort").classList.add("cs2s_table_column_sort_asc");
 				} else {
-					options.event.target.querySelector(".cs2s_table_column_sort").classList.add("cs2s_table_column_sort_desc");
+					options.event.currentTarget.querySelector(".cs2s_table_column_sort").classList.add("cs2s_table_column_sort_desc");
 				}
 			}
 		}

src/core/script.js

@@ -934,6 +934,8 @@ class Script {
 					return OPERATION_ERROR.FAILED_TO_LOAD;
 				}
 
+				const inventory = await this.GetInventory(options);
+
 				try {
 					await store.LoadStoreContents(progressCallback);
 				} catch (e) {
@@ -942,6 +944,10 @@ class Script {
 					return e.OPERATION_ERROR ?? OPERATION_ERROR.FAILED_TO_LOAD;
 				}
 
+				if (inventory instanceof Inventory) {
+					store.LoadInventory(inventory);
+				}
+
 				return store;
 			});
 		} 

src/cs2/items/store.js

@@ -5,6 +5,8 @@ import Icons from './icons';
 
 export default class Store {
 	items;
+	inventoryLoaded = false;
+	inventoryLoadedFromCache;
 
 	#storeData;
 	#tournamentData;
@@ -90,8 +92,8 @@ export default class Store {
 					const map_name = Constant.TOURNAMENT_MAPS[match.roundstats_legacy.map_id];
 					const stage_id = match.roundstats_legacy.reservation.tournament_event.event_stage_id;
 					const section = this.#tournamentData.tournamentinfo.sections.find(section => section.groups.find(group => group.stage_ids.includes(stage_id)));
-					const team_1 = match.roundstats_legacy.reservation.tournament_teams[0].team_name;
-					const team_2 = match.roundstats_legacy.reservation.tournament_teams[1].team_name;
+					const team_1 = match.roundstats_legacy.reservation.tournament_teams[0];
+					const team_2 = match.roundstats_legacy.reservation.tournament_teams[1];
 					const is_highlight = section.sectionid >= highlightSectionIDStart;
 					const hash_name = this.#GetHashName(item, map_name, is_highlight);
 					const non_highlight_hash_name = this.#GetHashName(item, map_name); // Highlight packages use the same icons as non-highlight packages
@@ -126,13 +128,16 @@ export default class Store {
 						layout_weight: this.#storeData.price_sheet.store_banner_layout[item.def_index]?.w,
 						tournament_id: item.tournament_id,
 						requires_supplemental_data: item.requires_supplemental_data,
+						stage_id: stage_id,
 						section_id: section.sectionid,
 						section_name: section.name,
-						team_1: team_1,
+						team_1: team_1.team_name,
+						team_1_id: team_1.team_id,
 						team_1_score: match.roundstats_legacy.team_scores[0],
-						team_2: team_2,
+						team_2: team_2.team_name,
+						team_2_id: team_2.team_id,
 						team_2_score: match.roundstats_legacy.team_scores[1],
-						teams_normalized: `${team_1} ${team_2}`.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(),
+						teams_normalized: `${team_1.team_name} ${team_2.team_name}`.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(),
 						match_result: match.roundstats_legacy.match_result
 					});
 				}
@@ -147,6 +152,36 @@ export default class Store {
 		await Icons.FetchMarketIcons(new Set([...storeItemsToGetIconsFor, ...marketItemsToGetIconsFor]), progressCallback);
 	}
 
+	LoadInventory(inventory) {
+		for (const item of this.items) {
+			item.owned = [...inventory.items, ...inventory.storedItems].filter(x => {
+				if (x.iteminfo.def_index == item.id) {
+					return true;
+				}
+
+				// Coupon items
+				if (!item.requires_supplemental_data && item.hash_name && x.full_name == item.hash_name) {
+					return true;
+				}
+
+				// Souvenir packages
+				if (item.requires_supplemental_data
+					&& x.full_name == item.hash_name
+					&& x.attributes["tournament event stage id"] == item.stage_id
+					&& x.attributes["tournament event team0 id"] == item.team_1_id
+					&& x.attributes["tournament event team1 id"] == item.team_2_id
+				) {
+					return true;
+				}
+
+				return false;
+			}).length;
+		}
+
+		this.inventoryLoaded = true;
+		this.inventoryLoadedFromCache = inventory.loadedFromCache;
+	}
+
 	FormatCurrency(valueInCents) {
 		let currencyFormat = (valueInCents / 100).toFixed(2);
 

src/css/style.css

@@ -735,6 +735,14 @@
 		width: 450px;
 	}
 
+	.cs2s_table_store_owned_column {
+		width: 165px;
+
+		.cs2s_has_tooltip {
+			color: #737373;
+		}
+	}
+
 	.cs2s_table_store_price_column {
 		width: 200px;
 
@@ -1073,6 +1081,7 @@
 		font-weight: normal;
 		font-size: 13px;
 		max-width: 275px;
+		height: 20px;
 
 		&::before {
 			content: "";