Progress on Avatar Sandbox
The + and - button shown on item card hover now updates depending on if the item is being worn or not.
This commit is contained in:
parent
a8cf983e26
commit
f3077da95f
1 changed files with 59 additions and 106 deletions
|
|
@ -23,25 +23,6 @@ let Avatar = {
|
||||||
"leftLegColor": "#e0e0e0",
|
"leftLegColor": "#e0e0e0",
|
||||||
"rightLegColor": "#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') {
|
if (new URLSearchParams(new URL(window.location).search).get('sandbox') === 'true') {
|
||||||
console.log('Avatar Sandbox!')
|
console.log('Avatar Sandbox!')
|
||||||
|
|
@ -172,15 +153,27 @@ function RefreshItems() {
|
||||||
data = data.assets
|
data = data.assets
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
let NewItemCard = document.createElement('div')
|
let NewItemCard = document.createElement('div')
|
||||||
|
NewItemCard.setAttribute('data-id', item.id)
|
||||||
NewItemCard.classList = 'col-auto'
|
NewItemCard.classList = 'col-auto'
|
||||||
NewItemCard.innerHTML = ItemCardContents
|
NewItemCard.innerHTML = `
|
||||||
.replace(':ItemName', item.name)
|
<div style="max-width: 150px;">
|
||||||
.replace(':ItemID', item.id)
|
<div class="card mb-2 avatar-item-container">
|
||||||
.replace(':ItemType', item.type)
|
<div class="p-2">
|
||||||
.replace(item.type.charAt(0), item.type.charAt(0).toUpperCase())
|
<img src="${item.thumbnail}" class="img-fluid">
|
||||||
.replace(':CreatorName', item.creator.name)
|
<span class="position-absolute" style="top: 5px; left: 5px; z-index: 1;">
|
||||||
.replace(':CreatorID', item.creator.id)
|
<span class="badge bg-secondary">${item.type.charAt(0).toUpperCase() + item.type.substring(1)}</span>
|
||||||
.replace(':ItemThumbnail', item.thumbnail)
|
</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/${item.id}" class="text-reset">
|
||||||
|
<h6 class="text-truncate mb-0">${item.name}</h6>
|
||||||
|
</a>
|
||||||
|
<small class="text-muted d-block text-truncate">
|
||||||
|
by <a href="/users/${item.creator.id}" class="text-reset">${item.creator.name}</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
NewItemCard.getElementsByClassName('p-2')[0].addEventListener('click', function(){
|
NewItemCard.getElementsByClassName('p-2')[0].addEventListener('click', function(){
|
||||||
WearAsset(NewItemCard, item)
|
WearAsset(NewItemCard, item)
|
||||||
});
|
});
|
||||||
|
|
@ -268,7 +261,7 @@ function LoadMyself() {
|
||||||
|
|
||||||
function WearAsset(element, info) {
|
function WearAsset(element, info) {
|
||||||
if (Avatar.items.indexOf(info.id) === -1 && Avatar[info.type] !== info.id) {
|
if (Avatar.items.indexOf(info.id) === -1 && Avatar[info.type] !== info.id) {
|
||||||
console.log('Equip')
|
console.log('Equip', info)
|
||||||
switch(info.type) {
|
switch(info.type) {
|
||||||
case 'hat':
|
case 'hat':
|
||||||
Avatar.items.push(info.id)
|
Avatar.items.push(info.id)
|
||||||
|
|
@ -278,7 +271,7 @@ function WearAsset(element, info) {
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log('unequip')
|
console.log('unequip', info)
|
||||||
switch(info.type) {
|
switch(info.type) {
|
||||||
case 'hat':
|
case 'hat':
|
||||||
Avatar.items.splice(Avatar.items.indexOf(info.id), 1)
|
Avatar.items.splice(Avatar.items.indexOf(info.id), 1)
|
||||||
|
|
@ -292,6 +285,21 @@ function WearAsset(element, info) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ToggleButton = element.getElementsByClassName('avatarAction')[0]
|
||||||
|
ToggleButton.classList.toggle('btn-success')
|
||||||
|
ToggleButton.classList.toggle('btn-danger')
|
||||||
|
ToggleButton.children[0].classList.toggle('fa-plus')
|
||||||
|
ToggleButton.children[0].classList.toggle('fa-minus')
|
||||||
|
|
||||||
|
const Duplicate = ItemGrid.querySelector(`[data-id="${info.id}"]`)
|
||||||
|
if (Duplicate !== null && Duplicate !== element) {
|
||||||
|
const DuplicateToggleButton = Duplicate.getElementsByClassName('avatarAction')[0]
|
||||||
|
DuplicateToggleButton.classList.toggle('btn-success')
|
||||||
|
DuplicateToggleButton.classList.toggle('btn-danger')
|
||||||
|
DuplicateToggleButton.children[0].classList.toggle('fa-plus')
|
||||||
|
DuplicateToggleButton.children[0].classList.toggle('fa-minus')
|
||||||
|
}
|
||||||
|
|
||||||
LoadWearing()
|
LoadWearing()
|
||||||
UpdateAvatar()
|
UpdateAvatar()
|
||||||
}
|
}
|
||||||
|
|
@ -348,8 +356,8 @@ function LoadWearing() {
|
||||||
});
|
});
|
||||||
|
|
||||||
WearingItems.forEach(item => {
|
WearingItems.forEach(item => {
|
||||||
|
|
||||||
const ExistingElement = Wearing.querySelector(`[data-itemid="${item}"]`);
|
const ExistingElement = Wearing.querySelector(`[data-itemid="${item}"]`);
|
||||||
|
|
||||||
if (!ExistingElement) {
|
if (!ExistingElement) {
|
||||||
fetch(`https://api.polytoria.com/v1/store/${item}`)
|
fetch(`https://api.polytoria.com/v1/store/${item}`)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
|
@ -363,14 +371,27 @@ function LoadWearing() {
|
||||||
Wearing.innerHTML = ''
|
Wearing.innerHTML = ''
|
||||||
}
|
}
|
||||||
let NewItemCard = document.createElement('div');
|
let NewItemCard = document.createElement('div');
|
||||||
|
NewItemCard.setAttribute('data-id', item.id)
|
||||||
NewItemCard.classList = 'col-auto';
|
NewItemCard.classList = 'col-auto';
|
||||||
NewItemCard.innerHTML = ItemCardContents
|
NewItemCard.innerHTML = `
|
||||||
.replace(':ItemName', item.name)
|
<div style="max-width: 150px;">
|
||||||
.replace(':ItemID', item.id)
|
<div class="card mb-2 avatar-item-container">
|
||||||
.replace(':ItemType', item.type.charAt(0).toUpperCase() + item.type.substring(1))
|
<div class="p-2">
|
||||||
.replace(':CreatorName', item.creator.name)
|
<img src="${item.thumbnail}" class="img-fluid">
|
||||||
.replace(':CreatorID', item.creator.id)
|
<span class="position-absolute" style="top: 5px; left: 5px; z-index: 1;">
|
||||||
.replace(':ItemThumbnail', item.thumbnail);
|
<span class="badge bg-secondary">${item.type.charAt(0).toUpperCase() + item.type.substring(1)}</span>
|
||||||
|
</span>
|
||||||
|
<button class="avatarAction btn btn-danger btn-sm position-absolute rounded-circle text-center" style="top: -10px; right: -16px; width: 32px; height: 32px; z-index: 1;"><i class="fas fa-minus"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="/store/${item.id}" class="text-reset">
|
||||||
|
<h6 class="text-truncate mb-0">${item.name}</h6>
|
||||||
|
</a>
|
||||||
|
<small class="text-muted d-block text-truncate">
|
||||||
|
by <a href="/users/${item.creator.id}" class="text-reset">${item.creator.name}</a>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
Wearing.appendChild(NewItemCard);
|
Wearing.appendChild(NewItemCard);
|
||||||
NewItemCard.getElementsByClassName('p-2')[0].addEventListener('click', function () {
|
NewItemCard.getElementsByClassName('p-2')[0].addEventListener('click', function () {
|
||||||
WearAsset(NewItemCard, item);
|
WearAsset(NewItemCard, item);
|
||||||
|
|
@ -385,72 +406,4 @@ function LoadWearing() {
|
||||||
if (Array.from(Wearing.children).length === 0) {
|
if (Array.from(Wearing.children).length === 0) {
|
||||||
Wearing.innerHTML = 'No items to show.'
|
Wearing.innerHTML = 'No items to show.'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
function LoadWearing() {
|
|
||||||
const WearingItems = [
|
|
||||||
...Avatar.items,
|
|
||||||
Avatar.shirt,
|
|
||||||
Avatar.pants,
|
|
||||||
Avatar.face
|
|
||||||
].filter(item => item !== null)
|
|
||||||
|
|
||||||
Array.from(Wearing.children).forEach(element => {
|
|
||||||
console.log('AAAAAAAAAAAA', element)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
function LoadWearing() {
|
|
||||||
const AllItems = structuredClone(Avatar.items)
|
|
||||||
AllItems.push(Avatar.shirt)
|
|
||||||
AllItems.push(Avatar.pants)
|
|
||||||
AllItems.push(Avatar.face)
|
|
||||||
AllItems.forEach(item => {
|
|
||||||
if (item !== null) {
|
|
||||||
let Element = document.querySelector(`a[href="/store/${item}"]`)
|
|
||||||
if (Element !== null) {
|
|
||||||
console.log('exists - load wearing')
|
|
||||||
Element = Element.parentElement.parentElement
|
|
||||||
Wearing.appendChild(Element)
|
|
||||||
} else if (Element === null) {
|
|
||||||
console.log('doesn\' exist - load wearing')
|
|
||||||
fetch('https://api.polytoria.com/v1/store/:id'.replace(':id', item))
|
|
||||||
.then(response => {
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Network not ok')
|
|
||||||
}
|
|
||||||
return response.json()
|
|
||||||
})
|
|
||||||
.then(item => {
|
|
||||||
let NewItemCard = document.createElement('div')
|
|
||||||
NewItemCard.classList = 'col-auto'
|
|
||||||
NewItemCard.innerHTML = ItemCardContents
|
|
||||||
.replace(':ItemName', item.name)
|
|
||||||
.replace(':ItemID', item.id)
|
|
||||||
.replace(':ItemType', item.type.charAt(0).toUpperCase() + item.type.substring(1))
|
|
||||||
.replace(':CreatorName', item.creator.name)
|
|
||||||
.replace(':CreatorID', item.creator.id)
|
|
||||||
.replace(':ItemThumbnail', item.thumbnail)
|
|
||||||
Wearing.appendChild(NewItemCard)
|
|
||||||
NewItemCard.getElementsByClassName('p-2')[0].addEventListener('click', function(){
|
|
||||||
WearAsset(NewItemCard, item)
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.log('Fetch error: ' + error)
|
|
||||||
});
|
|
||||||
} else if (item.type === TabSelected) {
|
|
||||||
console.log('item type is selected tab - load wearing')
|
|
||||||
ItemGrid.appendChild(Element)
|
|
||||||
} else {
|
|
||||||
console.log('remove item - load wearing')
|
|
||||||
Element.remove()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
Reference in a new issue