UI QuizPage + Add Icons

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/MainActivity.kt

@@ -13,7 +13,6 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             What_The_FantasyTheme {
-
                AppNavigator()
             }
         }

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/navigations/AppNavigator.kt

@@ -58,13 +58,18 @@ fun AppNavigator() {
             QuizPage(
                 navControllerQuizEnd = { idQuiz, pts ->
                     navController.navigate(Destination.QuizEnd.createIdAndPts(idQuiz, pts))
-                }
+                },
+                navControllerQuizMenu = { navController.navigate(Destination.QuizMenu.route) }
             )
         }
         composable(Destination.QuizEnd.route) { backStackEntry ->
             val idQuiz = backStackEntry.arguments?.getString("idQuiz")?.toInt() ?: 0
             val pts = backStackEntry.arguments?.getString("pts")?.toInt() ?: 0
-            QuizEndPage(idQuiz, pts)
+            QuizEndPage(
+                idQuiz,
+                pts,
+                navControllerQuizMenu = { navController.navigate(Destination.QuizMenu.route) }
+            )
         }
         composable(Destination.Quote.route) { QuotePage() }
         composable(Destination.Search.route) { SearchPage() }

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/QuizEndPage.kt

@@ -2,6 +2,7 @@ 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.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -31,10 +32,8 @@ val gradient = Brush.linearGradient(
     end = Offset(1000f, 0f)
 )
 
-
-
 @Composable
-fun QuizEndPage(idQuiz: Int, points: Int) {
+fun QuizEndPage(idQuiz: Int, points: Int, navControllerQuizMenu: () -> Unit) {
     Column(
         modifier = Modifier.fillMaxSize().background(Color(0xFF100C1B))
     ) {
@@ -48,9 +47,6 @@ fun QuizEndPage(idQuiz: Int, points: Int) {
             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",
@@ -58,8 +54,7 @@ fun QuizEndPage(idQuiz: Int, points: Int) {
             )
             Image(
                 painter = painterResource(id = R.drawable.quiz),
-                contentDescription = "Profil",
+                contentDescription = "Profil"
-                modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
             )
         }
 
@@ -122,8 +117,7 @@ fun QuizEndPage(idQuiz: Int, points: Int) {
                     // Bouton Quiz Suivant
                     Image(
                         painter = painterResource(id = R.drawable.quiz),
-                        contentDescription = "Profil",
+                        contentDescription = "Profil"
-                        modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
                     )
                 }
 
@@ -148,9 +142,9 @@ fun QuizEndPage(idQuiz: Int, points: Int) {
             )
             // Bouton WhatTheFantasy
             Image(
-                    painter = painterResource(id = R.drawable.quiz),
+                painter = painterResource(R.drawable.wf_logo),
-            contentDescription = "Bouton",
+                contentDescription = "Menu Button",
-            modifier = Modifier.size(50.dp).background(Color.Yellow, CircleShape)
+                Modifier.clickable { navControllerQuizMenu() }
             )
             // Bouton Quiz
             Image(

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/QuizPage.kt

@@ -1,8 +1,10 @@
 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.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.*
@@ -11,12 +13,20 @@ 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
 
 @Composable
-fun QuizPage(navControllerQuizEnd: (Int, Int) -> Unit) {
+fun QuizPage(
+    navControllerQuizEnd: (Int, Int) -> Unit,
+    navControllerQuizMenu: () -> Unit
+    ) {
     val questions = QuestionStub.allQuestions
     var idCurrentQuestion by remember { mutableIntStateOf(0) }
     var pts by remember { mutableIntStateOf(0) }
@@ -41,56 +51,123 @@ fun QuizPage(navControllerQuizEnd: (Int, Int) -> Unit) {
         else navControllerQuizEnd(0, pts) // Retour menu
     }
 
-    Box(
+    Column (
-        modifier = Modifier
+        modifier = Modifier.fillMaxSize().background(Color(0xFF100C1B))
-            .fillMaxSize()
-            .background(Color(0xFF100C1B))
-            .padding(16.dp)
     ) {
+        // Bandeau supérieur
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(0.1f)
+                //.background(Color(0xFF300052))
+                .padding(20.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.profile_icon),
+                contentDescription = "Profil"
+            )
+            Image(
+                painter = painterResource(id = R.drawable.toggle),
+                contentDescription = "Profil"
+            )
+        }
+
+        // Contenu princiapl
         Column(
             modifier = Modifier
-                .fillMaxSize(),
+                .weight(0.8f)
+                .fillMaxWidth()
+                .padding(horizontal = 50.dp, vertical = 20.dp),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             val question = questions[idCurrentQuestion]
 
-            Column (
+            Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
             ) {
-                Box(
+                Text(
-                    modifier = Modifier.fillMaxWidth()
+                    text = "▶ Quiz ◀",
+                    color = Color.White,
+                    style = TextStyle(fontSize = 25.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center)
+                )
+                Column (
+                    modifier = Modifier
+                        .background(brush = gradient, shape = RoundedCornerShape(20.dp)),
+                    horizontalAlignment = Alignment.CenterHorizontally
                 ) {
-                    /*IconButton(
+                    Text(
-                        onClick = { navController.popBackStack() },
+                        "Question ${question.id}",
-                        modifier = Modifier.align(Alignment.TopStart)
+                        color = Color.White,
-                    ) {
+                        fontSize = 18.sp,
-                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Retour", tint = Color.White)
+                        modifier = Modifier.padding(top = 20.dp),
-                    }*/
+                        style = TextStyle(
-                }
+                            fontSize = 25.sp,
-                Text("Question ${question.id}", color = Color.White, fontSize = 18.sp, modifier = Modifier.padding(top = 20.dp))
+                            fontWeight = FontWeight.Bold,
-                Text("Points : $pts", color = Color.White, fontSize = 18.sp, modifier = Modifier.padding(top = 40.dp))
+                            textAlign = TextAlign.Center
-                Text(question.question, color = Color.White, fontSize = 22.sp, modifier = Modifier.padding(40.dp))
+                        )
-            }
+                    )
-            Column (
+                    Text(
-                modifier = Modifier
+                        question.question,
-                    .padding(top = 30.dp)
+                        color = Color.White,
-            ) {
+                        fontSize = 22.sp,
-                listOf(question.ansA, question.ansB, question.ansC, question.ansD).forEach { answer ->
+                        modifier = Modifier.padding(40.dp)
-                    Box(
+                    )
+                    Column(
                         modifier = Modifier
-                            .width(220.dp)
+                            .padding(top = 30.dp)
-                            .height(50.dp)
-                            .background(brush = gradient, shape = RoundedCornerShape(16.dp))
-                            .clickable { onAnswerSelected(answer) }
-                            .padding(horizontal = 8.dp),
-                        contentAlignment = Alignment.Center
                     ) {
-                        Text(answer, color = Color.White, fontSize = 18.sp)
+                        listOf(
+                            question.ansA,
+                            question.ansB,
+                            question.ansC,
+                            question.ansD
+                        ).forEach { answer ->
+                            Box(
+                                modifier = Modifier
+                                    .width(220.dp)
+                                    .height(50.dp)
+                                    .background(Color.White, shape = RoundedCornerShape(16.dp))
+                                    .clickable { onAnswerSelected(answer) }
+                                    .padding(horizontal = 8.dp),
+                                contentAlignment = Alignment.Center
+                            ) {
+                                Text(answer, color = Color.Black, fontSize = 18.sp)
+                            }
+                            Spacer(modifier = Modifier.height(60.dp))
+                        }
                     }
-                    Spacer(modifier = Modifier.height(60.dp))
                 }
             }
+        }
 
+        // 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.like_icon),
+                contentDescription = "Bouton"
+            )
+            // Bouton WhatTheFantasy
+            Image(
+                painter = painterResource(R.drawable.wf_logo),
+                contentDescription = "Menu Button",
+                Modifier.clickable { navControllerQuizMenu() }
+            )
+            // Bouton Quiz
+            Image(
+                painter = painterResource(id = R.drawable.quiz_icon),
+                contentDescription = "Bouton"
+            )
         }
     }
 }