Implement navigation and past games screen UI/ViewModel/majority of networking

app/build.gradle.kts

@@ -63,6 +63,7 @@ dependencies {
     implementation("androidx.navigation:navigation-compose:2.8.2")
     implementation("androidx.compose.material3:material3:1.0.0")
     implementation("com.google.dagger:hilt-android:2.51.1")
+    implementation(libs.androidx.media3.common.ktx)
     kapt("com.google.dagger:hilt-android-compiler:2.51.1")
     implementation("androidx.hilt:hilt-navigation-compose:1.0.0")
     implementation("com.google.accompanist:accompanist-pager:0.24.0-alpha")

app/src/main/graphql/Games.graphql

@@ -10,5 +10,10 @@ query Games{
             color
         }
         gender
+        boxScore {
+            corScore
+            oppScore
+        }
+        result
     }
 }

app/src/main/java/com/cornellappdev/score/components/UpcomingGameCard.kt → app/src/main/java/com/cornellappdev/score/components/FeaturedGameCard.kt

@@ -10,6 +10,8 @@ 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.layout.width
+import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -21,22 +23,30 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import coil3.compose.AsyncImage
 import com.cornellappdev.score.R
 import com.cornellappdev.score.theme.CornellRed
 import com.cornellappdev.score.theme.PennBlue
+import com.cornellappdev.score.theme.Style.losingScoreText
 import com.cornellappdev.score.theme.Style.vsText
+import com.cornellappdev.score.theme.Style.winningScoreText
 
 @Composable
