merge Feature/115 endquiz for multi

Merge branch 'feature/115-endquiz-for-multi' into 'develop'

components/PlayingQuiz/EndQuiz/EndQuizListPlayer.tsx

+import React from "react";
+import { FlatList, View, Text, StyleSheet, Image } from "react-native";
+import UserModel from "../../../models/UserModel";
+
+interface Props {
+    users: UserModel[];
+    maxScore: number;
+}
+
+export default function EndQuizListPlayer({ users, maxScore }: Props) {
+    const renderUser = ({ item, index }: { item: UserModel; index: number }) => (
+        <View style={[styles.userContainer, index === 0 && styles.firstPlace]}>
+            <Image
+                source={require("../../../assets/ProfilBaseImage.png")} // Replace with actual profile picture if available
+                style={styles.avatar}
+            />
+            <View style={styles.infoContainer}>
+                <Text style={[styles.username, index === 0 && styles.firstPlaceText]}>
+                    {item.username.toUpperCase()}
+                </Text>
+                <Text style={styles.score}>
+                    {10 + index}/{maxScore} {/* Adjust score logic as needed */}
+                </Text>
+            </View>
+        </View>
+    );
+
+    return (
+        <View style={styles.container}>
+            <FlatList
+                data={users}
+                renderItem={renderUser}
+                keyExtractor={(item) => item.id.toString()}
+                showsVerticalScrollIndicator={false}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        padding: 20,
+        backgroundColor: "#fff",
+        borderRadius: 20,
+    },
+    userContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: "#f9f9f9",
+        borderRadius: 10,
+        padding: 15,
+        marginBottom: 10,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
+        elevation: 2,
+    },
+    firstPlace: {
+        // backgroundColor: "#ffe700",
+        // shadowColor: "#ff9900",
+        // shadowOpacity: 0.3,
+    },
+    avatar: {
+        width: 40,
+        height: 40,
+        borderRadius: 25,
+        marginRight: 15,
+    },
+    infoContainer: {
+        flex: 1,
+    },
+    username: {
+        fontSize: 18,
+        fontWeight: "bold",
+        color: "#333",
+    },
+    firstPlaceText: {
+        // color: "#ff9900",
+    },
+    score: {
+        fontSize: 16,
+        color: "#666",
+    },
+});

components/PlayingQuiz/EndQuiz/UserScore.tsx

+import UserModel from "../../../models/UserModel";
+import { View, Text, StyleSheet, Image } from "react-native";
+
+interface Props {
+    user: UserModel;
+    score: number;
+    maxScore: number;
+    isFirst: boolean;
+}
+
+export default function UserScore({ user, score, maxScore, isFirst }: Props) {
+
+    function shortenString(input: string): string {
+        if (input.length <= 5) {
+            return input; // Si la chaîne est déjà de 4 caractères ou moins, on la retourne telle quelle
+        }
+        return `${input.slice(0, 5)}...`; // Garde les 4 premiers caractères et ajoute "..."
+    }
+
+    return (
+        <View style={styles.container}>
+            <View style={[styles.avatarContainer, isFirst && styles.firstAvatar]}>
+                <Image
+                    source={require('../../../assets/ProfilBaseImage.png')} // URL de l'avatar ou placeholder
+                    style={styles.avatar}
+                />
+            </View>
+            <Text style={styles.userName}>{shortenString(user.username.toUpperCase())}</Text>
+            <Text style={styles.userScore}>
+                {score}/{maxScore}
+            </Text>
+        </View>
+    );
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "space-around",
+        marginHorizontal: 10,
+    },
+    avatarContainer: {
+        width: 70,
+        height: 70,
+        borderRadius: 50,
+        backgroundColor: "#d9e3f0", // Fond gris clair
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    firstAvatar: {
+        width: 90,
+        height: 90,
+        // borderWidth: 3, // Ajoute une bordure pour le premier utilisateur
+        // borderColor: "#FFD700", // Couleur or pour marquer le premier
+    },
+    avatar: {
+        width: "100%",
+        height: "100%",
+        resizeMode: "cover",
+    },
+    userName: {
+        fontSize: 16,
+        fontWeight: "bold",
+        color: "#000",
+        marginTop: 5,
+        textAlign: "center",
+    },
+    userScore: {
+        fontSize: 14,
+        fontWeight: "500",
+        color: "#333",
+        textAlign: "center",
+        marginTop: 5,
+    },
+});

routes/StackNavigator.tsx

@@ -13,6 +13,7 @@ import Lobby from "../screens/Multiplayer/Lobby/Lobby";
 import PlayQuiz from "../screens/Home/PlayQuiz/PlayQuiz";
 import MyQuizzes from "../screens/Home/MyQuizzes/MyQuizzes";
 import InformationsOfQuiz from "../screens/Community/InformationsOfQuiz/InformationsOfQuiz";
+import EndQuizMulti from "../screens/PlayingQuiz/EndQuizMulti/EndQuizMulti";
 import MultiInformationsOfQuiz from "../screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz";
 import InformationsOfRuns from "../screens/Home/MyQuizzes/InformationsOfRuns";
 
@@ -28,6 +29,7 @@ export default function StackNavigator() {
                 <Stack.Screen name="PlayingQuiz" component={PlayingQuiz} options={{ headerShown: false }}/>
                 <Stack.Screen name="PlayQuiz" component={PlayQuiz} options={{ headerShown: false }}/>
                 <Stack.Screen name="EndQuiz" component={EndQuiz} options={{ headerShown: false }}/>
+                <Stack.Screen name="EndQuizMulti" component={EndQuizMulti} options={{ headerShown: false }}/>
                 <Stack.Screen name="MyQuizzes" component={MyQuizzes} options={{ headerShown: false }}/>
                 <Stack.Screen name="InformationsOfQuiz" component={InformationsOfQuiz} options={{ headerShown: false }}/>
                 <Stack.Screen name="InformationsOfRuns" component={InformationsOfRuns} options={{ headerShown: false }}/>

screens/Home/Home.tsx

@@ -3,12 +3,35 @@ import TemplateMono from "../../templates/TemplateMono";
 import HomeChild from "./HomeChild";
 import TemplateMenu from "../../templates/TemplateMenu";
 import {NavigationProp} from "@react-navigation/native";
+import {Quiz} from "../../models/Quiz";
 
 interface Props {
     navigation: NavigationProp<any>;
 }
 
 export default function Home({navigation}: Props) {
+    const debugQuiz: Quiz = {
+        id: "debug-quiz-001",
+        name: "Debug Quiz",
+        description: "This is a basic quiz for debugging purposes.",
+        score: 0,
+        questionIndex: 0,
+        questionCount: 0,
+        categoryId: 1,
+        difficultyId: 1,
+        authorId: 1,
+        category: {
+            id: 1,
+            name: "General Knowledge",
+        },
+        difficulty: {
+            id: 1,
+            name: "Easy",
+        },
+        questions: [], // Tableau de questions vide
+    };
+
+    navigation.navigate("EndQuizMulti", {quiz: debugQuiz});
     return (
         <View style={styles.containerGlobal}>
                 <TemplateMenu navigation={navigation} headerNavigation={false} buttonGoBack={false}>

screens/PlayingQuiz/EndQuiz/EndQuiz.tsx

@@ -37,78 +37,3 @@ const styles = StyleSheet.create({
         flexDirection: 'column',
     },
 });
-
-
-
-// import DefaultButton from "../../components/DefaultButton";
-// import { TextsStyles } from "../../styles/TextsStyles";
-// import { ButtonsStyles } from "../../styles/ButtonsStyles";
-// import {useTranslation} from "react-i18next";
-// import QuizModel from "../../models/QuizModel";
-// import {NavigationProp, RouteProp} from "@react-navigation/native";
-
-// type RoutePropsType = {
-//     EndQuiz: {
-//         quiz: QuizModel;
-//     };
-// };
-
-// interface Props {
-//     navigation: NavigationProp<any>;
-//     route: RouteProp<RoutePropsType, "EndQuiz">;
-// }
-
-// export default function EndQuiz({ navigation, route }: Props) {
-//     const { quiz } = route.params;
-//     const {t} = useTranslation();
-//     const handleButtonRePlayPressed = () => {
-//         quiz.nbActualQuestion = 1;
-//         quiz.score = 0;
-//         navigation.reset({
-//             index: 0,
-//             routes: [
-//                 {
-//                     name: "PlayingQuiz",
-//                     params: {quiz: quiz},
-//                 },
-//             ]
-//         });
-//     }
-
-//     const handleButtonHomePressed = () => {
-//         navigation.navigate('Home');
-//     }
-
-//     return (
-//         <View style={styles.container}>
-//             <Image source={require('../../assets/FondTemplate.png')} style={styles.image}/>
-//             <Text style={TextsStyles.titleText}>{t("app.screens.endQuiz.score")} : {quiz.score}</Text>
-//             <Text style={TextsStyles.subtitleText}>{((quiz.score/quiz.nbQuestions)*100 > 50 ) ? t("app.screens.endQuiz.lose") : t("app.screens.endQuiz.win")}</Text>
-//             <View style={styles.buttonContainer}>
-//                 <DefaultButton text={t("app.screens.endQuiz.replay")} handleButtonPressed={handleButtonRePlayPressed} buttonStyle={ButtonsStyles.defaultButton}></DefaultButton>
-//                 <DefaultButton text={t("app.screens.endQuiz.goHome")} handleButtonPressed={handleButtonHomePressed}></DefaultButton>
-//             </View>
-//         </View>
-//     )
-// }
-
-// const styles = StyleSheet.create({
-//     container: {
-//         display: 'flex',
-//         width: '100%',
-//         height: '100%',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         gap: 10,  
-//     },
-//     buttonContainer: {
-//         width: '80%',
-//         margin: '10%',
-//         gap: 20
-//     },
-//     image: {
-//         width: '100%',
-//         height: '100%',
-//         position: 'absolute',
-//     },
-// });
\ No newline at end of file

screens/PlayingQuiz/EndQuizMulti/EndQuizMulti.tsx

+import {NavigationProp, RouteProp} from "@react-navigation/native";
+import { View, StyleSheet, Image, Text } from "react-native";
+import TemplateMenu from "../../../templates/TemplateMenu";
+import {Quiz} from "../../../models/Quiz";
+import EndQuizChild from "../EndQuiz/EndQuizChild";
+import EndQuizMultiChild from "./EndQuizMultiChild";
+
+type RoutePropsType = {
+    EndQuizChild: {
+        quiz: Quiz;
+    };
+};
+interface Props {
+    route: RouteProp<RoutePropsType, "EndQuizChild">;
+    navigation: NavigationProp<any>;
+}
+
+export default function EndQuizMulti({route,navigation}: Props) {
+    const { quiz } = route.params;
+    return (
+        <View style={styles.containerGlobal}>
+            <TemplateMenu navigation={navigation} headerNavigation={false} buttonGoBack={false}>
+                <View>
+                    <EndQuizMultiChild navigation={navigation} quiz={quiz}/>
+                </View>
+            </TemplateMenu>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    containerGlobal: {
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column',
+    },
+});
+
+
+

screens/PlayingQuiz/EndQuizMulti/EndQuizMultiChild.tsx

+import { View, Image, Text, StyleSheet } from "react-native";
+import DefaultButton from "../../../components/buttons/DefaultButton";
+import { NavigationProp, RouteProp } from "@react-navigation/native";
+import {Quiz} from "../../../models/Quiz";
+import {useQuizService} from "../../../services/QuizService";
+import HttpError from "../../../services/HttpError";
+import UserScore from "../../../components/PlayingQuiz/EndQuiz/UserScore";
+import UserModel from "../../../models/UserModel";
+import EndQuizListPlayer from "../../../components/PlayingQuiz/EndQuiz/EndQuizListPlayer";
+
+
+
+interface Props {
+    navigation: NavigationProp<any>;
+    quiz: Quiz;
+}
+
+export default function EndQuizMultiChild({ navigation, quiz }: Props) {
+
+    const {restartQuiz, remainingQuiz} = useQuizService()
+
+    const handleRestartPress = async () => {
+        const isRestarted = await restartQuiz(quiz.id);
+        if(HttpError.isHttpError(isRestarted)){
+            console.log(isRestarted.message);
+            return
+        }
+        if(!isRestarted) {
+            return;
+        }
+        const quizRestarted = await remainingQuiz(quiz.id);
+        if(HttpError.isHttpError(quizRestarted)){
+            console.log(quizRestarted.message);
+            return
+        }
+
+        navigation.reset({
+            index: 0,
+            routes: [
+                {
+                    name: "PlayingQuiz",
+                    params: {quizRecovered: quizRestarted},
+                },
+            ]
+        });
+    };
+
+    const handleBackToMenu = () => {
+        navigation.navigate('TabNavigator');
+    };
+    const user = new UserModel(10,"Thomassss", "Thomas");
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.containerHeader}>
+                <Image source={require('../../../assets/TitleApp.png')}/>
+            </View>
+            <View style={styles.containerBody}>
+                <Image
+                    source={require('../../../assets/stars.png')} // URL de l'avatar ou placeholder
+                    style={styles.stars}
+                />
+                <View style={styles.usersContainer}>
+                    <UserScore user={user} score={10} maxScore={quiz.questionCount} isFirst={false}/>
+                    <UserScore user={user} score={10} maxScore={quiz.questionCount} isFirst={true}/>
+                    <UserScore user={user} score={10} maxScore={quiz.questionCount} isFirst={false}/>
+                </View>
+                <EndQuizListPlayer users={[new UserModel(1, "user1", "user1@email.com"), new UserModel(2, "user2", "user2@email.com")]} maxScore={quiz.questionCount}/>
+
+                <DefaultButton text="RESTART" handleButtonPressed={handleRestartPress} buttonStyle={styles.whiteButton} buttonText={styles.whiteButtonText}></DefaultButton>
+                <DefaultButton text="BACK TO MENU" handleButtonPressed={handleBackToMenu} buttonStyle={styles.blueButton} buttonText={styles.blueButtonText}></DefaultButton>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-around'
+    },
+    usersContainer: {
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+    },
+    containerHeader: {
+        height: '10%',
+        width: '100%',
+        alignItems: 'center',
+    },
+    containerBody: {
+        height: '80%',
+        width: '90%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        backgroundColor: '#F3F3F3',
+        borderRadius: 40,
+        padding: '5%',
+        shadowColor: "#000",
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+    },
+    TextBodyTitle: {
+        textAlign: 'center',
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+    TextBody: {
+        textAlign: 'center',
+        fontSize: 22,
+        fontWeight: 'bold',
+    },
+    whiteButton: {
+        height: '12%',
+        width: '80%',
+        backgroundColor: '#FFFFFF',
+        borderColor: '#2B73FE',
+        borderWidth: 4,
+        borderRadius: 10,
+        padding: 0
+    },
+    whiteButtonText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#2B73FE',
+    },
+    blueButton: {
+        height: '12%',
+        width: '80%',
+        backgroundColor: '#2B73FE',
+        borderRadius: 10,
+        padding: 0
+    },
+    blueButtonText: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: '#FFFFFF',
+    },
+    stars: {
+        resizeMode: "cover",
+    },
+});
\ No newline at end of file