63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
|
|
interface LevelUpModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
levelUpCount: number;
|
|
}
|
|
|
|
export function LevelUpModal({
|
|
open,
|
|
onOpenChange,
|
|
levelUpCount,
|
|
}: LevelUpModalProps) {
|
|
const [audioPlayed, setAudioPlayed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (open && !audioPlayed) {
|
|
// Create and play the audio when the modal is opened
|
|
const audio = new Audio("/glitch-screen.mp3");
|
|
audio.play().catch((error) => {
|
|
console.error("Error playing audio:", error);
|
|
});
|
|
setAudioPlayed(true);
|
|
}
|
|
|
|
if (!open) {
|
|
// Reset audio played state when modal is closed
|
|
setAudioPlayed(false);
|
|
}
|
|
}, [open, audioPlayed]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="sm:max-w-md bg-[#0a0e14]/95 border-[#1e2a3a] text-[#e0f2ff]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-center text-xl font-bold text-[#4cc9ff]">
|
|
NOTIFICATION
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="flex flex-col items-center justify-center py-6">
|
|
{/* Repeat "Leveled Up!" based on levelUpCount */}
|
|
{Array.from({ length: levelUpCount }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="text-xl font-bold text-[#4cc9ff] mb-2 animate-pulse"
|
|
>
|
|
Leveled Up!
|
|
</div>
|
|
))}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|