minor: add cache to pinned games
This commit is contained in:
parent
bcce85e63d
commit
5fc1c37383
2 changed files with 130 additions and 110 deletions
|
|
@ -5,74 +5,92 @@ 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 = `
|
||||
<div class="row reqFadeAnim px-2 px-lg-0">
|
||||
<div class="col">
|
||||
<h6 class="dash-ctitle2">Jump right back into your favorite games</h6>
|
||||
<h5 class="dash-ctitle">Pinned Games</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-dash mcard mb-3">
|
||||
<div class="card-body p-0 m-1 scrollFadeContainer" id="p+pinned_games_card">
|
||||
<div class="text-center p-5">
|
||||
<div class="spinner-border text-muted" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
const PinnedGamesContainer = document.createElement('div')
|
||||
PinnedGamesContainer.innerHTML = `
|
||||
<div class="row reqFadeAnim px-2 px-lg-0">
|
||||
<div class="col">
|
||||
<h6 class="dash-ctitle2">Jump right back into your favorite games</h6>
|
||||
<h5 class="dash-ctitle">Pinned Games</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
const RightSideColumn = document.getElementsByClassName('col-lg-8')[0];
|
||||
if (document.getElementsByClassName('home-event-container')[0] === undefined) {
|
||||
RightSideColumn.insertBefore(PinnedGamesContainer, RightSideColumn.children[0]);
|
||||
} else {
|
||||
RightSideColumn.insertBefore(PinnedGamesContainer, RightSideColumn.children[1]);
|
||||
}
|
||||
|
||||
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 = (await (await fetch('https://api.polytoria.com/v1/places/' + PlaceID)).json())
|
||||
|
||||
const PlaceCard = document.createElement('a')
|
||||
PlaceCard.classList = 'd-none'
|
||||
PlaceCard.href = '/places/' + PlaceID
|
||||
PlaceCard.innerHTML = `
|
||||
<div class="scrollFade card me-2 place-card force-desktop text-center mb-2" style="opacity: 1;">
|
||||
<div class="card-body">
|
||||
<div class="ratings-header">
|
||||
<img src="${PlaceDetails.thumbnail}" class="place-card-image" style="position: relative;">
|
||||
<div class="p+pinned_games_playing" style="position: absolute;background: linear-gradient(to bottom, #000000f7, transparent, transparent, transparent);width: 100%;height: 100%;top: 0;left: 0;border-radius: 15px;padding-top: 12px;color: gray;font-size: 0.8rem;">
|
||||
<i class="fa-duotone fa-users"></i>
|
||||
<span>
|
||||
${PlaceDetails.playing}
|
||||
Playing
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mt-2 mb-1 place-card-title">
|
||||
${PlaceDetails.name}
|
||||
<div class="card card-dash mcard mb-3">
|
||||
<div class="card-body p-0 m-1 scrollFadeContainer" id="p+pinned_games_card">
|
||||
<div class="text-center p-5">
|
||||
<div class="spinner-border text-muted" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
if (!PlaceDetails.isActive) {
|
||||
const PlayerCountText = PlaceCard.getElementsByClassName('p+pinned_games_playing')[0]
|
||||
PlayerCountText.children[0].classList = 'text-warning fa-duotone fa-lock'
|
||||
PlayerCountText.children[1].remove()
|
||||
const RightSideColumn = document.getElementsByClassName('col-lg-8')[0];
|
||||
if (document.getElementsByClassName('home-event-container')[0] === undefined) {
|
||||
RightSideColumn.insertBefore(PinnedGamesContainer, RightSideColumn.children[0]);
|
||||
} else {
|
||||
RightSideColumn.insertBefore(PinnedGamesContainer, RightSideColumn.children[1]);
|
||||
}
|
||||
|
||||
PinnedGamesCard.appendChild(PlaceCard)
|
||||
}
|
||||
PinnedGamesCard.children[0].remove()
|
||||
PinnedGamesCard.classList.add('d-flex')
|
||||
Array.from(PinnedGamesCard.children).forEach((place) => {place.classList.remove('d-none')})
|
||||
// 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'
|
||||
PlaceCard.href = '/places/' + PlaceID
|
||||
PlaceCard.innerHTML = `
|
||||
<div class="scrollFade card me-2 place-card force-desktop text-center mb-2" style="opacity: 1;">
|
||||
<div class="card-body">
|
||||
<div class="ratings-header">
|
||||
<img src="${PlaceDetails.thumbnail}" class="place-card-image" style="position: relative;">
|
||||
<div class="p+pinned_games_playing" style="position: absolute;background: linear-gradient(to bottom, #000000f7, transparent, transparent, transparent);width: 100%;height: 100%;top: 0;left: 0;border-radius: 15px;padding-top: 12px;color: gray;font-size: 0.8rem;">
|
||||
<i class="fa-duotone fa-users"></i>
|
||||
<span>
|
||||
${PlaceDetails.playing}
|
||||
Playing
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mt-2 mb-1 place-card-title">
|
||||
${PlaceDetails.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
if (!PlaceDetails.isActive) {
|
||||
const PlayerCountText = PlaceCard.getElementsByClassName('p+pinned_games_playing')[0]
|
||||
PlayerCountText.children[0].classList = 'text-warning fa-duotone fa-lock'
|
||||
PlayerCountText.children[1].remove()
|
||||
}
|
||||
|
||||
PinnedGamesCard.appendChild(PlaceCard)
|
||||
}
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -158,76 +158,78 @@ const Gamepasses = Array.from(GamepassesTab.getElementsByClassName('card')) || [
|
|||
}
|
||||
});
|
||||
})();
|
||||
|
||||
function PinnedGames(placeIDs) {
|
||||
const PinButton = document.createElement('button')
|
||||
PinButton.classList = 'btn btn-primary btn-sm'
|
||||
PinButton.style = 'position: absolute; top: 0; right: 0; margin: 4px; font-size: 1.3em;'
|
||||
const PinButton = document.createElement('button');
|
||||
PinButton.classList = 'btn btn-primary btn-sm';
|
||||
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(){
|
||||
PinButton.classList = 'btn btn-primary btn-sm'
|
||||
const UpdatePinButtonState = function() {
|
||||
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.remove('btn-primary')
|
||||
PinButton.children[0].classList.add('fa-star-half-stroke')
|
||||
PinButton.children[0].classList.remove('fa-star')
|
||||
PinButton.classList.add('btn-danger');
|
||||
PinButton.classList.remove('btn-primary');
|
||||
PinButton.children[0].classList.add('fa-star-half-stroke');
|
||||
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
|
||||
UpdatePinButtonState()
|
||||
placeIDs = changes.PolyPlus_PinnedGames.newValue;
|
||||
UpdatePinButtonState();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue