Index/polyplus
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Request Game Profile and Settings Modal Fix

Browse source
This commit is contained in:
Index 2024-02-11 17:13:55 -06:00
parent 489309814b
commit a334e4be1d
5 changed files with 642 additions and 611 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
js/places/place-edit.js
View file

@ -1,11 +1,18 @@
const ID = window.location.pathname.split('/')[3]
const Form = document.querySelector('form[action="/create/place/update"]')
var Settings;
!(async () => { !(async () => {
const ID = window.location.pathname.split('/')[3] ActivityToggle()
//RequestGameProfile()
})()
async function ActivityToggle() {
const Response = await fetch('https://api.polytoria.com/v1/places/'+ID) const Response = await fetch('https://api.polytoria.com/v1/places/'+ID)
let Status = await Response.json() let Status = await Response.json()
Status = Status.isActive Status = Status.isActive
console.log(Status)
const Form = document.querySelector('form[action="/create/place/update"]')
const DIV = document.createElement('div') const DIV = document.createElement('div')
DIV.classList = 'form-group mt-4' DIV.classList = 'form-group mt-4'
DIV.innerHTML = ` DIV.innerHTML = `
@ -47,4 +54,36 @@
console.log(error) console.log(error)
}); });
}); });
})() }
function RequestGameProfile() {
const Div = document.createElement('div')
Div.classList = 'card mt-4'
Div.innerHTML = `
<div class="card-body">
<input type="text" class="form-control bg-dark mb-2" placeholder="Game Title..">
<input type="color" class="form-control bg-dark mb-2" placeholder="Background Color..">
<input type="color" class="form-control bg-dark mb-2" placeholder="Accent Color..">
<input type="color" class="form-control bg-dark mb-2" placeholder="Secondary Color..">
<input type="color" class="form-control bg-dark mb-2" placeholder="Card Background Color..">
<input type="color" class="form-control bg-dark mb-2" placeholder="Text Color..">
<button type="button" class="btn btn-primary">Submit Request</button>
</div>
`
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)))
});
}

599
js/places/place-view2.js → js/places/place-view-old.js Normal file → Executable file
View file

