Fix ScoreBox UI (#48)

* Fix ScoreBox UI

* add new preview

* more score preview

* Font size change based on score length

---------

Co-authored-by: zachseidner1 <zachary.seidner@gmail.com>

Author: amjiao

app/src/main/java/com/cornellappdev/score/components/ScoreBox.kt

@@ -1,18 +1,22 @@
 package com.cornellappdev.score.components
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Divider
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 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.Color
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -21,13 +25,15 @@ import androidx.compose.ui.unit.dp
 import com.cornellappdev.score.model.GameData
 import com.cornellappdev.score.model.TeamScore
 import com.cornellappdev.score.theme.CrimsonPrimary
+import com.cornellappdev.score.theme.GrayMedium
 import com.cornellappdev.score.theme.GrayPrimary
 import com.cornellappdev.score.theme.Style.bodyNormal
-import com.cornellappdev.score.theme.Style.metricNormal
-import com.cornellappdev.score.theme.Style.metricSemibold
+import com.cornellappdev.score.theme.Style.labelsNormal
 import com.cornellappdev.score.theme.saturatedGreen
 import com.cornellappdev.score.util.emptyGameData
 import com.cornellappdev.score.util.gameData
+import com.cornellappdev.score.util.longGameData
+import com.cornellappdev.score.util.mediumGameData
 
 @Composable
 fun BoxScore(gameData: GameData) {
@@ -36,17 +42,19 @@ fun BoxScore(gameData: GameData) {
         gameData.teamScores.second.scoresByPeriod.size,
         4
     )
-
+    val rowTextStyle = if (maxPeriods > 4) labelsNormal else bodyNormal
     Column(
         modifier = Modifier
             .fillMaxWidth()
-            .background(Color.White, shape = RoundedCornerShape(8.dp))
+            .clip(shape = RoundedCornerShape(8.dp))
+            .background(color = Color.White, shape = RoundedCornerShape(8.dp))
+            .border(BorderStroke(width = 1.dp, color = CrimsonPrimary))
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .background(CrimsonPrimary)
-                .padding(vertical = 8.dp),
+                .background(color = CrimsonPrimary)
+                .padding(top = 6.dp, bottom = 4.dp, end = 8.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             Text(
@@ -60,47 +68,48 @@ fun BoxScore(gameData: GameData) {
                     text = "${period + 1}",
                     modifier = Modifier.weight(1f),
                     color = Color.White,
-                    style = bodyNormal,
+                    style = rowTextStyle,
                     textAlign = TextAlign.Center
                 )
             }
             Text(
                 text = "Total",
                 modifier = Modifier.weight(1f),
-                style = bodyNormal,
+                style = rowTextStyle,
                 color = Color.White,
                 textAlign = TextAlign.Center
             )
         }
-
         TeamScoreRow(
             teamScore = gameData.teamScores.first,
             totalTextColor = saturatedGreen,
+            rowTextStyle
         )
-
-        Divider(color = CrimsonPrimary, thickness = 1.dp)
+        HorizontalDivider(thickness = 1.dp, color = CrimsonPrimary)
 
         TeamScoreRow(
             teamScore = gameData.teamScores.second,
-            totalTextColor = Color.Black,
+            totalTextColor = GrayMedium,
+            rowTextStyle
         )
+
     }
 }
 
 @Composable
-fun TeamScoreRow(teamScore: TeamScore, totalTextColor: Color) {
+fun TeamScoreRow(teamScore: TeamScore, totalTextColor: Color, rowTextStyle: TextStyle) {
     val showEmpty = teamScore.scoresByPeriod.isEmpty()
 
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(vertical = 8.dp),
+            .padding(vertical = 8.dp, horizontal = 10.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
         verticalAlignment = Alignment.CenterVertically
     ) {
         Text(
             text = teamScore.team.name,
-            style = bodyNormal,
+            style = rowTextStyle,
             color = GrayPrimary,
             modifier = Modifier.weight(1f),
             textAlign = TextAlign.Center,
@@ -112,7 +121,7 @@ fun TeamScoreRow(teamScore: TeamScore, totalTextColor: Color) {
             Text(
                 text = if (showEmpty) "-" else score.toString(),
                 modifier = Modifier.weight(1f),
-                style = metricNormal,
+                style = rowTextStyle,
                 color = GrayPrimary,
                 textAlign = TextAlign.Center
             )
@@ -122,7 +131,7 @@ fun TeamScoreRow(teamScore: TeamScore, totalTextColor: Color) {
             Text(
                 text = "-",
                 modifier = Modifier.weight(1f),
-                style = metricNormal,
+                style = rowTextStyle,
                 color = GrayPrimary,
                 textAlign = TextAlign.Center
             )
@@ -131,22 +140,42 @@ fun TeamScoreRow(teamScore: TeamScore, totalTextColor: Color) {
         Text(
             text = if (showEmpty) "-" else teamScore.totalScore.toString(),
             modifier = Modifier.weight(1f),
-            style = metricSemibold,
+            style = rowTextStyle,
             color = if (showEmpty) Color.Gray else totalTextColor,
             fontWeight = if (showEmpty) FontWeight.Normal else FontWeight.Bold,
             textAlign = TextAlign.Center
         )
     }
 }
 
+
 @Preview
 @Composable
 private fun PreviewBoxScore() = ScorePreview {
     BoxScore(gameData = gameData)
 }
 
+@Preview
+@Composable
+private fun PreviewBoxScoreForLongGame() = ScorePreview {
+    BoxScore(longGameData)
+}
+
+@Preview
+@Composable
+private fun PreviewBoxScoreForMedGame() = ScorePreview {
+    BoxScore(mediumGameData)
+}
+
 @Preview
 @Composable
 private fun PreviewBoxScoreEmpty() = ScorePreview {
     BoxScore(gameData = emptyGameData())
 }
+
+
+@Preview
+@Composable
+private fun PreviewTeamScoreRow() = ScorePreview {
+    TeamScoreRow(gameData.teamScores.first, GrayMedium, bodyNormal)
+}

app/src/main/java/com/cornellappdev/score/screen/GameDetailsScreen.kt

@@ -158,11 +158,11 @@ fun GameDetailsContent(gameCard: DetailsCardData) {
             // render the below if the game is in the future
             // TODO: MESSY, is it every the case when there is a boxscore but no scoring summary
             if (gameCard.isPastStartTime) {
-                if (gameCard.scoreBreakdown?.isNotEmpty() == true) {
-                    Spacer(modifier = Modifier.height(24.dp))
-                    BoxScore(gameCard.gameData)
-                    Spacer(modifier = Modifier.height(24.dp))
-                }
+                //if (gameCard.scoreBreakdown?.isNotEmpty() == true) {
+                Spacer(modifier = Modifier.height(24.dp))
+                BoxScore(gameCard.gameData)
+                Spacer(modifier = Modifier.height(24.dp))
+                // }
                 if (gameCard.boxScore.isNotEmpty()) {
                     Text(
                         "Scoring Summary", fontSize = 18.sp,

app/src/main/java/com/cornellappdev/score/util/TestingConstants.kt

@@ -68,8 +68,33 @@ val teamScore2 = TeamScore(
     totalScore = 23
 )
 
+val mediumGameTeamScore1 = TeamScore(
+    team = team1,
+    scoresByPeriod = listOf(13, 14, 6, 14, 13, 2),
+    totalScore = 62
+)
+val mediumGameTeamScore2 = TeamScore(
+    team = team1,
+    scoresByPeriod = listOf(7, 7, 9, 0, 7, 7),
+    totalScore = 37
+)
+
+val longGameTeamScore1 = TeamScore(
+    team = team1,
+    scoresByPeriod = listOf(13, 14, 6, 14, 13, 2, 4, 6, 2, 2),
+    totalScore = 47
+)
+val longGameTeamScore2 = TeamScore(
+    team = team1,
+    scoresByPeriod = listOf(7, 7, 9, 0, 7, 7, 9, 0, 7, 2),
+    totalScore = 47
+)
 val gameData = GameData(teamScores = Pair(teamScore1, teamScore2))
 
+val mediumGameData = GameData(teamScores = mediumGameTeamScore1 to mediumGameTeamScore2)
+
+val longGameData = GameData(teamScores = longGameTeamScore1 to longGameTeamScore2)
+
 val team3 = TeamGameSummary(
     name = "Cornell",
     "https://cornellbigred.com/images/logos/penn_200x200.png?width=80&height=80&mode=max"