File size: 2,630 Bytes
e9a2815 5cd06ed e9a2815 5cd06ed e9a2815 a64b653 e9a2815 a64b653 5cd06ed e9a2815 a64b653 e9a2815 a64b653 e9a2815 5cd06ed e9a2815 5cd06ed e9a2815 5cd06ed e9a2815 a64b653 e9a2815 5cd06ed e9a2815 5cd06ed a64b653 5cd06ed e9a2815 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import { House } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useTranslation } from "@/hooks/useTranslation";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
interface RoundHeaderProps {
successfulRounds: number;
onBack?: () => void;
showConfirmDialog: boolean;
setShowConfirmDialog: (show: boolean) => void;
onCancel?: () => void;
}
export const RoundHeader = ({
successfulRounds,
onBack,
showConfirmDialog,
setShowConfirmDialog,
onCancel
}: RoundHeaderProps) => {
const t = useTranslation();
const handleHomeClick = () => {
console.log("RoundHeader - Home button clicked, successful rounds:", successfulRounds);
if (successfulRounds > 0) {
console.log("RoundHeader - Setting showConfirmDialog to true");
setShowConfirmDialog(true);
} else {
console.log("RoundHeader - No successful rounds, navigating directly");
onBack?.();
}
};
const handleDialogChange = (open: boolean) => {
console.log("RoundHeader - Dialog state changing to:", open);
setShowConfirmDialog(open);
if (!open) { // Dialog is closing
console.log("RoundHeader - Dialog closing, triggering navigation");
onBack?.();
}
};
return (
<div className="relative">
<div className="absolute right-0 top-0 bg-primary/10 px-3 py-1 rounded-lg">
<span className="text-sm font-medium text-primary">
{t.game.round} {successfulRounds + 1}
</span>
</div>
<Button
variant="ghost"
size="icon"
className="absolute left-0 top-0 text-gray-600 hover:text-white"
onClick={handleHomeClick}
>
<House className="h-5 w-5" />
</Button>
<h2 className="mb-4 text-2xl font-semibold text-gray-900">
{t.game.title}
</h2>
<AlertDialog open={showConfirmDialog} onOpenChange={handleDialogChange}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t.game.leaveGameTitle}</AlertDialogTitle>
<AlertDialogDescription>
{t.game.leaveGameDescription}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={onCancel}>{t.game.cancel}</AlertDialogCancel>
<AlertDialogAction>{t.game.confirm}</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}; |