@wasto/cms-components 1.5.10

package/src/components/challenge/ResultModal.tsx

@@ -0,0 +1,144 @@
+import type { ReactNode } from "react";
+import { Modal, StyleSheet, Text, View } from "react-native";
+import { Star } from "lucide-react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { Title } from "../title/Title";
+import { Button } from "../button/Button";
+import { quizResultMessage, quizStarCount } from "../../helpers/generateQuizQuestions";
+
+export type ResultModalProps = {
+    visible: boolean;
+    correct: number;
+    incorrect: number;
+    total: number;
+    onClose: () => void;
+};
+
+export function ResultModal({
+    visible,
+    correct,
+    incorrect,
+    total,
+    onClose,
+}: ResultModalProps): ReactNode {
+    const { theme } = useTheme();
+    const themedStyles = createThemedStyles(theme);
+    const stars = quizStarCount(correct, total);
+    const percentage = total > 0 ? Math.round((correct / total) * 100) : 0;
+
+    return (
+        <Modal visible={visible} animationType="fade" transparent onRequestClose={onClose}>
+            <View style={styles.overlay}>
+                <View style={[styles.card, themedStyles.card]}>
+                    <Title text="Ton score" level="2" />
+                    <Text style={[styles.percentage, themedStyles.percentage]}>{percentage}%</Text>
+
+                    <View style={styles.scores}>
+                        <View style={styles.scoreItem}>
+                            <Text style={[styles.scoreMark, { color: theme.colors.success }]}>✓</Text>
+                            <Text style={[styles.scoreNumber, themedStyles.text]}>{correct}</Text>
+                        </View>
+                        <View style={styles.scoreItem}>
+                            <Text style={[styles.scoreMark, { color: theme.colors.error }]}>×</Text>
+                            <Text style={[styles.scoreNumber, themedStyles.text]}>{incorrect}</Text>
+                        </View>
+                    </View>
+
+                    <View style={[styles.feedback, themedStyles.feedback]}>
+                        <Text style={styles.emoji}>
+                            {percentage >= 80 ? "🎉" : percentage >= 50 ? "😊" : "🐸"}
+                        </Text>
+                        <Text style={[styles.feedbackText, themedStyles.text]}>
+                            {quizResultMessage(correct, total)}
+                        </Text>
+                    </View>
+
+                    <View style={styles.stars}>
+                        {[1, 2, 3, 4, 5].map((star) => (
+                            <Star
+                                key={star}
+                                size={28}
+                                fill={star <= stars ? theme.colors.primary : "none"}
+                                color={star <= stars ? theme.colors.primary : theme.colors.border}
+                                strokeWidth={star <= stars ? 0 : 2}
+                            />
+                        ))}
+                    </View>
+
+                    <Button onPress={onClose}>Terminer</Button>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        card: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: Math.max(theme.radius, 20),
+        },
+        percentage: {
+            color: theme.colors.primary,
+        },
+        text: {
+            color: theme.colors.onSurface,
+        },
+        feedback: {
+            backgroundColor: `${theme.colors.border}66`,
+            borderRadius: theme.radius,
+        },
+    });
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(15, 23, 42, 0.45)",
+        justifyContent: "center",
+        padding: 24,
+    },
+    card: {
+        padding: 24,
+        gap: 16,
+        alignItems: "center",
+    },
+    percentage: {
+        fontSize: 42,
+        fontWeight: "700",
+    },
+    scores: {
+        flexDirection: "row",
+        gap: 32,
+    },
+    scoreItem: {
+        alignItems: "center",
+        gap: 4,
+    },
+    scoreMark: {
+        fontSize: 22,
+        fontWeight: "700",
+    },
+    scoreNumber: {
+        fontSize: 22,
+        fontWeight: "700",
+    },
+    feedback: {
+        width: "100%",
+        padding: 16,
+        alignItems: "center",
+        gap: 8,
+    },
+    emoji: {
+        fontSize: 32,
+    },
+    feedbackText: {
+        textAlign: "center",
+        fontSize: 16,
+        lineHeight: 22,
+    },
+    stars: {
+        flexDirection: "row",
+        gap: 6,
+    },
+});