implemented the prediction feature on iOS and Android

app/src/main/java/dev/johnoreilly/fantasypremierleague/MainActivity.kt

@@ -114,6 +114,7 @@ fun MainLayout(viewModel: FantasyPremierLeagueViewModel) {
                         fixture?.let {
                             FixtureDetailsView(
                                 fixture,
+                                onSubmitPredict = viewModel::onSubmitPredict,
                                 popBackStack = { navController.popBackStack() })
                         }
                     }

app/src/main/java/dev/johnoreilly/fantasypremierleague/presentation/FantasyPremierLeagueViewModel.kt

@@ -10,6 +10,7 @@ import dev.johnoreilly.common.data.repository.FantasyPremierLeagueRepository
 import dev.johnoreilly.common.domain.entities.GameFixture
 import dev.johnoreilly.common.domain.entities.Player
 import dev.johnoreilly.common.domain.entities.PlayerPastHistory
+import dev.johnoreilly.common.domain.entities.Prediction
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.FlowPreview
 import kotlinx.coroutines.flow.MutableStateFlow
@@ -28,6 +29,7 @@ class FantasyPremierLeagueViewModel(
 ) : ViewModel() {
 
     val searchQuery = MutableStateFlow("")
+    val currentGameweekToFixture = repository.currentGameweek
     val allPlayers = repository.playerList
     val visiblePlayerList: StateFlow<List<Player>> =
         searchQuery.debounce(250).flatMapLatest { searchQuery ->
@@ -78,11 +80,17 @@ class FantasyPremierLeagueViewModel(
     }
 
     fun getFixture(fixtureId: Int?): GameFixture? {
-        return fixturesList.value.find { it.id == fixtureId}
+        return fixturesList.value.find { it.id == fixtureId }
     }
 
     fun updateLeagues(leagues: List<String>) {
         repository.updateLeagues(leagues)
     }
 
+    fun onSubmitPredict(prediction: Prediction) {
+        viewModelScope.launch {
+            repository.submitPredict(prediction)
+        }
+    }
+
 }

app/src/main/java/dev/johnoreilly/fantasypremierleague/presentation/fixtures/FixtureDetails/FixtureDetailsView.kt

@@ -2,28 +2,63 @@
 
 package dev.johnoreilly.fantasypremierleague.presentation.fixtures.FixtureDetails
 
-import androidx.compose.foundation.layout.*
+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.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.Button
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 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.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+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 dev.johnoreilly.common.domain.entities.GameFixture
+import dev.johnoreilly.common.domain.entities.Prediction
 import dev.johnoreilly.fantasypremierleague.presentation.fixtures.ClubInFixtureView
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun FixtureDetailsView(fixture: GameFixture, popBackStack: () -> Unit) {
+fun FixtureDetailsView(
+    fixture: GameFixture,
+    onSubmitPredict: (Prediction) -> Unit,
+    popBackStack: () -> Unit
+) {
 
     Scaffold(
         topBar = {
@@ -39,7 +74,9 @@ fun FixtureDetailsView(fixture: GameFixture, popBackStack: () -> Unit) {
             )
         }) {
         Column(
-            modifier = Modifier.padding(it).fillMaxSize(),
+            modifier = Modifier
+                .padding(it)
+                .fillMaxSize(),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             Row(
@@ -54,7 +91,7 @@ fun FixtureDetailsView(fixture: GameFixture, popBackStack: () -> Unit) {
                     fixture.homeTeamPhotoUrl
                 )
                 Text(
-                    text = "(${fixture.homeTeamScore})",
+                    text = fixture.homeScore,
                     fontWeight = FontWeight.Bold,
                     fontSize = 25.sp
                 )
@@ -64,7 +101,7 @@ fun FixtureDetailsView(fixture: GameFixture, popBackStack: () -> Unit) {
                     fontSize = 25.sp
                 )
                 Text(
-                    text = "(${fixture.awayTeamScore})",
+                    text = fixture.awayScore,
                     fontWeight = FontWeight.Bold,
                     fontSize = 25.sp
                 )
@@ -74,11 +111,202 @@ fun FixtureDetailsView(fixture: GameFixture, popBackStack: () -> Unit) {
                 )
             }
 
-            fixture.localKickoffTime?.let { localKickoffTime ->
-                val formattedTime = "%02d:%02d".format(localKickoffTime.hour, localKickoffTime.minute)
+            fixture.localKickoffTime.let { localKickoffTime ->
+                val formattedTime =
+                    "%02d:%02d".format(localKickoffTime.hour, localKickoffTime.minute)
                 PastFixtureStatView(statName = "Date", statValue = localKickoffTime.date.toString())
                 PastFixtureStatView(statName = "Kick Off Time", statValue = formattedTime)
             }
+
+            if (fixture.isNotStartedYet || fixture.isPredicted) {
+                PredictionView(
+                    gameFixture = fixture,
+                    onSubmitPredict = onSubmitPredict,
+                )
+            }
+
+        }
+    }
+}
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+private fun PredictionView(
+    gameFixture: GameFixture,
+    onSubmitPredict: (Prediction) -> Unit
+) {
+    var homeTeamPrediction by remember { mutableStateOf(gameFixture.prediction?.homeScores.orEmpty()) }
+    var awayTeamPrediction by remember { mutableStateOf(gameFixture.prediction?.awayScores.orEmpty()) }
+
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusRequester = remember { FocusRequester() }
+
+    Column(
+        modifier = Modifier
+            .focusRequester(focusRequester)
+            .padding(top = 24.dp)
+            .fillMaxWidth(),
+        verticalArrangement = Arrangement.SpaceBetween
+    ) {
+
+        val isNotPredicted = remember(gameFixture.isPredicted) { gameFixture.isPredicted.not() }
+
+        Box(
+            modifier = Modifier
+                .background(
+                    brush = Brush.linearGradient(
+                        listOf(
+                            Color(0xFFC5A8FF),
+                            Color(0xFF7E43A3),
+                        )
+                    )
+                )
+                .fillMaxWidth()
+                .padding(8.dp)
+        ) {
+            Text(
+                text = if (isNotPredicted) "Make Your Predictions" else "Predictions Submitted!",
+                color = Color.White,
+                style = MaterialTheme.typography.titleMedium, // Customize the style
+                modifier = Modifier
+                    .padding(12.dp)
+            )
+        }
+
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 24.dp, bottom = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+        ) {
+
+            OutlinedTextField(
+                enabled = isNotPredicted,
+                value = homeTeamPrediction,
+                onValueChange = { homeTeamPrediction = it.take(2) },
+                placeholder = {
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Text(
+                            text = "?",
+                            style = TextStyle(
+                                fontSize = 40.sp,
+                                color = Color.LightGray,
+                                textAlign = TextAlign.Center,
+                            )
+                        )
+                    }
+                },
+                keyboardOptions = KeyboardOptions.Default.copy(
+                    keyboardType = KeyboardType.Number,
+                    imeAction = ImeAction.Done
+                ),
+                keyboardActions = KeyboardActions(
+                    onNext = {
+                        // Move focus to the next field when "Next" is pressed
+                        focusRequester.requestFocus()
+                    },
+                ),
+                textStyle = TextStyle(
+                    fontSize = 34.sp,
+                    color = Color.Black,
+                    textAlign = TextAlign.Center
+                ),
+                singleLine = true,
+                modifier = Modifier
+                    .size(120.dp)
+                    .padding(horizontal = 16.dp),
+            )
+
+            Spacer(modifier = Modifier.width(16.dp))
+
+            OutlinedTextField(
+                enabled = isNotPredicted,
+                value = awayTeamPrediction,
+                onValueChange = { awayTeamPrediction = it.take(2) },
+                placeholder = {
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.Center,
+                    ) {
+                        Text(
+                            text = "?",
+                            style = TextStyle(
+                                fontSize = 40.sp,
+                                color = Color.LightGray,
+                                textAlign = TextAlign.Center,
+                            )
+                        )
+                    }
+                },
+                keyboardOptions = KeyboardOptions.Default.copy(
+                    keyboardType = KeyboardType.Number,
+                    imeAction = ImeAction.Done
+                ),
+                keyboardActions = KeyboardActions(
+                    onDone = {
+                        keyboardController?.hide()
+                        focusRequester.freeFocus()
+                    }
+                ),
+                textStyle = TextStyle(
+                    fontSize = 34.sp,
+                    color = Color.Black,
+                    textAlign = TextAlign.Center
+                ),
+                singleLine = true,
+                modifier = Modifier
+                    .size(120.dp)
+                    .padding(horizontal = 16.dp),
+            )
+
+        }
+
+
+        if (isNotPredicted) {
+            Button(
+                onClick = {
+                    onSubmitPredict(
+                        Prediction(
+                            fixtureId = gameFixture.id,
+                            homeScores = homeTeamPrediction,
+                            awayScores = awayTeamPrediction,
+                        )
+                    )
+                },
+                modifier = Modifier.align(Alignment.CenterHorizontally)
+            ) {
+                Text(text = "Submit Predictions")
+            }
+        } else {
+            Text(
+                text = gameFixture.getPredictionMessage(),
+                style = MaterialTheme.typography.bodyMedium,
+                modifier = Modifier
+                    .padding(top = 8.dp, start = 16.dp, end = 16.dp)
+                    .align(Alignment.CenterHorizontally),
+                color = Color.Gray
+            )
+        }
+
+    }
+}
+
+@Preview
+@Composable
+fun FixtureDetailsViewPreview() {
+    MaterialTheme {
+
+        Column(modifier = Modifier.background(MaterialTheme.colorScheme.background)) {
+
+            FixtureDetailsView(
+                fixture = GameFixture.mockGameFixture,
+                onSubmitPredict = { _ -> },
+                popBackStack = {},
+            )
         }
     }
 }