Skip to content

Commit 1a69da5

Browse files
TomWesleyTomWesley
committed
cosmetics for the modal
1 parent 6a0fca1 commit 1a69da5

3 files changed

Lines changed: 93 additions & 97 deletions

File tree

‎index.html‎

Lines changed: 55 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -111,13 +111,8 @@
111111
<div class="snapshot-header">
112112
<div id="finalTime" class="score-value">0:00.00</div>
113113
<div id="missionPerformance" class="performance-rating">Calculating...</div>
114+
<div id="playerIdentity" class="player-identity"></div>
114115
<div id="leaderboardSubmit" class="leaderboard-submit hidden">
115-
<!-- Shown when anonymous -->
116-
<div class="submit-anon">
117-
<button class="btn-sign-in-to-submit" onclick="openAuthModal()">
118-
<i class="iconoir-user"></i> Sign in to submit your score
119-
</button>
120-
</div>
121116
<div id="scoreSubmitStatus" class="score-submit-status"></div>
122117
</div>
123118
</div>
@@ -147,13 +142,8 @@
147142
<div class="snapshot-header victory">
148143
<div id="victoryTime" class="score-value">5:00.00</div>
149144
<div id="victoryPerformance" class="performance-rating perfect">MAX SURVIVAL</div>
145+
<div id="victoryPlayerIdentity" class="player-identity"></div>
150146
<div id="victoryLeaderboardSubmit" class="leaderboard-submit hidden">
151-
<!-- Shown when anonymous -->
152-
<div class="submit-anon">
153-
<button class="btn-sign-in-to-submit" onclick="openAuthModal()">
154-
<i class="iconoir-user"></i> Sign in to submit your score
155-
</button>
156-
</div>
157147
<div id="victoryScoreSubmitStatus" class="score-submit-status"></div>
158148
</div>
159149
</div>
@@ -616,6 +606,7 @@ <h2 class="mobile-menu-title">REFLECTIONS</h2>
616606
// Auto-submit score to leaderboard. Called when:
617607
// 1. Game over modal appears and user is signed in
618608
// 2. User signs in from auth modal while game over modal is showing
609+
// Called when game over modal appears. Shows leaderboard rank or sign-in prompt.
619610
window.submitScore = submitScore;
620611
async function submitScore() {
621612
if (!window.game || !window.leaderboardService || !window.firebaseAuth) return;
@@ -624,26 +615,40 @@ <h2 class="mobile-menu-title">REFLECTIONS</h2>
624615
const service = window.leaderboardService;
625616
const game = window.game;
626617

627-
// Must be signed in and game must be over
628-
if (auth.isAnonymous() || !game.gameOver || game.gameTime <= 0) return;
618+
if (!game.gameOver || game.gameTime <= 0) return;
629619

630-
// Find the visible status element
620+
// Find the visible elements
631621
const isVictory = !document.getElementById('victoryModal').classList.contains('hidden');
632622
const statusEl = isVictory
633623
? document.getElementById('victoryScoreSubmitStatus')
634624
: document.getElementById('scoreSubmitStatus');
625+
const identityEl = isVictory
626+
? document.getElementById('victoryPlayerIdentity')
627+
: document.getElementById('playerIdentity');
628+
if (!statusEl) return;
629+
630+
// Show username if signed in
631+
if (identityEl) {
632+
if (auth.isAnonymous()) {
633+
identityEl.textContent = '';
634+
} else {
635+
const displayName = auth.getDisplayNameOrDefault();
636+
identityEl.textContent = displayName;
637+
}
638+
}
639+
640+
// Anonymous users: show sign-in prompt
641+
if (auth.isAnonymous()) {
642+
statusEl.innerHTML = '<span class="leaderboard-signin-link" onclick="openAuthModal()"><i class="iconoir-user"></i> Sign In To Join the Leaderboard</span>';
643+
return;
644+
}
635645

636646
// Don't re-submit if already submitted this game
637-
if (statusEl && statusEl.dataset.submitted === 'true') return;
647+
if (statusEl.dataset.submitted === 'true') return;
638648

639649
try {
640-
if (statusEl) {
641-
statusEl.textContent = 'Submitting score...';
642-
statusEl.style.color = 'var(--text-secondary)';
643-
}
644-
645-
// Hide the sign-in prompt since we're signed in
646-
document.querySelectorAll('.submit-anon').forEach(el => el.style.display = 'none');
650+
statusEl.textContent = 'Submitting score...';
651+
statusEl.style.color = 'var(--text-secondary)';
647652

648653
const mode = game.isDailyChallenge ? 'daily' : 'main';
649654
const DailyChallenge = (await import('./js/validation/DailyChallenge.js')).DailyChallenge;
@@ -660,50 +665,39 @@ <h2 class="mobile-menu-title">REFLECTIONS</h2>
660665
spawnerCount: game.spawners.length,
661666
});
662667

