Jamon/resonancerumble
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor layout changes for the achievements tab

Browse Source
This commit is contained in:
Jamon 2024-08-10 09:11:37 +12:00
parent e4d582f153
commit df5656055c
3 changed files with 37 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/js/game.js
View File

@ -131,6 +131,8 @@ function handleAchievementUnlock(data) {
function fetchUserAchievements() { function fetchUserAchievements() {
const achievementsGrid = document.getElementById('achievementsGrid'); const achievementsGrid = document.getElementById('achievementsGrid');
const achievementInfoBox = document.getElementById('achievementInfoBox');
if (!achievementsGrid) { if (!achievementsGrid) {
console.error('Achievements grid not found'); console.error('Achievements grid not found');
return; return;
@ -138,9 +140,16 @@ function fetchUserAchievements() {
if (!currentUser) { if (!currentUser) {
displaySignInMessage(achievementsGrid, 'achievements'); displaySignInMessage(achievementsGrid, 'achievements');
if (achievementInfoBox) {
achievementInfoBox.style.display = 'none';
}
return; return;
} }
if (achievementInfoBox) {
achievementInfoBox.style.display = 'block';
}
fetch('/get-user-achievements', { fetch('/get-user-achievements', {
headers: { headers: {
'Authorization': getSessionToken() 'Authorization': getSessionToken()
@ -169,12 +178,11 @@ function displaySignInMessage(container, feature) {
container.innerHTML = ` container.innerHTML = `
<div class="sign-in-message"> <div class="sign-in-message">
<p>Please sign in to view your ${feature}.</p> <p>Please sign in to view your ${feature}.</p>
<button id="signInButton" class="glowing-button">Sign In</button>
</div> </div>
`; `;
document.getElementById('signInButton').addEventListener('click', showLoginForm);
} }
function displayNoAchievementsMessage(container) { function displayNoAchievementsMessage(container) {
container.innerHTML = ` container.innerHTML = `
<div class="no-achievements-message"> <div class="no-achievements-message">
@ -2056,7 +2064,7 @@ function onCustomizationTabOpen() {
} }
// Show loading indicator immediately // Show loading indicator immediately
skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>'; // skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
// Load skin options asynchronously // Load skin options asynchronously
setTimeout(() => { setTimeout(() => {

6
static/js/skinselector.js
View File

@ -31,9 +31,9 @@ function loadSkinOptions() {
function fetchAndCacheSkins() { function fetchAndCacheSkins() {
const skinCustomization = document.getElementById('skinCustomization'); const skinCustomization = document.getElementById('skinCustomization');
if (skinCustomization) { // if (skinCustomization) {
skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>'; // skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
} // }
const cachedEtag = localStorage.getItem('skinCacheEtag'); const cachedEtag = localStorage.getItem('skinCacheEtag');
const headers = { const headers = {

25
static/styles.css
View File

@ -1389,15 +1389,36 @@ body {
justify-content: center; justify-content: center;
height: 100%; height: 100%;
text-align: center; text-align: center;
color: #ffffff; color: #00ffff;
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
padding: 20px;
background-color: rgba(18, 4, 88, 0.6);
border-radius: 10px;
box-shadow: 0 0 10px #ff00ff, inset 0 0 5px #00ffff;
}
.sign-in-message p,
.no-achievements-message p,
.error-message p {
margin-bottom: 0;
font-size: 16px;
}
@media screen and (max-width: 600px) {
.sign-in-message,
.no-achievements-message,
.error-message {
padding: 15px;
} }
.sign-in-message p, .sign-in-message p,
.no-achievements-message p, .no-achievements-message p,
.error-message p { .error-message p {
margin-bottom: 20px; font-size: 14px;
} }
}
.glowing-button { .glowing-button {
background-color: transparent; background-color: transparent;