@ -1,360 +1,241 @@
let GameID = window.location.pathname.split('/')[2] let URLSplit = window.location.pathname.split('/');
let GameID = URLSplit[2];
var Settings;
let PinnedGames; var Settings;
let GamePinned; let PinnedGames;
!(() => { !(() => {
if (GameID === undefined) {return} if (GameID === undefined) {return}
const DataContainer = document.getElementById('likes-data-container') const DataContainer = document.getElementById('likes-data-container')
const RatingsData = { const RatingsData = {
Likes: parseInt(DataContainer.getAttribute('data-like-count')), Likes: parseInt(DataContainer.getAttribute('data-like-count')),
Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')), Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')),
Percentage: null Percentage: null
} }
RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100) RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100)
const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement
const PercentageLabel = document.createElement('small') const PercentageLabel = document.createElement('small')
PercentageLabel.classList = 'text-muted' PercentageLabel.classList = 'text-muted'
PercentageLabel.style.fontSize = '0.8rem' PercentageLabel.style.fontSize = '0.8rem'
PercentageLabel.style.marginLeft = '10px' PercentageLabel.style.marginLeft = '10px'
PercentageLabel.style.marginRight = '10px' PercentageLabel.style.marginRight = '10px'
PercentageLabel.innerText = RatingsData.Percentage + '%' PercentageLabel.innerText = RatingsData.Percentage + '%'
RatingsContainer.children[0].appendChild(PercentageLabel) RatingsContainer.children[0].appendChild(PercentageLabel)
chrome.storage.sync.get(['PolyPlus_Settings'], function(result) { chrome.storage.sync.get(['PolyPlus_Settings'], function(result) {
Settings = result.PolyPlus_Settings || { Settings = result.PolyPlus_Settings;
PinnedGamesOn: true,
InlineEditingOn: false, if (Settings.PinnedGamesOn === true) {
GameProfilesOn: false PinnedGames()
}; }
if (Settings.PinnedGamesOn === true) { if (Settings.InlineEditingOn === true) {
PinnedGames() InlineEditing()
} }
// Work in Progress if (Settings.GameProfilesOn === true) {
if (Settings.InlineEditingOn === true) { GameProfiles()
InlineEditing() }
} });
})()
// Work in Progress
if (Settings.GameProfilesOn === true) { async function PinnedGames() {
GameProfiles() 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;'
async function PinnedGames() {
chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){ if (PinnedGames.includes(parseInt(GameID))) {
PinnedGames = result.PolyPlus_PinnedGames || {}; PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin';
/* } else {
const PinBtn = document.createElement('button'); if (PinnedGames.length !== 5) {
PinBtn.classList = 'btn btn-warning btn-sm'; PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' } else {
PinBtn.setAttribute('disabled', true)
if (PinnedGames[GameID]) { PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)'
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'; }
} else { }
if (PinnedGames.length !== 5) {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' PinBtn.addEventListener('click', function() {
} else { PinBtn.setAttribute('disabled', 'true')
PinBtn.setAttribute('disabled', true)
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)' chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) {
} PinnedGames = result.PolyPlus_PinnedGames || [];
} const Index = PinnedGames.indexOf(parseInt(GameID));
*/ if (Index !== -1) {
const PinBtn = document.createElement('button'); PinnedGames.splice(Index, 1);
PinBtn.classList = 'btn btn-warning btn-sm'; PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' } else {
PinnedGames.push(parseInt(GameID));
if (PinnedGames.includes(parseInt(GameID))) { PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'; }
} else {
if (PinnedGames.length !== 5) { chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' setTimeout(function() {
} else { PinBtn.removeAttribute('disabled')
PinBtn.setAttribute('disabled', true) }, 1250)
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)' });
} });
} });
PinBtn.addEventListener('click', function() { document.querySelectorAll('.card-header')[2].appendChild(PinBtn);
PinBtn.setAttribute('disabled', 'true')
chrome.storage.onChanged.addListener(function(changes, namespace) {
chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { if ('PolyPlus_PinnedGames' in changes) {
PinnedGames = result.PolyPlus_PinnedGames || []; chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) {
/* PinnedGames = result.PolyPlus_PinnedGames || [];
const Index = PinnedGames.indexOf(parseInt(GameID))
if (Index !== -1) { if (PinnedGames.includes(parseInt(GameID))) {
//delete PinnedGames[GameID] PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
PinnedGames.splice(Index, 1) } else {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' if (PinnedGames.length !== 5) {
} else { PinBtn.removeAttribute('disabled')
//PinnedGames[GameID] = {lastVisited: new Date()} PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
PinnedGames.push(parseInt(GameID)) } else {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin' PinBtn.setAttribute('disabled', true)
} PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)'
*/ }
const Index = PinnedGames.indexOf(parseInt(GameID)); }
if (Index !== -1) { });
PinnedGames.splice(Index, 1); }
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' });
} else { });
PinnedGames.push(parseInt(GameID)); }
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
} async function InlineEditing() {
// Fix description editing
chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() { // Make it possible to edit description even if the game doesn't initially have a description
setTimeout(function() { // Add the ability to edit the game's genre
PinBtn.removeAttribute('disabled') // Improve editing visuals overall
console.log(PinnedGames)
}, 1250) 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
document.getElementsByClassName('card-header')[2].appendChild(PinBtn); PlaceTitle.innerHTML = ''
PlaceTitle.appendChild(PlaceTitleSpan)
chrome.storage.onChanged.addListener(function(changes, namespace) {
if ('PolyPlus_PinnedGames' in changes) { const PlaceDesc = document.querySelector('.card.m-card.mb-2 card-body.p-3.small')
chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { const PlaceGenre = document.getElementsByClassName('list-unstyled m-0 col')[0].children[3]
PinnedGames = result.PolyPlus_PinnedGames || [];
const Genres = [
/* "other",
if (PinnedGames[GameID]) { "adventure",
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin' "building",
} else { "competitive",
if (PinnedGames.length !== 5) { "creative",
PinBtn.removeAttribute('disabled') "fighting",
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' "funny",
} else { "hangout",
PinBtn.setAttribute('disabled', true) "medieval",
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)' "parkour",
} "puzzle",
} "racing",
*/ "roleplay",
if (PinnedGames.includes(parseInt(GameID))) { "sandbox",
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin' "showcase",
} else { "simulator",
if (PinnedGames.length !== 5) { "sports",
PinBtn.removeAttribute('disabled') "strategy",
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' "survival",
} else { "techdemo",
PinBtn.setAttribute('disabled', true) "trading",
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)' "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 = '<i class="fa-duotone fa-hammer"></i> <span>Edit</span>'
document.querySelectorAll('.card-header')[3].appendChild(EditBtn);
async function InlineEditing() { /*
// Fix description editing const EditBtn = document.createElement('button')
// Make it possible to edit description even if the game doesn't initially have a description EditBtn.classList = 'text-muted'
// Add the ability to edit the game's genre EditBtn.innerHTML = `
// Improve editing visuals overall <i class="fa-duotone fa-hammer"></i>
`
const GameCreator = document.querySelector('#main-content .card-body .col div.text-muted a[href^="/users/"]').getAttribute('href').split('/')[2] EditBtn.setAttribute('style', 'background: transparent; border: none; font-size: 1rem; vertical-align: middle;')
console.log(GameCreator) PlaceTitle.appendChild(EditBtn)
console.log(JSON.parse(window.localStorage.getItem('account_info')).ID) */
if (GameCreator !== JSON.parse(window.localStorage.getItem('account_info')).ID) {
return EditBtn.addEventListener('click', function(){
} Editing = (Editing === true) ? false : true
let Editing = false EditBtn.children[0].classList.toggle('fa-hammer')
EditBtn.children[0].classList.toggle('fa-check-double')
const Style = document.createElement('style') EditBtn.children[0].classList.toggle('fa-fade')
Style.innerHTML = `
body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-visible {display: block !important;} PlaceTitleSpan.setAttribute('contenteditable', Editing.toString())
.polyplus-inlineEditing-visible {display: none;} if (PlaceDesc !== null) {
console.log('Description exists')
body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-hidden {display: none !important;} PlaceDesc.setAttribute('contenteditable', Editing.toString())
.polyplus-inlineEditing-hidden {display: block;} }
` if (Editing === false) {
document.body.prepend(Style) const Send = new FormData()
Send.append("_csrf", document.querySelector('input[name="_csrf"]').value)
const Inputs = [ Send.append("id", GameID)
{ Send.append("name", PlaceTitle.innerText || '')
name: "name",
element: null, fetch('/create/place/update', {method:"POST",body:Send})
reference: '.card-header h1[style="font-weight:800;font-size:1.6em"]', .then(response => {
placeholder: "Place Title..", if (!response.ok) {
required: true, throw new Error('Network not ok')
isTextarea: false, }
styles: 'font-weight:800;font-size:1.6em' return response.text()
}, })
{ .then(data => {
name: "description", console.log('Successfully edited game')
element: null, })
reference: '.col:has(#likes-data-container) .card.mcard.mb-2 .card-body.p-3.small', .catch(error => {
placeholder: "Place Description..", console.log('Error while editing game')
required: false, });
isTextarea: true, }
styles: 'height:300px; overflow-y:auto;' });
} }
]
console.log(Inputs) const Data = JSON.parse('{"gameTitle": "Hyper[Fart]","bg": "#000","accent": "#007bff","secondary": "#","cardBg": "#313131","font": "","text": "#fff"}')
for (let input of Inputs) {
let Input = (input.isTextarea === true) ? document.createElement('textarea') : document.createElement('input') async function GameProfiles(Data) {
input.element = Input document.querySelector('h1.my-0')
.setAttribute('game-key', 'true');
const Reference = document.querySelector(input.reference) document.querySelector('div[style="min-height: 60vh;"]')
.id = 'gameprofile';
Input.classList = 'polyplus-inlineEditing-visible form-control'
Input.placeholder = input.placeholder const Style = document.createElement('style')
Input.value = Reference.innerText
Input.style = input.styles Style.innerHTML = `
div#app {
Reference.classList.add('polyplus-inlineEditing-hidden') background: ${Data.bg} !important;
Reference.parentElement.appendChild(Input) }
}
#gameprofile {
const PlaceGenre = document.getElementsByClassName('list-unstyled m-0 col')[0].children[3] /*font-family: ${Data.font} !important;*/
color: ${Data.text} !important;
const Genres = [ }
"other",
"adventure", #gameprofile .card {
"building", --bs-card-bg: ${Data.cardBg};
"competitive", }
"creative",
"fighting", /*
"funny", #gameprofile .card.mcard[game-key] .card-header {
"hangout", background: transparent;
"medieval", border: none;
"parkour", }
"puzzle", */
"racing",
"roleplay", #gameprofile .card.mcard [game-key] {
"sandbox", background: linear-gradient(to bottom, ${Data.accent}, ${Data.secondary});
"showcase", background-clip: text;
"simulator", -webkit-background-clip: text;
"sports", -webkit-text-fill-color: transparent;
"strategy", }
"survival", `
"techdemo", document.body.appendChild(Style)
"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 = '<i class="fa-duotone fa-hammer"></i> <span>Edit Details</span>'
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)
} }

596
js/places/place-view.js Executable file → Normal file
View file

@ -1,241 +1,357 @@
let URLSplit = window.location.pathname.split('/'); const GameID = window.location.pathname.split('/')[2]
let GameID = URLSplit[2];
var Settings;
var Settings; var PinnedGames;
let PinnedGames; let GamePinned;
!(() => { !(() => {
if (GameID === undefined) {return} if (GameID === undefined) {return}
const DataContainer = document.getElementById('likes-data-container') const DataContainer = document.getElementById('likes-data-container')
const RatingsData = { const RatingsData = {
Likes: parseInt(DataContainer.getAttribute('data-like-count')), Likes: parseInt(DataContainer.getAttribute('data-like-count')),
Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')), Dislikes: parseInt(DataContainer.getAttribute('data-dislike-count')),
Percentage: null Percentage: null
} }
RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100) RatingsData.Percentage = Math.floor((RatingsData.Likes / (RatingsData.Likes + RatingsData.Dislikes)) * 100)
const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement const RatingsContainer = document.getElementById('thumbup-btn').parentElement.parentElement
const PercentageLabel = document.createElement('small') const PercentageLabel = document.createElement('small')
PercentageLabel.classList = 'text-muted' PercentageLabel.classList = 'text-muted'
PercentageLabel.style.fontSize = '0.8rem' PercentageLabel.style.fontSize = '0.8rem'
PercentageLabel.style.marginLeft = '10px' PercentageLabel.style.marginLeft = '10px'
PercentageLabel.style.marginRight = '10px' PercentageLabel.style.marginRight = '10px'
PercentageLabel.innerText = RatingsData.Percentage + '%' PercentageLabel.innerText = RatingsData.Percentage + '%'
RatingsContainer.children[0].appendChild(PercentageLabel) RatingsContainer.children[0].appendChild(PercentageLabel)
chrome.storage.sync.get(['PolyPlus_Settings'], function(result) { chrome.storage.sync.get(['PolyPlus_Settings'], function(result) {
Settings = result.PolyPlus_Settings; Settings = result.PolyPlus_Settings || {}
if (Settings.PinnedGamesOn === true) { if (Settings.PinnedGamesOn === true) {
PinnedGames() PinnedGames()
} }
if (Settings.InlineEditingOn === true) { // Work in Progress
InlineEditing() if (Settings.InlineEditingOn === true) {
} InlineEditing()
}
if (Settings.GameProfilesOn === true) {
GameProfiles() // Work in Progress
} if (Settings.GameProfilesOn === true) {
}); GameProfiles()
})() }
});
async function PinnedGames() { })()
chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){
PinnedGames = result.PolyPlus_PinnedGames || []; async function PinnedGames() {
const PinBtn = document.createElement('button'); chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){
PinBtn.classList = 'btn btn-warning btn-sm'; PinnedGames = result.PolyPlus_PinnedGames || {};
PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;' /*
const PinBtn = document.createElement('button');
if (PinnedGames.includes(parseInt(GameID))) { PinBtn.classList = 'btn btn-warning btn-sm';
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'; PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;'
} else {
if (PinnedGames.length !== 5) { if (PinnedGames[GameID]) {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin';
} else { } else {
PinBtn.setAttribute('disabled', true) if (PinnedGames.length !== 5) {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)' PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
} } else {
} PinBtn.setAttribute('disabled', true)
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)'
PinBtn.addEventListener('click', function() { }
PinBtn.setAttribute('disabled', 'true') }
*/
chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { const PinBtn = document.createElement('button');
PinnedGames = result.PolyPlus_PinnedGames || []; PinBtn.classList = 'btn btn-warning btn-sm';
const Index = PinnedGames.indexOf(parseInt(GameID)); PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;'
if (Index !== -1) {
PinnedGames.splice(Index, 1); if (PinnedGames.includes(parseInt(GameID))) {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin';
} else { } else {
PinnedGames.push(parseInt(GameID)); if (PinnedGames.length !== 5) {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin' PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
} } else {
PinBtn.setAttribute('disabled', true)
chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() { PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)'
setTimeout(function() { }
PinBtn.removeAttribute('disabled') }
}, 1250)
}); PinBtn.addEventListener('click', function() {
}); PinBtn.setAttribute('disabled', 'true')
});
chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) {
document.querySelectorAll('.card-header')[2].appendChild(PinBtn); PinnedGames = result.PolyPlus_PinnedGames || [];
/*
chrome.storage.onChanged.addListener(function(changes, namespace) { const Index = PinnedGames.indexOf(parseInt(GameID))
if ('PolyPlus_PinnedGames' in changes) { if (Index !== -1) {
chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) { //delete PinnedGames[GameID]
PinnedGames = result.PolyPlus_PinnedGames || []; PinnedGames.splice(Index, 1)
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
if (PinnedGames.includes(parseInt(GameID))) { } else {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin' //PinnedGames[GameID] = {lastVisited: new Date()}
} else { PinnedGames.push(parseInt(GameID))
if (PinnedGames.length !== 5) { PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
PinBtn.removeAttribute('disabled') }
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin' */
} else { const Index = PinnedGames.indexOf(parseInt(GameID));
PinBtn.setAttribute('disabled', true) if (Index !== -1) {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)' PinnedGames.splice(Index, 1);
} PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
} } else {
}); PinnedGames.push(parseInt(GameID));
} PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
}); }
});
} chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() {
setTimeout(function() {
async function InlineEditing() { PinBtn.removeAttribute('disabled')
// Fix description editing console.log(PinnedGames)
// Make it possible to edit description even if the game doesn't initially have a description }, 1250)
// Add the ability to edit the game's genre });
// Improve editing visuals overall });
});
let Editing = false
document.getElementsByClassName('card-header')[2].appendChild(PinBtn);
const PlaceTitle = document.querySelector('.card-header h1[style="font-weight:800;font-size:1.6em"]')
const PlaceTitleSpan = document.createElement('span') chrome.storage.onChanged.addListener(function(changes, namespace) {
PlaceTitleSpan.innerText = PlaceTitle.innerText if ('PolyPlus_PinnedGames' in changes) {
PlaceTitle.innerHTML = '' chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result) {
PlaceTitle.appendChild(PlaceTitleSpan) PinnedGames = result.PolyPlus_PinnedGames || [];
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] if (PinnedGames[GameID]) {
PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
const Genres = [ } else {
"other", if (PinnedGames.length !== 5) {
"adventure", PinBtn.removeAttribute('disabled')
"building", PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
"competitive", } else {
"creative", PinBtn.setAttribute('disabled', true)
"fighting", PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)'
"funny", }
"hangout", }
"medieval", */
"parkour", if (PinnedGames.includes(parseInt(GameID))) {
"puzzle", PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
"racing", } else {
"roleplay", if (PinnedGames.length !== 5) {
"sandbox", PinBtn.removeAttribute('disabled')
"showcase", PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin'
"simulator", } else {
"sports", PinBtn.setAttribute('disabled', true)
"strategy", PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Pin (max 5/5)'
"survival", }
"techdemo", }
"trading", });
"tycoon", }
"western" });
] });
}
const EditBtn = document.createElement('button');
EditBtn.classList = 'btn btn-primary btn-sm'; async function InlineEditing() {
EditBtn.style = 'position: absolute; right: 0; margin-right: 7px;' // Fix description editing
EditBtn.innerHTML = '<i class="fa-duotone fa-hammer"></i> <span>Edit</span>' // Make it possible to edit description even if the game doesn't initially have a description
document.querySelectorAll('.card-header')[3].appendChild(EditBtn); // Add the ability to edit the game's genre
/* // Improve editing visuals overall
const EditBtn = document.createElement('button')
EditBtn.classList = 'text-muted' const GameCreator = document.querySelector('#main-content .card-body .col div.text-muted a[href^="/users/"]').getAttribute('href').split('/')[2]
EditBtn.innerHTML = ` console.log(GameCreator)
<i class="fa-duotone fa-hammer"></i> console.log(JSON.parse(window.localStorage.getItem('account_info')).ID)
` if (GameCreator !== JSON.parse(window.localStorage.getItem('account_info')).ID) {
EditBtn.setAttribute('style', 'background: transparent; border: none; font-size: 1rem; vertical-align: middle;') return
PlaceTitle.appendChild(EditBtn) }
*/
let Editing = false
EditBtn.addEventListener('click', function(){
Editing = (Editing === true) ? false : true const Style = document.createElement('style')
Style.innerHTML = `
EditBtn.children[0].classList.toggle('fa-hammer') body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-visible {display: block !important;}
EditBtn.children[0].classList.toggle('fa-check-double') .polyplus-inlineEditing-visible {display: none;}
EditBtn.children[0].classList.toggle('fa-fade')
body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-hidden {display: none !important;}
PlaceTitleSpan.setAttribute('contenteditable', Editing.toString()) .polyplus-inlineEditing-hidden {display: block;}
if (PlaceDesc !== null) { `
console.log('Description exists') document.body.prepend(Style)
PlaceDesc.setAttribute('contenteditable', Editing.toString())
} const Inputs = [
if (Editing === false) { {
const Send = new FormData() name: "name",
Send.append("_csrf", document.querySelector('input[name="_csrf"]').value) element: null,
Send.append("id", GameID) reference: '.card-header h1[style="font-weight:800;font-size:1.6em"]',
Send.append("name", PlaceTitle.innerText || '') placeholder: "Place Title..",
required: true,
fetch('/create/place/update', {method:"POST",body:Send}) isTextarea: false,
.then(response => { styles: 'font-weight:800;font-size:1.6em'
if (!response.ok) { },
throw new Error('Network not ok') {
} name: "description",
return response.text() element: null,
}) reference: '.col:has(#likes-data-container) .card.mcard.mb-2 .card-body.p-3.small',
.then(data => { placeholder: "Place Description..",
console.log('Successfully edited game') required: false,
}) isTextarea: true,
.catch(error => { styles: 'height:300px; overflow-y:auto;'
console.log('Error while editing game') }
}); ]
} console.log(Inputs)
}); for (let input of Inputs) {
} let Input = (input.isTextarea === true) ? document.createElement('textarea') : document.createElement('input')
input.element = Input
const Data = JSON.parse('{"gameTitle": "Hyper[Fart]","bg": "#000","accent": "#007bff","secondary": "#","cardBg": "#313131","font": "","text": "#fff"}')
const Reference = document.querySelector(input.reference)
async function GameProfiles(Data) {
document.querySelector('h1.my-0') Input.classList = 'polyplus-inlineEditing-visible form-control'
.setAttribute('game-key', 'true'); Input.placeholder = input.placeholder
document.querySelector('div[style="min-height: 60vh;"]') Input.value = Reference.innerText
.id = 'gameprofile'; Input.style = input.styles
const Style = document.createElement('style') Reference.classList.add('polyplus-inlineEditing-hidden')
Reference.parentElement.appendChild(Input)
Style.innerHTML = ` }
div#app {
background: ${Data.bg} !important; const PlaceGenre = document.getElementsByClassName('list-unstyled m-0 col')[0].children[3]
}
const Genres = [
#gameprofile { "other",
/*font-family: ${Data.font} !important;*/ "adventure",
color: ${Data.text} !important; "building",
} "competitive",
"creative",
#gameprofile .card { "fighting",
--bs-card-bg: ${Data.cardBg}; "funny",
} "hangout",
"medieval",
/* "parkour",
#gameprofile .card.mcard[game-key] .card-header { "puzzle",
background: transparent; "racing",
border: none; "roleplay",
} "sandbox",
*/ "showcase",
"simulator",
#gameprofile .card.mcard [game-key] { "sports",
background: linear-gradient(to bottom, ${Data.accent}, ${Data.secondary}); "strategy",
background-clip: text; "survival",
-webkit-background-clip: text; "techdemo",
-webkit-text-fill-color: transparent; "trading",
} "tycoon",
` "western"
document.body.appendChild(Style) ]
const EditBtn = document.createElement('button');
EditBtn.classList = 'btn btn-primary btn-sm';
EditBtn.style = 'position: absolute; right: 0; margin-right: 7px;'
EditBtn.innerHTML = '<i class="fa-duotone fa-hammer"></i> <span>Edit Details</span>'
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)
} }

