minor: add cache to pinned games

js/account/home.js

@@ -5,6 +5,8 @@ chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames'], async fun
 
     if (Settings.PinnedGamesOn === true) {
         const PlaceIDs = result.PolyPlus_PinnedGames || [];
+        chrome.storage.local.get(['PolyPlus_PinnedGamesData'], async function(result){
+			let PinnedGamesData = result['PolyPlus_PinnedGamesData'] || {data:undefined};
 
             const PinnedGamesContainer = document.createElement('div')
             PinnedGamesContainer.innerHTML = `
@@ -32,10 +34,25 @@ chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames'], async fun
                 RightSideColumn.insertBefore(PinnedGamesContainer, RightSideColumn.children[1]);
             }
 
-        const PinnedGamesCard = document.getElementById('p+pinned_games_card')
+			// cache for 5 minutes
+			if (PinnedGamesData === undefined || (new Date().getTime() - PinnedGamesData.requested > 300000)) {
+                PinnedGamesData.data = {}
 				for (let i = 0; i < PlaceIDs.length; i++) {
                     const PlaceID = PlaceIDs.toSorted((a, b) => b - a)[i]
                     const PlaceDetails = (await (await fetch('https://api.polytoria.com/v1/places/' + PlaceID)).json())
+                    PinnedGamesData.data[PlaceID] = PlaceDetails
+                }
+
+				chrome.storage.local.set({['PolyPlus_PinnedGamesData']: {
+                    data: PinnedGamesData.data,
+                    requested: new Date().getTime()
+                }}, function(){});
+			}
+
+            const PinnedGamesCard = document.getElementById('p+pinned_games_card')
+            for (let i = 0; i < PlaceIDs.length; i++) {
+                const PlaceID = PlaceIDs.toSorted((a, b) => b - a)[i]
+                const PlaceDetails = PinnedGamesData.data[PlaceID]
 
                 const PlaceCard = document.createElement('a')
                 PlaceCard.classList = 'd-none'
@@ -73,6 +90,7 @@ chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames'], async fun
             PinnedGamesCard.children[0].remove()
             PinnedGamesCard.classList.add('d-flex')
             Array.from(PinnedGamesCard.children).forEach((place) => {place.classList.remove('d-none')})
+        });
     }
 
     if (Settings.IRLPriceWithCurrency && Settings.IRLPriceWithCurrency.Enabled === true) {

js/places/place-view.js

@@ -158,76 +158,78 @@ const Gamepasses = Array.from(GamepassesTab.getElementsByClassName('card')) || [
 		}
 	});
 })();
-
 function PinnedGames(placeIDs) {
-	const PinButton = document.createElement('button')
+	const PinButton = document.createElement('button');
-	PinButton.classList = 'btn btn-primary btn-sm'
+	PinButton.classList = 'btn btn-primary btn-sm';
-	PinButton.style = 'position: absolute; top: 0; right: 0; margin: 4px; font-size: 1.3em;'
+	PinButton.style = 'position: absolute; top: 0; right: 0; margin: 4px; font-size: 1.3em;';
 	PinButton.innerHTML = `
 	<i class="fa-regular fa-star"></i>
-	`
+	`;
 
-	const UpdatePinButtonState = function(){
+	const UpdatePinButtonState = function() {
-		PinButton.classList = 'btn btn-primary btn-sm'
+		PinButton.classList = 'btn btn-primary btn-sm';
+		PinButton.disabled = false; // Ensure button is enabled initially
 		if (placeIDs.indexOf(PlaceID) === -1) {
 			// Not Pinned
 			if (placeIDs.length >= Utilities.Limits.PinnedGames) {
-				PinButton.disabled = true
+				PinButton.disabled = true;
 			}
-			PinButton.children[0].classList = 'fa-regular fa-star'
+			PinButton.children[0].classList = 'fa-regular fa-star';
 		} else {
 			// Pinned
-			PinButton.children[0].classList = 'fa-duotone fa-star'
+			PinButton.children[0].classList = 'fa-duotone fa-star';
-		}
 		}
+	};
 
-	PinButton.addEventListener('mouseenter', function(){
+	PinButton.addEventListener('mouseenter', function() {
 		if (placeIDs.indexOf(PlaceID) !== -1) {
-			PinButton.classList.add('btn-danger')
+			PinButton.classList.add('btn-danger');
-			PinButton.classList.remove('btn-primary')
+			PinButton.classList.remove('btn-primary');
-			PinButton.children[0].classList.add('fa-star-half-stroke')
+			PinButton.children[0].classList.add('fa-star-half-stroke');
-			PinButton.children[0].classList.remove('fa-star')
+			PinButton.children[0].classList.remove('fa-star');
 		}
-	})
-
-	PinButton.addEventListener('mouseleave', function(){
-		if (placeIDs.indexOf(PlaceID) !== -1) {
-			PinButton.classList.add('btn-primary')
-			PinButton.classList.remove('btn-danger')
-			PinButton.children[0].classList.add('fa-star')
-			PinButton.children[0].classList.remove('fa-star-half-stroke')
-		}
-	})
-
-	UpdatePinButtonState()
-	document.querySelector('h1.my-0').parentElement.appendChild(PinButton)
-
-	PinButton.addEventListener('click', function(){
-		if (placeIDs.length >= Utilities.Limits.PinnedGames) {
-			PinButton.disabled = true
-			return
-		}
-
-		if (placeIDs.indexOf(PlaceID) === -1) {
-			placeIDs.push(PlaceID)
-		} else {
-			placeIDs.splice(placeIDs.indexOf(PlaceID), 1)
-		}
-
-		PinButton.disabled = true
-		UpdatePinButtonState()
-
-		chrome.storage.sync.set({'PolyPlus_PinnedGames': placeIDs}, function(){
-			setTimeout(() => {
-				PinButton.disabled = false
-			}, 750);
-		})
 	});
 
-	chrome.storage.onChanged.addListener(function (changes) {
+	PinButton.addEventListener('mouseleave', function() {
+		if (placeIDs.indexOf(PlaceID) !== -1) {
+			PinButton.classList.add('btn-primary');
+			PinButton.classList.remove('btn-danger');
+			PinButton.children[0].classList.add('fa-star');
+			PinButton.children[0].classList.remove('fa-star-half-stroke');
+		}
+	});
+
+	UpdatePinButtonState();
+	document.querySelector('h1.my-0').parentElement.appendChild(PinButton);
+
+	PinButton.addEventListener('click', function() {
+		if (placeIDs.indexOf(PlaceID) === -1) {
+			placeIDs.push(PlaceID);
+		} else {
+			placeIDs.splice(placeIDs.indexOf(PlaceID), 1);
+		}
+
+		// clear cache
+		chrome.storage.local.set({'PolyPlus_PinnedGamesData':{
+			data: undefined,
+			requested: 0
+		}}, function(){});
+
+		UpdatePinButtonState();
+
+		chrome.storage.sync.set({'PolyPlus_PinnedGames': placeIDs}, function() {
+			PinButton.disabled = true;
+			setTimeout(() => {
+				PinButton.disabled = false;
+				UpdatePinButtonState(); // Ensure state is updated after re-enabling
+			}, 750);
+		});
+	});
+
+	chrome.storage.onChanged.addListener(function(changes) {
 		if ('PolyPlus_PinnedGames' in changes) {
-			placeIDs = changes.PolyPlus_PinnedGames.newValue
+			placeIDs = changes.PolyPlus_PinnedGames.newValue;
-			UpdatePinButtonState()
+			UpdatePinButtonState();
 		}
 	});
 }