Improved "Show Outfit Cost on Profiles" Design

- Improved "Show Outfit Cost on Profiles" design

- Improved Debug Page

js/account/profile.js

@@ -1,5 +1,6 @@
 const UserID = window.location.pathname.split('/')[2];
 const AvatarRow = document.getElementsByClassName('d-flex flex-row flex-nowrap overflow-x-scroll px-3 px-lg-0 mb-2 mb-lg-0')[0]
+const AvatarHeading = document.querySelector('.section-title:has(i.fa-user-crown)')
 
 var Settings;
 var BestFriends;
@@ -26,14 +27,21 @@ if (UserID && !isNaN(UserID)) {
         }
 
         if (Settings.OutfitCostOn === true) {
-            CalculateButton = document.createElement('button')
+            CalculateButton = document.createElement('small')
-            CalculateButton.classList = 'btn btn-warning btn-sm'
+            CalculateButton.classList = 'fw-normal text-success'
-            CalculateButton.innerText = 'Calculate Avatar Cost'
+            CalculateButton.style.letterSpacing = '0px'
-            AvatarRow.parentElement.parentElement.prepend(CalculateButton)
+            CalculateButton.innerHTML = `
-            AvatarRow.parentElement.style.marginTop = '10px'
+            <a class="text-decoration-underline text-success" style="text-decoration-color: rgb(15, 132, 79) !important;">$ calculate</a>
+            `
+            AvatarHeading.appendChild(CalculateButton)
             
+            let Calculating = false
             CalculateButton.addEventListener('click', function(){
-                OutfitCost()
+                if (Calculating === false) {
+                    Calculating = true
+                    CalculateButton.innerText = '$ Calculating...'
+                    OutfitCost()
+                }
             });
         }
     });
@@ -104,7 +112,6 @@ if (UserID && !isNaN(UserID)) {
 
 async function IRLPrice() {
     const NetWorthElement = document.getElementsByClassName('float-end text-success')[0];
-    //const NetWorth = parseInt(NetWorthElement.innerText.replace(/,/g, ''));
     const IRLResult = await Utilities.CalculateIRL(NetWorthElement.innerText, Settings.IRLPriceWithCurrencyCurrency)
     NetWorthElement.innerText = NetWorthElement.innerText + " ($" + IRLResult.result + " " + IRLResult.display + ")"
 }
@@ -220,12 +227,11 @@ async function OutfitCost() {
             })
             .catch(error => {console.log(error)});
     }
-
+    const ResultText = document.createElement('small')
-    const TotalCostText = document.createElement('small')
+    ResultText.classList = 'fw-normal text-success'
-    TotalCostText.classList = 'text-muted'
+    ResultText.style.letterSpacing = '0px'
-    TotalCostText.style.padding = '20px'
+    ResultText.innerHTML = `(<i class="pi pi-brick mx-1"></i> ${ (AvatarCost.Limiteds > 0 || AvatarCost.Exclusives > 0) ? '~' : '' } ${ AvatarCost.Total.toLocaleString() }${ (AvatarCost.Limiteds > 0) ? `, ${AvatarCost.Limiteds} limiteds` : '' }${ (AvatarCost.Exclusives > 0) ? `, ${AvatarCost.Exclusives} exclusives` : '' })`
-    TotalCostText.innerHTML = `${ (AvatarCost.Limiteds > 0 || AvatarCost.Exclusives > 0) ? '~' : '' }<i class="pi pi-brick me-2"></i> ${AvatarCost.Total.toLocaleString()}${ (AvatarCost.Limiteds > 0) ? ` (has ${AvatarCost.Limiteds} limiteds)` : '' }${ (AvatarCost.Exclusives > 0) ? ` (has ${AvatarCost.Exclusives} exclusives)` : '' }`
+    
-    AvatarRow.parentElement.parentElement.prepend(TotalCostText)
+    CalculateButton.remove()
-    AvatarRow.parentElement.style.marginTop = '10px'
+    AvatarHeading.appendChild(ResultText)
-    CalculateButton.remove();
 }

js/debug.js

@@ -1,4 +1,8 @@
-// DEBUG PAGE FOR BETA TESTING
+/*
+    Debug page for Development
+    Accessable at /my/settings/polyplus-debug
+*/
+document.title = 'Poly+ Debug - Polytoria'
 const Version = chrome.runtime.getManifest().version
 document.querySelector('#main-content .container').innerHTML = `
 <style>
@@ -13,12 +17,16 @@ document.querySelector('#main-content .container').innerHTML = `
         margin-top: -4px;
     }
 </style>
