polyplus/js/account/avatar-sandbox.js

let PageContainer = document.querySelector('.container.p-0.p-lg-5')
let ItemGrid;
let Wearing;
let Tabs;
let IFrame;
let TabSelected = 'hat'
let Search;
let Page = 1
let Avatar = {
    "useCharacter": true,
    "items": [],
    "shirt": null,
    "pants": null,
    "tool": {ID: -1, URL: null},
    "headColor": "#e0e0e0",
    "torsoColor": "#e0e0e0",
    "leftArmColor": "#e0e0e0",
    "rightArmColor": "#e0e0e0",
    "leftLegColor": "#e0e0e0",
    "rightLegColor": "#e0e0e0"
}
let ItemCardContents = `
<div style="max-width: 150px;">
    <div class="card mb-2 avatar-item-container">
        <div class="p-2">
            <img src=":ItemThumbnail" class="img-fluid">
            <span class="position-absolute" style="top: 5px; left: 5px; z-index: 1;">
                <span class="badge bg-secondary">:ItemType</span>
            </span>
            <button class="avatarAction btn btn-success btn-sm position-absolute rounded-circle text-center" style="top: -10px; right: -16px; width: 32px; height: 32px; z-index: 1;"><i class="fas fa-plus"></i></button>
        </div>
    </div>
    <a href="/store/:ItemID" class="text-reset">
        <h6 class="text-truncate mb-0"> :ItemName</h6>
    </a>
    <small class="text-muted d-block text-truncate">
        by <a href="/users/:CreatorID" class="text-reset">:CreatorName</a>
    </small>
</div>
`

if (new URLSearchParams(new URL(window.location).search).get('sandbox') === 'true') {
    console.log('Avatar Sandbox!')

    LoadFile(chrome.runtime.getURL('resources/avatar-sandbox.html'), function(html){
        PageContainer.innerHTML = html
        ItemGrid = document.getElementById('inventory')
        Wearing = document.getElementById('wearing')
        Tabs = document.getElementById('tabs')
        IFrame = document.getElementById('viewFrame')

        Search = document.getElementById('item-search')
        Search.addEventListener('change', function(){
            RefreshItems()
        });

        UpdateAvatar()
        RefreshItems()

        Array.from(Tabs.children).forEach(element => {
            element.addEventListener('click', function(){
                let Link = element.getElementsByTagName('a')[0]
                if (!(Link.classList.contains('active'))) {
                    Link.classList.add('active')
                    Tabs.querySelector(`[data-tab="${TabSelected}"]`).classList.remove('active')
                    TabSelected = Link.getAttribute('data-tab')
                    Page = 1
                    RefreshItems()
                }
            });
        });

        let Clear = document.getElementById('clear')
        Clear.addEventListener('click', function(){
            Avatar = {
                "useCharacter": true,
                "items": [],
                "shirt": {ID: -1, URL: null},
                "pants": {ID: -1, URL: null},
                "tool": {ID: -1, URL: null},
                "headColor": "#e0e0e0",
                "torsoColor": "#e0e0e0",
                "leftArmColor": "#e0e0e0",
                "rightArmColor": "#e0e0e0",
                "leftLegColor": "#e0e0e0",
                "rightLegColor": "#e0e0e0"
            }
            UpdateAvatar()
        });

        let JSONUpload = document.getElementById('jsonUpload')
        JSONUpload.addEventListener('change', function(){
            let Reader = new FileReader()
            Reader.addEventListener('loadend', function(){
                Avatar = JSON.parse(Reader.result)
                UpdateAvatar()

                JSONUpload.value = ""
            });

            Reader.readAsText(JSONUpload.files[0])
        });

        let JSONSave = document.getElementById('jsonSave')
        JSONSave.addEventListener('click', function(){
            FormatAvatar().then(FormattedAvatar => {
                let Download = document.createElement('a')
                Download.href = URL.createObjectURL(new Blob([JSON.stringify(FormattedAvatar)], {
                    type: "application/json"
                }));
                Download.setAttribute('download', 'AvatarSandbox.json')
                document.body.appendChild(Download)
                Download.click()
                document.body.removeChild(Download)
            });
        });

        let OpenInNewTab = document.getElementById('openNewTab')
        OpenInNewTab.addEventListener('click', function(){
            UpdateAvatar()
        });
    });
}