2
manifest.json
View file

@ -31,7 +31,7 @@
{ {
"matches": ["https://polytoria.com/places/**"], "matches": ["https://polytoria.com/places/**"],
"js": ["/js/places/place-view2.js"] "js": ["/js/places/place-view.js"]
}, },
{ {

9
settings.js
View file

@ -61,6 +61,8 @@ var Utilities;
Utilities = Utilities.default Utilities = Utilities.default
ExpectedSettings = Utilities.DefaultSettings ExpectedSettings = Utilities.DefaultSettings
LoadCurrent()
})(); })();
const ResetDefaultsModal = document.getElementById('ResetDefaults-Modal') const ResetDefaultsModal = document.getElementById('ResetDefaults-Modal')
@ -144,12 +146,6 @@ Elements.forEach(element => {
}, 400) }, 400)
} else if (Setting === '[cancel]') { } else if (Setting === '[cancel]') {
Modal.close(); 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 { } else {
if (!(btn.getAttribute('data-parent'))) { if (!(btn.getAttribute('data-parent'))) {
ToggleSetting(Modal.getAttribute('data-setting')[btn.getAttribute('data-setting')], null) ToggleSetting(Modal.getAttribute('data-setting')[btn.getAttribute('data-setting')], null)
@ -243,7 +239,6 @@ function LoadCurrent() {
}); });
}); });
} }
LoadCurrent();
function ToggleSetting(Name, Element) { function ToggleSetting(Name, Element) {
if (Settings[Name] === true) { if (Settings[Name] === true) {