Skip to content

fix: mobile level-up modal overflow and ambient music autoplay #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JesseRWeigel merged 1 commit into from
Mar 16, 2026
Merged

fix: mobile level-up modal overflow and ambient music autoplay #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions client/src/components/game/HuntersPath.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2442,7 +2442,7 @@
// Get stat bonus: prefer item.stats value, fall back to rank-based calculation
let statBoost = 1;
if (item.stats && item.stats[statType]) {
statBoost = Math.max(1, item.stats[statType]);

Check failure on line 2445 in client/src/components/game/HuntersPath.tsx

View workflow job for this annotation

GitHub Actions / test 

Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
} else {
const rankMatch = runeName.match(/([A-Z])-grade/);
const rankIdx = rankMatch ? Math.max(0, RANKS.indexOf(rankMatch[1] as BossRank)) : 0;
Expand Down Expand Up @@ -3908,7 +3908,7 @@
></div>
</div>
<div className="relative z-10 text-center max-w-2xl mx-4">
<div className="mb-8 p-8 rounded-lg border-2 bg-gradient-to-br from-yellow-900/40 to-orange-900/40 border-yellow-500/60">
<div className="mb-4 sm:mb-8 p-4 sm:p-8 rounded-lg border-2 bg-gradient-to-br from-yellow-900/40 to-orange-900/40 border-yellow-500/60">
<div className="w-32 h-32 mx-auto mb-6 rounded-full flex items-center justify-center bg-gradient-to-br from-yellow-400 to-orange-500 animate-pulse shadow-2xl">
<i className="fas fa-star text-6xl text-white animate-spin"></i>
</div>
Expand All @@ -3922,7 +3922,7 @@
+{levelUpState.statPointsGained} Stat Points Available!
</div>
{levelUpState.showStatAllocation && (
<div className="mt-8 p-6 bg-zinc-800/50 rounded-lg border border-yellow-500/30">
<div className="mt-4 sm:mt-8 p-3 sm:p-6 bg-zinc-800/50 rounded-lg border border-yellow-500/30">
<h3 className="text-xl font-bold text-yellow-300 mb-4">
Allocate Your Stat Points
</h3>
Expand Down Expand Up @@ -5731,8 +5731,8 @@

{/* Spirit Binding Sequence Modal */}
{spiritBindingState.isActive && (
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
<div className="relative w-full h-full flex items-center justify-center">
<div className="fixed inset-0 bg-black/80 flex items-start justify-center z-50 overflow-y-auto">
<div className="relative w-full flex items-center justify-center py-4 min-h-full">
{/* Background Effects */}
<div className="absolute inset-0">
{/* Animated particles */}
Expand Down Expand Up @@ -5994,8 +5994,8 @@

{/* Level-Up Celebration Modal */}
{levelUpState.isActive && (
<div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50">
<div className="relative w-full h-full flex items-center justify-center">
<div className="fixed inset-0 bg-black/80 flex items-start justify-center z-50 overflow-y-auto">
<div className="relative w-full flex items-center justify-center py-4 min-h-full">
{/* Background Effects */}
<div className="absolute inset-0">
{/* Animated particles */}
Expand Down Expand Up @@ -6028,28 +6028,28 @@
{/* Main Content */}
<div className="relative z-10 text-center max-w-2xl mx-4">
{/* Celebration Background */}
<div className="mb-8 p-8 rounded-lg border-2 bg-gradient-to-br from-yellow-900/40 to-orange-900/40 border-yellow-500/60">
<div className="mb-4 sm:mb-8 p-4 sm:p-8 rounded-lg border-2 bg-gradient-to-br from-yellow-900/40 to-orange-900/40 border-yellow-500/60">
{/* Level Icon */}
<div className="w-32 h-32 mx-auto mb-6 rounded-full flex items-center justify-center bg-gradient-to-br from-yellow-400 to-orange-500 animate-pulse shadow-2xl">
<i className="fas fa-star text-6xl text-white animate-spin"></i>
<div className="w-16 h-16 sm:w-24 sm:h-24 mx-auto mb-3 sm:mb-6 rounded-full flex items-center justify-center bg-gradient-to-br from-yellow-400 to-orange-500 animate-pulse shadow-2xl">
<i className="fas fa-star text-3xl sm:text-5xl text-white"></i>
</div>

{/* Level Up Text */}
<h2 className="text-5xl font-bold mb-4 text-yellow-300 animate-celebration-bounce">
<h2 className="text-3xl sm:text-5xl font-bold mb-2 sm:mb-4 text-yellow-300">
LEVEL UP!
</h2>

<div className="text-3xl font-bold text-orange-300 mb-4">
<div className="text-xl sm:text-3xl font-bold text-orange-300 mb-2 sm:mb-4">
Level {levelUpState.newLevel}
</div>

<div className="text-xl text-yellow-200 mb-6">
<div className="text-base sm:text-xl text-yellow-200 mb-3 sm:mb-6">
+{levelUpState.statPointsGained} Stat Points Available!
</div>

{/* Stat Allocation Section */}
{levelUpState.showStatAllocation && (
<div className="mt-8 p-6 bg-zinc-800/50 rounded-lg border border-yellow-500/30">
<div className="mt-4 sm:mt-8 p-3 sm:p-6 bg-zinc-800/50 rounded-lg border border-yellow-500/30">
<h3 className="text-xl font-bold text-yellow-300 mb-4">
Allocate Your Stat Points
</h3>
Expand Down
11 changes: 10 additions & 1 deletion client/src/lib/audioManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,16 +184,25 @@ class AudioManager {

const music = new Howl({
src: [src],
html5: true, // Use HTML5 Audio for music (better for long tracks, helps with autoplay)
volume: 0,
loop,
onplay: () => {
music.fade(0, this._volume * 0.5, 1000); // crossfade in when actually playing
},
onloaderror: () => {
// Fallback: ambient drone via Web Audio
if (name === "ambient") this.startAmbientDrone();
},
onplayerror: () => {
// Autoplay was blocked — retry on next user interaction
music.once("unlock", () => {
music.play();
});
},
});

music.play();
music.fade(0, this._volume * 0.5, 1000); // crossfade in over 1s
this.currentMusic = music;
this.currentMusicName = name;
}
Expand Down
Loading