-fun UpcomingGameHeader(
+fun FeaturedGameHeader(
     leftTeamLogo: Painter,
     rightTeamLogo: String,
+    leftScore: Int? = null,
+    rightScore: Int? = null,
     gradientColor1: Color,
     gradientColor2: Color,
     modifier: Modifier = Modifier
 ) {
+    val isPast = (leftScore != null && rightScore != null)
+
     Box(
         modifier = modifier
             .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp))
@@ -49,7 +59,7 @@ fun UpcomingGameHeader(
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(32.dp, Alignment.CenterHorizontally),
+            horizontalArrangement = if(isPast) Arrangement.spacedBy(12.dp, Alignment.CenterHorizontally) else Arrangement.spacedBy(32.dp, Alignment.CenterHorizontally),
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(vertical = 36.dp)
@@ -60,11 +70,32 @@ fun UpcomingGameHeader(
                 contentScale = ContentScale.FillBounds,
                 modifier = Modifier.size(60.dp)
             )
-
-            Text(
-                text = "VS",
-                style = vsText
-            )
+            if(leftScore != null && rightScore != null) {
+                Row(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
+                    Text(
+                            text = leftScore.toString(),
+                            style = if(leftScore > rightScore) winningScoreText else losingScoreText,
+                        modifier = Modifier.width(52.dp)
+                            .wrapContentWidth(Alignment.CenterHorizontally)
+                        )
+                    Text(
+                        text = "-",
+                        style = vsText.copy(fontSize = 32.sp, fontStyle = FontStyle.Normal)
+                    )
+                    Text(
+                        text = rightScore.toString(),
+                        style = if(leftScore < rightScore) winningScoreText else losingScoreText,
+                                modifier = Modifier.width(52.dp)
+                                    .wrapContentWidth(Alignment.CenterHorizontally)
+                    )
+                }
+            }
+            else {
+                Text(
+                    text = "VS",
+                    style = vsText
+                )
+            }
             AsyncImage(
                 model = rightTeamLogo,
                 contentDescription = "Right Team Logo",
@@ -76,8 +107,8 @@ fun UpcomingGameHeader(
 
 @Preview
 @Composable
-fun UpcomingGameHeaderPreview() {
-    UpcomingGameHeader(
+private fun FeaturedGameCardPreview() {
+    FeaturedGameHeader(
         leftTeamLogo = painterResource(R.drawable.cornell_logo),
         rightTeamLogo = "https://cornellbigred.com/images/logos/YALE_LOGO_2020.png?width=80&height=80&mode=max",
         gradientColor1 = CornellRed,
@@ -87,9 +118,11 @@ fun UpcomingGameHeaderPreview() {
 }
 
 @Composable
-fun UpcomingGameCard(
+fun FeaturedGameCard(
     leftTeamLogo: Painter,
     rightTeamLogo: String,
+    leftScore: Int? = null,
+    rightScore: Int? = null,
     team: String,
     location: String,
     isLive: Boolean,
@@ -106,15 +139,17 @@ fun UpcomingGameCard(
             .fillMaxWidth()
     ) {
 
-        UpcomingGameHeader(
+        FeaturedGameHeader(
             leftTeamLogo = leftTeamLogo,
             rightTeamLogo = rightTeamLogo,
+            leftScore = leftScore,
+            rightScore = rightScore,
             gradientColor1 = gradientColor1,
             gradientColor2 = gradientColor2,
             modifier = headerModifier
         )
 
-        SportCard(
+        GameCard(
             teamLogo = rightTeamLogo,
             team = team,
             date = date,
@@ -139,9 +174,11 @@ fun UpcomingGameCard(
 @Preview(showBackground = true)
 @Composable
 fun GameScheduleScreen() {
-    UpcomingGameCard(
+    FeaturedGameCard(
         leftTeamLogo = painterResource(R.drawable.cornell_logo),
         rightTeamLogo = "https://cornellbigred.com/images/logos/penn_200x200.png?width=80&height=80&mode=max",//painterResource(R.drawable.penn_logo),
+        leftScore = 32,
+        rightScore = 30,
         team = "Penn",
         location = "Philadelphia, NJ",
         date = "5/20/2024",

app/src/main/java/com/cornellappdev/score/components/SportCard.kt → app/src/main/java/com/cornellappdev/score/components/GameCard.kt

@@ -1,6 +1,5 @@
 package com.cornellappdev.score.components
 
-import android.icu.text.SimpleDateFormat
 import androidx.compose.animation.core.RepeatMode
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.infiniteRepeatable
@@ -9,6 +8,7 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -28,23 +28,19 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import com.cornellappdev.score.R
+import com.cornellappdev.score.model.GameCardData
 import com.cornellappdev.score.theme.AmbientColor
 import com.cornellappdev.score.theme.GrayMedium
 import com.cornellappdev.score.theme.GrayPrimary
 import com.cornellappdev.score.theme.GrayStroke
 import com.cornellappdev.score.theme.SpotColor
 import com.cornellappdev.score.theme.Style.bodyNormal
-import com.cornellappdev.score.theme.Style.dateText
 import com.cornellappdev.score.theme.Style.heading2
 import com.cornellappdev.score.theme.Style.labelsNormal
-import com.cornellappdev.score.theme.Style.teamName
-import com.cornellappdev.score.theme.Style.universityText
 import com.cornellappdev.score.theme.saturatedGreen
-import java.util.Date
-import java.util.Locale
 
 @Composable
-fun SportCard(
+fun GameCard(
     teamLogo: String,
     team: String,
     date: String,
@@ -54,6 +50,7 @@ fun SportCard(
     sportIcon: Painter,
     topCornerRound: Boolean,
     modifier: Modifier = Modifier,
+    onClick: (Boolean) -> Unit = {}
 ) {
     val cardShape = if (topCornerRound) {
         RoundedCornerShape(16.dp) // Rounded all
@@ -84,7 +81,7 @@ fun SportCard(
                                 )
                         )
                 }
-            )
+            ).clickable { onClick(false) }
     ) {
         Column(
             modifier = Modifier
@@ -97,7 +94,7 @@ fun SportCard(
                 modifier = Modifier.fillMaxWidth()
             ) {
                 Row(
-                    verticalAlignment = Alignment.CenterVertically
+                    verticalAlignment = Alignment.CenterVertically, modifier = Modifier.widthIn(0.dp, 250.dp)
                 ) {
                     AsyncImage(
                         model = teamLogo,
@@ -199,9 +196,9 @@ fun SportCard(
 
 @Preview(showBackground = true)
 @Composable
-fun SportCardPreview() {
+private fun GameCardPreview() {
     Column {
-        SportCard(
+        GameCard(
             teamLogo = "https://cornellbigred.com/images/logos/penn_200x200.png?width=80&height=80&mode=max", //painterResource(id = R.drawable.penn_logo),
             team = "Penn",
             date = "5/20/2024",

app/src/main/java/com/cornellappdev/score/components/UpcomingGamesCarousel.kt → app/src/main/java/com/cornellappdev/score/components/GamesCarousel.kt

@@ -26,7 +26,6 @@ import com.cornellappdev.score.theme.CrimsonPrimary
 import com.cornellappdev.score.theme.GrayLight
 import com.cornellappdev.score.theme.GrayPrimary
 import com.cornellappdev.score.theme.Style.heading1
-import com.cornellappdev.score.theme.Style.title
 import com.cornellappdev.score.util.gameList
 
 @Composable
@@ -56,7 +55,7 @@ fun DotIndicator(
 }
 
 @Composable
-fun UpcomingGamesCarousel(games: List<GameCardData>) {
+fun GamesCarousel(games: List<GameCardData>, upcoming: Boolean) {
     val pagerState = rememberPagerState(pageCount = { games.size })
     Column(
         modifier = Modifier
@@ -65,7 +64,7 @@ fun UpcomingGamesCarousel(games: List<GameCardData>) {
         verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.Top),
     ) {
         Text(
-            text = "Upcoming",
+            text = if (upcoming) "Upcoming" else "Latest",
             style = heading1,
             color = GrayPrimary,
             modifier = Modifier.fillMaxWidth()
@@ -76,7 +75,7 @@ fun UpcomingGamesCarousel(games: List<GameCardData>) {
             modifier = Modifier.fillMaxWidth()
         ) { page ->
             val game = games[page]
-            UpcomingGameCard(
+            FeaturedGameCard(
                 leftTeamLogo = painterResource(R.drawable.cornell_logo),
                 rightTeamLogo = game.teamLogo,
                 team = game.team,
@@ -104,6 +103,6 @@ fun UpcomingGamesCarousel(games: List<GameCardData>) {
 
 @Preview(showBackground = true, widthDp = 360)
 @Composable
-private fun UpcomingGamesCarouselPreview() {
-    UpcomingGamesCarousel(gameList)
+private fun GamesCarouselPreview() {
+    GamesCarousel(gameList, true)
 }