Skip to content

Commit

Permalink
avatar now renders in profile and avatar page
Browse files Browse the repository at this point in the history
  • Loading branch information
@singharaj-usai
singharaj-usai committed Oct 23, 2024
1 parent 2af3ba7 commit 1d15ebb
Show file tree
Hide file tree
Showing 8 changed files with 554 additions and 184 deletions.
9 changes: 0 additions & 9 deletions client/html/pages/games/games.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,6 @@
<div class="col-xs-6">
<h2 style="margin-top: 20px; margin-bottom: 20px">Games</h2>
</div>
<div class="col-xs-6 text-right">
<a
href="/upload"
class="btn btn-warning"
style="margin-top: 20px; margin-bottom: 20px"
>
<i class="bi bi-upload"></i> Upload Game
</a>
</div>
</div>
<div id="games-container" class="row"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/html/pages/profile/user-profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<!-- Stylesheets -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css"
href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cosmo/bootstrap.min.css"
id="theme-stylesheet"
/>

Expand Down
251 changes: 203 additions & 48 deletions client/js/avatar.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
$(document).ready(function () {
initializeAvatarEditor();
loadUserAvatar();
setupItemSelection();
});

function initializeAvatarEditor() {
Expand Down Expand Up @@ -209,8 +210,9 @@ function wearItem(type, itemId) {
updateAvatarDisplay(type, response.avatar[type]);
updateCurrentlyWearing(type, response.avatar[type]);
updateWearButton(type, itemId, true);
showAlert('success', `Wore your ${type} successfully.`);
saveAvatarSelection(type, itemId);
saveRender();
showAlert('success', `${type.charAt(0).toUpperCase() + type.slice(1)} equipped 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');
Expand All @@ -229,6 +231,33 @@ function wearItem(type, itemId) {
});
}

function saveRender() {
const avatarDisplay = $('#avatar-display');
const renderData = {
shirt: $('#avatar-shirt').attr('src'),
// Add other avatar elements here when implemented
};

const token = localStorage.getItem('token');

$.ajax({
url: '/api/avatar/render',
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json'
},
data: JSON.stringify(renderData),
success: function (response) {
console.log('Render saved successfully:', response);
},
error: function (xhr, status, error) {
console.error('Error saving render:', error);
showAlert('danger', 'Error saving avatar render. Please try again later.');
}
});
}

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

Expand All @@ -245,8 +274,9 @@ function removeItem(type) {
$(`#avatar-${type}`).attr('src', '');
$(`#currently-wearing [data-type="${type}"]`).remove();
updateWearButton(type, null, false);
saveRender();
showAlert('info', `Unwore your ${type}.`);
saveAvatarSelection(type, null);
// saveAvatarSelection(type, null);

$('.wear-item').removeClass('btn-success').addClass('btn-primary').text('Wear');
},
Expand All @@ -258,17 +288,24 @@ function removeItem(type) {
}

function updateAvatarDisplay(type, item) {
const avatarContainer = $('#avatar-display');

switch (type) {
case 'shirt':
if (item && item.ThumbnailLocation) {
$('#avatar-shirt').attr('src', item.ThumbnailLocation);
$('#avatar-shirt').attr('src', item.ThumbnailLocation)
.removeClass('hidden')
.css({
'max-width': '100%',
'height': 'auto',
'display': 'block',
'margin': '0 auto'
});
} else {
$('#avatar-shirt').attr('src', '');
$('#avatar-shirt').attr('src', '/images/default-shirt.png')
.addClass('hidden');
}
break;
// Add cases for 'pants' and 'hat' when i makethem
default:
break;
}
}

Expand All @@ -279,22 +316,28 @@ function updateCurrentlyWearing(type, item) {
container.find(`[data-type="${type}"]`).remove();

if (item && item.ThumbnailLocation && item.Name) {
const itemHtml = `
<div class="col-xs-12 col-sm-6 col-md-4" data-type="${type}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">${type.charAt(0).toUpperCase() + type.slice(1)}</h4>
</div>
<div class="panel-body">
<img src="${item.ThumbnailLocation}" alt="${item.Name}" class="img-responsive center-block" style="max-height: 100px;">
<h5 class="text-center">${item.Name}</h5>
<button class="btn btn-danger btn-block remove-item" data-type="${type}">Remove</button>
const itemHtml = `
<div class="col-xs-12 col-sm-6 col-md-4" data-type="${type}" data-id="${item._id}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">${type.charAt(0).toUpperCase() + type.slice(1)}</h4>
</div>
<div class="panel-body text-center">
<img src="${item.ThumbnailLocation}"
alt="${item.Name}"
class="img-responsive center-block"
style="max-height: 100px;">
<h5 class="text-center mt-2">${item.Name}</h5>
<button class="btn btn-danger btn-block remove-item"
data-type="${type}"
data-id="${item._id}">
Remove
</button>
</div>
</div>
</div>
</div>
`;

container.append(itemHtml);
`;
container.append(itemHtml);
}
}

Expand All @@ -310,62 +353,136 @@ function updateWearButton(type, itemId, isWearing) {

function loadUserAvatar() {
const token = localStorage.getItem('token');
console.log("hahaahsha");
if (!token) {
console.error('No token found');
return;
}

$.ajax({
url: '/api/avatar',
method: 'GET',
headers: {
Authorization: `Bearer ${token}`,
'Cache-Control': 'no-cache'
},
success: function (avatar) {
if (avatar.shirt && avatar.shirt._id) {
wearItem('shirt', avatar.shirtId);
}
success: function (response) {
console.log('Avatar data received:', response);
if (response && response.avatar) {
// Update the avatar display
updateAvatarDisplay('shirt', response.avatar.shirt);
updateCurrentlyWearing('shirt', response.avatar.shirt);

if (response.avatar.shirt) {
updateWearButton('shirt', response.avatar.shirt._id, true);
// Store the current state in localStorage
localStorage.setItem('currentAvatar', JSON.stringify(response.avatar));
}
}

// Load and display the rendered avatar
if (response.avatarRender && response.avatarRender.shirt) {
$('#avatar-display').attr('src', response.avatarRender.shirt)
.removeClass('hidden')
.css({
'max-width': '100%',
'height': 'auto',
'display': 'block',
'margin': '0 auto'
});
localStorage.setItem('avatarRender', JSON.stringify(response.avatarRender));
}
},
error: function (xhr, status, error) {
console.error('Error loading avatar:', error);
$('#avatar-display').html('<div class="alert alert-danger">Error loading avatar. Please try again later.</div>');
},
console.error('Error loading avatar:', {
error: error,
status: status,
response: xhr.responseText
});
showAlert('danger', 'Error loading avatar. Please try again later.');
}
});
}

function saveAvatarSelection(type, itemId) {
const token = localStorage.getItem('token');
const avatarData = { type, itemId };
console.log(`Saving avatar selection: ${type}, ID: ${itemId}`);
console.log('Saving avatar selection:', avatarData);

$.ajax({
url: '/api/avatar',
method: 'PUT',
contentType: 'application/json',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
'Content-Type': 'application/json'
},
data: JSON.stringify(avatarData),
success: function (response) {
console.log('Avatar updated successfully:', response);
if (itemId) {
updateAvatarDisplay(type, response.avatar[type]);
updateCurrentlyWearing(type, response.avatar[type]);
updateWearButton(type, itemId, true);
showAlert('success', `Wore your ${type} successfully.`);
} else {
$(`#avatar-${type}`).attr('src', '');
$(`#currently-wearing [data-type="${type}"]`).remove();
updateWearButton(type, null, false);
showAlert('info', `Unwore your ${type}.`);
console.log('Avatar update response:', response);

if (response.avatar && response.avatarRender) {
// Store the updated state
localStorage.setItem('currentAvatar', JSON.stringify(response.avatar));
localStorage.setItem('avatarRender', JSON.stringify(response.avatarRender));

if (itemId) {
updateAvatarDisplay(type, response.avatar[type]);
updateCurrentlyWearing(type, response.avatar[type]);
updateWearButton(type, itemId, true);

// Update the rendered avatar display
if (response.avatarRender.shirt) {
$('#avatar-display').attr('src', response.avatarRender.shirt)
.removeClass('hidden');
}
showAlert('success', `Wore your ${type} successfully.`);
} else {
$(`#avatar-${type}`).attr('src', '');
$(`#currently-wearing [data-type="${type}"]`).remove();
updateWearButton(type, null, false);
$('#avatar-display').addClass('hidden');
showAlert('info', `Unwore your ${type}.`);
}
}
},
error: function (xhr, status, error) {
console.error('Error updating avatar:', error);
console.error('Status:', status);
console.error('Response:', xhr.responseText);
console.error('Error updating avatar:', {
error: error,
status: status,
response: xhr.responseText
});
showAlert('danger', `Error ${itemId ? 'wearing' : 'unwearing'} ${type}. Please try again later.`);
},
}
});
}

function restoreAvatarState() {
const savedAvatar = localStorage.getItem('currentAvatar');
const savedRender = localStorage.getItem('avatarRender');

if (savedAvatar) {
const avatar = JSON.parse(savedAvatar);
if (avatar.shirt) {
updateAvatarDisplay('shirt', avatar.shirt);
updateCurrentlyWearing('shirt', avatar.shirt);
updateWearButton('shirt', avatar.shirt._id, true);
}
}

if (savedRender) {
const render = JSON.parse(savedRender);
if (render.shirt) {
$('#avatar-display').attr('src', render.shirt)
.removeClass('hidden')
.css({
'max-width': '100%',
'height': 'auto',
'display': 'block',
'margin': '0 auto'
});
}
}
}

// basic body colors set up for seven
function setupBodyColors() {
const bodyParts = ['head', 'torso', 'leftArm', 'rightArm', 'leftLeg', 'rightLeg'];
Expand Down Expand Up @@ -409,3 +526,41 @@ function showAlert(type, message) {
}


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

$.ajax({
url: '/api/avatar/render',
method: 'GET',
headers: {
Authorization: `Bearer ${token}`,
'Cache-Control': 'no-cache'
},
success: function(response) {
if (response && response.avatarRender) {
if (response.avatarRender.shirt) {
$('#avatar-shirt').attr('src', response.avatarRender.shirt)
.removeClass('hidden')
.css({
'max-width': '100%',
'height': 'auto',
'display': 'block',
'margin': '0 auto'
});
}
}
},
error: function(xhr, status, error) {
console.error('Error loading rendered avatar:', error);
}
});
}

// Update the document ready function
$(document).ready(function () {
initializeAvatarEditor();
loadUserAvatar();
loadRenderedAvatar();
setupItemSelection();
restoreAvatarState();
});
4 changes: 2 additions & 2 deletions client/js/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ $(document).ready(function () {
<div class="card-body text-center p-3">
<h4><i class="bi bi-discord"></i> Discord</h4>
<p>Join our Discord server and talk to people in our community!</p>
<a target="_blank" href="https://discord.gg/rpRz3mhuBz" class="btn btn-primary mt-2">Join Discord</a>
<a target="_blank" href="https://discord.gg/rpRz3mhuBz" class="btn btn-info mt-2">Join Discord</a>
</div>
</div>
</div>
Expand All @@ -222,7 +222,7 @@ $(document).ready(function () {
<div class="card-body text-center p-3">
<h4><i class="bi bi-twitter"></i> Twitter</h4>
<p>We tweet whenever we post a video, and may even hint at some upcoming events on our Twitter.</p>
<a target="_blank" href="https://twitter.com/Omrbobbilly" class="btn btn-info mt-2">Follow Us</a>
<a target="_blank" href="https://twitter.com/Omrbobbilly" class="btn btn-primary mt-2">Follow Us</a>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 1d15ebb

Please sign in to comment.