Doing some refactoring

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/BetScreen.kt

@@ -70,7 +70,7 @@ fun BetScreen(){
                 title = "Emre va réussir son TP de CI/CD mercredi?",
                 date = "11 Sept.",
                 time = "13:00",
-                nbPlayer = 4,
+                players = List(3){ null },
                 onClickParticipate = { /* TODO */ },
                 modifier = Modifier.padding(horizontal = horizontalPadding)
             )

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/components/BetScreenCard.kt

@@ -0,0 +1,109 @@
+package fr.iut.alldev.allin.ui.bet.components
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.ripple.LocalRippleTheme
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterHorizontally
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.pluralStringResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.AllInCard
+import fr.iut.alldev.allin.ui.core.RainbowButton
+import fr.iut.alldev.allin.ui.core.bet.BetDateTimeRow
+import fr.iut.alldev.allin.ui.core.bet.BetProfilePictureRow
+import fr.iut.alldev.allin.ui.core.bet.BetTitleHeader
+import fr.iut.alldev.allin.ui.theme.AllInRippleTheme
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun BetScreenCard(
+    creator: String,
+    category: String,
+    title: String,
+    date: String,
+    time: String,
+    players: List<Painter?>,
+    modifier: Modifier = Modifier,
+    onClickParticipate: ()->Unit
+) {
+    AllInCard(
+        modifier = modifier,
+        radius = 16.dp
+    ){
+        Column(
+            Modifier.padding(horizontal = 19.dp, vertical = 11.dp)
+        ) {
+            BetTitleHeader(
+                title = title,
+                category = category,
+                creator = creator,
+                modifier = Modifier.fillMaxWidth()
+            )
+            Spacer(modifier = Modifier.height(11.dp))
+            BetDateTimeRow(label = stringResource(id = R.string.Starting), date = date, time = time)
+        }
+        HorizontalDivider(
+            thickness = 1.dp,
+            color = AllInTheme.themeColors.border
+        )
+        Column(
+            Modifier
+                .background(AllInTheme.themeColors.background_2)
+        ) {
+            Row(
+                modifier = Modifier
+                    .align(CenterHorizontally)
+                    .padding(7.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ){
+                BetProfilePictureRow(pictures = players)
+                Spacer(modifier = Modifier.width(12.dp))
+                Text(
+                    text = pluralStringResource(
+                        id = R.plurals.n_players_waiting,
+                        players.size,
+                        players.size
+                    ),
+                    style = AllInTheme.typography.m,
+                    color = AllInTheme.themeColors.on_background_2
+                )
+            }
+            CompositionLocalProvider(
+                LocalRippleTheme provides AllInRippleTheme,
+            ){
+                RainbowButton(
+                    modifier = Modifier.padding(6.dp),
+                    text = stringResource(id = R.string.Participate),
+                    onClick = onClickParticipate
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun BetScreenCardPreview() {
+    AllInTheme {
+        BetScreenCard(
+            creator = "Lucas",
+            category = "Études",
+            title = "Emre va réussir son TP de CI/CD mercredi?",
+            date = "12 Sept.",
+            time = "13:00",
+            players = List(3){ null },
+            onClickParticipate = {}
+        )
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/components/betScreenCard.kt

@@ -1,165 +0,0 @@
-package fr.iut.alldev.allin.ui.bet.components
-
-import android.content.res.Configuration
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.ripple.LocalRippleTheme
-import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Alignment.Companion.CenterEnd
-import androidx.compose.ui.Alignment.Companion.CenterHorizontally
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.pluralStringResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.zIndex
-import fr.iut.alldev.allin.R
-import fr.iut.alldev.allin.ui.core.AllInCard
-import fr.iut.alldev.allin.ui.core.HighlightedText
-import fr.iut.alldev.allin.ui.core.ProfilePicture
-import fr.iut.alldev.allin.ui.core.RainbowButton
-import fr.iut.alldev.allin.ui.theme.AllInRippleTheme
-import fr.iut.alldev.allin.ui.theme.AllInTheme
-
-@Composable
-fun BetScreenCard(
-    creator: String,
-    category: String,
-    title: String,
-    date: String,
-    time: String,
-    nbPlayer: Int,
-    modifier: Modifier = Modifier,
-    onClickParticipate: ()->Unit
-) {
-    AllInCard(
-        modifier = modifier,
-        radius = 16.dp
-    ){
-        Column(Modifier.fillMaxWidth()) {
-            Row(
-                Modifier
-                    .align(Alignment.End)
-                    .padding(top = 12.dp, end = 10.dp)) {
-                HighlightedText(
-                    text = stringResource(id = R.string.Proposed_by_x, creator),
-                    query = creator,
-                    highlightStyle = SpanStyle(
-                        fontWeight = FontWeight.Bold,
-                        color = AllInTheme.themeColors.on_main_surface
-                    ),
-                    fontSize = 12.sp,
-                    style = AllInTheme.typography.s,
-                    color = AllInTheme.themeColors.on_background_2
-                )
-            }
-            Column(Modifier.padding(horizontal = 19.dp, vertical = 11.dp)) {
-                Text(
-                    text = category,
-                    fontSize = 15.sp,
-                    color = AllInTheme.themeColors.on_background_2,
-                    style = AllInTheme.typography.m
-                )
-                Text(
-                    text = title,
-                    fontSize = 20.sp,
-                    color = AllInTheme.themeColors.on_main_surface,
-                    style = AllInTheme.typography.h1
-                )
-                Spacer(modifier = Modifier.height(11.dp))
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                ) {
-                    Text(
-                        text = stringResource(id = R.string.Starting),
-                        fontSize = 15.sp,
-                        style = AllInTheme.typography.m,
-                        color = AllInTheme.themeColors.on_background_2
-                    )
-                    DateTimeChip(
-                        text = date,
-                        modifier = Modifier.padding(horizontal = 8.dp)
-                    )
-                    DateTimeChip(time)
-                }
-            }
-            HorizontalDivider(
-                thickness = 1.dp,
-                color = AllInTheme.themeColors.border
-            )
-            Column(
-                Modifier
-                    .background(AllInTheme.themeColors.background_2)
-            ) {
-                Row(
-                    modifier = Modifier
-                        .align(CenterHorizontally)
-                        .padding(7.dp),
-                    verticalAlignment = Alignment.CenterVertically
-                ){
-                    val nRepeat = remember{
-                        if (nbPlayer > 5) 5 else nbPlayer
-                    }
-
-                    Box(
-                        Modifier.width((nRepeat*17).dp)
-                    ){
-                        repeat(nRepeat) {
-                            ProfilePicture(
-                                size = 35.dp,
-                                modifier = Modifier
-                                    .align(CenterEnd)
-                                    .offset(x = (it * -17).dp)
-                                    .zIndex(-it.toFloat())
-                            )
-                        }
-                    }
-                    Spacer(modifier = Modifier.width(12.dp))
-                    Text(
-                        text = pluralStringResource(
-                            id = R.plurals.n_players_waiting,
-                            nbPlayer,
-                            nbPlayer
-                        ),
-                        style = AllInTheme.typography.m,
-                        color = AllInTheme.themeColors.on_background_2
-                    )
-                }
-                CompositionLocalProvider(
-                    LocalRippleTheme provides AllInRippleTheme,
-                ){
-                    RainbowButton(
-                        modifier = Modifier.padding(6.dp),
-                        text = stringResource(id = R.string.Participate),
-                        onClick = onClickParticipate
-                    )
-                }
-            }
-        }
-    }
-}
-
-@Preview
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun BetScreenCardPreview() {
-    AllInTheme {
-        BetScreenCard(
-            creator = "Lucas",
-            category = "Études",
-            title = "Emre va réussir son TP de CI/CD mercredi?",
-            date = "12 Sept.",
-            time = "13:00",
-            nbPlayer = 4,
-            onClickParticipate = {}
-        )
-    }
-}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/ProfilePicture.kt

@@ -14,10 +14,13 @@ import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import fr.iut.alldev.allin.R
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 @Composable
@@ -27,9 +30,10 @@ fun ProfilePicture(
     size: Dp = 80.dp,
     modifier: Modifier = Modifier
 ) {
+    val shape = RoundedCornerShape(100)
     Card(
         modifier = modifier.size(size),
-        shape = RoundedCornerShape(100),
+        shape = shape,
         colors = CardDefaults.cardColors(containerColor = AllInTheme.colors.allIn_DarkGrey100),
         border = borderWidth?.let{BorderStroke(it, AllInTheme.colors.allIn_DarkGrey50)}
     ) {
@@ -38,14 +42,20 @@ fun ProfilePicture(
                 Image(
                     painter = it,
                     contentDescription = null,
-                    modifier = Modifier.align(Alignment.Center).fillMaxSize()
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .fillMaxSize()
+                        .clip(shape)
                 )
             } ?: run{
                 Icon(
                     imageVector = Icons.Default.PhotoCamera,
                     tint = AllInTheme.colors.white,
                     contentDescription = null,
-                    modifier = Modifier.align(Alignment.Center).fillMaxSize(0.5f)
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .fillMaxSize(0.5f)
+                        .clip(shape)
                 )
             }
         }
@@ -59,4 +69,14 @@ private fun ProfilePictureDefaultPreview() {
     AllInTheme {
         ProfilePicture()
     }
+}
+
+@Preview
+@Composable
+private fun ProfilePicturePreview() {
+    AllInTheme {
+        ProfilePicture(
+            painterResource(id = R.drawable.money_with_wings)
+        )
+    }
 }

src/app/src/main/java/fr/iut/alldev/allin/ui/core/bet/BetDateTimeChip.kt

@@ -1,4 +1,4 @@
-package fr.iut.alldev.allin.ui.bet.components
+package fr.iut.alldev.allin.ui.core.bet
 
 import android.content.res.Configuration
 import androidx.compose.foundation.BorderStroke
@@ -16,7 +16,7 @@ import androidx.compose.ui.unit.dp
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 @Composable
-fun DateTimeChip(
+fun BetDateTimeChip(
     text: String,
     modifier: Modifier = Modifier
 ) {
@@ -39,8 +39,8 @@ fun DateTimeChip(
 @Preview
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
-private fun HomeBetCardDateTimeChipPreview() {
+private fun BetDateTimeChipPreview() {
     AllInTheme {
-        DateTimeChip("11 Sept.")
+        BetDateTimeChip("11 Sept.")
     }
 }

src/app/src/main/java/fr/iut/alldev/allin/ui/core/bet/BetDateTimeRow.kt

@@ -0,0 +1,45 @@
+package fr.iut.alldev.allin.ui.core.bet
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun BetDateTimeRow(
+    label: String,
+    date: String,
+    time: String,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = modifier
+    ) {
+        Text(
+            text = label,
+            fontSize = 15.sp,
+            style = AllInTheme.typography.m,
+            color = AllInTheme.themeColors.on_background_2
+        )
+        BetDateTimeChip(date)
+        BetDateTimeChip(time)
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun BetDateTimeRowPreview() {
+    AllInTheme{
+        BetDateTimeRow(label = "Commence le", date = "11 Sept.", time = "13:00")
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/bet/BetProfilePictureRow.kt

@@ -0,0 +1,69 @@
+package fr.iut.alldev.allin.ui.core.bet
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.ProfilePicture
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun BetProfilePictureRow(
+    pictures: List<Painter?>,
+    maxLength: Int = 5,
+    modifier: Modifier = Modifier
+) {
+    val nRepeat = remember{
+        if (pictures.size > maxLength) maxLength else pictures.size
+    }
+
+    Box(
+        modifier.width((nRepeat*17).dp)
+    ){
+        pictures.forEachIndexed { index, painter ->
+            ProfilePicture(
+                image = painter,
+                size = 35.dp,
+                modifier = Modifier
+                    .align(Alignment.CenterEnd)
+                    .offset(x = (index * -17).dp)
+                    .zIndex(-index.toFloat())
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun BetProfilePictureRowPreview() {
+    AllInTheme {
+        BetProfilePictureRow(pictures = listOf(
+            painterResource(id = R.drawable.money_with_wings),
+            null,
+            painterResource(id = R.drawable.money_with_wings)
+        ))
+    }
+}
+@Preview
+@Composable
+private fun BetProfilePictureRowMaxPreview() {
+    AllInTheme {
+        BetProfilePictureRow(pictures = listOf(
+            painterResource(id = R.drawable.money_with_wings),
+            null,
+            painterResource(id = R.drawable.money_with_wings),
+            null,
+            painterResource(id = R.drawable.money_with_wings),
+            null
+        ))
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/bet/BetTitleHeader.kt

@@ -0,0 +1,65 @@
+package fr.iut.alldev.allin.ui.core.bet
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.HighlightedText
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun BetTitleHeader(
+    title: String,
+    category: String,
+    creator: String,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier) {
+        Row(
+            Modifier.align(Alignment.End)
+        ) {
+            HighlightedText(
+                text = stringResource(id = R.string.Proposed_by_x, creator),
+                query = creator,
+                highlightStyle = SpanStyle(
+                    fontWeight = FontWeight.Bold,
+                    color = AllInTheme.themeColors.on_main_surface
+                ),
+                fontSize = 12.sp,
+                style = AllInTheme.typography.s,
+                color = AllInTheme.themeColors.on_background_2
+            )
+        }
+        Spacer(modifier = Modifier.height(11.dp))
+        Text(
+            text = category,
+            fontSize = 15.sp,
+            color = AllInTheme.themeColors.on_background_2,
+            style = AllInTheme.typography.m
+        )
+        Text(
+            text = title,
+            fontSize = 20.sp,
+            color = AllInTheme.themeColors.on_main_surface,
+            style = AllInTheme.typography.h1
+        )
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun BetTitleHeaderPreview() {
+    AllInTheme {
+        BetTitleHeader(title = "Emre va réussir son TP de CI/CD mercredi?", category = "Études", creator = "Lucas")
+    }
+}