+<div class="text-center mb-3">
+    <h1 class="text-center" style="font-size: 4.6rem;">Poly+ Debug</h1>
+    <p class="w-75 d-block mx-auto">This page is used by developers for debugging most data related things. It is unrecommended you modify any data on this page, but if you ever want to go ahead.</p>
+</div>
 <div class="row">
-    <div class="col-md-2">
+    <div class="col-md-2" style="padding-left: 0px;">
         <div class="card">
             <div class="card-body">
                 <p class="text-muted mb-1">Version: v${Version}</p>
-                <p class="text-muted mb-1">Data Size: <span id="data-size">Loading</span> byte(s)</p>
+                <p class="text-muted mb-3">Data Size: <span id="data-size">Loading</span> byte(s)</p>
                 <button class="btn btn-primary btn-sm w-100" id="check-for-updates">Check for Updates</button>
                 <a href="https://github.com/IndexingGitHub/PolyPlus" class="btn btn-dark btn-sm w-100 mt-2" target="_blank">Open GitHub</a>
             </div>
@@ -40,7 +48,7 @@ document.querySelector('#main-content .container').innerHTML = `
         <div role="group" class="input-group mb-3">
             <input type="text" name="settingName" id="edit-setting-name" class="form-control" placeholder="Setting Name..">
             <input type="text" id="edit-setting-value" class="form-control" placeholder="New Value..">
-            <button class="btn btn-success" id="edit-setting">Submit</button>
+            <button class="btn btn-success w-25" id="edit-setting">Submit</button>
         </div>
 
         <label>Load Example Data</label>
@@ -60,16 +68,33 @@ document.querySelector('#main-content .container').innerHTML = `
             <button class="btn btn-secondary" id="clear-itemwishlist">Clear Item Wishlist</button>
         </div>
 
-        <label>Clear Specific Data Locations</label>
+        <hr>
-        <p>Quickly clear specific locations of the extension's local data</p>
-        <div role="group" class="btn-group w-100 mb-3">
-            <button class="btn btn-secondary" id="delete-sync">Delete Sync Storage (primary, storage is backed up to Google account)</button>
-            <button class="btn btn-secondary" id="delete-local">Delete Local Storage (secondary, storage is only on local device)</button>
-        </div>
 
-        <label style="color: red;">DANGER ZONE!</label>
+        <div class="card">
-        <p>This will clear all local data associated with the extension</p>
+            <div class="card-header text-primary">RUN TESTS</div>
-        <button class="btn btn-danger w-100" id="delete-all-data">Delete All Data</button>
+            <div class="card-body">
+                <label>Test "IRL Price with Brick Count"</label>
+                <p>will add later</p>
+            </div>
+        </div>
+        
+        <hr>
+
+        <div class="card">
+            <div class="card-header" style="color: red;">DANGER ZONE!</div>
+            <div class="card-body">
+                <label>Clear Specific Data Locations</label>
+                <p>Quickly clear specific locations of the extension's local data</p>
+                <div role="group" class="btn-group w-100 mb-3">
+                    <button class="btn btn-primary" id="delete-sync">Delete Sync Storage (primary, storage is backed up to Google account)</button>
+                    <button class="btn btn-secondary" id="delete-local">Delete Local Storage (secondary, storage is only on local device)</button>
+                </div>
+        
+                <label>Delete All Data</label>
+                <p>This will clear all local data associated with the extension</p>
+                <button class="btn btn-danger w-100 mb-3" id="delete-all-data">Delete All Data</button>
+            </div>
+        </div>
     </div>
 </div>
 `

js/settings.js

@@ -1,22 +1,15 @@
+const SettingsURL = chrome.runtime.getURL('settings.html')
 const InExtensionSettings = (window.location.pathname.split('/')[3] === "polyplus")
 if (InExtensionSettings === true) {
-  window.location.href = chrome.runtime.getURL('settings.html') + window.location.hash
+  window.location.href = SettingsURL + window.location.hash
 }
 
 document.addEventListener('DOMContentLoaded', function(){
   const Nav = document.getElementsByClassName('nav nav-pills')[0]
-  
-  if (InExtensionSettings === true) {
-    Array.from(Nav.children).forEach(item => {
-      if (item.classList.contains('active')) {
-        item.classList.remove('active')
-      }
-    })
-  }
 
   const PolyPlusItem = document.createElement('a')
   PolyPlusItem.classList = 'nav-link'
-  PolyPlusItem.href = chrome.runtime.getURL('settings.html')
+  PolyPlusItem.href = SettingsURL
   PolyPlusItem.innerHTML = `
   <i class="fa-regular fa-sparkles me-1"></i> <span class="pilltitle">Poly+</span>
   `