Request Game Profile and Settings Modal Fix

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)
             });
     });
-})()
+}
+
+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)))
+    });
+}

js/places/place-view-old.js

@@ -1,8 +1,8 @@
-let GameID = window.location.pathname.split('/')[2]
+let URLSplit = window.location.pathname.split('/');
+let GameID = URLSplit[2];
 
 var Settings;
 let PinnedGames;
-let GamePinned;
 
 !(() => {
     if (GameID === undefined) {return}
@@ -26,22 +26,16 @@ let GamePinned;
     RatingsContainer.children[0].appendChild(PercentageLabel)
 
     chrome.storage.sync.get(['PolyPlus_Settings'], function(result) {
-        Settings = result.PolyPlus_Settings || {
+        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()
         }
@@ -50,23 +44,7 @@ let GamePinned;
 
 async function PinnedGames() {
     chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){
-        PinnedGames = result.PolyPlus_PinnedGames || {};
+        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 = '<i class="fa-duotone fa-star"></i> Un-pin';
-        } else {
-            if (PinnedGames.length !== 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)'
-            }
-        }
-        */
         const PinBtn = document.createElement('button');
         PinBtn.classList = 'btn btn-warning btn-sm';
         PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;'
@@ -87,18 +65,6 @@ async function PinnedGames() {
 
             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 = '<i class="fa-duotone fa-star"></i> Pin'
-                } else {
-                    //PinnedGames[GameID] = {lastVisited: new Date()}
-                    PinnedGames.push(parseInt(GameID))
-                    PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
-                }
-                */
                 const Index = PinnedGames.indexOf(parseInt(GameID));
                 if (Index !== -1) {
                     PinnedGames.splice(Index, 1);
@@ -111,32 +77,18 @@ async function PinnedGames() {
                 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);
+        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[GameID]) {
-                        PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
-                    } else {
-                        if (PinnedGames.length !== 5) {
-                            PinBtn.removeAttribute('disabled')
-                            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)'
-                        }
-                    }
-                    */
                     if (PinnedGames.includes(parseInt(GameID))) {
                         PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
                     } else {
@@ -160,61 +112,15 @@ async function InlineEditing() {
     // 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')
+    const PlaceTitle = document.querySelector('.card-header h1[style="font-weight:800;font-size:1.6em"]')
-    Style.innerHTML = `
+    const PlaceTitleSpan = document.createElement('span')
-    body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-visible {display: block !important;}
+    PlaceTitleSpan.innerText = PlaceTitle.innerText
-    .polyplus-inlineEditing-visible {display: none;}
+    PlaceTitle.innerHTML = ''
-
+    PlaceTitle.appendChild(PlaceTitleSpan)
-    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 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 = [
@@ -246,49 +152,25 @@ async function InlineEditing() {
     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>'
+    EditBtn.innerHTML = '<i class="fa-duotone fa-hammer"></i> <span>Edit</span>'
-    document.getElementsByClassName('card-header')[3].appendChild(EditBtn);
+    document.querySelectorAll('.card-header')[3].appendChild(EditBtn);
+    /*
+    const EditBtn = document.createElement('button')
+    EditBtn.classList = 'text-muted'
+    EditBtn.innerHTML = `
+    <i class="fa-duotone fa-hammer"></i>
+    `
+    EditBtn.setAttribute('style', 'background: transparent; border: none; font-size: 1rem; vertical-align: middle;')
+    PlaceTitle.appendChild(EditBtn)
+    */
 
     EditBtn.addEventListener('click', function(){
-        Editing = !Editing
+        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')
 
-        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')
@@ -314,7 +196,6 @@ async function InlineEditing() {
                     console.log('Error while editing game')
                 });
         }
-        */
     });
 }
 

js/places/place-view.js

@@ -1,8 +1,8 @@
-let URLSplit = window.location.pathname.split('/');
+const GameID = window.location.pathname.split('/')[2]
-let GameID = URLSplit[2];
 
 var Settings;
-let PinnedGames;
+var PinnedGames;
+let GamePinned;
 
 !(() => {
     if (GameID === undefined) {return}
@@ -26,16 +26,18 @@ let PinnedGames;
     RatingsContainer.children[0].appendChild(PercentageLabel)
 
     chrome.storage.sync.get(['PolyPlus_Settings'], function(result) {
-        Settings = result.PolyPlus_Settings;
+        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()
         }
@@ -44,7 +46,23 @@ let PinnedGames;
 
 async function PinnedGames() {
     chrome.storage.sync.get(['PolyPlus_PinnedGames'], function(result){
-        PinnedGames = result.PolyPlus_PinnedGames || [];
+        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 = '<i class="fa-duotone fa-star"></i> Un-pin';
+        } else {
+            if (PinnedGames.length !== 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)'
+            }
+        }
+        */
         const PinBtn = document.createElement('button');
         PinBtn.classList = 'btn btn-warning btn-sm';
         PinBtn.style = 'position: absolute; right: 0; margin-right: 7px;'
@@ -65,6 +83,18 @@ async function PinnedGames() {
 
             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 = '<i class="fa-duotone fa-star"></i> Pin'
+                } else {
+                    //PinnedGames[GameID] = {lastVisited: new Date()}
+                    PinnedGames.push(parseInt(GameID))
+                    PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
+                }
+                */
                 const Index = PinnedGames.indexOf(parseInt(GameID));
                 if (Index !== -1) {
                     PinnedGames.splice(Index, 1);
@@ -77,18 +107,32 @@ async function PinnedGames() {
                 chrome.storage.sync.set({ 'PolyPlus_PinnedGames': PinnedGames, arrayOrder: true }, function() {
                     setTimeout(function() {
                         PinBtn.removeAttribute('disabled')
+                        console.log(PinnedGames)
                     }, 1250)
                 });
             });
         });
 
-        document.querySelectorAll('.card-header')[2].appendChild(PinBtn);
+        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 = '<i class="fa-duotone fa-star"></i> Un-pin'
+                    } else {
+                        if (PinnedGames.length !== 5) {
+                            PinBtn.removeAttribute('disabled')
+                            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)'
+                        }
+                    }
+                    */
                     if (PinnedGames.includes(parseInt(GameID))) {
                         PinBtn.innerHTML = '<i class="fa-duotone fa-star"></i> Un-pin'
                     } else {
@@ -112,15 +156,61 @@ async function InlineEditing() {
     // 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 PlaceTitle = document.querySelector('.card-header h1[style="font-weight:800;font-size:1.6em"]')
+    const Style = document.createElement('style')
-    const PlaceTitleSpan = document.createElement('span')
+    Style.innerHTML = `
-    PlaceTitleSpan.innerText = PlaceTitle.innerText
+    body[data-polyplus-inlineEditing="true"] .polyplus-inlineEditing-visible {display: block !important;}
-    PlaceTitle.innerHTML = ''
+    .polyplus-inlineEditing-visible {display: none;}
-    PlaceTitle.appendChild(PlaceTitleSpan)
+
+    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 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 = [
@@ -152,25 +242,49 @@ async function InlineEditing() {
     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>'
+    EditBtn.innerHTML = '<i class="fa-duotone fa-hammer"></i> <span>Edit Details</span>'
-    document.querySelectorAll('.card-header')[3].appendChild(EditBtn);
+    document.getElementsByClassName('card-header')[3].appendChild(EditBtn);
-    /*
-    const EditBtn = document.createElement('button')
-    EditBtn.classList = 'text-muted'
-    EditBtn.innerHTML = `
-    <i class="fa-duotone fa-hammer"></i>
-    `
-    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
+        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')
@@ -196,12 +310,14 @@ async function InlineEditing() {
                     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": "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) {
+async function GameProfiles(data) {
+    data = Data
     document.querySelector('h1.my-0')
         .setAttribute('game-key', 'true');
     document.querySelector('div[style="min-height: 60vh;"]')

manifest.json

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

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) {