feat: great divide user statistics section instead of tab

js/background.js

@@ -101,11 +101,20 @@ chrome.runtime.onInstalled.addListener(() => {
 	})
 });
 
-chrome.runtime.onMessage.addListener(async function (request, sender, sendResponse) {
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 	if (request.action === 'reload') {
 		chrome.runtime.reload();
 	} else if (request.action === 'greatdivide_stats') {
-		const Statistics = (await (await fetch('https://stats.silly.mom/player_stats?id=' + request.userID)).json()).results
+		chrome.storage.local.get(['PolyPlus_GreatDivideStats_' + request.userID], async function(result){
+			let Statistics = result['PolyPlus_GreatDivideStats_' + request.userID]
+
+			// cache for 5 minutes
+			if (Statistics !== undefined && (new Date().getTime() - Statistics.requested < 5000)) {
+				Statistics = Statistics.data
+			} else {
+				Statistics = (await (await fetch('https://stats.silly.mom/player_stats?id=' + request.userID)).json()).results[0]
+				chrome.storage.local.set({['PolyPlus_GreatDivideStats_' + request.userID]: {data: Statistics, requested: new Date().getTime()}}, function(){})
+			}
 
 			chrome.tabs.query({ active: true, currentWindow: true }, function(tabs){
 				chrome.scripting
@@ -115,11 +124,18 @@ chrome.runtime.onMessage.addListener(async function (request, sender, sendRespon
 						args: [Statistics]
 					})
 			})
+		})
 
 		const LoadStats = function(stats){			
 			if (stats !== null) {
-				stats = stats[0]
+				let KDR = (stats.Kills / stats.Deaths)
-				document.getElementById('p+greatdivide_stats').innerHTML = `
+				if (isNaN(KDR)) {
+					KDR = "N/A"
+				} else {
+					KDR = KDR.toFixed(4)
+				}
+
+				document.getElementById('p+greatdivide_card').innerHTML = `
 				<div class="mb-1">
 					<b>
 						<i class="fa-duotone fa-swords text-center d-inline-block" style="width:1.2em"></i>
@@ -144,7 +160,7 @@ chrome.runtime.onMessage.addListener(async function (request, sender, sendRespon
 						Kill Death Ratio
 					</b>
 					<span class="float-end">
-						${(stats.Kills / stats.Deaths).toFixed(4)}
+						${KDR}
 					</span>
 				</div>
 				<div class="mb-1">
@@ -174,7 +190,7 @@ chrome.runtime.onMessage.addListener(async function (request, sender, sendRespon
 						${stats.FlagsCaptured} (${stats.FlagsReturned} returned)
 					</span>
 				</div>
-				<div class="mb-3">
+				<div>
 					<b>
 						<i class="fa-solid fa-box-open text-center d-inline-block" style="width:1.2em"></i>
 						Airdrops Collected

the-great-divide.js

@@ -62,6 +62,54 @@ async function UnbalancedServerMarkers() {
 }
 
 async function UserStatsTab() {
+	const EventSection = document.createElement('div')
+	EventSection.innerHTML = `
+	<div class="d-grid mt-2 mb-4"></div>
+	<h6 class="section-title px-3 px-lg-0">
+		<i class="fas fa-swords me-1"></i> Great Divide
+	</h6>
+	<div class="card mcard card-themed mb-4">
+		<div class="card-body" id="p+greatdivide_card">
+			<button class="btn btn-primary btn-sm w-100">Load Statistics</button>
+		</div>
+	</div>
+	`
+	document.getElementsByClassName('user-right')[0].appendChild(EventSection)
+
+	const EventCard = document.getElementById('p+greatdivide_card')
+	EventCard.innerHTML = `
+	<small class="d-block text-center text-muted" style="font-size: 0.8rem;">
+		loading...
+	</small>
+	<lottie-player id="avatar-loading" src="https://c0.ptacdn.com/static/images/lottie/poly-brick-loading.2b51aa85.json" background="transparent" speed="1" style="width: 20%;height: auto;margin: -16px auto 50px;margin-top: 0px;" loop="" autoplay=""></lottie-player>
+	`
+	chrome.runtime.sendMessage({
+		action: "greatdivide_stats",
+		userID: document.querySelector('.dropdown-item.text-danger[href^="/report"]').getAttribute('href').split('?')[0].split('/')[3]
+	});
+
+	/*
+	let Fetched = false
+	EventCard.children[0].addEventListener('click', function(){
+		if (Fetched === false) {
+			EventCard.innerHTML = `
+			<small class="d-block text-center text-muted" style="font-size: 0.8rem;">
+				loading...
+			</small>
+			<lottie-player id="avatar-loading" src="https://c0.ptacdn.com/static/images/lottie/poly-brick-loading.2b51aa85.json" background="transparent" speed="1" style="width: 20%;height: auto;margin: -16px auto 50px;margin-top: 0px;" loop="" autoplay=""></lottie-player>
+			`
+
+			chrome.runtime.sendMessage({
+				action: "greatdivide_stats",
+				userID: document.querySelector('.dropdown-item.text-danger[href^="/report"]').getAttribute('href').split('?')[0].split('/')[3]
+			});
+			Fetched = true
+		}
+	})
+	*/
+}
+
+async function UserStatsTabOLD() {
 	const Tabs = document.getElementById('user-info-tabs')
 
 	const EventTab = document.createElement('li')
@@ -100,7 +148,7 @@ async function UserStatsTab() {
 		let SelectedTab
 		if (tab.children[0].getAttribute('data-bs-target')) {
 			SelectedTab = document.getElementById(tab.children[0].getAttribute('data-bs-target').substring(1))
-		} else {
+		} else if (tab.children[0].classList.contains('fw-bold')) {
 			SelectedTab = TabContainer
 		}
 		SelectedTab.classList.add('active');