From 0eca6b62c768c3b9d063ea9765d14079707e970b Mon Sep 17 00:00:00 2001 From: Index Date: Mon, 15 Jul 2024 08:53:47 -0500 Subject: [PATCH] feat: "pinned games" rewrite --- js/account/home.js | 333 +++++++++++++--------------------------- js/places/place-view.js | 152 ++++++++---------- 2 files changed, 173 insertions(+), 312 deletions(-) mode change 100755 => 100644 js/account/home.js diff --git a/js/account/home.js b/js/account/home.js old mode 100755 new mode 100644 index 992247c..0f44bdf --- a/js/account/home.js +++ b/js/account/home.js @@ -1,229 +1,108 @@ -/* -this file needs a rewrite by me lol -*/ - -var Settings; -var PinnedGamesData; -var BestFriendsData; - -let Utilities; - -(async () => { - Utilities = await import(chrome.runtime.getURL('resources/utils.js')); - Utilities = Utilities.default; - - chrome.storage.sync.get(['PolyPlus_Settings'], async function (result) { - Settings = Utilities.MergeObjects(result.PolyPlus_Settings || Utilities.DefaultSettings); - - if (Settings.IRLPriceWithCurrency && Settings.IRLPriceWithCurrency.Enabled === true) { - IRLPrice(); - } - - if (Settings.HomeFriendCountOn === true) { - ShowFriendCount(); - } - - if (Settings.PinnedGamesOn === true || Settings.BestFriendsOn === true) { - Update(); - } - }); -})(); - -let ContainerElement = ` -
`; -let GameContainerElement = ` -
-
-
- -
- - - :Likes - - | - - - :Dislikes - -
-
-
-
- :GameName -
-
-
-
-`; -let TitleElement = ` -
-
Jump right back into your favorite games
-
Pinned Games
-
`; -var FriendContainer = document.querySelector('.card:has(.friendsPopup) .card-body'); - -let NewContainer = document.createElement('div'); -NewContainer.style.display = 'none'; -NewContainer.classList = 'card card-dash mcard mb-3'; -NewContainer.style.animationDelay = '0.18s'; -NewContainer.innerHTML = ContainerElement; - -let NewTitle = document.createElement('div'); -NewTitle.style.display = 'none'; -NewTitle.classList = 'row reqFadeAnim px-2 px-lg-0'; -NewTitle.innerHTML = TitleElement; - -let BestFriendsContainer = document.createElement('div'); -BestFriendsContainer.classList = 'd-flex'; -BestFriendsContainer.style = 'display: none; border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 10px; width: 100%;'; - -let Spacer = document.createElement('div'); -Spacer.innerHTML = ' '; -Spacer.style.width = '50px'; -Spacer.prepend(BestFriendsContainer); - -FriendContainer.prepend(BestFriendsContainer); - -async function Update() { - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function (result) { - PinnedGamesData = result.PolyPlus_PinnedGames.toSorted((a, b) => b - a) || []; - - if (Settings.PinnedGamesOn === true) { - PinnedGames(); - } else { - NewContainer.style.display = 'none'; - NewTitle.style.display = 'none'; - } - }); - - chrome.storage.sync.get(['PolyPlus_BestFriends'], function (result) { - BestFriendsData = result.PolyPlus_BestFriends || []; - - if (Settings.BestFriendsOn === true) { - BestFriends(); - } else { - BestFriendsContainer.style.display = 'none'; - Spacer.style.display = 'none'; - } - }); -} - -function PinnedGames() { - var Existing = NewContainer.children[0].children; - Array.from(Existing).forEach((element) => { - element.remove(); - }); - - if (PinnedGamesData.length === 0) { - NewContainer.style.display = 'none'; - NewTitle.style.display = 'none'; - } else { - NewContainer.style.display = ''; - NewTitle.style.display = ''; - } - - for (let element of PinnedGamesData) { - fetch('https://api.polytoria.com/v1/places/' + element) - .then((response) => response.json()) - .then((data) => { - let GameName = data.name; - let GameThumbnail = data.thumbnail; - - var NewGameContainer = document.createElement('a'); - NewGameContainer.innerHTML = GameContainerElement.replace(':GameName', GameName) - .replace(':Thumbnail', GameThumbnail) - .replace(':Likes', data.rating.likes) - .replace(':Dislikes', data.rating.dislikes); - NewGameContainer.href = '/places/' + element; - - /* - if (new Date().getDate() >= new Date(data.updatedAt).getDate()) { - console.log('Game has updated') - } - */ - - NewContainer.children[0].appendChild(NewGameContainer); - }) - .catch((error) => { - console.error('Error:', error); - }); - } -} - -function BestFriends() { - return - Array.from(document.querySelectorAll('[bestFriend]')).forEach((element) => { - element.removeAttribute('bestFriend'); - element.getElementsByClassName('friend-name')[0].style.color = 'initial'; - FriendContainer.appendChild(element); - }); - - if (BestFriendsData.length === 0) { - BestFriendsContainer.style.visibility = 'hidden'; - BestFriendsContainer.style.padding = '0px !important'; - BestFriendsContainer.style.margin = '0px !important'; - } else { - BestFriendsContainer.style.visibility = 'visible'; - BestFriendsContainer.style.padding = ''; - BestFriendsContainer.style.margin = ''; - } - - BestFriendsData.forEach((element) => { - let ExistingFriend = document.getElementById('friend-' + element); - if (ExistingFriend) { - ExistingFriend.setAttribute('bestFriend', 'true'); - ExistingFriend.getElementsByClassName('friend-name')[0].style.color = 'yellow'; - BestFriendsContainer.prepend(ExistingFriend); - } - }); -} - -var SecondaryColumn = document.getElementsByClassName('col-lg-8')[0]; -if (document.getElementsByClassName('home-event-container')[0] === undefined) { - SecondaryColumn.insertBefore(NewContainer, SecondaryColumn.children[0]); - SecondaryColumn.insertBefore(NewTitle, SecondaryColumn.children[0]); -} else { - SecondaryColumn.insertBefore(NewContainer, SecondaryColumn.children[1]); - SecondaryColumn.insertBefore(NewTitle, SecondaryColumn.children[1]); -} - -async function IRLPrice() { - (async () => { - Utilities = await import(chrome.runtime.getURL('resources/utils.js')); - Utilities = Utilities.default; - - const TrendingItems = document.getElementById('home-trendingItems'); - for (let item of TrendingItems.children[1].getElementsByClassName('d-flex')[0].children) { - const Price = item.getElementsByClassName('text-success')[0]; - if (Price !== undefined) { - const IRLResult = await Utilities.CalculateIRL(Price.innerText, Settings.IRLPriceWithCurrency.Currency); - - let Span = document.createElement('span'); - Span.classList = 'text-muted polyplus-price-tag'; - Span.style = 'font-size: 0.7rem; font-weight: lighter;'; - Span.innerText = '($' + IRLResult.result + ' ' + IRLResult.display + ')'; - Price.appendChild(Span); - } - } - })(); -} - -async function ShowFriendCount() { - let FriendCount = (await (await fetch('https://polytoria.com/api/friends?page=1')).json()).meta.total; - /* - const FirstPage = (await (await fetch('https://polytoria.com/api/friends?page=1')).json()) - if (FirstPage.meta.lastPage > 1) { - const LastPage = (await (await fetch('https://polytoria.com/api/friends?page=' + Pages)).json()) - FriendCount = (12*(FirstPage.meta.pages-1)) + LastPage.data.length - } else { - FriendCount = FirstPage.data.length +chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames'], async function(result){ + Settings = result.PolyPlus_Settings || { + PinnedGamesOn: true } - */ - 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.PinnedGamesOn === true) { + const PlaceIDs = result.PolyPlus_PinnedGames || []; + + const PinnedGamesContainer = document.createElement('div') + PinnedGamesContainer.innerHTML = ` +
+
+
Jump right back into your favorite games
+
Pinned Games
+
+
+
+
+
+ +
+
+
+ ` + + 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 = ` +
+
+
+ +
+ + + ${PlaceDetails.playing} + Playing + +
+
+
+
+ ${PlaceDetails.name} +
+
+
+
+ ` + + 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) { + (async () => { + Utilities = await import(chrome.runtime.getURL('resources/utils.js')); + Utilities = Utilities.default; + + const TrendingItems = document.getElementById('home-trendingItems'); + for (let item of TrendingItems.children[1].getElementsByClassName('d-flex')[0].children) { + const Price = item.getElementsByClassName('text-success')[0]; + if (Price !== undefined) { + const IRLResult = await Utilities.CalculateIRL(Price.innerText, Settings.IRLPriceWithCurrency.Currency); + + let Span = document.createElement('span'); + Span.classList = 'text-muted polyplus-price-tag'; + Span.style = 'font-size: 0.7rem; font-weight: lighter;'; + Span.innerText = '($' + IRLResult.result + ' ' + IRLResult.display + ')'; + Price.appendChild(Span); + } + } + })(); + } + + if (Settings.HomeFriendCountOn === true) { + const FriendCount = (await (await fetch('https://polytoria.com/api/friends?page=1')).json()).meta.total; + + 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); + } +}) \ No newline at end of file diff --git a/js/places/place-view.js b/js/places/place-view.js index ee38c22..c368c7a 100644 --- a/js/places/place-view.js +++ b/js/places/place-view.js @@ -1,4 +1,4 @@ -const PlaceID = window.location.pathname.split('/')[2]; +const PlaceID = parseInt(window.location.pathname.split('/')[2]); const UserID = JSON.parse(window.localStorage.getItem('p+account_info')).ID; const GameCreator = document.querySelector('#main-content .card-body .col div.text-muted a[href^="/users/"]').getAttribute('href').split('/')[2]; @@ -46,7 +46,7 @@ const Gamepasses = Array.from(GamepassesTab.getElementsByClassName('card')) || [ RatingsContainer.children[0].appendChild(PercentageLabel); - chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_TimePlayed'], async function (result) { + chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames', 'PolyPlus_TimePlayed'], async function (result) { Settings = result.PolyPlus_Settings || {}; TimePlayed = result.PolyPlus_TimePlayed || {}; @@ -54,7 +54,7 @@ const Gamepasses = Array.from(GamepassesTab.getElementsByClassName('card')) || [ Utilities = Utilities.default; if (Settings.PinnedGamesOn === true) { - PinnedGames(); + PinnedGames(result.PolyPlus_PinnedGames); } if (Settings.InlineEditingOn === true && GameCreator === UserID) { @@ -127,7 +127,6 @@ const Gamepasses = Array.from(GamepassesTab.getElementsByClassName('card')) || [ } if (Settings.ImprovedAchievements.OpacityOn && Settings.ImprovedAchievements.OpacityOn === true) { - console.log(Settings) for (let achievement of Achievements) { if ((achievement.getElementsByClassName('fad fa-check-circle')[0] !== undefined) === false) { achievement.style.opacity = '0.5'; @@ -142,94 +141,76 @@ const Gamepasses = Array.from(GamepassesTab.getElementsByClassName('card')) || [ }); })(); -async function PinnedGames() { - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function (result) { - PinnedGamesData = result.PolyPlus_PinnedGames || []; +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;' + PinButton.innerHTML = ` + + ` - const PinBtn = document.createElement('button'); - PinBtn.classList = 'btn btn-warning btn-sm'; - PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;'; - - if (PinnedGamesData.includes(parseInt(PlaceID))) { - PinBtn.innerHTML = ' Un-pin'; - } else { - if (PinnedGamesData.length !== Utilities.Limits.PinnedGames) { - PinBtn.innerHTML = ' Pin'; - } else { - PinBtn.setAttribute('disabled', true); - PinBtn.innerHTML = ` Pin (max ${Utilities.Limits.PinnedGames}/${Utilities.Limits.PinnedGames})`; + const UpdatePinButtonState = function(){ + PinButton.classList = 'btn btn-primary btn-sm' + if (placeIDs.indexOf(PlaceID) === -1) { + // Not Pinned + if (placeIDs.length >= Utilities.Limits.PinnedGames) { + PinButton.disabled = true } + PinButton.children[0].classList = 'fa-regular fa-star' + } else { + // Pinned + PinButton.children[0].classList = 'fa-duotone fa-star' + } + } + + 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.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 } - PinBtn.addEventListener('click', function () { - PinBtn.setAttribute('disabled', 'true'); + if (placeIDs.indexOf(PlaceID) === -1) { + placeIDs.push(PlaceID) + } else { + placeIDs.splice(placeIDs.indexOf(PlaceID), 1) + } - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function (result) { - PinnedGamesData = result.PolyPlus_PinnedGames || []; - /* - const Index = PinnedGames.indexOf(parseInt(PlaceID)) - if (Index !== -1) { - //delete PinnedGames[PlaceID] - PinnedGames.splice(Index, 1) - PinBtn.innerHTML = ' Pin' - } else { - //PinnedGames[PlaceID] = {lastVisited: new Date()} - PinnedGames.push(parseInt(PlaceID)) - PinBtn.innerHTML = ' Un-pin' - } - */ - const Index = PinnedGamesData.indexOf(parseInt(PlaceID)); - if (Index !== -1) { - PinnedGamesData.splice(Index, 1); - PinBtn.innerHTML = ' Pin'; - } else { - PinnedGamesData.push(parseInt(PlaceID)); - PinBtn.innerHTML = ' Un-pin'; - } + PinButton.disabled = true + UpdatePinButtonState() - chrome.storage.sync.set({PolyPlus_PinnedGames: PinnedGamesData, arrayOrder: true}, function () { - setTimeout(function () { - PinBtn.removeAttribute('disabled'); - console.log(PinnedGamesData); - }, 1250); - }); - }); - }); + chrome.storage.sync.set({'PolyPlus_PinnedGames': placeIDs}, function(){ + setTimeout(() => { + PinButton.disabled = false + }, 750); + }) + }); - document.getElementsByClassName('card-header')[2].appendChild(PinBtn); - - chrome.storage.onChanged.addListener(function (changes, namespace) { - if ('PolyPlus_PinnedGames' in changes) { - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function (result) { - PinnedGamesData = result.PolyPlus_PinnedGames || []; - - /* - if (PinnedGamesData[PlaceID]) { - PinBtn.innerHTML = ' Un-pin' - } else { - if (PinnedGamesData.length !== 5) { - PinBtn.removeAttribute('disabled') - PinBtn.innerHTML = ' Pin' - } else { - PinBtn.setAttribute('disabled', true) - PinBtn.innerHTML = ' Pin (max 5/5)' - } - } - */ - if (PinnedGamesData.includes(parseInt(PlaceID))) { - PinBtn.innerHTML = ' Un-pin'; - } else { - if (PinnedGamesData.length !== Utilities.Limits.PinnedGames) { - PinBtn.removeAttribute('disabled'); - PinBtn.innerHTML = ' Pin'; - } else { - PinBtn.setAttribute('disabled', true); - PinBtn.innerHTML = ` Pin (max ${Utilities.Limits.PinnedGames}/${Utilities.Limits.PinnedGames})`; - } - } - }); - } - }); + chrome.storage.onChanged.addListener(function (changes) { + if ('PolyPlus_PinnedGames' in changes) { + placeIDs = changes.PolyPlus_PinnedGames.newValue + UpdatePinButtonState() + } }); } @@ -547,6 +528,7 @@ async function ReaddCopyable() { } if (PlaceDetails.isCopyable) { + console.log('is copyable') const TitleCardButtons = document.querySelector('.card:has(h1.my-0) .col-auto[style^="m"]') const DownloadCopyButton = document.createElement('button')