function UpdateAvatar() {
    GenerateHash()
        .then(hash => {
            IFrame.addEventListener('load', function () {
                IFrame.src = 'https://polytoria.com/ptstatic/itemview/#' + hash;
            });
            IFrame.src = 'about:blank';
        });
}

function LoadFile(path, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () { return callback(this.responseText); }
    xhr.open("GET", path, true);
    xhr.send();
}

async function GenerateHash() {
    let FormattedAvatar = await FormatAvatar()
    for (let i = 0; i < FormattedAvatar.items.length; i++) {
        FormattedAvatar.items[i] = FormattedAvatar.items[i].URL
    }
    if (FormattedAvatar.shirt) {
        FormattedAvatar.shirt = FormattedAvatar.shirt.URL
    }
    if (FormattedAvatar.pants) {
        FormattedAvatar.pants = FormattedAvatar.pants.URL
    }
    FormattedAvatar.face = FormattedAvatar.face.URL
    if (FormattedAvatar.tool) {
        FormattedAvatar.tool = FormattedAvatar.tool.URL
    }
    console.log('Formatted Avatar: ', FormattedAvatar)
    console.log('Real Avatar: ', Avatar)
    return btoa(encodeURIComponent(JSON.stringify(FormattedAvatar)))
}

async function FormatAvatar() {
    let LocalAvatar = structuredClone(Avatar)

    if (!LocalAvatar.face) {
        LocalAvatar.face = {ID: -1, URL: "https://c0.ptacdn.com/static/3dview/DefaultFace.png"}
    }

    for (let i = 0; i < LocalAvatar.items.length; i++) {
        if (LocalAvatar.items[i].URL === null) {
            await fetch("https://api.polytoria.com/v1/assets/serve-mesh/:id".replace(':id', LocalAvatar.items[i].ID))
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    Avatar.items[i].URL = data.url
                    LocalAvatar.items[i].URL = data.url
                })
                .catch(error => {
                    console.error('Fetch error:', error);
                });
        }
    }

    if (LocalAvatar.tool && LocalAvatar.tool.ID !== -1 && LocalAvatar.tool.URL === null) {
        await fetch("https://api.polytoria.com/v1/assets/serve-mesh/:id".replace(':id', LocalAvatar.tool.ID))
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                Avatar.tool.URL = data.url
                LocalAvatar.tool.URL = data.url
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }

    if (LocalAvatar.face.ID !== -1 && LocalAvatar.face.URL === null) {
        await fetch("https://api.polytoria.com/v1/assets/serve/:id/Asset".replace(':id', LocalAvatar.face.ID))
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                Avatar.face.URL = data.url
                LocalAvatar.face.URL = data.url
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }

    if (LocalAvatar.shirt && LocalAvatar.shirt.ID !== -1 && LocalAvatar.shirt.URL === null) {
        await fetch("https://api.polytoria.com/v1/assets/serve/:id/Asset".replace(':id', LocalAvatar.shirt.ID))
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                Avatar.shirt.URL = data.url
                LocalAvatar.shirt.URL = data.url
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }

    if (LocalAvatar.pants && LocalAvatar.pants.ID !== -1 && LocalAvatar.pants.URL === null) {
        await fetch("https://api.polytoria.com/v1/assets/serve/:id/Asset".replace(':id', LocalAvatar.pants.ID))
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                Avatar.pants.URL = data.url
                LocalAvatar.pants.URL = data.url
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
    }

    return LocalAvatar
}

