Merge QuizPage into master

pull/19/head
tomivt 2 months ago
commit d165f1a39b

@ -0,0 +1,139 @@
package com.example.what_the_fantasy.ui.screens
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.what_the_fantasy.R
@Composable
fun QuizAccueil(navController: NavController) {
Row(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFF100C1B))
.padding(top = 100.dp)
) {
Spacer(modifier = Modifier.weight(0.1f))
Column(
modifier = Modifier
.weight(0.9f)
.fillMaxHeight(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Box(
modifier = Modifier
.size(width = 150.dp, height = 100.dp)
.padding(8.dp)
.clickable {
navController.navigate("quizPage")
}
) {
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Quiz 1",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
}
Box(
modifier = Modifier
.size(width = 150.dp, height = 100.dp)
.padding(8.dp)
.clickable {
navController.navigate("quizPage")
}
) {
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Quiz 2",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
}
}
Spacer(modifier = Modifier.width(10.dp))
Column(
modifier = Modifier
.weight(0.9f)
.fillMaxHeight(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Box(
modifier = Modifier
.size(width = 150.dp, height = 100.dp)
.padding(8.dp)
.clickable {
navController.navigate("quizPage")
}
) {
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Quiz 3",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
}
Box(
modifier = Modifier
.size(width = 150.dp, height = 100.dp)
.padding(8.dp)
.clickable {
navController.navigate("quizPage")
}
) {
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Quiz 4",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
}
}
Spacer(modifier = Modifier.weight(0.1f))
}
}
@Composable
fun QuizApp() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "quizEndPage") {
composable("quizAccueil") {
QuizAccueil(navController = navController)
}
composable("quizPage") {
QuizPage(navController = navController)
}
composable("quizEndPage") {
QuizEndPage(5, 1)
}
}
}

