minor: cache friend count

js/account/home.js

@@ -97,13 +97,25 @@ chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames'], async fun
     }
 
     if (Settings.HomeFriendCountOn === true) {
-        const FriendCount = (await (await fetch('https://polytoria.com/api/friends?page=1')).json()).meta.total;
+        chrome.storage.local.get(['PolyPlus_FriendCount'], async function(result){
+			let FriendCount = result['PolyPlus_FriendCount'].count;
+
+			// cache for 5 minutes
+			if (FriendCount === undefined || (new Date().getTime() - FriendCount.requested > 300000)) {
+				FriendCount = (await (await fetch('https://polytoria.com/api/friends?page=1')).json()).meta.total;
+
+				chrome.storage.local.set({['PolyPlus_FriendCount']: {
+                    count: FriendCount,
+                    requested: new Date().getTime()
+                }}, function(){});
+			}
 
             const CountText = document.createElement('small');
             CountText.classList = 'text-muted fw-lighter';
             CountText.style.fontSize = '0.8rem';
             CountText.innerText = ' (' + FriendCount + ')';
             document.querySelector('#home-friendsOnline h5').appendChild(CountText);
+        });
     }
 
     if (Settings.HomeJoinFriendsButtonOn === true) {

js/extra-pages.js

@@ -272,7 +272,7 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
 } else if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.hash === '#debug') {
 	document.addEventListener('DOMContentLoaded', function () {
 		chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames', 'PolyPlus_BestFriends', 'PolyPlus_ItemWishlist', 'PolyPlus_AvatarSandboxOutfits', 'PolyPlus_TimePlayed'], function(sync) {
-			chrome.storage.local.get(['PolyPlus_InventoryCache', 'PolyPlus_GreatDivideStats'], function(local){
+			chrome.storage.local.get(['PolyPlus_InventoryCache', 'PolyPlus_GreatDivideStats', 'PolyPlus_FriendCount'], function(local){
 				document.querySelector('#main-content .container').innerHTML = `
 				<style>
 					#main-content .container label {
@@ -422,7 +422,7 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
 								</div>
 							</div>
 						</div>
-						<div class="card">
+						<div class="card mb-3">
 							<a class="text-reset" data-bs-toggle="collapse" href="#great-divide-stats" role="button" aria-expanded="false" aria-controls="inventory-cache">
 								<div class="card-header">
 									<span class="badge bg-secondary" style="margin-right: 5px; vertical-align: text-bottom;">Local</span>
@@ -439,6 +439,23 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
 								</div>
 							</div>
 						</div>
+						<div class="card mb-3">
+							<a class="text-reset" data-bs-toggle="collapse" href="#friend-count" role="button" aria-expanded="false" aria-controls="inventory-cache">
+								<div class="card-header">
+									<span class="badge bg-secondary" style="margin-right: 5px; vertical-align: text-bottom;">Local</span>
+									Friend Count
+									<small class="text-muted" style="font-size: 0.7rem;">(cached for 5 minutes)</small>
+								</div>
+							</a>
+							<div class="card-body collapse" id="friend-count">
+								<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
+									${JSON.stringify((local.PolyPlus_FriendCount || {data: [], requested: "never"}), null, 2)
+										.replaceAll('\n','<br>')
+										.replaceAll(' ', '&nbsp;')
+										.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')}
+								</div>
+							</div>
+						</div>
 					</div>
 				</div>
 				`;

resources/avatar-sandbox.html

@@ -59,7 +59,8 @@
 			<button class="btn btn-info w-100 mx-auto" onclick="this.parentElement.parentElement.parentElement.close();">X</button>
 		</div>
 	</div>
-	<div class="modal-body wrapper">
+	<div class="modal-body">
+		<div class="wrapper">
 			<div class="colorpicker-color" style="background-color: #f8f8f8"></div>
 			<div class="colorpicker-color" style="background-color: #cdcdcd"></div>
 			<div class="colorpicker-color" style="background-color: #111111"></div>
@@ -125,6 +126,11 @@
 			<div class="colorpicker-color" style="background-color: #ff66cc"></div>
 			<div class="colorpicker-color" style="background-color: #e8bac8"></div>
 		</div>
+		<div class="input-group mt-2">
+			<input type="text" class="form-control bg-dark" placeholder="HEX Code..">
+			<button id="p+bodypart_customhex" class="btn btn-primary">Set</button>
+		</div>
+	</div>
 </dialog>
 <dialog id="p+outfit_create" class="polyplus-modal" style="width: 375px; border: 1px solid #484848; background-color: #181818; border-radius: 20px; overflow: hidden;">
 	<div class="row text-muted mb-4" style="font-size: 0.8rem;">