663-
if (statusEl) {
664-
statusEl.dataset.submitted = 'true';
665-
666-
if (result.isNewBest) {
667-
statusEl.textContent = 'Score submitted - new personal best!';
668-
statusEl.style.color = '#FFD700';
669-
670-
// Video upload for main game top 10
671-
if (mode === 'main' && window.videoUploader) {
672-
const isTop = await service.isTop10(game.gameTime);
673-
if (isTop) {
674-
const recorder = game.replayRecorder;
675-
let videoBlob = recorder.videoBlob;
676-
677-
if (!videoBlob && recorder.canGenerateMP4()) {
678-
statusEl.textContent = 'Top 10! Generating replay...';
679-
await game.generateReplayMP4();
680-
videoBlob = recorder.videoBlob;
681-
}
682-
683-
if (videoBlob) {
684-
statusEl.textContent = 'Top 10! Uploading replay...';
685-
await window.videoUploader.uploadReplayVideo(
686-
videoBlob, game.gameTime, result.docId,
687-
(percent) => {
688-
statusEl.textContent = `Uploading replay... ${percent}%`;
689-
}
690-
);
691-
statusEl.textContent = 'Top 10! Replay uploaded!';
692-
}
693-
}
668+
statusEl.dataset.submitted = 'true';
669+
670+
// Get rank
671+
const rank = await service.getUserRank(mode, game.gameTime);
672+
const rankText = rank ? `#${rank}` : '';
673+
674+
if (result.isNewBest) {
675+
statusEl.innerHTML = `<span class="leaderboard-rank">${rankText} on the leaderboard</span> <span class="leaderboard-best">New personal best!</span>`;
676+
677+
// Video upload for main game top 10
678+
if (mode === 'main' && rank && rank <= 10 && window.videoUploader) {
679+
const recorder = game.replayRecorder;
680+
let videoBlob = recorder.videoBlob;
681+
682+
if (!videoBlob && recorder.canGenerateMP4()) {
683+
await game.generateReplayMP4();
684+
videoBlob = recorder.videoBlob;
685+
}
686+
687+
if (videoBlob) {
688+
await window.videoUploader.uploadReplayVideo(
689+
videoBlob, game.gameTime, result.docId
690+
);
694691
}
695-
} else {
696-
statusEl.textContent = 'Score submitted';
697-
statusEl.style.color = 'var(--text-secondary)';
698692
}
693+
} else {
694+
statusEl.innerHTML = `<span class="leaderboard-rank">${rankText} on the leaderboard</span>`;
699695
}
700696

701697
} catch (error) {
702698
console.error('Score submission failed:', error);
703-
if (statusEl) {
704-
statusEl.textContent = 'Submission failed';
705-
statusEl.style.color = '#E84E6A';
706-
}
699+
statusEl.textContent = 'Submission failed';
700+
statusEl.style.color = '#E84E6A';
707701
}
708702
}
709703

‎js/main.js‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,10 @@ async function initFirebaseServices(cacheBust) {
3535
}
3636
});
3737

38-
updateSubmitUI(auth);
39-
4038
// Show the leaderboard submit UI in modals
4139
document.querySelectorAll('.leaderboard-submit').forEach(el => el.classList.remove('hidden'));
4240
}
4341

44-
// Toggle sign-in prompt visibility based on auth state
45-
function updateSubmitUI(auth) {
46-
const signedIn = auth.isSignedIn();
47-
document.querySelectorAll('.submit-anon').forEach(el => {
48-
el.style.display = signedIn ? 'none' : '';
49-
});
50-
}
5142

5243
// Auth modal functions
5344
window.openAuthModal = function() {

‎styles/game.css‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -963,30 +963,6 @@ h1 {
963963
transform: none;
964964
}
965965

966-
/* Sign-in-to-submit button for anonymous users */
967-
.btn-sign-in-to-submit {
968-
display: flex;
969-
align-items: center;
970-
justify-content: center;
971-
gap: 6px;
972-
width: 100%;
973-
background: linear-gradient(135deg, rgba(78, 120, 232, 0.2), rgba(232, 122, 220, 0.2));
974-
border: 1px solid rgba(78, 120, 232, 0.4);
975-
border-radius: 8px;
976-
color: var(--text-primary);
977-
font-family: 'Space Grotesk', sans-serif;
978-
font-size: 0.8rem;
979-
font-weight: 600;
980-
padding: 9px 14px;
981-
cursor: pointer;
982-
transition: all 0.2s ease;
983-
}
984-
985-
.btn-sign-in-to-submit:hover {
986-
background: linear-gradient(135deg, rgba(78, 120, 232, 0.3), rgba(232, 122, 220, 0.3));
987-
border-color: var(--arc);
988-
box-shadow: 0 4px 12px rgba(78, 120, 232, 0.3);
989-
}
990966

991967
/* Auth Modal */
992968
.auth-modal-content {
@@ -1180,12 +1156,47 @@ h1 {
11801156
min-height: 18px;
11811157
}
11821158

1159+
.player-identity {
1160+
font-family: 'Space Grotesk', sans-serif;
1161+
font-size: 0.8rem;
1162+
font-weight: 600;
1163+
color: var(--text-secondary);
1164+
letter-spacing: 0.5px;
1165+
margin-top: 6px;
1166+
min-height: 0;
1167+
}
1168+
11831169
.score-submit-status {
11841170
font-family: 'Space Grotesk', sans-serif;
1185-
font-size: 0.7rem;
1186-
margin-top: 4px;
1187-
min-height: 16px;
1171+
font-size: 0.75rem;
1172+
margin-top: 6px;
1173+
min-height: 18px;
11881174
letter-spacing: 0.5px;
1175+
text-align: center;
1176+
}
1177+
1178+
.leaderboard-rank {
1179+
color: var(--arc);
1180+
font-weight: 600;
1181+
}
1182+
1183+
.leaderboard-best {
1184+
color: #FFD700;
1185+
font-weight: 600;
1186+
margin-left: 4px;
1187+
}
1188+
1189+
.leaderboard-signin-link {
1190+
color: var(--text-secondary);
1191+
cursor: pointer;
1192+
transition: color 0.2s ease;
1193+
display: inline-flex;
1194+
align-items: center;
1195+
gap: 5px;
1196+
}
1197+
1198+
.leaderboard-signin-link:hover {
1199+
color: var(--arc);
11891200
}
11901201

11911202
.snapshot-container {

0 commit comments

Comments
 (0)