diff --git a/js/places/place-edit.js b/js/places/place-edit.js index 38ec870..02491e7 100755 --- a/js/places/place-edit.js +++ b/js/places/place-edit.js @@ -1,11 +1,18 @@ +const ID = window.location.pathname.split('/')[3] +const Form = document.querySelector('form[action="/create/place/update"]') + +var Settings; + !(async () => { - const ID = window.location.pathname.split('/')[3] + ActivityToggle() + //RequestGameProfile() +})() + +async function ActivityToggle() { const Response = await fetch('https://api.polytoria.com/v1/places/'+ID) let Status = await Response.json() Status = Status.isActive - console.log(Status) - const Form = document.querySelector('form[action="/create/place/update"]') const DIV = document.createElement('div') DIV.classList = 'form-group mt-4' DIV.innerHTML = ` @@ -47,4 +54,36 @@ console.log(error) }); }); -})() \ No newline at end of file +} + +function RequestGameProfile() { + const Div = document.createElement('div') + Div.classList = 'card mt-4' + Div.innerHTML = ` +
+ + + + + + + +
+ ` + Form.insertBefore(Div, Form.children[Form.children.length-1]) + + const SubmitBtn = Div.getElementsByTagName('button')[0] + + SubmitBtn.addEventListener('click', function(){ + const CardBody = Div.children[0] + const Result = { + gameTitle: CardBody.children[0].value, + bg: CardBody.children[1].value, + accent: CardBody.children[2].value, + secondary: CardBody.children[3].value, + cardBg: CardBody.children[4].value, + text: CardBody.children[5].value + } + window.location.href = 'https://polyplus.vercel.app/app/game-profile.html?gameId=' + ID + '&profile=' + encodeURIComponent(btoa(JSON.stringify(Result))) + }); +} \ No newline at end of file diff --git a/js/places/place-view2.js b/js/places/place-view-old.js old mode 100644 new mode 100755 similarity index 56% rename from js/places/place-view2.js rename to js/places/place-view-old.js index 4de1345..7508e68 --- a/js/places/place-view2.js +++ b/js/places/place-view-old.js @@ -1,360 +1,241 @@ -let GameID = window.location.pathname.split('/')[2] - -var Settings; -let PinnedGames; -let GamePinned; - -!(() => { - if (GameID === undefined) {return} - - const DataContainer = document.getElementById('likes-data-container') - const RatingsData = { - Likes: parseInt(DataContainer.getAttribute('data-like-count')), - Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')), - Percentage: null - } - RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100) - const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement - - const PercentageLabel = document.createElement('small') - PercentageLabel.classList = 'text-muted' - PercentageLabel.style.fontSize = '0.8rem' - PercentageLabel.style.marginLeft = '10px' - PercentageLabel.style.marginRight = '10px' - PercentageLabel.innerText = RatingsData.Percentage + '%' - - RatingsContainer.children[0].appendChild(PercentageLabel) - - chrome.storage.sync.get(['PolyPlus_Settings'], function(result) { - Settings = result.PolyPlus_Settings || { - PinnedGamesOn: true, - InlineEditingOn: false, - GameProfilesOn: false - }; - - if (Settings.PinnedGamesOn === true) { - PinnedGames() - } - - // Work in Progress - if (Settings.InlineEditingOn === true) { - InlineEditing() - } - - // Work in Progress - if (Settings.GameProfilesOn === true) { - GameProfiles() - } - }); -})() - -async function PinnedGames() { - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){ - PinnedGames = result.PolyPlus_PinnedGames || {}; - /* - const PinBtn = document.createElement('button'); - PinBtn.classList = 'btn btn-warning btn-sm'; - PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' - - if (PinnedGames[GameID]) { - PinBtn.innerHTML = ' Un-pin'; - } else { - if (PinnedGames.length !== 5) { - PinBtn.innerHTML = ' Pin' - } else { - PinBtn.setAttribute('disabled', true) - PinBtn.innerHTML = ' Pin (max 5/5)' - } - } - */ - const PinBtn = document.createElement('button'); - PinBtn.classList = 'btn btn-warning btn-sm'; - PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' - - if (PinnedGames.includes(parseInt(GameID))) { - PinBtn.innerHTML = ' Un-pin'; - } else { - if (PinnedGames.length !== 5) { - PinBtn.innerHTML = ' Pin' - } else { - PinBtn.setAttribute('disabled', true) - PinBtn.innerHTML = ' Pin (max 5/5)' - } - } - - PinBtn.addEventListener('click', function() { - PinBtn.setAttribute('disabled', 'true') - - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { - PinnedGames = result.PolyPlus_PinnedGames || []; - /* - const Index = PinnedGames.indexOf(parseInt(GameID)) - if (Index !== -1) { - //delete PinnedGames[GameID] - PinnedGames.splice(Index, 1) - PinBtn.innerHTML = ' Pin' - } else { - //PinnedGames[GameID] = {lastVisited: new Date()} - PinnedGames.push(parseInt(GameID)) - PinBtn.innerHTML = ' Un-pin' - } - */ - const Index = PinnedGames.indexOf(parseInt(GameID)); - if (Index !== -1) { - PinnedGames.splice(Index, 1); - PinBtn.innerHTML = ' Pin' - } else { - PinnedGames.push(parseInt(GameID)); - PinBtn.innerHTML = ' Un-pin' - } - - chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() { - setTimeout(function() { - PinBtn.removeAttribute('disabled') - console.log(PinnedGames) - }, 1250) - }); - }); - }); - - 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) { - PinnedGames = result.PolyPlus_PinnedGames || []; - - /* - if (PinnedGames[GameID]) { - PinBtn.innerHTML = ' Un-pin' - } else { - if (PinnedGames.length !== 5) { - PinBtn.removeAttribute('disabled') - PinBtn.innerHTML = ' Pin' - } else { - PinBtn.setAttribute('disabled', true) - PinBtn.innerHTML = ' Pin (max 5/5)' - } - } - */ - if (PinnedGames.includes(parseInt(GameID))) { - PinBtn.innerHTML = ' Un-pin' - } else { - if (PinnedGames.length !== 5) { - PinBtn.removeAttribute('disabled') - PinBtn.innerHTML = ' Pin' - } else { - PinBtn.setAttribute('disabled', true) - PinBtn.innerHTML = ' Pin (max 5/5)' - } - } - }); - } - }); - }); -} - -async function InlineEditing() { - // Fix description editing - // Make it possible to edit description even if the game doesn't initially have a description - // Add the ability to edit the game's genre - // Improve editing visuals overall - - const GameCreator = document.querySelector('#main-content .card-body .col div.text-muted a[href^="/users/"]').getAttribute('href').split('/')[2] - console.log(GameCreator) - console.log(JSON.parse(window.localStorage.getItem('account_info')).ID) - if (GameCreator !== JSON.parse(window.localStorage.getItem('account_info')).ID) { - return - } - - let Editing = false - - const Style = document.createElement('style') - Style.innerHTML = ` - body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-visible {display: block !important;} - .polyplus-inlineEditing-visible {display: none;} - - body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-hidden {display: none !important;} - .polyplus-inlineEditing-hidden {display: block;} - ` - document.body.prepend(Style) - - const Inputs = [ - { - name: "name", - element: null, - reference: '.card-header h1[style="font-weight:800;font-size:1.6em"]', - placeholder: "Place Title..", - required: true, - isTextarea: false, - styles: 'font-weight:800;font-size:1.6em' - }, - { - name: "description", - element: null, - reference: '.col:has(#likes-data-container) .card.mcard.mb-2 .card-body.p-3.small', - placeholder: "Place Description..", - required: false, - isTextarea: true, - styles: 'height:300px; overflow-y:auto;' - } - ] - console.log(Inputs) - for (let input of Inputs) { - let Input = (input.isTextarea === true) ? document.createElement('textarea') : document.createElement('input') - input.element = Input - - const Reference = document.querySelector(input.reference) - - Input.classList = 'polyplus-inlineEditing-visible form-control' - Input.placeholder = input.placeholder - Input.value = Reference.innerText - Input.style = input.styles - - Reference.classList.add('polyplus-inlineEditing-hidden') - Reference.parentElement.appendChild(Input) - } - - const PlaceGenre = document.getElementsByClassName('list-unstyled m-0 col')[0].children[3] - - const Genres = [ - "other", - "adventure", - "building", - "competitive", - "creative", - "fighting", - "funny", - "hangout", - "medieval", - "parkour", - "puzzle", - "racing", - "roleplay", - "sandbox", - "showcase", - "simulator", - "sports", - "strategy", - "survival", - "techdemo", - "trading", - "tycoon", - "western" - ] - - const EditBtn = document.createElement('button'); - EditBtn.classList = 'btn btn-primary btn-sm'; - EditBtn.style = 'position: absolute; right: 0; margin-right: 7px;' - EditBtn.innerHTML = ' Edit Details' - document.getElementsByClassName('card-header')[3].appendChild(EditBtn); - - EditBtn.addEventListener('click', function(){ - Editing = !Editing - - EditBtn.children[0].classList.toggle('fa-hammer') - EditBtn.children[0].classList.toggle('fa-check-double') - EditBtn.children[0].classList.toggle('fa-fade') - - document.body.setAttribute('data-polyplus-inlineEditing', Editing) - - if (Editing === false) { - const Send = new FormData() - Send.append("_csrf", document.querySelector('input[name="_csrf"]').value) - Send.append("id", GameID) - for (let input of Inputs) { - console.log('start of loop') - Send.append(input.name, input.element.value) - } - - console.log('after') - fetch('/create/place/update', {method:"POST",body:Send}) - .then(response => { - if (!response.ok) { - throw new Error('Network not ok') - } - return response.text() - }) - .then(data => { - console.log('Successfully edited game') - for (let input of Inputs) { - const Reference = document.querySelector(input.reference) - Reference.innerText = input.element.value - } - }) - .catch(error => { - alert('Error while saving changes') - console.log('Error while editing game') - }); - } - - /* - PlaceTitleSpan.setAttribute('contenteditable', Editing.toString()) - if (PlaceDesc !== null) { - console.log('Description exists') - PlaceDesc.setAttribute('contenteditable', Editing.toString()) - } - if (Editing === false) { - const Send = new FormData() - Send.append("_csrf", document.querySelector('input[name="_csrf"]').value) - Send.append("id", GameID) - Send.append("name", PlaceTitle.innerText || '') - - fetch('/create/place/update', {method:"POST",body:Send}) - .then(response => { - if (!response.ok) { - throw new Error('Network not ok') - } - return response.text() - }) - .then(data => { - console.log('Successfully edited game') - }) - .catch(error => { - console.log('Error while editing game') - }); - } - */ - }); -} - -const Data = JSON.parse('{"gameTitle": "Hyper[Fart]","bg": "#000","accent": "#007bff","secondary": "#","cardBg": "#313131","font": "","text": "#fff"}') - -async function GameProfiles(Data) { - document.querySelector('h1.my-0') - .setAttribute('game-key', 'true'); - document.querySelector('div[style="min-height: 60vh;"]') - .id = 'gameprofile'; - - const Style = document.createElement('style') - - Style.innerHTML = ` - div#app { - background: ${Data.bg} !important; - } - - #gameprofile { - /*font-family: ${Data.font} !important;*/ - color: ${Data.text} !important; - } - - #gameprofile .card { - --bs-card-bg: ${Data.cardBg}; - } - - /* - #gameprofile .card.mcard[game-key] .card-header { - background: transparent; - border: none; - } - */ - - #gameprofile .card.mcard [game-key] { - background: linear-gradient(to bottom, ${Data.accent}, ${Data.secondary}); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - ` - document.body.appendChild(Style) +let URLSplit = window.location.pathname.split('/'); +let GameID = URLSplit[2]; + +var Settings; +let PinnedGames; + +!(() => { + if (GameID === undefined) {return} + + const DataContainer = document.getElementById('likes-data-container') + const RatingsData = { + Likes: parseInt(DataContainer.getAttribute('data-like-count')), + Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')), + Percentage: null + } + RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100) + const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement + + const PercentageLabel = document.createElement('small') + PercentageLabel.classList = 'text-muted' + PercentageLabel.style.fontSize = '0.8rem' + PercentageLabel.style.marginLeft = '10px' + PercentageLabel.style.marginRight = '10px' + PercentageLabel.innerText = RatingsData.Percentage + '%' + + RatingsContainer.children[0].appendChild(PercentageLabel) + + chrome.storage.sync.get(['PolyPlus_Settings'], function(result) { + Settings = result.PolyPlus_Settings; + + if (Settings.PinnedGamesOn === true) { + PinnedGames() + } + + if (Settings.InlineEditingOn === true) { + InlineEditing() + } + + if (Settings.GameProfilesOn === true) { + GameProfiles() + } + }); +})() + +async function PinnedGames() { + chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){ + PinnedGames = result.PolyPlus_PinnedGames || []; + const PinBtn = document.createElement('button'); + PinBtn.classList = 'btn btn-warning btn-sm'; + PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' + + if (PinnedGames.includes(parseInt(GameID))) { + PinBtn.innerHTML = ' Un-pin'; + } else { + if (PinnedGames.length !== 5) { + PinBtn.innerHTML = ' Pin' + } else { + PinBtn.setAttribute('disabled', true) + PinBtn.innerHTML = ' Pin (max 5/5)' + } + } + + PinBtn.addEventListener('click', function() { + PinBtn.setAttribute('disabled', 'true') + + chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { + PinnedGames = result.PolyPlus_PinnedGames || []; + const Index = PinnedGames.indexOf(parseInt(GameID)); + if (Index !== -1) { + PinnedGames.splice(Index, 1); + PinBtn.innerHTML = ' Pin' + } else { + PinnedGames.push(parseInt(GameID)); + PinBtn.innerHTML = ' Un-pin' + } + + chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() { + setTimeout(function() { + PinBtn.removeAttribute('disabled') + }, 1250) + }); + }); + }); + + document.querySelectorAll('.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) { + PinnedGames = result.PolyPlus_PinnedGames || []; + + if (PinnedGames.includes(parseInt(GameID))) { + PinBtn.innerHTML = ' Un-pin' + } else { + if (PinnedGames.length !== 5) { + PinBtn.removeAttribute('disabled') + PinBtn.innerHTML = ' Pin' + } else { + PinBtn.setAttribute('disabled', true) + PinBtn.innerHTML = ' Pin (max 5/5)' + } + } + }); + } + }); + }); +} + +async function InlineEditing() { + // Fix description editing + // Make it possible to edit description even if the game doesn't initially have a description + // Add the ability to edit the game's genre + // Improve editing visuals overall + + let Editing = false + + const PlaceTitle = document.querySelector('.card-header h1[style="font-weight:800;font-size:1.6em"]') + const PlaceTitleSpan = document.createElement('span') + PlaceTitleSpan.innerText = PlaceTitle.innerText + PlaceTitle.innerHTML = '' + PlaceTitle.appendChild(PlaceTitleSpan) + + const PlaceDesc = document.querySelector('.card.m-card.mb-2 card-body.p-3.small') + const PlaceGenre = document.getElementsByClassName('list-unstyled m-0 col')[0].children[3] + + const Genres = [ + "other", + "adventure", + "building", + "competitive", + "creative", + "fighting", + "funny", + "hangout", + "medieval", + "parkour", + "puzzle", + "racing", + "roleplay", + "sandbox", + "showcase", + "simulator", + "sports", + "strategy", + "survival", + "techdemo", + "trading", + "tycoon", + "western" + ] + + const EditBtn = document.createElement('button'); + EditBtn.classList = 'btn btn-primary btn-sm'; + EditBtn.style = 'position: absolute; right: 0; margin-right: 7px;' + EditBtn.innerHTML = ' Edit' + document.querySelectorAll('.card-header')[3].appendChild(EditBtn); + /* + const EditBtn = document.createElement('button') + EditBtn.classList = 'text-muted' + EditBtn.innerHTML = ` + + ` + EditBtn.setAttribute('style', 'background: transparent; border: none; font-size: 1rem; vertical-align: middle;') + PlaceTitle.appendChild(EditBtn) + */ + + EditBtn.addEventListener('click', function(){ + Editing = (Editing === true) ? false : true + + EditBtn.children[0].classList.toggle('fa-hammer') + EditBtn.children[0].classList.toggle('fa-check-double') + EditBtn.children[0].classList.toggle('fa-fade') + + PlaceTitleSpan.setAttribute('contenteditable', Editing.toString()) + if (PlaceDesc !== null) { + console.log('Description exists') + PlaceDesc.setAttribute('contenteditable', Editing.toString()) + } + if (Editing === false) { + const Send = new FormData() + Send.append("_csrf", document.querySelector('input[name="_csrf"]').value) + Send.append("id", GameID) + Send.append("name", PlaceTitle.innerText || '') + + fetch('/create/place/update', {method:"POST",body:Send}) + .then(response => { + if (!response.ok) { + throw new Error('Network not ok') + } + return response.text() + }) + .then(data => { + console.log('Successfully edited game') + }) + .catch(error => { + console.log('Error while editing game') + }); + } + }); +} + +const Data = JSON.parse('{"gameTitle": "Hyper[Fart]","bg": "#000","accent": "#007bff","secondary": "#","cardBg": "#313131","font": "","text": "#fff"}') + +async function GameProfiles(Data) { + document.querySelector('h1.my-0') + .setAttribute('game-key', 'true'); + document.querySelector('div[style="min-height: 60vh;"]') + .id = 'gameprofile'; + + const Style = document.createElement('style') + + Style.innerHTML = ` + div#app { + background: ${Data.bg} !important; + } + + #gameprofile { + /*font-family: ${Data.font} !important;*/ + color: ${Data.text} !important; + } + + #gameprofile .card { + --bs-card-bg: ${Data.cardBg}; + } + + /* + #gameprofile .card.mcard[game-key] .card-header { + background: transparent; + border: none; + } + */ + + #gameprofile .card.mcard [game-key] { + background: linear-gradient(to bottom, ${Data.accent}, ${Data.secondary}); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + ` + document.body.appendChild(Style) } \ No newline at end of file diff --git a/js/places/place-view.js b/js/places/place-view.js old mode 100755 new mode 100644 index 7508e68..95866f9 --- a/js/places/place-view.js +++ b/js/places/place-view.js @@ -1,241 +1,357 @@ -let URLSplit = window.location.pathname.split('/'); -let GameID = URLSplit[2]; - -var Settings; -let PinnedGames; - -!(() => { - if (GameID === undefined) {return} - - const DataContainer = document.getElementById('likes-data-container') - const RatingsData = { - Likes: parseInt(DataContainer.getAttribute('data-like-count')), - Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')), - Percentage: null - } - RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100) - const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement - - const PercentageLabel = document.createElement('small') - PercentageLabel.classList = 'text-muted' - PercentageLabel.style.fontSize = '0.8rem' - PercentageLabel.style.marginLeft = '10px' - PercentageLabel.style.marginRight = '10px' - PercentageLabel.innerText = RatingsData.Percentage + '%' - - RatingsContainer.children[0].appendChild(PercentageLabel) - - chrome.storage.sync.get(['PolyPlus_Settings'], function(result) { - Settings = result.PolyPlus_Settings; - - if (Settings.PinnedGamesOn === true) { - PinnedGames() - } - - if (Settings.InlineEditingOn === true) { - InlineEditing() - } - - if (Settings.GameProfilesOn === true) { - GameProfiles() - } - }); -})() - -async function PinnedGames() { - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){ - PinnedGames = result.PolyPlus_PinnedGames || []; - const PinBtn = document.createElement('button'); - PinBtn.classList = 'btn btn-warning btn-sm'; - PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' - - if (PinnedGames.includes(parseInt(GameID))) { - PinBtn.innerHTML = ' Un-pin'; - } else { - if (PinnedGames.length !== 5) { - PinBtn.innerHTML = ' Pin' - } else { - PinBtn.setAttribute('disabled', true) - PinBtn.innerHTML = ' Pin (max 5/5)' - } - } - - PinBtn.addEventListener('click', function() { - PinBtn.setAttribute('disabled', 'true') - - chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { - PinnedGames = result.PolyPlus_PinnedGames || []; - const Index = PinnedGames.indexOf(parseInt(GameID)); - if (Index !== -1) { - PinnedGames.splice(Index, 1); - PinBtn.innerHTML = ' Pin' - } else { - PinnedGames.push(parseInt(GameID)); - PinBtn.innerHTML = ' Un-pin' - } - - chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() { - setTimeout(function() { - PinBtn.removeAttribute('disabled') - }, 1250) - }); - }); - }); - - document.querySelectorAll('.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) { - PinnedGames = result.PolyPlus_PinnedGames || []; - - if (PinnedGames.includes(parseInt(GameID))) { - PinBtn.innerHTML = ' Un-pin' - } else { - if (PinnedGames.length !== 5) { - PinBtn.removeAttribute('disabled') - PinBtn.innerHTML = ' Pin' - } else { - PinBtn.setAttribute('disabled', true) - PinBtn.innerHTML = ' Pin (max 5/5)' - } - } - }); - } - }); - }); -} - -async function InlineEditing() { - // Fix description editing - // Make it possible to edit description even if the game doesn't initially have a description - // Add the ability to edit the game's genre - // Improve editing visuals overall - - let Editing = false - - const PlaceTitle = document.querySelector('.card-header h1[style="font-weight:800;font-size:1.6em"]') - const PlaceTitleSpan = document.createElement('span') - PlaceTitleSpan.innerText = PlaceTitle.innerText - PlaceTitle.innerHTML = '' - PlaceTitle.appendChild(PlaceTitleSpan) - - const PlaceDesc = document.querySelector('.card.m-card.mb-2 card-body.p-3.small') - const PlaceGenre = document.getElementsByClassName('list-unstyled m-0 col')[0].children[3] - - const Genres = [ - "other", - "adventure", - "building", - "competitive", - "creative", - "fighting", - "funny", - "hangout", - "medieval", - "parkour", - "puzzle", - "racing", - "roleplay", - "sandbox", - "showcase", - "simulator", - "sports", - "strategy", - "survival", - "techdemo", - "trading", - "tycoon", - "western" - ] - - const EditBtn = document.createElement('button'); - EditBtn.classList = 'btn btn-primary btn-sm'; - EditBtn.style = 'position: absolute; right: 0; margin-right: 7px;' - EditBtn.innerHTML = ' Edit' - document.querySelectorAll('.card-header')[3].appendChild(EditBtn); - /* - const EditBtn = document.createElement('button') - EditBtn.classList = 'text-muted' - EditBtn.innerHTML = ` - - ` - EditBtn.setAttribute('style', 'background: transparent; border: none; font-size: 1rem; vertical-align: middle;') - PlaceTitle.appendChild(EditBtn) - */ - - EditBtn.addEventListener('click', function(){ - Editing = (Editing === true) ? false : true - - EditBtn.children[0].classList.toggle('fa-hammer') - EditBtn.children[0].classList.toggle('fa-check-double') - EditBtn.children[0].classList.toggle('fa-fade') - - PlaceTitleSpan.setAttribute('contenteditable', Editing.toString()) - if (PlaceDesc !== null) { - console.log('Description exists') - PlaceDesc.setAttribute('contenteditable', Editing.toString()) - } - if (Editing === false) { - const Send = new FormData() - Send.append("_csrf", document.querySelector('input[name="_csrf"]').value) - Send.append("id", GameID) - Send.append("name", PlaceTitle.innerText || '') - - fetch('/create/place/update', {method:"POST",body:Send}) - .then(response => { - if (!response.ok) { - throw new Error('Network not ok') - } - return response.text() - }) - .then(data => { - console.log('Successfully edited game') - }) - .catch(error => { - console.log('Error while editing game') - }); - } - }); -} - -const Data = JSON.parse('{"gameTitle": "Hyper[Fart]","bg": "#000","accent": "#007bff","secondary": "#","cardBg": "#313131","font": "","text": "#fff"}') - -async function GameProfiles(Data) { - document.querySelector('h1.my-0') - .setAttribute('game-key', 'true'); - document.querySelector('div[style="min-height: 60vh;"]') - .id = 'gameprofile'; - - const Style = document.createElement('style') - - Style.innerHTML = ` - div#app { - background: ${Data.bg} !important; - } - - #gameprofile { - /*font-family: ${Data.font} !important;*/ - color: ${Data.text} !important; - } - - #gameprofile .card { - --bs-card-bg: ${Data.cardBg}; - } - - /* - #gameprofile .card.mcard[game-key] .card-header { - background: transparent; - border: none; - } - */ - - #gameprofile .card.mcard [game-key] { - background: linear-gradient(to bottom, ${Data.accent}, ${Data.secondary}); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - ` - document.body.appendChild(Style) +const GameID = window.location.pathname.split('/')[2] + +var Settings; +var PinnedGames; +let GamePinned; + +!(() => { + if (GameID === undefined) {return} + + const DataContainer = document.getElementById('likes-data-container') + const RatingsData = { + Likes: parseInt(DataContainer.getAttribute('data-like-count')), + Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')), + Percentage: null + } + RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100) + const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement + + const PercentageLabel = document.createElement('small') + PercentageLabel.classList = 'text-muted' + PercentageLabel.style.fontSize = '0.8rem' + PercentageLabel.style.marginLeft = '10px' + PercentageLabel.style.marginRight = '10px' + PercentageLabel.innerText = RatingsData.Percentage + '%' + + RatingsContainer.children[0].appendChild(PercentageLabel) + + chrome.storage.sync.get(['PolyPlus_Settings'], function(result) { + Settings = result.PolyPlus_Settings || {} + + if (Settings.PinnedGamesOn === true) { + PinnedGames() + } + + // Work in Progress + if (Settings.InlineEditingOn === true) { + InlineEditing() + } + + // Work in Progress + if (Settings.GameProfilesOn === true) { + GameProfiles() + } + }); +})() + +async function PinnedGames() { + chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){ + PinnedGames = result.PolyPlus_PinnedGames || {}; + /* + const PinBtn = document.createElement('button'); + PinBtn.classList = 'btn btn-warning btn-sm'; + PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' + + if (PinnedGames[GameID]) { + PinBtn.innerHTML = ' Un-pin'; + } else { + if (PinnedGames.length !== 5) { + PinBtn.innerHTML = ' Pin' + } else { + PinBtn.setAttribute('disabled', true) + PinBtn.innerHTML = ' Pin (max 5/5)' + } + } + */ + const PinBtn = document.createElement('button'); + PinBtn.classList = 'btn btn-warning btn-sm'; + PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' + + if (PinnedGames.includes(parseInt(GameID))) { + PinBtn.innerHTML = ' Un-pin'; + } else { + if (PinnedGames.length !== 5) { + PinBtn.innerHTML = ' Pin' + } else { + PinBtn.setAttribute('disabled', true) + PinBtn.innerHTML = ' Pin (max 5/5)' + } + } + + PinBtn.addEventListener('click', function() { + PinBtn.setAttribute('disabled', 'true') + + chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { + PinnedGames = result.PolyPlus_PinnedGames || []; + /* + const Index = PinnedGames.indexOf(parseInt(GameID)) + if (Index !== -1) { + //delete PinnedGames[GameID] + PinnedGames.splice(Index, 1) + PinBtn.innerHTML = ' Pin' + } else { + //PinnedGames[GameID] = {lastVisited: new Date()} + PinnedGames.push(parseInt(GameID)) + PinBtn.innerHTML = ' Un-pin' + } + */ + const Index = PinnedGames.indexOf(parseInt(GameID)); + if (Index !== -1) { + PinnedGames.splice(Index, 1); + PinBtn.innerHTML = ' Pin' + } else { + PinnedGames.push(parseInt(GameID)); + PinBtn.innerHTML = ' Un-pin' + } + + chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() { + setTimeout(function() { + PinBtn.removeAttribute('disabled') + console.log(PinnedGames) + }, 1250) + }); + }); + }); + + 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) { + PinnedGames = result.PolyPlus_PinnedGames || []; + + /* + if (PinnedGames[GameID]) { + PinBtn.innerHTML = ' Un-pin' + } else { + if (PinnedGames.length !== 5) { + PinBtn.removeAttribute('disabled') + PinBtn.innerHTML = ' Pin' + } else { + PinBtn.setAttribute('disabled', true) + PinBtn.innerHTML = ' Pin (max 5/5)' + } + } + */ + if (PinnedGames.includes(parseInt(GameID))) { + PinBtn.innerHTML = ' Un-pin' + } else { + if (PinnedGames.length !== 5) { + PinBtn.removeAttribute('disabled') + PinBtn.innerHTML = ' Pin' + } else { + PinBtn.setAttribute('disabled', true) + PinBtn.innerHTML = ' Pin (max 5/5)' + } + } + }); + } + }); + }); +} + +async function InlineEditing() { + // Fix description editing + // Make it possible to edit description even if the game doesn't initially have a description + // Add the ability to edit the game's genre + // Improve editing visuals overall + + const GameCreator = document.querySelector('#main-content .card-body .col div.text-muted a[href^="/users/"]').getAttribute('href').split('/')[2] + console.log(GameCreator) + console.log(JSON.parse(window.localStorage.getItem('account_info')).ID) + if (GameCreator !== JSON.parse(window.localStorage.getItem('account_info')).ID) { + return + } + + let Editing = false + + const Style = document.createElement('style') + Style.innerHTML = ` + body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-visible {display: block !important;} + .polyplus-inlineEditing-visible {display: none;} + + body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-hidden {display: none !important;} + .polyplus-inlineEditing-hidden {display: block;} + ` + document.body.prepend(Style) + + const Inputs = [ + { + name: "name", + element: null, + reference: '.card-header h1[style="font-weight:800;font-size:1.6em"]', + placeholder: "Place Title..", + required: true, + isTextarea: false, + styles: 'font-weight:800;font-size:1.6em' + }, + { + name: "description", + element: null, + reference: '.col:has(#likes-data-container) .card.mcard.mb-2 .card-body.p-3.small', + placeholder: "Place Description..", + required: false, + isTextarea: true, + styles: 'height:300px; overflow-y:auto;' + } + ] + console.log(Inputs) + for (let input of Inputs) { + let Input = (input.isTextarea === true) ? document.createElement('textarea') : document.createElement('input') + input.element = Input + + const Reference = document.querySelector(input.reference) + + Input.classList = 'polyplus-inlineEditing-visible form-control' + Input.placeholder = input.placeholder + Input.value = Reference.innerText + Input.style = input.styles + + Reference.classList.add('polyplus-inlineEditing-hidden') + Reference.parentElement.appendChild(Input) + } + + const PlaceGenre = document.getElementsByClassName('list-unstyled m-0 col')[0].children[3] + + const Genres = [ + "other", + "adventure", + "building", + "competitive", + "creative", + "fighting", + "funny", + "hangout", + "medieval", + "parkour", + "puzzle", + "racing", + "roleplay", + "sandbox", + "showcase", + "simulator", + "sports", + "strategy", + "survival", + "techdemo", + "trading", + "tycoon", + "western" + ] + + const EditBtn = document.createElement('button'); + EditBtn.classList = 'btn btn-primary btn-sm'; + EditBtn.style = 'position: absolute; right: 0; margin-right: 7px;' + EditBtn.innerHTML = ' Edit Details' + document.getElementsByClassName('card-header')[3].appendChild(EditBtn); + + EditBtn.addEventListener('click', function(){ + Editing = !Editing + + EditBtn.children[0].classList.toggle('fa-hammer') + EditBtn.children[0].classList.toggle('fa-check-double') + EditBtn.children[0].classList.toggle('fa-fade') + + document.body.setAttribute('data-polyplus-inlineEditing', Editing) + + if (Editing === false) { + const Send = new FormData() + Send.append("_csrf", document.querySelector('input[name="_csrf"]').value) + Send.append("id", GameID) + for (let input of Inputs) { + console.log('start of loop') + Send.append(input.name, input.element.value) + } + + console.log('after') + fetch('/create/place/update', {method:"POST",body:Send}) + .then(response => { + if (!response.ok) { + throw new Error('Network not ok') + } + return response.text() + }) + .then(data => { + console.log('Successfully edited game') + for (let input of Inputs) { + const Reference = document.querySelector(input.reference) + Reference.innerText = input.element.value + } + }) + .catch(error => { + alert('Error while saving changes') + console.log('Error while editing game') + }); + } + + /* + PlaceTitleSpan.setAttribute('contenteditable', Editing.toString()) + if (PlaceDesc !== null) { + console.log('Description exists') + PlaceDesc.setAttribute('contenteditable', Editing.toString()) + } + if (Editing === false) { + const Send = new FormData() + Send.append("_csrf", document.querySelector('input[name="_csrf"]').value) + Send.append("id", GameID) + Send.append("name", PlaceTitle.innerText || '') + + fetch('/create/place/update', {method:"POST",body:Send}) + .then(response => { + if (!response.ok) { + throw new Error('Network not ok') + } + return response.text() + }) + .then(data => { + console.log('Successfully edited game') + }) + .catch(error => { + console.log('Error while editing game') + }); + } + */ + }); +} + +//const Data = JSON.parse('{"gameTitle": "Hyper[Fart]","bg": "#000","accent": "#007bff","secondary": "#","cardBg": "#313131","font": "","text": "#fff"}') +const Data = JSON.parse('{"gameTitle":"Isolation: Brix High School","bg":"#0148af","accent":"#986c6a","secondary":"#b7d3f2","cardBg":"#313131","text":"#fff"}') +async function GameProfiles(data) { + data = Data + document.querySelector('h1.my-0') + .setAttribute('game-key', 'true'); + document.querySelector('div[style="min-height: 60vh;"]') + .id = 'gameprofile'; + + const Style = document.createElement('style') + + Style.innerHTML = ` + div#app { + background: ${Data.bg} !important; + } + + #gameprofile { + /*font-family: ${Data.font} !important;*/ + color: ${Data.text} !important; + } + + #gameprofile .card { + --bs-card-bg: ${Data.cardBg}; + } + + /* + #gameprofile .card.mcard[game-key] .card-header { + background: transparent; + border: none; + } + */ + + #gameprofile .card.mcard [game-key] { + background: linear-gradient(to bottom, ${Data.accent}, ${Data.secondary}); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + ` + document.body.appendChild(Style) } \ No newline at end of file diff --git a/manifest.json b/manifest.json index d988c58..0227ffa 100755 --- a/manifest.json +++ b/manifest.json @@ -31,7 +31,7 @@ { "matches": ["https://polytoria.com/places/**"], - "js": ["/js/places/place-view2.js"] + "js": ["/js/places/place-view.js"] }, { diff --git a/settings.js b/settings.js index 822b283..4181d87 100755 --- a/settings.js +++ b/settings.js @@ -61,6 +61,8 @@ var Utilities; Utilities = Utilities.default ExpectedSettings = Utilities.DefaultSettings + + LoadCurrent() })(); const ResetDefaultsModal = document.getElementById('ResetDefaults-Modal') @@ -144,12 +146,6 @@ Elements.forEach(element => { }, 400) } else if (Setting === '[cancel]') { Modal.close(); - } else if (Setting === '[callback]') { - let Function = btn.getAttribute('data-onclick') - if (window[Function] && typeof(window[Function]) === 'function') { - console.log('is') - window[Function]() - } } else { if (!(btn.getAttribute('data-parent'))) { ToggleSetting(Modal.getAttribute('data-setting')[btn.getAttribute('data-setting')], null) @@ -243,7 +239,6 @@ function LoadCurrent() { }); }); } -LoadCurrent(); function ToggleSetting(Name, Element) { if (Settings[Name] === true) {