function RefreshItems() {
    fetch(`https://api.polytoria.com/v1/store?search=${Search.value}&types%5B%5D=${TabSelected}&sort=createdAt&order=desc&page=${Page}&limit=12`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            Array.from(ItemGrid.children).forEach(element => {element.remove()});
            data = data.assets
            data.forEach(item => {
                let NewItemCard = document.createElement('div')
                NewItemCard.classList = 'col-auto'
                NewItemCard.innerHTML = ItemCardContents.replace(':ItemName', item.name).replace().replace(':ItemID', item.id).replace(':ItemType', item.type.replace(item.type.charAt(0), item.type.charAt(0).toUpperCase())).replace(':CreatorName', item.creator.name).replace(':CreatorID', item.creator.id).replace(':ItemThumbnail', item.thumbnail)
                NewItemCard.getElementsByClassName('p-2')[0].addEventListener('click', function(){
                    WearAsset(NewItemCard, item.name, {Name: item.creator.name, ID: item.creator.id}, item.id, item.type, item.thumbnail)
                });

                ItemGrid.appendChild(NewItemCard)
            });
        })
        .catch(error => {
            console.error('Fetch error:', error);
        });
}

function WearAsset(element, name, creator, id, type, thumbnail) {
    switch (type) {
        case 'hat':
            let Index = CheckItemID(Avatar.items, id)
            if (Index === -1) {
                if (Avatar.items.length !== 3) {
                    Avatar.items.push({Name: name, Creator: creator, ID: id, URL: null, Thumbnail: thumbnail})
                    Wearing.prepend(ItemGrid.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
                } else {
                    Avatar.items.splice(0, 1)
                    Avatar.items.push({Name: name, Creator: creator, ID: id, URL: null, Thumbnail: thumbnail})
                    if (TabSelected === type) {
                        console.log('tab is', TabSelected, type)
                        ItemGrid.prepend(Wearing.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
                    }
                }
            } else {
                console.log('remove')
                Avatar.items.splice(Index, 1)
                if (TabSelected === type) {
                    console.log('tab is', TabSelected, type)
                    ItemGrid.prepend(Wearing.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
                }
            }
            break
        case 'face':
            if (Avatar.face && Avatar.face.ID !== id) {
                Avatar.face = {Name: name, Creator: creator, ID: id, URL: null, Thumbnail: thumbnail}
                Wearing.prepend(ItemGrid.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
            } else {
                Avatar.face = {Name: "Default Face", Creator: {Name: "Polytoria", ID: 1}, ID: -1, URL: "https://c0.ptacdn.com/static/3dview/DefaultFace.png", Thumbnail: "https://c0.ptacdn.com/static/3dview/DefaultFace.png"}
                if (TabSelected === type) {
                    console.log('tab is', TabSelected, type)
                    ItemGrid.prepend(Wearing.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
                }
            }
            break
        case 'tool':
            if (Avatar.tool && Avatar.tool.ID !== id) {
                Avatar.tool = {Name: name, Creator: creator, ID: id, URL: null, Thumbnail: thumbnail}
                Wearing.prepend(ItemGrid.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
            } else {
                Avatar.tool = null
                if (TabSelected === type) {
                    console.log('tab is', TabSelected, type)
                    ItemGrid.prepend(Wearing.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
                }
            }
            break
        case 'shirt':
            if (Avatar.shirt.ID !== id) {
                Avatar.shirt = {Name: name, Creator: creator, ID: id, URL: null, Thumbnail: thumbnail}
                Wearing.prepend(ItemGrid.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
            } else {
                Avatar.shirt = null
                if (TabSelected === type) {
                    console.log('tab is', TabSelected, type)
                    ItemGrid.prepend(Wearing.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
                }
            }
            break
        case 'pants':
            if (Avatar.pants.ID !== id) {
                Avatar.pants = {Name: name, Creator: creator, ID: id, URL: null, Thumbnail: thumbnail}
                Wearing.prepend(ItemGrid.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
            } else {
                Avatar.pants = null
                if (TabSelected === type) {
                    console.log('tab is', TabSelected, type)
                    ItemGrid.prepend(Wearing.querySelector(`.col-auto:has(a[href="/store/${id}"])`))
                }
            }
            break
    }

    UpdateAvatar()
}

function CheckItemID(object, id) {
    for (let i = 0; i < object.length; i++) {
        if (object[i] === id || object[i].ID === id) {
            console.log('Index: ' + i)
            return i
        }
    }
    return -1
}