File size: 5,278 Bytes
a64b653 8ec33d8 a64b653 8ec33d8 a64b653 8ec33d8 a64b653 8ec33d8 a64b653 8ec33d8 a64b653 8ec33d8 a64b653 8ec33d8 a64b653 |
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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
import { useState, useEffect } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Eye } from "lucide-react";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useTranslation } from "@/hooks/useTranslation";
import { GuessDescription } from "@/components/game/guess-display/GuessDescription";
interface GameResult {
id: string;
target_word: string;
description: string;
ai_guess: string;
is_correct: boolean;
}
interface ComparisonDialogProps {
isOpen: boolean;
onClose: () => void;
currentResult: GameResult | null;
friendResult: GameResult | null;
}
const ComparisonDialog = ({ isOpen, onClose, currentResult, friendResult }: ComparisonDialogProps) => {
const t = useTranslation();
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent>
<DialogHeader>
<DialogTitle>
{currentResult?.target_word}
</DialogTitle>
</DialogHeader>
<div className="space-y-6 mt-4">
<div>
{friendResult && (
<h3 className="font-semibold mb-2">{t.game.review.yourDescription}</h3>
)}
<GuessDescription
sentence={currentResult?.description?.split(' ') || []}
aiGuess={currentResult?.ai_guess || ''}
/>
<p className="text-sm text-gray-600 mt-2">
{t.guess.aiGuessedDescription}: <span className="font-medium">{currentResult?.ai_guess}</span>
</p>
</div>
{friendResult && (
<div>
<h3 className="font-semibold mb-2">{t.game.review.friendDescription}</h3>
<GuessDescription
sentence={friendResult.description?.split(' ') || []}
aiGuess={friendResult.ai_guess || ''}
/>
<p className="text-sm text-gray-600 mt-2">
{t.guess.aiGuessedDescription}: <span className="font-medium">{friendResult.ai_guess}</span>
</p>
</div>
)}
</div>
</DialogContent>
</Dialog>
);
};
export const GameDetailsView = ({ gameResults = [], fromSession }: { gameResults: GameResult[], fromSession?: string | null }) => {
const [friendResults, setFriendResults] = useState<GameResult[]>([]);
const [selectedResult, setSelectedResult] = useState<GameResult | null>(null);
const t = useTranslation();
useEffect(() => {
const fetchFriendResults = async () => {
if (!fromSession) return;
const { data, error } = await supabase
.from('game_results')
.select('*')
.eq('session_id', fromSession)
.order('created_at', { ascending: true });
if (!error && data) {
console.log('Friend results:', data);
setFriendResults(data);
}
};
fetchFriendResults();
}, [fromSession]);
const getFriendResult = (targetWord: string) => {
return friendResults.find(r => r.target_word === targetWord) || null;
};
const getWordCount = (description?: string) => {
return description?.split(' ').length || 0;
};
return (
<div className="relative overflow-x-auto rounded-lg border">
<table className="w-full text-sm text-left">
<thead className="text-xs uppercase bg-gray-50">
<tr>
<th className="px-6 py-3">
{t.game.round}
</th>
<th className="px-6 py-3">
{friendResults.length > 0 ? t.game.review.yourWords : t.game.review.words}
</th>
{friendResults.length > 0 && (
<th className="px-6 py-3">
{t.game.review.friendWords}
</th>
)}
<th className="px-6 py-3">
<span className="sr-only">{t.game.review.details}</span>
</th>
</tr>
</thead>
<tbody>
{gameResults.map((result) => {
const friendResult = getFriendResult(result.target_word);
return (
<tr
key={result.id}
className="bg-white border-b hover:bg-gray-50 cursor-pointer"
onClick={() => setSelectedResult(result)}
>
<td className="px-6 py-4 font-medium">
{result.target_word}
</td>
<td className="px-6 py-4">
{result.is_correct ? '✅' : '❌'} {getWordCount(result.description)}
</td>
{friendResults.length > 0 && (
<td className="px-6 py-4">
{friendResult ? `${friendResult.is_correct ? '✅' : '❌'} ${getWordCount(friendResult.description)}` : '-'}
</td>
)}
<td className="px-6 py-4">
<Eye className="h-4 w-4 text-gray-500" />
</td>
</tr>
);
})}
</tbody>
</table>
<ComparisonDialog
isOpen={!!selectedResult}
onClose={() => setSelectedResult(null)}
currentResult={selectedResult}
friendResult={selectedResult ? getFriendResult(selectedResult.target_word) : null}
/>
</div>
);
};
|