More styling for End Card

This commit is contained in:
Oliver Rümpelein 2021-08-29 17:14:09 +02:00
parent 6a381c6b68
commit 6d5a150ee4
3 changed files with 118 additions and 90 deletions

View File

@ -6,9 +6,11 @@ import com.github.ajalt.clikt.core.CliktCommand
import com.github.ajalt.clikt.parameters.options.default
import com.github.ajalt.clikt.parameters.options.option
import com.github.ajalt.clikt.parameters.types.file
import components.EndCard
import components.QuestionResolution
import data.*
import components.endcard.EndCard
import data.Game
import data.Player
import data.QuestionData
import kotlinx.serialization.ExperimentalSerializationApi
import kotlinx.serialization.decodeFromString
import kotlinx.serialization.json.Json

View File

@ -1,88 +0,0 @@
package components
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
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.unit.dp
import androidx.compose.ui.unit.em
import components.common.BorderBox
import data.Player
import data.toColor
@Suppress("FunctionName")
@Composable
fun EndCard(
playerPointMap: MutableMap<Player, Long>,
reviewBoard: () -> Unit,
close: () -> Unit
) {
val sortedPlayersPoints = playerPointMap.entries
.sortedByDescending { it.value }
val firstPlayer = sortedPlayersPoints.first()
.key
BorderBox(
borderColor = firstPlayer.color.toColor()
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Row {
Text(text = "Congratulations, ${firstPlayer.name}!", fontSize = 5.em)
}
Spacer(modifier = Modifier.fillMaxWidth().height(25.dp))
Row {
Column {
for ((index, data) in sortedPlayersPoints.withIndex()) {
val player = data.key
Box(
modifier = Modifier.border(border = BorderStroke(5.dp, player.color.toColor()))
.padding(10.dp),
contentAlignment = Alignment.Center
) {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text(text = "${index + 1}.", fontSize = 3.em)
Text(text = "${player.name} (${data.value} Pts.)", fontSize = 3.em)
}
}
Spacer(modifier = Modifier.height(5.dp))
}
}
}
Spacer(modifier = Modifier.fillMaxWidth().height(25.dp))
Row(
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.Bottom
) {
Button(
onClick = reviewBoard,
colors = ButtonDefaults.buttonColors(Color.DarkGray)
) {
Text(
text = "Review",
fontSize = 5.em,
color = Color.White
)
}
Spacer(modifier = Modifier.width(5.dp))
Button(
onClick = close,
colors = ButtonDefaults.buttonColors(Color.Red)
) {
Text(
text = "Close",
fontSize = 5.em,
color = Color.White
)
}
}
}
}
}

View File

@ -0,0 +1,114 @@
package components.endcard
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
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.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.em
import components.common.BorderBox
import data.Player
import data.toColor
@Suppress("FunctionName")
@Composable
fun EndCard(
playerPointMap: Map<Player, Long>,
reviewBoard: () -> Unit,
close: () -> Unit
) {
val sortedPlayersPoints = playerPointMap.entries
.sortedByDescending { it.value }
val firstPlayer = sortedPlayersPoints.first()
.key
BorderBox(
borderColor = firstPlayer.color.toColor()
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
val fontSizeLarge = 5.em
val spacerHeight = 25.dp
val fontSizeSmall = 3.em
Row {
Text(text = "Congratulations, ${firstPlayer.name}!", fontSize = fontSizeLarge)
}
Spacer(modifier = Modifier.fillMaxWidth().height(spacerHeight))
HighScoreList(sortedPlayersPoints, fontSizeSmall)
Spacer(modifier = Modifier.fillMaxWidth().height(spacerHeight))
EndCardButtons(reviewBoard, close)
}
}
}
@Suppress("FunctionName")
@Composable
fun HighScoreList(sortedPlayersPoints: List<Map.Entry<Player, Long>>, fontSize: TextUnit) {
Row {
Column {
for ((index, data) in sortedPlayersPoints.withIndex()) {
HighScoreListEntry(player = data.key, rank = index + 1, points = data.value, fontSize = fontSize)
Spacer(modifier = Modifier.height(5.dp))
}
}
}
}
@Suppress("FunctionName")
@Composable
fun HighScoreListEntry(
player: Player,
rank: Int,
points: Long,
fontSize: TextUnit
) {
Box(
modifier = Modifier.border(border = BorderStroke(5.dp, player.color.toColor()))
.padding(10.dp),
contentAlignment = Alignment.Center
) {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Text(text = "$rank.", fontSize = fontSize)
Text(text = "${player.name} ($points Pts.)", fontSize = 3.em)
}
}
}
@Suppress("FunctionName")
@Composable
fun EndCardButtons(reviewBoard: () -> Unit, close: () -> Unit) {
Row(
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.Bottom
) {
Button(
onClick = reviewBoard,
colors = ButtonDefaults.buttonColors(Color.DarkGray)
) {
Text(
text = "Review",
fontSize = 5.em,
color = Color.White
)
}
Spacer(modifier = Modifier.width(5.dp))
Button(
onClick = close,
colors = ButtonDefaults.buttonColors(Color.Red)
) {
Text(
text = "Close",
fontSize = 5.em,
color = Color.White
)
}
}
}