Add bet confirmation screen
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
8c073bdec0
commit
58d788f58f
@ -1,49 +1,48 @@
|
||||
package fr.iut.alldev.allin.test.mock
|
||||
|
||||
import fr.iut.alldev.allin.data.model.bet.BetStatus
|
||||
import fr.iut.alldev.allin.data.model.bet.CustomBet
|
||||
import fr.iut.alldev.allin.data.model.bet.MatchBet
|
||||
import fr.iut.alldev.allin.data.model.bet.YesNoBet
|
||||
import java.time.ZonedDateTime
|
||||
import fr.iut.alldev.allin.data.model.bet.vo.BetDetail
|
||||
|
||||
object Bets {
|
||||
val bets by lazy {
|
||||
listOf(
|
||||
YesNoBet(
|
||||
theme = "Theme",
|
||||
phrase = "Phrase",
|
||||
endRegisterDate = ZonedDateTime.now(),
|
||||
endBetDate = ZonedDateTime.now(),
|
||||
isPublic = true,
|
||||
betStatus = BetStatus.InProgress,
|
||||
creator = "creator",
|
||||
),
|
||||
MatchBet(
|
||||
theme = "Theme",
|
||||
phrase = "Phrase",
|
||||
endRegisterDate = ZonedDateTime.now(),
|
||||
endBetDate = ZonedDateTime.now(),
|
||||
isPublic = true,
|
||||
betStatus = BetStatus.InProgress,
|
||||
nameTeam1 = "Team_1",
|
||||
nameTeam2 = "Team_2",
|
||||
creator = "creator"
|
||||
),
|
||||
CustomBet(
|
||||
theme = "Theme",
|
||||
phrase = "Phrase",
|
||||
endRegisterDate = ZonedDateTime.now(),
|
||||
endBetDate = ZonedDateTime.now(),
|
||||
isPublic = true,
|
||||
betStatus = BetStatus.InProgress,
|
||||
creator = "creator",
|
||||
possibleAnswers = listOf(
|
||||
"Answer 1",
|
||||
"Answer 2",
|
||||
"Answer 3",
|
||||
"Answer 4"
|
||||
)
|
||||
),
|
||||
listOf<BetDetail>(
|
||||
/* YesNoBet(
|
||||
theme = "Theme",
|
||||
phrase = "Phrase",
|
||||
endRegisterDate = ZonedDateTime.now(),
|
||||
endBetDate = ZonedDateTime.now(),
|
||||
isPublic = true,
|
||||
betStatus = BetStatus.InProgress,
|
||||
creator = "creator",
|
||||
id = ""
|
||||
),
|
||||
MatchBet(
|
||||
theme = "Theme",
|
||||
phrase = "Phrase",
|
||||
endRegisterDate = ZonedDateTime.now(),
|
||||
endBetDate = ZonedDateTime.now(),
|
||||
isPublic = true,
|
||||
betStatus = BetStatus.InProgress,
|
||||
nameTeam1 = "Team_1",
|
||||
nameTeam2 = "Team_2",
|
||||
creator = "creator",
|
||||
id = ""
|
||||
),
|
||||
CustomBet(
|
||||
theme = "Theme",
|
||||
phrase = "Phrase",
|
||||
endRegisterDate = ZonedDateTime.now(),
|
||||
endBetDate = ZonedDateTime.now(),
|
||||
isPublic = true,
|
||||
betStatus = BetStatus.InProgress,
|
||||
creator = "creator",
|
||||
possibleAnswers = listOf(
|
||||
"Answer 1",
|
||||
"Answer 2",
|
||||
"Answer 3",
|
||||
"Answer 4"
|
||||
),
|
||||
id = ""
|
||||
)*/
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,388 @@
|
||||
package fr.iut.alldev.allin.ui.betConfirmation
|
||||
|
||||
import androidx.compose.animation.core.animateFloatAsState
|
||||
import androidx.compose.foundation.background
|
||||
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.size
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Close
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.SheetState
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.alpha
|
||||
import androidx.compose.ui.draw.scale
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.res.stringResource
|
||||
import androidx.compose.ui.text.style.TextAlign
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
import androidx.core.os.ConfigurationCompat
|
||||
import fr.iut.alldev.allin.R
|
||||
import fr.iut.alldev.allin.data.ext.formatToMediumDateNoYear
|
||||
import fr.iut.alldev.allin.data.ext.formatToTime
|
||||
import fr.iut.alldev.allin.data.model.bet.BetFinishedStatus
|
||||
import fr.iut.alldev.allin.data.model.bet.BetStatus
|
||||
import fr.iut.alldev.allin.data.model.bet.CustomBet
|
||||
import fr.iut.alldev.allin.data.model.bet.MatchBet
|
||||
import fr.iut.alldev.allin.data.model.bet.NO_VALUE
|
||||
import fr.iut.alldev.allin.data.model.bet.YES_VALUE
|
||||
import fr.iut.alldev.allin.data.model.bet.YesNoBet
|
||||
import fr.iut.alldev.allin.data.model.bet.vo.BetAnswerDetail
|
||||
import fr.iut.alldev.allin.data.model.bet.vo.BetDetail
|
||||
import fr.iut.alldev.allin.ext.formatToSimple
|
||||
import fr.iut.alldev.allin.theme.AllInTheme
|
||||
import fr.iut.alldev.allin.ui.core.AllInBottomSheet
|
||||
import fr.iut.alldev.allin.ui.core.AllInButton
|
||||
import fr.iut.alldev.allin.ui.core.AllInCard
|
||||
import fr.iut.alldev.allin.ui.core.AllInMarqueeBox
|
||||
import fr.iut.alldev.allin.ui.core.bet.BetCard
|
||||
import java.time.ZonedDateTime
|
||||
import java.util.Locale
|
||||
|
||||
@Composable
|
||||
fun BetConfirmationBottomSheet(
|
||||
state: SheetState,
|
||||
sheetVisibility: Boolean,
|
||||
betDetail: BetDetail,
|
||||
onDismiss: () -> Unit,
|
||||
onConfirm: (selectedAnswer: String) -> Unit
|
||||
) {
|
||||
AllInBottomSheet(
|
||||
sheetVisibility = sheetVisibility,
|
||||
onDismiss = onDismiss,
|
||||
state = state,
|
||||
dragHandle = null
|
||||
) {
|
||||
BetConfirmationBottomSheetContent(
|
||||
betDetail = betDetail,
|
||||
onConfirm = {
|
||||
onConfirm(it)
|
||||
onDismiss()
|
||||
},
|
||||
onClose = onDismiss
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun BetConfirmationBottomSheetAnswer(
|
||||
text: String,
|
||||
odds: Float,
|
||||
modifier: Modifier = Modifier,
|
||||
color: Color = AllInTheme.colors.allInBlue,
|
||||
isSelected: Boolean,
|
||||
locale: Locale,
|
||||
onClick: () -> Unit
|
||||
) {
|
||||
val backColor = if (isSelected) AllInTheme.colors.allInPurple else AllInTheme.colors.white
|
||||
val contentColor = if (isSelected) AllInTheme.colors.white else null
|
||||
|
||||
AllInCard(
|
||||
backgroundColor = backColor,
|
||||
onClick = onClick,
|
||||
modifier = modifier
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 12.dp, vertical = 18.dp),
|
||||
) {
|
||||
Text(
|
||||
text = text.uppercase(),
|
||||
color = contentColor ?: color,
|
||||
style = AllInTheme.typography.h1,
|
||||
fontSize = 40.sp,
|
||||
modifier = Modifier.align(Alignment.Center)
|
||||
)
|
||||
|
||||
AllInCard(
|
||||
radius = 50.dp,
|
||||
backgroundColor = contentColor ?: AllInTheme.colors.allInPurple,
|
||||
modifier = Modifier.align(Alignment.CenterEnd)
|
||||
) {
|
||||
Box(Modifier.padding(vertical = 4.dp, horizontal = 8.dp)) {
|
||||
Text(
|
||||
text = "x${odds.formatToSimple(locale)}",
|
||||
color = backColor,
|
||||
style = AllInTheme.typography.h2
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun ConfirmationAnswers(
|
||||
betDetail: BetDetail,
|
||||
selectedAnswer: String?,
|
||||
onClick: (String) -> Unit
|
||||
) {
|
||||
val configuration = LocalConfiguration.current
|
||||
val locale = remember { ConfigurationCompat.getLocales(configuration).get(0) ?: Locale.getDefault() }
|
||||
|
||||
LazyColumn(
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
when (betDetail.bet) {
|
||||
is CustomBet -> items((betDetail.bet as CustomBet).possibleAnswers) {
|
||||
betDetail.getAnswerOfResponse(it)?.let {
|
||||
val opacity by animateFloatAsState(targetValue = if (selectedAnswer != null && selectedAnswer != it.response) .5f else 1f, label = "")
|
||||
|
||||
|
||||
BetConfirmationBottomSheetAnswer(
|
||||
text = it.response,
|
||||
odds = it.odds,
|
||||
locale = locale,
|
||||
onClick = { onClick(it.response) },
|
||||
isSelected = selectedAnswer == it.response,
|
||||
modifier = Modifier.alpha(opacity)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
is MatchBet -> {
|
||||
val bet = (betDetail.bet as MatchBet)
|
||||
item {
|
||||
betDetail.getAnswerOfResponse(bet.nameTeam1)?.let {
|
||||
val opacity by animateFloatAsState(targetValue = if (selectedAnswer != null && selectedAnswer != it.response) .5f else 1f, label = "")
|
||||
BetConfirmationBottomSheetAnswer(
|
||||
text = it.response,
|
||||
odds = it.odds,
|
||||
locale = locale,
|
||||
onClick = { onClick(it.response) },
|
||||
isSelected = selectedAnswer == it.response,
|
||||
modifier = Modifier.alpha(opacity)
|
||||
)
|
||||
}
|
||||
}
|
||||
item {
|
||||
betDetail.getAnswerOfResponse(bet.nameTeam2)?.let {
|
||||
val opacity by animateFloatAsState(targetValue = if (selectedAnswer != null && selectedAnswer != it.response) .5f else 1f, label = "")
|
||||
|
||||
BetConfirmationBottomSheetAnswer(
|
||||
text = it.response,
|
||||
color = AllInTheme.colors.allInBarPink,
|
||||
odds = it.odds,
|
||||
locale = locale,
|
||||
onClick = { onClick(it.response) },
|
||||
isSelected = selectedAnswer == it.response,
|
||||
modifier = Modifier
|
||||
.alpha(opacity)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
is YesNoBet -> {
|
||||
item {
|
||||
betDetail.getAnswerOfResponse(YES_VALUE)?.let {
|
||||
val opacity by animateFloatAsState(targetValue = if (selectedAnswer != null && selectedAnswer != it.response) .5f else 1f, label = "")
|
||||
val scale by animateFloatAsState(
|
||||
targetValue = if (selectedAnswer == null) 1f
|
||||
else if (selectedAnswer != it.response) .95f else 1.05f,
|
||||
label = ""
|
||||
)
|
||||
|
||||
BetConfirmationBottomSheetAnswer(
|
||||
text = it.response,
|
||||
odds = it.odds,
|
||||
locale = locale,
|
||||
onClick = { onClick(it.response) },
|
||||
isSelected = selectedAnswer == it.response,
|
||||
modifier = Modifier
|
||||
.alpha(opacity)
|
||||
.scale(scale)
|
||||
)
|
||||
}
|
||||
}
|
||||
item {
|
||||
betDetail.getAnswerOfResponse(NO_VALUE)?.let {
|
||||
val opacity by animateFloatAsState(targetValue = if (selectedAnswer != null && selectedAnswer != it.response) .5f else 1f, label = "")
|
||||
val scale by animateFloatAsState(
|
||||
targetValue = if (selectedAnswer == null) 1f
|
||||
else if (selectedAnswer != it.response) .95f else 1.05f,
|
||||
label = ""
|
||||
)
|
||||
|
||||
BetConfirmationBottomSheetAnswer(
|
||||
text = it.response,
|
||||
color = AllInTheme.colors.allInBarPink,
|
||||
odds = it.odds,
|
||||
locale = locale,
|
||||
onClick = { onClick(it.response) },
|
||||
isSelected = selectedAnswer == it.response,
|
||||
modifier = Modifier
|
||||
.alpha(opacity)
|
||||
.scale(scale)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun BetConfirmationBottomSheetContent(
|
||||
betDetail: BetDetail,
|
||||
onConfirm: (String) -> Unit,
|
||||
onClose: () -> Unit
|
||||
) {
|
||||
var selectedAnswer by remember { mutableStateOf<String?>(null) }
|
||||
|
||||
AllInMarqueeBox(backgroundColor = AllInTheme.colors.allInDarkGrey300) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(16.dp)
|
||||
) {
|
||||
IconButton(
|
||||
onClick = onClose,
|
||||
modifier = Modifier
|
||||
.size(24.dp)
|
||||
.align(Alignment.TopStart)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Icons.Default.Close,
|
||||
tint = AllInTheme.colors.white,
|
||||
contentDescription = null,
|
||||
modifier = Modifier.size(24.dp)
|
||||
)
|
||||
}
|
||||
|
||||
Icon(
|
||||
painter = painterResource(R.drawable.allin),
|
||||
contentDescription = null,
|
||||
tint = AllInTheme.colors.white,
|
||||
modifier = Modifier
|
||||
.size(40.dp)
|
||||
.align(Alignment.TopCenter)
|
||||
)
|
||||
|
||||
Column(
|
||||
modifier = Modifier.align(Alignment.Center),
|
||||
verticalArrangement = Arrangement.spacedBy(22.dp),
|
||||
horizontalAlignment = Alignment.CenterHorizontally
|
||||
) {
|
||||
BetCard(
|
||||
title = betDetail.bet.phrase,
|
||||
creator = betDetail.bet.creator,
|
||||
category = betDetail.bet.theme,
|
||||
date = betDetail.bet.endBetDate.formatToMediumDateNoYear(),
|
||||
time = betDetail.bet.endBetDate.formatToTime(),
|
||||
status = betDetail.bet.betStatus
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.background(AllInTheme.colors.allInMainGradient)
|
||||
.padding(16.dp),
|
||||
horizontalArrangement = Arrangement.Center,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text(
|
||||
text = stringResource(id = R.string.Finished),
|
||||
color = AllInTheme.colors.white,
|
||||
style = AllInTheme.typography.h1,
|
||||
fontSize = 24.sp
|
||||
)
|
||||
}
|
||||
}
|
||||
Text(
|
||||
text = "Ce bet est arrivé à la date de fin. Vous devez à présent distribuer les gains en validant le pari gagnant.",
|
||||
color = AllInTheme.colors.allInLightGrey200,
|
||||
style = AllInTheme.typography.p2,
|
||||
textAlign = TextAlign.Center
|
||||
)
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
Text(
|
||||
text = "Veuillez choisir la réponse finale :",
|
||||
fontSize = 20.sp,
|
||||
color = AllInTheme.colors.white,
|
||||
style = AllInTheme.typography.h1,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
)
|
||||
ConfirmationAnswers(
|
||||
betDetail = betDetail,
|
||||
selectedAnswer = selectedAnswer
|
||||
) { selectedAnswer = if (selectedAnswer == it) null else it }
|
||||
}
|
||||
if (selectedAnswer != null) {
|
||||
AllInButton(
|
||||
color = AllInTheme.colors.allInPurple,
|
||||
text = stringResource(id = R.string.Validate),
|
||||
textColor = AllInTheme.colors.white,
|
||||
radius = 5.dp,
|
||||
onClick = { selectedAnswer?.let(onConfirm) },
|
||||
modifier = Modifier.align(Alignment.BottomCenter)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun BetConfirmationBottomSheetContentPreview() {
|
||||
AllInTheme {
|
||||
BetConfirmationBottomSheetContent(
|
||||
betDetail = BetDetail(
|
||||
bet = YesNoBet(
|
||||
id = "1",
|
||||
theme = "Theme",
|
||||
phrase = "Phrase",
|
||||
endRegisterDate = ZonedDateTime.now(),
|
||||
endBetDate = ZonedDateTime.now(),
|
||||
isPublic = true,
|
||||
betStatus = BetStatus.Finished(BetFinishedStatus.WON),
|
||||
creator = "creator",
|
||||
),
|
||||
answers = listOf(
|
||||
BetAnswerDetail(
|
||||
response = YES_VALUE,
|
||||
totalStakes = 300,
|
||||
totalParticipants = 2,
|
||||
highestStake = 200,
|
||||
odds = 1.0f
|
||||
),
|
||||
BetAnswerDetail(
|
||||
response = NO_VALUE,
|
||||
totalStakes = 150,
|
||||
totalParticipants = 1,
|
||||
highestStake = 150,
|
||||
odds = 2.0f
|
||||
)
|
||||
),
|
||||
participations = emptyList(),
|
||||
userParticipation = null
|
||||
),
|
||||
onConfirm = { }
|
||||
) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
package fr.iut.alldev.allin.ui.core
|
||||
|
||||
import androidx.compose.foundation.MarqueeSpacing
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.basicMarquee
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.BoxScope
|
||||
import androidx.compose.foundation.layout.aspectRatio
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.rotate
|
||||
import androidx.compose.ui.draw.scale
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import fr.iut.alldev.allin.R
|
||||
import fr.iut.alldev.allin.theme.AllInTheme
|
||||
|
||||
@Composable
|
||||
fun AllInMarqueeBox(
|
||||
backgroundColor: Color = AllInTheme.themeColors.mainSurface,
|
||||
backgroundBrush: Brush? = null,
|
||||
content: @Composable BoxScope.() -> Unit
|
||||
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize().let { itModifier ->
|
||||
backgroundBrush?.let {
|
||||
itModifier.background(it)
|
||||
} ?: itModifier.background(backgroundColor)
|
||||
}
|
||||
) {
|
||||
Icon(
|
||||
painter = painterResource(id = R.drawable.allin_marquee),
|
||||
contentDescription = null,
|
||||
modifier = Modifier
|
||||
.fillMaxHeight()
|
||||
.aspectRatio(1f, true)
|
||||
.scale(1.2f)
|
||||
.rotate(11f)
|
||||
.basicMarquee(spacing = MarqueeSpacing(0.dp)),
|
||||
tint = AllInTheme.colors.white.copy(alpha = .05f)
|
||||
)
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Preview(widthDp = 800, heightDp = 1280)
|
||||
@Composable
|
||||
private fun AllInMarqueeBoxPreview() {
|
||||
AllInTheme {
|
||||
AllInMarqueeBox(
|
||||
backgroundBrush = AllInTheme.colors.allInMainGradient,
|
||||
) {
|
||||
Text("CONTENT")
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue