Skip to content

Commit

Permalink
fixed wearing button in avatar page
Browse files Browse the repository at this point in the history
  • Loading branch information
@singharaj-usai
singharaj-usai committed Oct 19, 2024
1 parent 357370e commit 2213b96
Showing 1 changed file with 51 additions and 38 deletions.
89 changes: 51 additions & 38 deletions client/js/avatar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,16 @@ function loadAvatarsItems() {
// loadHats();
}

function getCurrentlyWornShirtId() {
const currentlyWearing = $('#currently-wearing [data-type="shirt"]');
return currentlyWearing.length > 0 ? currentlyWearing.data('id') : null;
}

let currentPage = 1;
let totalPages = 1;
function loadShirts(page = 1) {
const token = localStorage.getItem('token');
const currentlyWornShirtId = getCurrentlyWornShirtId();
console.log('Loading shirts for user, page:', page);

$.ajax({
Expand All @@ -31,7 +37,7 @@ function loadShirts(page = 1) {
},
success: function (res) {
console.log('Shirts loaded successfully:', res.shirts);
displayUserShirts(res.shirts);
displayUserShirts(res.shirts, currentlyWornShirtId);
updatePagination(res.currentPage, res.totalPages);
totalPages = res.totalPages;
},
Expand All @@ -44,7 +50,7 @@ function loadShirts(page = 1) {
});
}

function displayUserShirts(shirts) {
function displayUserShirts(shirts, currentlyWornShirtId) {
const container = $('#shirts-container');
container.empty();

Expand Down Expand Up @@ -72,14 +78,15 @@ function displayUserShirts(shirts) {
console.error('Invalid shirt object:', shirt);
return;
}
const isWearing = shirt._id === currentlyWornShirtId;
const shirtHtml = generateItemHtml(
shirt.Name,
shirt.ThumbnailLocation,
shirt.creator ? shirt.creator.username : 'Unknown',
shirt._id,
'shirt',
shirt.creator && shirt.creator._id === currentUserId ? 'Created' : 'Owned'

shirt.creator && shirt.creator._id === currentUserId ? 'Created' : 'Owned',
isWearing
);
container.append(shirtHtml);
});
Expand Down Expand Up @@ -137,15 +144,15 @@ function generatePageNumbers(currentPage, totalPages) {
function Pagination() {
$('#pagination-container').on('click', 'a', function (e) {
e.preventDefault();
const page = parseInt($(this).data('page'));
if (page && page !== currentPage && page >= 1 && page <= totalPages) {
const page = $(this).data('page');
if (page >= 1 && page <= totalPages) {
currentPage = page;
loadShirts(currentPage);
}
});
}

function generateItemHtml(name, imageSrc, creator, id, type, ownership) {
function generateItemHtml(name, imageSrc, creator, id, type, ownership, isWearing) {
return `
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center mb-3">
<div class="item-card center-block" data-id="${id}" data-type="${type}">
Expand All @@ -156,7 +163,9 @@ function generateItemHtml(name, imageSrc, creator, id, type, ownership) {
<h4 class="text-center">${name}</h4>
<p class="text-center"><b>Creator:</b> ${creator}</p>
<p class="text-center"><b>Status:</b> ${ownership}</p>
<button class="btn btn-primary wear-item" data-id="${id}" data-type="${type}">Wear</button>
<button class="btn btn-block wear-item ${isWearing ? 'btn-success' : 'btn-primary'}" data-id="${id}" data-type="${type}">
${isWearing ? 'Wearing' : 'Wear'}
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -201,7 +210,9 @@ function wearItem(type, itemId) {
updateCurrentlyWearing(type, response.avatar[type]);
updateWearButton(type, itemId, true);
showAlert('success', `Wore your ${type} successfully.`);
// saveAvatarSelection(type, itemId);
$('.wear-item').removeClass('btn-success').addClass('btn-primary').text('Wear');
$(`.wear-item[data-id="${itemId}"]`).removeClass('btn-primary').addClass('btn-success').text('Wearing');

},
error: function (xhr, status, error) {
console.error(`Error wearing ${type}:`, error);
Expand All @@ -216,6 +227,32 @@ function wearItem(type, itemId) {
});
}

function removeItem(type) {
const token = localStorage.getItem('token');

$.ajax({
url: '/api/avatar',
method: 'PUT',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
data: JSON.stringify({ type: type, itemId: null }), // Indicate unwearing
success: function (response) {
console.log('Avatar updated successfully.');
$(`#avatar-${type}`).attr('src', '');
$(`#currently-wearing [data-type="${type}"]`).remove();
updateWearButton(type, null, false);
showAlert('info', `Unwore your ${type}.`);
$('.wear-item').removeClass('btn-success').addClass('btn-primary').text('Wear');
},
error: function (xhr, status, error) {
console.error('Error unwearing item:', error);
showAlert('danger', 'Error unwearing the item. Please try again later.');
},
});
}

function updateAvatarDisplay(type, item) {
switch (type) {
case 'shirt':
Expand All @@ -232,6 +269,7 @@ function updateAvatarDisplay(type, item) {
}



function updateCurrentlyWearing(type, item) {
const container = $('#currently-wearing');
container.find(`[data-type="${type}"]`).remove();
Expand All @@ -256,38 +294,13 @@ function updateCurrentlyWearing(type, item) {
}
}

function removeItem(type) {
const token = localStorage.getItem('token');

$.ajax({
url: '/api/avatar',
method: 'PUT',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
data: JSON.stringify({ type: type, itemId: null }), // Indicate unwearing
success: function (response) {
console.log('Avatar updated successfully.');
$(`#avatar-${type}`).attr('src', '');
$(`#currently-wearing [data-type="${type}"]`).remove();
updateWearButton(type, null, false);
showAlert('info', `Unwore your ${type}.`);
// saveAvatarSelection(type, null);
},
error: function (xhr, status, error) {
console.error('Error unwearing item:', error);
showAlert('danger', 'Error unwearing the item. Please try again later.');
},
});
}

function updateWearButton(type, itemId, isWearing) {
const wearButton = $(`.wear-item[data-type="${type}"]`);
wearButton.removeClass('btn-success').addClass('btn-primary').text('Wear');
const wearButtons = $(`.wear-item[data-type="${type}"]`);
wearButtons.removeClass('btn-success').addClass('btn-primary').text('Wear');

if (isWearing && itemId) {
wearButton.removeClass('btn-primary').addClass('btn-success').text('Wearing');
const wearingButton = wearButtons.filter(`[data-id="${itemId}"]`);
wearingButton.removeClass('btn-primary').addClass('btn-success').text('Wearing');
}
}

Expand Down

0 comments on commit 2213b96

Please sign in to comment.