@ -0,0 +1,163 @@
package com.example.what_the_fantasy.ui.screens
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.what_the_fantasy.R
import com.example.what_the_fantasy.data.local.QuestionStub
val gradient = Brush.linearGradient(
colors = listOf(Color(0xFF7B1FA2), Color(0xFF311B92)),
start = Offset(0f, 1000f),
end = Offset(1000f, 0f)
)
@Composable
fun QuizEndPage(points: Int, idQuiz: Int) {
Column(
modifier = Modifier.fillMaxSize().background(Color(0xFF100C1B))
) {
// Bandeau supérieur
Row(
modifier = Modifier
.fillMaxWidth()
.weight(0.1f)
.background(Color(0xFF300052))
.padding(20.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
IconButton(onClick = { }) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Retour", tint = Color.White)
}
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Profil",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Profil",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
}
// Contenu principal
Column(
modifier = Modifier
.weight(0.8f)
.padding(horizontal = 50.dp, vertical = 20.dp)
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "▶ Résultats ◀",
color = Color.White,
style = TextStyle(fontSize = 25.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
)
Spacer(modifier = Modifier.height(16.dp))
Column (
modifier = Modifier
.background(brush = gradient, shape = RoundedCornerShape(20.dp))
.padding(30.dp)
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text (
text = "Quiz N°$idQuiz",
color = Color.White,
style = TextStyle(fontSize = 25.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
)
val nbQuestions = QuestionStub.allQuestions.size
Text (
text = "Nombres de Questions : $nbQuestions",
color = Color.White,
style = TextStyle(fontSize = 15.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
)
Text (
text = "Nombres de bonnes réponses : $points",
color = Color.White,
style = TextStyle(fontSize = 15.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
)
Row (
modifier = Modifier
.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceAround
) {
// Bouton Quiz Précédent
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Profil",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
// Bouton Retour Menu Quiz
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Profil",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
// Bouton Quiz Suivant
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Profil",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
}
}
}
// Bandeau inférieur
Row(
modifier = Modifier
.fillMaxWidth()
.weight(0.1f)
.background(Color(0xFF300052))
.padding(20.dp),
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically
) {
// Bouton Likes
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Bouton",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
// Bouton WhatTheFantasy
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Bouton",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
// Bouton Quiz
Image(
painter = painterResource(id = R.drawable.quiz),
contentDescription = "Bouton",
modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
)
}
}
}

@ -2,22 +2,15 @@ package com.example.what_the_fantasy.ui.screens
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
@ -25,83 +18,85 @@ import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.example.what_the_fantasy.data.local.QuestionStub
import com.example.what_the_fantasy.data.model.Question
@Composable
fun QuizPage() {
fun QuizPage(navController: NavController) {
val questions = QuestionStub.allQuestions
var idCurrentQuestion by remember { mutableIntStateOf(0) }
var pts by remember { mutableIntStateOf(0) }
val gradient = Brush.linearGradient(
colors = listOf(Color(0xFF7B1FA2), Color(0xFF311B92)), // Violet clair → Violet foncé
start = Offset(0f, 1000f), // Départ en bas à gauche
end = Offset(1000f, 0f) // Fin en haut à droite
colors = listOf(Color(0xFF7B1FA2), Color(0xFF311B92)),
start = Offset(0f, 1000f),
end = Offset(1000f, 0f)
)
val questions = QuestionStub.allQuestions
fun onAnswerSelected(answer: String) {
val currentQuestion = questions[idCurrentQuestion]
val correctAnswer = mapOf(
"A" to currentQuestion.ansA,
"B" to currentQuestion.ansB,
"C" to currentQuestion.ansC,
"D" to currentQuestion.ansD
)[currentQuestion.correctAns]
if (answer == correctAnswer) pts++
if (idCurrentQuestion < questions.size - 1) idCurrentQuestion++
else navController.popBackStack() // Retour menu
}
Box(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFF100C1B)) // Fond global de l'écran
.padding(16.dp) // Marges autour de tout le contenu
.background(Color(0xFF100C1B))
.padding(16.dp)
) {
// Numéro de la question en haut
Text(
text = "Question numéro : " + questions.first().id.toString(),
color = Color.White,
fontSize = 18.sp, // Taille réduite pour tenir sur un écran portrait
Column(
modifier = Modifier
.align(Alignment.TopCenter) // Position en haut au centre
.padding(top = 16.dp) // Un peu d'espace en haut
)
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
val question = questions[idCurrentQuestion]
// Contenu centré, mais avec une gestion plus équilibrée du placement
Column (
horizontalAlignment = Alignment.CenterHorizontally,
) {
Box(
modifier = Modifier.fillMaxWidth()
) {
IconButton(
onClick = { navController.popBackStack() },
modifier = Modifier.align(Alignment.TopStart)
) {
Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Retour", tint = Color.White)
}
}
Text("Question ${question.id}", color = Color.White, fontSize = 18.sp, modifier = Modifier.padding(top = 20.dp))
Text("Points : $pts", color = Color.White, fontSize = 18.sp, modifier = Modifier.padding(top = 40.dp))
Text(question.question, color = Color.White, fontSize = 22.sp, modifier = Modifier.padding(40.dp))
}
Column (
modifier = Modifier
.fillMaxSize()
.padding(top = 48.dp), // Réduit l'espace entre le numéro de la question et la question elle-même
verticalArrangement = Arrangement.Center, // Centre verticalement
horizontalAlignment = Alignment.CenterHorizontally // Centre horizontalement
.padding(top = 30.dp)
) {
// Question principale
Text(
text = questions.first().question,
color = Color.White,
fontSize = 22.sp, // Taille plus petite pour tenir sur un écran portrait
modifier = Modifier.padding(bottom = 16.dp) // Réduit l'espacement entre la question et les réponses
)
// Liste des réponses
val answers = listOf(
questions.first().ansA,
questions.first().ansB,
questions.first().ansC,
questions.first().ansD
)
// Pour chaque réponse, on applique une Box avec un espacement uniforme
answers.forEach { answer ->
listOf(question.ansA, question.ansB, question.ansC, question.ansD).forEach { answer ->
Box(
modifier = Modifier
.width(220.dp) // Largeur plus petite pour que ça tienne mieux
.height(50.dp) // Hauteur ajustée
.background(
brush = gradient,
shape = RoundedCornerShape(16.dp) // Coins arrondis
)
.clickable { /* Action pour la réponse */ }
.padding(horizontal = 8.dp), // Padding interne
.width(220.dp)
.height(50.dp)
.background(brush = gradient, shape = RoundedCornerShape(16.dp))
.clickable { onAnswerSelected(answer) }
.padding(horizontal = 8.dp),
contentAlignment = Alignment.Center
) {
Text(
text = answer,
color = Color.White,
fontSize = 18.sp // Taille du texte ajustée pour un écran portrait
)
Text(answer, color = Color.White, fontSize = 18.sp)
}
Spacer(modifier = Modifier.height(60.dp))
}
Spacer(modifier = Modifier.height(16.dp)) // Espacement réduit entre les réponses
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Loading…
Cancel
Save