feat: avatar sandbox pagination

js/account/avatar-sandbox-rewrite.js

@@ -52,6 +52,7 @@ let Avatar = {
 
 /* Discovery */
 let Page = 1
+let PageCount = 1
 let Search =  ""
 let Sort = "createdAt"
 let Order = "desc"
@@ -136,6 +137,48 @@ async function PageLoad() {
     })
     */
 
+    // Pagination is annoying
+    const First = document.getElementById('pagination-first');
+    const Prev = document.getElementById('pagination-prev');
+    const Next = document.getElementById('pagination-next');
+    const Last = document.getElementById('pagination-last');
+
+    if (Page > 0) {
+        Prev.parentElement.classList.remove('disabled');
+        First.parentElement.classList.remove('disabled');
+    } else {
+        Prev.parentElement.classList.add('disabled');
+        First.parentElement.classList.add('disabled');
+    }
+
+    First.addEventListener('click', function () {
+        if (Page > 1) {
+            Page = 1;
+            LoadItems();
+        }
+    });
+
+    Prev.addEventListener('click', function () {
+        if (Page > 1) {
+            Page--;
+            LoadItems();
+        }
+    });
+
+    Next.addEventListener('click', function () {
+        if (Page < PageCount) {
+            Page++;
+            LoadItems();
+        }
+    });
+
+    Last.addEventListener('click', function () {
+        if (Page < PageCount) {
+            Page = PageCount;
+            LoadItems();
+        }
+    });
+
     const ClearButton = document.getElementById('clear');
     ClearButton.addEventListener('click', function () {
         Avatar = {
@@ -318,7 +361,7 @@ async function UpdateAvatar() {
     LoadWearing()
 }
 
-function LoadUser(id) {
+async function LoadUser(id) {
 	fetch('https://api.polytoria.com/v1/users/' + id + '/avatar')
 		.then((response) => {
 			if (!response.ok) {
@@ -371,8 +414,26 @@ function LoadUser(id) {
 async function LoadItems() {
     document.getElementById('inventory').innerHTML = ''
 
-    const Items = (await (await fetch('https://api.polytoria.com/v1/store?limit=12&order=' + Order + '&sort=' + Sort + '&showOffsale=' + ShowOffsale + '&types[]='+ TabSelected +'&search=' + Search + '&page=' + Page)).json()).assets
+    const Items = (await (await fetch('https://api.polytoria.com/v1/store?limit=12&order=' + Order + '&sort=' + Sort + '&showOffsale=' + ShowOffsale + '&types[]='+ TabSelected +'&search=' + Search + '&page=' + Page)).json())
-    Items.forEach(item => {
+    PageCount = Items.pages
+    if (Page < PageCount) {
+        document.getElementById('pagination-next').classList.remove('disabled');
+        document.getElementById('pagination-last').classList.remove('disabled');
+    } else {
+        document.getElementById('pagination-next').classList.add('disabled');
+        document.getElementById('pagination-last').classList.add('disabled');
+    }
+    if (Page > 1 && PageCount > 1) {
+        console.log('aaa')
+        console.log(Page > 1, PageCount > 1)
+        document.getElementById('pagination-prev').classList.remove('disabled');
+        document.getElementById('pagination-first').classList.remove('disabled');
+    } else {
+        document.getElementById('pagination-prev').classList.add('disabled');
+        document.getElementById('pagination-first').classList.add('disabled');
+    }
+    document.getElementById('pagination-current').innerText = Page
+    Items.assets.forEach(item => {
         const ItemColumn = document.createElement('div')
         ItemColumn.classList = 'col-auto'
         ItemColumn.innerHTML = `

resources/avatar-sandbox.html

@@ -40,7 +40,8 @@
 		<div class="card mcard mb-3">
 			<h6 class="card-header">
 				<i class="fad fa-user-crown"></i>
-				Poly+ Avatar Sandbox
+				Avatar Sandbox
+				<span class="badge bg-warning float-end">Poly+</span>
 			</h6>
 			<div class="card-body">
 				<iframe id="viewFrame" style="width: 100%; height: 314px; border-radius: 0.65rem;"></iframe>