Skip to content

Commit

Permalink
fixed games page columns layout and reworked shirts page
Browse files Browse the repository at this point in the history
  • Loading branch information
@singharaj-usai
singharaj-usai committed Oct 18, 2024
1 parent 64750f2 commit e37efa8
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 106 deletions.
4 changes: 1 addition & 3 deletions client/js/avatar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,7 @@ function Pagination() {
});
}

function generateItemHtml(name, imageSrc, creator, price, id, type) {
const priceDisplay = price === 0 ? 'Free' : `$${price}`;
function generateItemHtml(name, imageSrc, creator, id, type) {
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 @@ -145,7 +144,6 @@ function generateItemHtml(name, imageSrc, creator, price, id, type) {
<div class="caption">
<h4 class="text-center">${name}</h4>
<p class="text-center"><b>Creator:</b> ${creator}</p>
<p class="text-center"><b>Price:</b> ${priceDisplay}</p>
<button class="btn btn-primary wear-item" data-id="${id}" data-type="${type}">Wear</button>
</div>
</div>
Expand Down
80 changes: 37 additions & 43 deletions client/js/catalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ function loadCatalog() {
},
error: function (xhr, status, error) {
console.error('Error fetching catalog:', error);
$('#shirts-container').html('<div class="alert alert-danger">Error loading catalog. Please try again later.</div>');
},
});
}
Expand All @@ -19,52 +20,45 @@ function displayShirts(shirts) {
const shirtsContainer = $('#shirts-container');
shirtsContainer.empty();

const panel = $('<div class="panel panel-primary">').appendTo(shirtsContainer);
const panelHeading = $('<div class="panel-heading">').appendTo(panel);
$('<h3 class="panel-title">').text('Shirt Catalog').appendTo(panelHeading);
const panelBody = $('<div class="panel-body">').appendTo(panel);

if (shirts.length === 0) {
shirtsContainer.append(
'<div class="col-xs-12"><div class="alert alert-info">No shirts available in the catalog.</div></div>'
);
panelBody.append('<div class="alert alert-info">No shirts available in the catalog.</div>');
return;
}

shirts.forEach((shirt, index) => {
const shirtPanel = `
<div class="col-md-3 col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">${shirt.Name}</h3>
</div>
<div class="panel-body">
<img src="${
shirt.ThumbnailLocation
}" class="img-responsive center-block" alt="${
shirt.Name
}" style="max-height: 150px;">
<hr>
<p><strong>Creator:</strong> ${
shirt.creator && shirt.creator.username ? shirt.creator.username : 'Unknown'
}</p>
<p><strong>Price:</strong> ${shirt.Price} currency</p>
<p><strong>For Sale:</strong> ${
shirt.IsForSale ? 'Yes' : 'No'
}</p>
</div>
<div class="panel-footer">
<a href="/catalog/${shirt._id}/${encodeURIComponent(
shirt.Name
)}" class="btn btn-primary btn-block">View Details</a>
</div>
</div>
</div>
`;
shirtsContainer.append(shirtPanel);

if ((index + 1) % 4 === 0) {
shirtsContainer.append(
'<div class="clearfix visible-md visible-lg"></div>'
);
}
if ((index + 1) % 2 === 0) {
shirtsContainer.append('<div class="clearfix visible-sm"></div>');
for (let i = 0; i < shirts.length; i += 4) {
const row = $('<div class="row">').appendTo(panelBody);

for (let j = i; j < i + 4 && j < shirts.length; j++) {
const shirtElement = createShirtElement(shirts[j]);
row.append(shirtElement);
}
});
}
}

function createShirtElement(shirt) {
return `
<div class="col-md-3 col-sm-6 mb-4">
<div class="thumbnail" style="height: 100%;">
<div style="position: relative;">
<a href="/catalog/${shirt._id}/${encodeURIComponent(shirt.Name)}">
<img src="${shirt.ThumbnailLocation}" alt="${shirt.Name}" class="embed-responsive-item">
</a>
</div>
<div class="caption">
<h4><a href="/catalog/${shirt._id}/${encodeURIComponent(shirt.Name)}">${shirt.Name}</a></h4>
<p><strong>Creator:</strong> ${shirt.creator && shirt.creator.username ? shirt.creator.username : 'Unknown'}</p>
<p><strong>Price:</strong> ${shirt.Price} currency</p>
<p><strong>For Sale:</strong> ${shirt.IsForSale ? 'Yes' : 'No'}</p>
</div>
<div class="panel-footer">
<a href="/catalog/${shirt._id}/${encodeURIComponent(shirt.Name)}" class="btn btn-primary btn-block">View Details</a>
</div>
</div>
</div>
`;
}
71 changes: 33 additions & 38 deletions client/js/games/display.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,44 @@ const GamesDisplay = {
const gamesContainer = $('#games-container');
gamesContainer.empty();

const panel = $('<div class="panel panel-primary">').appendTo(
gamesContainer
);
const panel = $('<div class="panel panel-primary">').appendTo(gamesContainer);
const panelHeading = $('<div class="panel-heading">').appendTo(panel);
$('<h3 class="panel-title">')
.text('Available Games')
.appendTo(panelHeading);
$('<h3 class="panel-title">').text('Available Games').appendTo(panelHeading);
const panelBody = $('<div class="panel-body">').appendTo(panel);
const row = $('<div class="row">').appendTo(panelBody);

games.forEach((game) => {
const gameElement = this.createGameElement(game);
row.append(gameElement);
});
// rows for every 4 games
for (let i = 0; i < games.length; i += 4) {
const row = $('<div class="row">').appendTo(panelBody);

// up to 4 games in each row
for (let j = i; j < i + 4 && j < games.length; j++) {
const gameElement = this.createGameElement(games[j]);
row.append(gameElement);
}
}
},

createGameElement: function (game) {
// console.log('Game thumbnailUrl:', game.thumbnailUrl);
return `
<div class="col-md-3 col-sm-6 mb-4">
<div class="thumbnail" style="position: relative;">
${
game.year
? `<span class="badge" style="position: absolute; top: 10px; left: 10px; z-index: 1; background-color: #337ab7;">${game.year}</span>`
: '<span class="badge" style="position: absolute; top: 10px; left: 10px; z-index: 1; background-color: #d9534f;">No Year</span>'
}
<a href="/game?id=${game._id}">
<div class="embed-responsive embed-responsive-16by9">
<img src="${game.thumbnailUrl}" alt="${
game.title
}" class="embed-responsive-item">
</div>
</a>
<div class="caption">
<h4><a href="/game?id=${game._id}">${
game.title
}</a></h4>
<p>Creator: <a href="/user-profile?username=${encodeURIComponent(
game.creator.username
)}">${game.creator.username}</a></p>
</div>
</div>
</div>
`;
<div class="col-md-3 col-sm-6 mb-4">
<div class="thumbnail" style="height: 100%;">
<div style="position: relative;">
${game.year
? `<span class="badge" style="position: absolute; top: 10px; left: 10px; z-index: 1; background-color: #337ab7;">${game.year}</span>`
: '<span class="badge" style="position: absolute; top: 10px; left: 10px; z-index: 1; background-color: #d9534f;">No Year</span>'
}
<a href="/game?id=${game._id}">
<div class="embed-responsive embed-responsive-16by9">
<img src="${game.thumbnailUrl}" alt="${game.title}" class="embed-responsive-item">
</div>
</a>
</div>
<div class="caption">
<h4><a href="/game?id=${game._id}">${game.title}</a></h4>
<p>Creator: <a href="/user-profile?username=${encodeURIComponent(game.creator.username)}">${game.creator.username}</a></p>
</div>
</div>
</div>
`;
},
};
};
49 changes: 27 additions & 22 deletions client/js/shirt-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,47 @@ function loadShirtDetails(shirtId) {
console.error('Error fetching shirt details:', error);
console.error('Status:', status);
console.error('Response:', xhr.responseText);
$('#shirt-details').html(
'<p>Error loading shirt details. Please try again later.</p>'
);
$('#shirt-details').html('<p>Error loading shirt details. Please try again later.</p>');
},
});
}

function displayShirtDetails(shirt) {
const shirtDetailsContainer = $('#shirt-details');
const isOwner = shirt.creator._id === localStorage.getItem('userId');
const detailsHtml = `
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">${shirt.Name}</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img src="${shirt.ThumbnailLocation}" alt="${shirt.Name}" class="img-responsive">
<img src="${shirt.ThumbnailLocation}" alt="${shirt.Name}" class="img-responsive">
</div>
</div>
<div class="col-md-6">
<h1>${shirt.Name}</h1>
<p class="lead">By <a href="/user-profile?username=${encodeURIComponent(shirt.creator.username)}">${shirt.creator ? shirt.creator.username : 'Unknown'}</a></p>
</div>
<div class="col-md-6">
<h4>Created by <a href="/user-profile?username=${encodeURIComponent(shirt.creator.username)}">${shirt.creator ? shirt.creator.username : 'Unknown'}</a></h4>
<hr>
<div class="well">
<h3>Description</h3>
<p>${shirt.Description}</p>
<h4>Description</h4>
<p>${shirt.Description}</p>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Shirt Details</h3>
</div>
<div class="panel-body">
<p><strong>Price:</strong> ${shirt.Price} currency</p>
<p><strong>For Sale:</strong> ${shirt.IsForSale ? 'Yes' : 'No'}</p>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Shirt Details</h3>
</div>
<div class="panel-body">
<p><strong>Price:</strong> ${shirt.Price} currency</p>
<p><strong>For Sale:</strong> ${shirt.IsForSale ? '<span class="label label-success">Yes</span>' : '<span class="label label-danger">No</span>'}</p>
</div>
</div>
<div id="purchase-section"></div>
<div id="purchase-section" class="text-center"></div>
</div>
</div>
`;
</div>
</div>
`;
shirtDetailsContainer.html(detailsHtml);

checkOwnership(shirt._id);
Expand Down

0 comments on commit e37efa8

Please sign in to comment.