More styling for End Card

build.gradle.kts

@@ -22,14 +22,14 @@ dependencies {
     implementation("org.jetbrains.kotlinx", "kotlinx-serialization-json", "1.2.2")
     implementation("com.github.ajalt.clikt", "clikt-jvm", "3.2.0")
     implementation("com.github.ajalt.clikt", "clikt", "3.2.0")
-    testImplementation(kotlin("test"))
+    testImplementation(kotlin("test", "1.5.21"))
 }
 
 tasks.test {
     useJUnitPlatform()
 }
 
-tasks.withType<KotlinCompile>() {
+tasks.withType<KotlinCompile> {
     kotlinOptions.jvmTarget = JavaVersion.VERSION_16.toString()
     kotlinOptions.freeCompilerArgs += "-Xopt-in=kotlin.RequiresOptIn"
 }

game.json

@@ -93,12 +93,12 @@
       "name": "P1"
     },
     {
-      "name": "P2"
+      "name": "Playerererer"
     },
     {
       "name": "P3"
     }
   ],
   "doubleAfter": 2,
-  "endGameAfter": 5
+  "endGameAfter": 1
 }

src/main/kotlin/components/EndCard.kt

@@ -1,12 +1,18 @@
 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.Surface
+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
 
@@ -17,42 +23,65 @@ fun EndCard(
     reviewBoard: () -> Unit,
     close: () -> Unit
 ) {
-    // TODO: Style
-    Box(
-        contentAlignment = Alignment.Center,
-        modifier = Modifier.fillMaxWidth()
-            .fillMaxHeight()
+    val sortedPlayersPoints = playerPointMap.entries
+        .sortedByDescending { it.value }
+    val firstPlayer = sortedPlayersPoints.first()
+        .key
+    BorderBox(
+        borderColor = firstPlayer.color.toColor()
     ) {
-        val sortedPlayersPoints = playerPointMap.entries
-            .sortedByDescending { it.value }
-        val firstPlayer = sortedPlayersPoints.first()
-            .key
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
-            Text(text = "Congratulations, ${firstPlayer.name}!")
-
-            for ((index, data) in sortedPlayersPoints.withIndex()) {
-                val player = data.key
-                Row(horizontalArrangement = Arrangement.SpaceBetween) {
-                    Text(text = "${index + 1}.")
-                    Surface(
-                        color = player.color.toColor()
-                    ) {
-                        Text(text = "${player.name} (${data.value} Pts.)")
+            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))
                     }
                 }
             }
-            Button(
-                onClick = reviewBoard
+            Spacer(modifier = Modifier.fillMaxWidth().height(25.dp))
+            Row(
+                horizontalArrangement = Arrangement.SpaceAround,
+                verticalAlignment = Alignment.Bottom
             ) {
-                Text(text = "Review")
-            }
-            Button(
-                onClick = close
-            ) {
-                Text(text = "Close")
+                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
+                    )
+                }
             }
         }
     }

src/main/kotlin/components/common/BorderBox.kt

@@ -0,0 +1,26 @@
+@file:Suppress("FunctionName")
+
+package components.common
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.*
+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
+
+@Composable
+fun BorderBox(borderColor: Color, scope: @Composable BoxScope.() -> Unit) {
+    Box(
+        modifier = Modifier.fillMaxHeight().fillMaxWidth()
+            .border(
+                border = BorderStroke(50.dp, borderColor)
+            )
+            .padding(150.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        scope()
+    }
+}

src/main/kotlin/components/questiondialog/QuestionDialogContent.kt

@@ -1,7 +1,5 @@
 package components.questiondialog
 
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
@@ -9,11 +7,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
 import components.QuestionResolution
+import components.common.BorderBox
 import components.questiondialog.assets.HintText
 import components.questiondialog.buttons.DismissButton
 import components.questiondialog.player.DeferredDoubleQuestionDialogPlayer
 import components.questiondialog.player.QuestionDialogPlayer
-import data.*
+import data.ColorData
+import data.Player
+import data.QuestionData
+import data.toColor
 
 @Suppress("FunctionName")
 @Composable
@@ -29,14 +31,7 @@ fun QuestionDialogButtons(
     val fontSize = 5.em
     var questionAnswered by remember { mutableStateOf(QuestionResolution(false, null)) }
 
-    Box(
-        modifier = Modifier.fillMaxHeight().fillMaxWidth()
-            .border(
-                border = BorderStroke(50.dp, topicColor.toColor())
-            )
-            .padding(150.dp),
-        contentAlignment = Alignment.Center,
-    ) {
+    BorderBox(borderColor = topicColor.toColor()) {
         Column(
             modifier = Modifier.fillMaxWidth().fillMaxHeight(),
             horizontalAlignment = Alignment.CenterHorizontally,