diff --git a/components/ModalJoinQuiz.tsx b/components/ModalJoinQuiz.tsx
deleted file mode 100644
index be899d2d93fcab28032d2175b38c6b9e68165cd7..0000000000000000000000000000000000000000
--- a/components/ModalJoinQuiz.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Modal, View, Text, StyleSheet, TextInput } from "react-native";
-import DefaultButton from "./buttons/DefaultButton";
-import {useState} from "react";
-import {useQuizService} from "../services/QuizService";
-import HttpError from "../services/HttpError";
-
-interface Props {
- navigation: any;
- modalVisible: boolean;
- setModalVisible: (newModalVisible: boolean) => void;
-}
-
-export default function ModalJoinQuiz({ navigation, modalVisible, setModalVisible }: Props) {
-
- const [isError, setIsError] = useState<boolean>(false);
- const [errorMessage, setErrorMessage] = useState<string>("");
- const [codeQuiz, setCodeQuiz] = useState<string>("");
- const {remainingQuiz} = useQuizService();
- const handleButtonClosePressed = () => {
- setModalVisible(!modalVisible);
- setIsError(false);
- setErrorMessage("");
- }
-
- const handleButtonJoinQuizPressed = async () => {
- const quiz = await remainingQuiz(codeQuiz);
- if(HttpError.isHttpError(quiz)){
- setIsError(true);
- setErrorMessage("Code quiz invalide");
- return;
- }
-
- navigation.reset({
- index: 0,
- routes: [
- {
- name: "PlayingQuiz",
- params: {quizRecovered: quiz},
- },
- ]
- });
-
-
- }
-
- return (
- <Modal
- animationType="slide"
- transparent={true}
- visible={modalVisible}
- onRequestClose={() => {
- setModalVisible(!modalVisible);
- }}
- >
- <View style={styles.centeredView}>
- <View style={styles.modalView}>
- <View style={styles.containerMenu}>
- <Text style={styles.textMenu}>PLAY YOUR QUIZ</Text>
- <DefaultButton text="X" handleButtonPressed={handleButtonClosePressed} buttonStyle={styles.buttonMenu} buttonText={styles.buttonTextMenu}/>
- </View>
- <View style={styles.containerCode}>
- <Text style={styles.textCode}>ENTER THE QUIZ ID</Text>
- {isError && <Text style={styles.textError}>{errorMessage}</Text>}
- <TextInput placeholder="TYPE A CODE" style={styles.textInputCode} onChangeText={(text) => setCodeQuiz(text)}></TextInput>
- <DefaultButton text="PLAY" handleButtonPressed={handleButtonJoinQuizPressed} buttonStyle={styles.buttonCode}/>
- </View>
- </View>
- </View>
- </Modal>
- );
-}
-
-const styles = StyleSheet.create({
- centeredView: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- modalView: {
- height: '35%',
- width: '80%',
- margin: '10%',
- padding: '10%',
- backgroundColor: 'white',
- borderRadius: 20,
- alignItems: 'center',
- shadowColor: '#000',
- shadowOffset: {
- width: 0,
- height: 2,
- },
- shadowOpacity: 0.25,
- shadowRadius: 4,
- elevation: 5,
- },
- containerMenu: {
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-between',
- height: '30%',
- },
- textMenu: {
- flex: 1,
- textAlign: 'center',
- fontSize: 20,
- fontWeight: 'bold',
- },
- buttonMenu: {
- padding: 10,
- backgroundColor: '#FFFFFF',
- },
- buttonTextMenu: {
- color: '#D5D5D5',
- fontSize: 24,
- },
- containerCode: {
- height: '100%',
- width: '100%',
- },
- textCode: {
- fontSize: 14
- },
- textError: {
- fontSize: 14,
- color: "red"
- },
- textInputCode: {
- borderColor: '#1FA9FF',
- borderRadius: 10,
- borderWidth: 2,
- },
- buttonCode: {
- margin: 20
- }
-});
\ No newline at end of file
diff --git a/models/RunsInformationsAllRuns.tsx b/models/RunsInformationsAllRuns.tsx
index f70c778cbe5dc9d81b93efe636eb4f8b2c6ae048..0022d662d4d2bca44e16e01da7ef9e9e1561c7ae 100644
--- a/models/RunsInformationsAllRuns.tsx
+++ b/models/RunsInformationsAllRuns.tsx
@@ -5,6 +5,7 @@ export interface QuizInfoRun{
difficulty: Difficulty;
name?: string;
questionCount: string;
+ description: string;
}
export interface RunsInformationsAllRuns{
id: string;
diff --git a/screens/Community/InformationsOfQuiz/InformationsOfQuiz.tsx b/screens/Community/InformationsOfQuiz/InformationsOfQuiz.tsx
index 6e6c3dd69572172e2c76ad5598c1b0c80cde94ee..379dffcd9519290924dcb7064acf124640eeaf3e 100644
--- a/screens/Community/InformationsOfQuiz/InformationsOfQuiz.tsx
+++ b/screens/Community/InformationsOfQuiz/InformationsOfQuiz.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import {View, Text, StyleSheet, TouchableOpacity, Dimensions} from "react-native";
import TemplateMenu from "../../../templates/TemplateMenu";
import {NavigationProp, RouteProp} from "@react-navigation/native";
import {Quiz} from "../../../models/Quiz";
@@ -14,6 +14,7 @@ interface Props {
navigation: NavigationProp<any>;
route: RouteProp<RoutePropsType, "InformationsOfQuiz">;
}
+const { width, height } = Dimensions.get('window');
export default function InformationsOfQuiz({ navigation, route }: Props) {
const { quiz } = route.params;
@@ -25,18 +26,47 @@ export default function InformationsOfQuiz({ navigation, route }: Props) {
navigation.navigate('PlayingQuiz', { runId: runId, quizId: quizId });
}
+ const QuizStatistic = ({ label, value }: { label: string, value: string }) => (
+ <View style={styles.statItem}>
+ <Text style={styles.statLabel}>{label}</Text>
+ <Text style={styles.statValue}>{value || "Loading..."}</Text>
+ </View>
+ );
+
return (
<TemplateMenu navigation={navigation} headerNavigation={true} buttonGoBack={true}>
<View style={styles.container}>
<Text style={styles.quizTitle}>{quiz.name}</Text>
- <Text style={styles.quizDescription}>{quiz.description && "No Description"}</Text>
- <View style={styles.aboutContainer}>
- <Text style={styles.aboutTitle}>About this quiz :</Text>
- <Text style={styles.aboutDetails}>{quiz.questionCount} questions, {quiz.difficulty.name}</Text>
- <Text style={styles.aboutDetails}>By : {quiz.authorId && "Unknown"}</Text>
+ <View style={styles.infoCard}>
+ <View style={styles.statsContainer}>
+ {/*<QuizStatistic*/}
+ {/* label="Current Score"*/}
+ {/* value={quiz.score ? quiz.score.toString() : "Loading..."}*/}
+ {/*/>*/}
+ {/*<QuizStatistic*/}
+ {/* label="Progress"*/}
+ {/* value={`${quiz.questionIndex}/${quiz.questionCount}`}*/}
+ {/*/>*/}
+ <QuizStatistic
+ label="Difficulty"
+ value={quiz.difficulty.name}
+ />
+ </View>
+ <View style={styles.descriptionContainer}>
+ <Text style={styles.descriptionLabel}>Description</Text>
+ <Text style={styles.descriptionText}>
+ {quiz.description}
+ </Text>
+ </View>
</View>
+ {/*<View style={styles.aboutContainer}>*/}
+ {/* <Text style={styles.aboutTitle}>About this quiz :</Text>*/}
+ {/* <Text style={styles.aboutDetails}>{quiz.questionCount} questions, {quiz.difficulty.name}</Text>*/}
+ {/* <Text style={styles.aboutDetails}>By : {quiz.authorId && "Unknown"}</Text>*/}
+ {/*</View>*/}
+
<TouchableOpacity style={styles.playButton} onPress={onPlay}>
<Text style={styles.playButtonText}>PLAY</Text>
</TouchableOpacity>
@@ -52,6 +82,35 @@ const styles = StyleSheet.create({
paddingVertical: 20,
justifyContent: "flex-start",
},
+ descriptionContainer: {
+ marginTop: 8,
+ },
+ descriptionLabel: {
+ fontSize: 16,
+ fontWeight: "600",
+ color: "#666",
+ marginBottom: 8,
+ },
+ descriptionText: {
+ fontSize: 15,
+ color: "#4a4a4a",
+ lineHeight: 22,
+ },
+ infoCard: {
+ height: '65%',
+ backgroundColor: "white",
+ borderRadius: width * 0.04,
+ paddingHorizontal: '5%',
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: width * 0.01 },
+ shadowOpacity: 0.1,
+ shadowRadius: width * 0.03,
+ elevation: 5,
+ },
+ statsContainer: {
+ height: '15%',
+ justifyContent: 'space-around',
+ },
quizTitle: {
fontSize: 24,
fontWeight: "bold",
@@ -81,6 +140,24 @@ const styles = StyleSheet.create({
marginBottom: 10,
color: "#000",
},
+ statItem: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingVertical: '3%',
+ borderBottomWidth: 1,
+ borderBottomColor: '#f0f0f0',
+ },
+ statLabel: {
+ fontSize: width * 0.04,
+ color: "#666",
+ fontWeight: "500",
+ },
+ statValue: {
+ fontSize: 16,
+ color: "#2d2d2d",
+ fontWeight: "600",
+ },
aboutDetails: {
fontSize: 16,
color: "#555",
diff --git a/screens/Home/HomeChild.tsx b/screens/Home/HomeChild.tsx
index 9532c96c07651934fcb02b93a4a363d1d88c9485..5aaf32638d315f3288a1b615a3ad603e4911ced0 100644
--- a/screens/Home/HomeChild.tsx
+++ b/screens/Home/HomeChild.tsx
@@ -3,7 +3,6 @@ import DefaultButton from "../../components/buttons/DefaultButton";
import {useTranslation} from "react-i18next";
import { useState } from "react";
import { TextsStyles } from "../../styles/TextsStyles";
-import ModalJoinQuiz from "../../components/ModalJoinQuiz";
import MenuButton from "../../components/buttons/MenuButton";
import {NavigationProp} from "@react-navigation/native";
import {useQuizService} from "../../services/QuizService";
@@ -57,7 +56,6 @@ export default function HomeChild({navigation}: Props) {
<MenuButton text={"PLAY"} handleButtonPressed={handleButtonGeneratePressed}/>
<MenuButton text={"MY QUIZZES"} handleButtonPressed={handleButtonMyQuizzesPressed}/>
</View>
- <ModalJoinQuiz modalVisible={modalVisible} setModalVisible={setModalVisible} navigation={navigation}/>
</View>
);
}
diff --git a/screens/Home/MyQuizzes/InformationsOfRuns.tsx b/screens/Home/MyQuizzes/InformationsOfRuns.tsx
index 367b9426b866591b06df68d910e190eabc65a834..6a461fdc502682ff48f9c636f8725d9548df79d1 100644
--- a/screens/Home/MyQuizzes/InformationsOfRuns.tsx
+++ b/screens/Home/MyQuizzes/InformationsOfRuns.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import {View, Text, StyleSheet, TouchableOpacity, Dimensions} from "react-native";
import TemplateMenu from "../../../templates/TemplateMenu";
import {NavigationProp, RouteProp} from "@react-navigation/native";
import {RunsInformationsAllRuns} from "../../../models/RunsInformationsAllRuns";
@@ -14,6 +14,8 @@ interface Props {
route: RouteProp<RoutePropsType, "InformationsOfRuns">;
}
+const { width, height } = Dimensions.get('window');
+
export default function InformationsOfRuns({ navigation, route }: Props) {
const { runInformations, } = route.params;
@@ -28,19 +30,38 @@ export default function InformationsOfRuns({ navigation, route }: Props) {
]
});
}
+ const QuizStatistic = ({ label, value }: { label: string, value: string }) => (
+ <View style={styles.statItem}>
+ <Text style={styles.statLabel}>{label}</Text>
+ <Text style={styles.statValue}>{value || "Loading..."}</Text>
+ </View>
+ );
return (
<TemplateMenu navigation={navigation} headerNavigation={true} buttonGoBack={true}>
<View style={styles.container}>
<Text style={styles.quizTitle}>{runInformations.quiz.name ? runInformations.quiz.name : "Loading..."}</Text>
- {/*<Text style={styles.quizDescription}>{runInformations ? runInformations.description :"Loading..."}</Text>*/}
-
- <View style={styles.aboutContainer}>
- <Text style={styles.aboutTitle}>About this quiz :</Text>
- <Text style={styles.aboutDetails}>Current score : {runInformations ? runInformations.score : "Loading..."}</Text>
- <Text style={styles.aboutDetails}>Question : {runInformations.questionIndex}/{runInformations ? runInformations.quiz.questionCount : "Loading..."}</Text>
- <Text style={styles.aboutDetails}>Difficulty : {runInformations ? runInformations.quiz.difficulty.name : "Loading..."}</Text>
- {/*<Text style={styles.aboutDetails}>By : {runInformations.authorId && "Unknown"}</Text>*/}
+ <View style={styles.infoCard}>
+ <View style={styles.statsContainer}>
+ <QuizStatistic
+ label="Current Score"
+ value={runInformations?.score.toString()}
+ />
+ <QuizStatistic
+ label="Progress"
+ value={`${runInformations.questionIndex}/${runInformations?.quiz.questionCount}`}
+ />
+ <QuizStatistic
+ label="Difficulty"
+ value={runInformations?.quiz.difficulty.name}
+ />
+ </View>
+ <View style={styles.descriptionContainer}>
+ <Text style={styles.descriptionLabel}>Description</Text>
+ <Text style={styles.descriptionText}>
+ {runInformations.quiz.description}
+ </Text>
+ </View>
</View>
<TouchableOpacity style={styles.playButton} onPress={onPlay}>
@@ -58,6 +79,20 @@ const styles = StyleSheet.create({
paddingVertical: 20,
justifyContent: "flex-start",
},
+ descriptionContainer: {
+ marginTop: 8,
+ },
+ descriptionLabel: {
+ fontSize: 16,
+ fontWeight: "600",
+ color: "#666",
+ marginBottom: 8,
+ },
+ descriptionText: {
+ fontSize: 15,
+ color: "#4a4a4a",
+ lineHeight: 22,
+ },
quizTitle: {
fontSize: 24,
fontWeight: "bold",
@@ -81,6 +116,39 @@ const styles = StyleSheet.create({
shadowRadius: 3,
elevation: 5,
},
+ statsContainer: {
+ height: '40%',
+ justifyContent: 'space-around',
+ },
+ statValue: {
+ fontSize: 16,
+ color: "#2d2d2d",
+ fontWeight: "600",
+ },
+ infoCard: {
+ height: '65%',
+ backgroundColor: "white",
+ borderRadius: width * 0.04,
+ padding: '5%',
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: width * 0.01 },
+ shadowOpacity: 0.1,
+ shadowRadius: width * 0.03,
+ elevation: 5,
+ },
+ statItem: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingVertical: '3%',
+ borderBottomWidth: 1,
+ borderBottomColor: '#f0f0f0',
+ },
+ statLabel: {
+ fontSize: width * 0.04,
+ color: "#666",
+ fontWeight: "500",
+ },
aboutTitle: {
fontSize: 18,
fontWeight: "bold",
diff --git a/screens/Multiplayer/MultiplayerChild.tsx b/screens/Multiplayer/MultiplayerChild.tsx
index f7eee12a124a37b0f0b756c894c4af19a7f43195..c766368440f243d60ba3af21ee80c5a078040600 100644
--- a/screens/Multiplayer/MultiplayerChild.tsx
+++ b/screens/Multiplayer/MultiplayerChild.tsx
@@ -1,7 +1,6 @@
import {Image, StyleSheet, Text, View} from "react-native";
import {useTranslation} from "react-i18next";
import React, {useEffect, useState} from "react";
-import ModalJoinQuiz from "../../components/ModalJoinQuiz";
import MenuButton from "../../components/buttons/MenuButton";
import {NavigationProp} from "@react-navigation/native";
import HttpError from "../../services/HttpError";