Show icons on popup dashboard.

Idea by HesperCroft [2924630].

extension/changelog.json

@@ -4,7 +4,10 @@
 		"title": "Beta",
 		"date": false,
 		"logs": {
-			"features": [{ "message": "Add button to add debugging information to TT Forum post.", "contributor": "TheFoxMan" }],
+			"features": [
+				{ "message": "Add button to add debugging information to TT Forum post.", "contributor": "TheFoxMan" },
+				{ "message": "Show icons on popup dashboard.", "contributor": "TheFoxMan" }
+			],
 			"fixes": [
 				{ "message": "Fix cleanup function for Bazaar Worth.", "contributor": "TheFoxMan" },
 				{ "message": "Fix Chat features after the addition of timestamps.", "contributor": "TheFoxMan" }

extension/pages/popup/dashboard.css

@@ -30,6 +30,40 @@ a#dashboard > header #country:hover {
 	margin: 0 0 8px 0;
 }
 
+/* Icons */
+
+.icons-wrap {
+	float: right;
+}
+
+.icon {
+	width: 16px;
+	height: 16px;
+	display: inline-block;
+	margin-right: 5px;
+	cursor: pointer;
+	position: relative;
+}
+
+.icon > div {
+	background: url(https://torn.com/images/v2/svg_icons/sprites/user_status_icons_sprite.svg);
+	width: inherit;
+	height: inherit;
+}
+
+.icon.hover_tooltip .hover_tooltip_text {
+	font-size: 12px;
+	font-weight: normal;
+	margin-top: 5px;
+	bottom: unset;
+}
+
+.icon.hover_tooltip .hover_tooltip_text::after {
+	top: unset;
+	bottom: 100%;
+	border-color: transparent transparent black transparent;
+}
+
 /* Bars */
 
 #dashboard a.bar,

extension/pages/popup/popup.html

@@ -9,6 +9,7 @@
 		<link rel="stylesheet" href="../../scripts/global/globalVariables.css" />
 		<link rel="stylesheet" href="../../scripts/global/globalStyle.css" />
 		<link rel="stylesheet" href="../../scripts/global/functions/dom.css" />
+		<link rel="stylesheet" href="../../scripts/global/functions/hover-tooltip.css" />
 		<link rel="stylesheet" href="../../scripts/global/scrollbar.css" />
 		<link rel="stylesheet" href="popup.css" />
 		<link rel="stylesheet" href="dashboard.css" />
@@ -51,7 +52,11 @@ <h2>Welcome to Torn<span class="tools">Tools</span>!</h2>
 		<!-- Dashboard -->
 		<main id="dashboard" class="subpage">
 			<header>
-				<h1><a id="country" href="https://www.torn.com" target="_blank"></a></h1>
+				<h1>
+					<a id="country" href="https://www.torn.com" target="_blank"></a>
+
+					<div class="icons-wrap"></div>
+				</h1>
 				<div class="status-wrap"><h3 id="status"></h3></div>
 			</header>
 

extension/pages/popup/popup.js

@@ -125,6 +125,19 @@ async function setupInitialize() {
 async function setupDashboard() {
 	const dashboard = document.find("#dashboard");
 
+	const iconsWrap = dashboard.find(".icons-wrap");
+	for (const { icon, id, description } of ALL_ICONS) {
+		const iconWrap = document.newElement({
+			type: "div",
+			class: "icon tt-hidden",
+			children: [document.newElement({ type: "div", class: icon, style: { backgroundPosition: `-${(id - 1) * 18}px 0` } })],
+		});
+		iconWrap.classList.add("hover_tooltip");
+		iconWrap.appendChild(document.newElement({ type: "span", class: "hover_tooltip_text", text: description }));
+
+		iconsWrap.appendChild(iconWrap);
+	}
+
 	dashboard.find("#mute-notifications").classList.add(settings.notifications.types.global ? "enabled" : "disabled");
 	dashboard.find("#mute-notifications i").classList.add(settings.notifications.types.global ? "fa-bell" : "fa-bell-slash");
 	dashboard.find("#mute-notifications span").textContent = settings.notifications.types.global ? "Notifications enabled" : "Notifications disabled";
@@ -213,6 +226,10 @@ async function setupDashboard() {
 	function updateDashboard() {
 		// Country and status
 		if (settings.apiUsage.user.travel) updateStatus();
+
+		// Icons
+		if (settings.apiUsage.user.icons) updateIcons();
+
 		// Bars
 		if (settings.apiUsage.user.bars)
 			for (const bar of ["energy", "nerve", "happy", "life", "chain"]) {
@@ -251,6 +268,47 @@ async function setupDashboard() {
 			}
 		}
 
+		function updateIcons() {
+			if (!settings.pages.popup.showIcons) {
+				iconsWrap.classList.add("tt-hidden");
+				iconsWrap.findAll(".countdown.automatic").forEach(x => x.classList.remove("countdown"));
+				return;
+			}
+
+			iconsWrap.classList.remove("tt-hidden");
+			[...iconsWrap.children].forEach((icon) => {
+				if (Object.keys(userdata.icons).includes(icon.children[0].className)) {
+					icon.classList.remove("tt-hidden");
+
+					let iconText = userdata.icons[icon.children[0].className];
+
+					let iconHTML = "";
+
+					if (iconText.includes(" - ") && iconText.includes(" seconds")) {
+						let timeSplits = iconText.split(" - ");
+						let time, text;
+
+						if (timeSplits.length > 2) {
+							time = timeSplits[timeSplits.length - 1];
+							text = timeSplits.slice(0, -1).join(" - ");
+						} else {
+							text = timeSplits[0];
+							time = timeSplits[1];
+						}
+
+						iconHTML = text + " - " +
+							`<span class="countdown automatic" data-seconds="${textToTime(time)}" data-time-settings='{ "type": "wordTimer" }'>
+							${time}
+							</span>`;
+					} else
+						iconHTML = iconText;
+
+					icon.children[1].innerHTML = iconHTML;
+				} else
+					icon.classList.add("tt-hidden");
+			});
+		}
+
 		function updateBar(name, bar) {
 			const current = bar ? bar.current : 0;
 			let maximum = bar ? bar.maximum : 100;

extension/pages/settings/settings.html

@@ -627,6 +627,10 @@ <h2>
 							<input id="popup-showStakeouts" type="checkbox" />
 							<label for="popup-showStakeouts">Show stakeouts on the dashboard.</label>
 						</div>
+						<div class="option">
+							<input id="popup-showIcons" type="checkbox" />
+							<label for="popup-showIcons">Show icons on the dashboard.</label>
+						</div>
 
 						<div class="option header">
 							<input id="icon-global" type="checkbox" />

extension/scripts/global/globalData.js

@@ -454,6 +454,7 @@ const DEFAULT_STORAGE = {
 				defaultTab: new DefaultSetting({ type: "string", defaultValue: "dashboard" }),
 				hoverBarTime: new DefaultSetting({ type: "boolean", defaultValue: false }),
 				showStakeouts: new DefaultSetting({ type: "boolean", defaultValue: true }),
+				showIcons: new DefaultSetting({ type: "boolean", defaultValue: true }),
 			},
 			icon: {
 				global: new DefaultSetting({ type: "boolean", defaultValue: true }),