File size: 3,511 Bytes
e9a2815 018dc4e e9a2815 5cd06ed e9a2815 018dc4e 5cd06ed e9a2815 a64b653 e9a2815 a64b653 018dc4e 5cd06ed e9a2815 a64b653 e9a2815 018dc4e a64b653 e9a2815 018dc4e e9a2815 5cd06ed 018dc4e e9a2815 018dc4e e9a2815 018dc4e e9a2815 a64b653 e9a2815 018dc4e e9a2815 018dc4e 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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import { Button } from "@/components/ui/button";
import { Home } from "lucide-react";
import { useTranslation } from "@/hooks/useTranslation";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
interface RoundHeaderProps {
successfulRounds: number;
totalRounds: number;
wrongGuesses: number;
guessSequence: Array<'success' | 'wrong'>;
onBack?: () => void;
showConfirmDialog: boolean;
setShowConfirmDialog: (show: boolean) => void;
onCancel?: () => void;
}
export const RoundHeader = ({
successfulRounds,
totalRounds,
wrongGuesses,
guessSequence,
onBack,
showConfirmDialog,
setShowConfirmDialog,
onCancel
}: RoundHeaderProps) => {
const t = useTranslation();
const currentRound = successfulRounds + wrongGuesses;
const remainingRounds = totalRounds - currentRound;
const isShortGame = totalRounds <= 10;
const handleHomeClick = () => {
if (successfulRounds > 0 || wrongGuesses > 0) {
setShowConfirmDialog(true);
} else {
onBack?.();
}
};
const handleDialogChange = (open: boolean) => {
setShowConfirmDialog(open);
if (!open && onBack) {
onBack();
}
};
// Create an array of results in sequence for games with 10 or fewer words
const results = Array(totalRounds).fill('pending').map((_, index) => {
return guessSequence[index] || 'pending';
});
return (
<div className="relative mb-2 min-h-[3rem]">
<Button
variant="ghost"
size="icon"
className="absolute left-0 top-0 text-gray-600 hover:text-white"
onClick={handleHomeClick}
>
<Home className="h-5 w-5" />
</Button>
{isShortGame ? (
<div className="flex justify-center items-center h-12">
{results.map((result, index) => (
<div
key={index}
className={`h-2.5 w-2.5 rounded-full transition-colors duration-300 mx-1 ${
result === 'success' ? 'bg-green-500' :
result === 'wrong' ? 'bg-red-500' :
'bg-gray-300'
}`}
/>
))}
</div>
) : (
<div className="absolute right-0 top-0 flex items-center gap-3 bg-primary/5 px-3 py-1.5 rounded-lg">
<div className="flex items-center gap-1.5">
<div className="h-2.5 w-2.5 rounded-full bg-green-500" />
<span className="text-sm font-medium text-green-700">{successfulRounds}</span>
</div>
<div className="flex items-center gap-1.5">
<div className="h-2.5 w-2.5 rounded-full bg-red-500" />
<span className="text-sm font-medium text-red-700">{wrongGuesses}</span>
</div>
</div>
)}
<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>
);
}; |