Adding feature to highlight items in the Bazaar when it's below the v…

…endor price. (#835)

- requires turning it on in options
- requires an API key
- works in FF & Chrome; including when the viewport is small (e.g., mobile sized)
- updated manifest for new files
- updated CONTRIBUTING for a bit more on testing in browsers
- added option to settings & global defaults

CONTRIBUTING.md

@@ -78,6 +78,11 @@ We have prettier formatting to help you follow our coding conventions.
 
 ## Development Tips
 
+### Testing
+
+* Chrome: [load an unpacked extension](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked)
+* Firefox: [install a temporary extension](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/)
+
 ##### Ignore local manifest.json changes.
 
 This can be used to remove the Firefox only setting to avoid warnings in Chromium-browsers.

extension/changelog.json

@@ -8,7 +8,8 @@
 			"fixes": [{ "message": "Fix the company id showing something wrong.", "contributor": "DeKleineKobini" }],
 			"changes": [
 				{ "message": "Change layout of preferences page on mobiles.", "contributor": "TheFoxMan" },
-				{ "message": "Correctly list Love Juice cooldown.", "contributor": "TheFoxMan" }
+				{ "message": "Correctly list Love Juice cooldown.", "contributor": "TheFoxMan" },
+				{ "message": "Option to highlight items in Bazaars that have a ccost less than the vendor price.", "contributor": "TravisTheTechie" }
 			],
 			"removed": []
 		}

extension/manifest.json

@@ -247,8 +247,14 @@
 		},
 		{
 			"matches": ["https://www.torn.com/bazaar.php*"],
-			"css": ["scripts/features/bazaar-worth/ttBazaarWorth.css"],
-			"js": ["scripts/features/bazaar-worth/ttBazaarWorth.entry.js"],
+			"css": [
+				"scripts/features/bazaar-worth/ttBazaarWorth.css",
+				"scripts/features/bazaar-sub-vendor-items/ttSubVendorPriceItems.css"
+			],
+			"js": [
+				"scripts/features/bazaar-worth/ttBazaarWorth.entry.js",
+				"scripts/features/bazaar-sub-vendor-items/ttSubVendorPriceItems.entry.js"
+			],
 			"run_at": "document_start"
 		},
 		{

extension/pages/settings/settings.html

@@ -1235,6 +1235,10 @@ <h2>
 							<input id="bazaar-maxBuyIgnoreCash" type="checkbox" />
 							<label for="bazaar-maxBuyIgnoreCash">Ignore cash on hand for fill max button.</label>
 						</div>
+						<div class="option">
+							<input id="bazaar-highlightSubVendorItems" type="checkbox" />
+							<label for="bazaar-highlightSubVendorItems">Highlight items less than the vendor sell price.</label>
+						</div>
 					</section>
 					<section name="gym">
 						<div class="header">Gym</div>

extension/scripts/features/bazaar-sub-vendor-items/ttSubVendorPriceItems.css

@@ -0,0 +1,7 @@
+.tt-sub-vendor-highlight {
+	background-color: var(--tt-color-green--40) !important;
+}
+
+.tt-sub-vendor-highlight [class*=buyForm___] {
+	background-color: #f1f1f1 !important;
+}

extension/scripts/features/bazaar-sub-vendor-items/ttSubVendorPriceItems.entry.js

@@ -0,0 +1,70 @@
+"use strict";
+
+(async () => {
+	await featureManagerLoaded();
+
+	const CLASS_NAME = "tt-sub-vendor-highlight";
+	let observer;
+
+	// noinspection JSIncompatibleTypesComparison
+	featureManager.registerFeature(
+		"Highlight Cheap Items",
+		"bazaar",
+		() => settings.pages.bazaar.highlightSubVendorItems !== "",
+		initialise,
+		highlightEverything,
+		removeHighlights,
+		{
+			storage: ["settings.pages.bazaar.highlightSubVendorItems"],
+		},
+		() => {
+			if (!hasAPIData()) return "No API access.";
+		}
+	);
+
+	async function initialise() {
+		observer = new MutationObserver(() => { highlightEverything() });
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+	}
+
+	function highlightEverything() {
+		const items = [...document.findAll("[class*='item__'] > [class*='itemDescription__']")]	
+			.map((element) => { 
+				return { 
+					element,
+					id: element.find("img").src.getNumber(), 
+					price: element.find("[class*='price___']").textContent.getNumber()
+				} 
+			})
+			.filter((item) => item.element);
+
+		items.forEach((item) => handleItem(item));
+	}
+
+	/**
+	 * Should highlight the given item based on the price?
+	 * @param id {number|string}
+	 * @param price {number}
+	 * @returns {boolean}
+	 */
+	function shouldHighlight(id, price) {
+		return price < torndata.items[id]?.sell_price;
+	}
+
+	function handleItem(item) {
+		if (shouldHighlight(item.id, item.price)) {
+			item.element.parentElement.classList.add(CLASS_NAME);
+		} else {
+			item.element.parentElement.classList.remove(CLASS_NAME);
+		}
+	}
+
+	function removeHighlights() {
+		observer?.disconnect();
+		document.findAll(`.${CLASS_NAME}`)
+			.forEach((item) => item.classList.remove(CLASS_NAME));
+	}
+})();

extension/scripts/global/globalData.js

@@ -570,6 +570,7 @@ const DEFAULT_STORAGE = {
 				worth: new DefaultSetting({ type: "boolean", defaultValue: true }),
 				fillMax: new DefaultSetting({ type: "boolean", defaultValue: true }),
 				maxBuyIgnoreCash: new DefaultSetting({ type: "boolean", defaultValue: false }),
+				highlightSubVendorItems: new DefaultSetting({ type: "boolean", defaultValue: false }),
 			},
 			trade: {
 				itemValues: new DefaultSetting({ type: "boolean", defaultValue: true }),

extension/scripts/global/team.js

@@ -217,6 +217,13 @@ const TEAM = [
 		torn: 2383326,
 		color: "white", // No explicit color chosen.
 	},
+	{
+		name: "TravisTheTechie",
+		title: "Developer",
+		core: false,
+		torn: 3549588,
+		color: "firebrick", 
+	},
 ];
 
 const CONTRIBUTORS = TEAM.filter(({ title, color }) => title.includes("Developer") || color).reduce(