Merge pull request #14 from Efimj/enhancement/ui

Enhancement/UI

app/src/main/java/com/jobik/gameoflife/screens/game/GameAppBar.kt

@@ -1,15 +1,26 @@
 package com.jobik.gameoflife.screens.game
 
+import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.ime
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
-import androidx.compose.material3.*
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import com.jobik.gameoflife.R
 import com.jobik.gameoflife.screens.layout.ModalDrawer
 import com.jobik.gameoflife.screens.layout.ModalDrawerImplementation
@@ -20,7 +31,12 @@ import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun GameAppBar(modalDrawer: ModalDrawer = ModalDrawerImplementation) {
+fun GameAppBar(
+    color: Color = MaterialTheme.colorScheme.onSecondaryContainer,
+    backgroundColor: Color = MaterialTheme.colorScheme.secondaryContainer,
+    title: String = "",
+    modalDrawer: ModalDrawer = ModalDrawerImplementation
+) {
     val coroutineScope = rememberCoroutineScope()
 
     val topInsets = if (isWidth(sizeClass = WindowWidthSizeClass.Compact)) {
@@ -31,16 +47,18 @@ fun GameAppBar(modalDrawer: ModalDrawer = ModalDrawerImplementation) {
 
     TopAppBar(
         modifier = Modifier
-            .background(MaterialTheme.colorScheme.secondaryContainer)
+            .background(backgroundColor)
             .then(topInsets),
         title = {
-            Text(text = stringResource(id = R.string.GameOfLife))
+            AnimatedContent(targetState = title) {
+                Text(text = it)
+            }
         },
         windowInsets = WindowInsets.ime,
         colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = MaterialTheme.colorScheme.secondaryContainer,
-            navigationIconContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
-            titleContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+            containerColor = backgroundColor,
+            navigationIconContentColor = color,
+            titleContentColor = color,
         ),
         navigationIcon = {
             IconButton(onClick = {

app/src/main/java/com/jobik/gameoflife/screens/game/GameContent.kt

@@ -20,7 +20,7 @@ import com.jobik.gameoflife.ui.composables.Counter
 import com.jobik.gameoflife.ui.composables.GridForGame
 
 @Composable
-fun GameContent(viewModel: GameScreenViewModel) {
+fun GameContent(modifier: Modifier = Modifier, viewModel: GameScreenViewModel) {
     val contentColorTarget = when {
         viewModel.states.value.isSimulationRunning -> MaterialTheme.colorScheme.onSecondary
         viewModel.states.value.gameResult == GameOfLife.Companion.GameOfLifeResult.NoOneSurvived -> MaterialTheme.colorScheme.onError
@@ -32,41 +32,14 @@ fun GameContent(viewModel: GameScreenViewModel) {
         label = "contentColor"
     )
 
-    Column {
-        AnimatedVisibility(
-            visible = viewModel.states.value.gameResult != null,
-            enter = slideInVertically() + expandVertically(expandFrom = Alignment.Top) + fadeIn(
-                initialAlpha = 0.3f
-            ),
-            exit = slideOutVertically() + shrinkVertically() + fadeOut()
-        ) {
-            Row(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 10.dp, bottom = 10.dp),
-                horizontalArrangement = Arrangement.Center
-            ) {
-                Text(
-                    text = when (viewModel.states.value.gameResult) {
-                        GameOfLife.Companion.GameOfLifeResult.StableCombination -> stringResource(id = R.string.stable_combination)
-                        GameOfLife.Companion.GameOfLifeResult.NoOneSurvived -> stringResource(id = R.string.no_one_survived)
-                        else -> ""
-                    },
-                    color = contentColor,
-                    style = MaterialTheme.typography.headlineSmall,
-                    fontWeight = FontWeight.Bold,
-                )
-            }
-        }
+    Column(modifier = modifier) {
         Box(
-            modifier = Modifier
-                .weight(1f, fill = false)
-                .fillMaxWidth(),
+            modifier = Modifier.fillMaxWidth(),
             contentAlignment = Alignment.TopCenter
         ) {
             Box(
                 modifier = Modifier
-                    .aspectRatio(1f, matchHeightConstraintsFirst = true)
+                    .aspectRatio(1f)
                     .padding(4.dp)
                     .clip(MaterialTheme.shapes.medium)
                     .background(MaterialTheme.colorScheme.surface)
@@ -96,7 +69,7 @@ fun GameContent(viewModel: GameScreenViewModel) {
                     maxLines = 1
                 )
                 Counter(
-                    viewModel.states.value.alive,
+                    count = viewModel.states.value.alive,
                     style = MaterialTheme.typography.bodyMedium,
                     color = contentColor
                 )
@@ -114,7 +87,7 @@ fun GameContent(viewModel: GameScreenViewModel) {
                     maxLines = 1
                 )
                 Counter(
-                    viewModel.states.value.deaths,
+                    count = viewModel.states.value.deaths,
                     style = MaterialTheme.typography.bodyMedium,
                     color = contentColor
                 )
@@ -132,7 +105,7 @@ fun GameContent(viewModel: GameScreenViewModel) {
                     maxLines = 1
                 )
                 Counter(
-                    viewModel.states.value.revivals,
+                    count = viewModel.states.value.revivals,
                     style = MaterialTheme.typography.bodyMedium,
                     color = contentColor
                 )

app/src/main/java/com/jobik/gameoflife/screens/game/GameScreen.kt

@@ -1,54 +1,50 @@
 package com.jobik.gameoflife.screens.game
 
 import androidx.activity.compose.BackHandler
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 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.fillMaxHeight
-import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.BackdropScaffold
-import androidx.compose.material.BackdropScaffoldState
-import androidx.compose.material.BackdropValue
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.rememberBackdropScaffoldState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 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.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import com.jobik.gameoflife.R
 import com.jobik.gameoflife.gameOfLife.GameOfLife
 import com.jobik.gameoflife.screens.game.actions.GameActions
 import com.jobik.gameoflife.ui.helpers.WindowWidthSizeClass
 import com.jobik.gameoflife.ui.helpers.currentWidthSizeClass
-import com.jobik.gameoflife.ui.helpers.horizontalWindowInsetsPadding
-import com.jobik.gameoflife.ui.helpers.isWidth
-import com.jobik.gameoflife.ui.helpers.topWindowInsetsPadding
-import kotlinx.coroutines.launch
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 fun GameScreen(
     viewModel: GameScreenViewModel = androidx.lifecycle.viewmodel.compose.viewModel()
 ) {
-    val scope = rememberCoroutineScope()
-    // Get local density from composable
-    val backdropScaffoldState = rememberBackdropScaffoldState(BackdropValue.Revealed)
-
     val containerColorTarget = when {
         viewModel.states.value.isSimulationRunning -> MaterialTheme.colorScheme.secondary
         viewModel.states.value.gameResult == GameOfLife.Companion.GameOfLifeResult.NoOneSurvived -> MaterialTheme.colorScheme.error
@@ -60,23 +56,13 @@ fun GameScreen(
         label = "containerColor"
     )
 
-    LaunchedEffect(backdropScaffoldState.progress) {
-        if (backdropScaffoldState.progress.fraction > 0f)
-            viewModel.turnOffSimulation()
-    }
-
-    BackHandler(enabled = backdropScaffoldState.currentValue == BackdropValue.Concealed) {
-        scope.launch { backdropScaffoldState.reveal() }
-    }
-
     BackHandler(enabled = viewModel.states.value.isSimulationRunning) {
         viewModel.turnOffSimulation()
     }
 
     when (currentWidthSizeClass()) {
         WindowWidthSizeClass.Compact, WindowWidthSizeClass.Medium -> {
             CompactGameScreen(
-                backdropScaffoldState,
                 containerColor,
                 viewModel
             )
@@ -127,64 +113,40 @@ private fun ExpandedGameScreen(
 }
 
 @Composable
-@OptIn(ExperimentalMaterialApi::class)
 private fun CompactGameScreen(
-    backdropScaffoldState: BackdropScaffoldState,
     containerColor: Color,
     viewModel: GameScreenViewModel
 ) {
-    val localDensity = LocalDensity.current
-
-    val frontCornerValue =
-        if (backdropScaffoldState.currentValue == BackdropValue.Concealed) 0.dp else 12.dp
-    val frontCorner by animateDpAsState(targetValue = frontCornerValue, label = "frontCorner")
-
-    var screenHeight by remember { mutableStateOf(0.dp) }
-    val gameContentPercentageOfHeight = 0.65
-    val maxGameHeight by remember(screenHeight) { mutableStateOf((screenHeight.value * gameContentPercentageOfHeight).dp) }
+    val contentColorTarget = when {
+        viewModel.states.value.isSimulationRunning -> MaterialTheme.colorScheme.onSecondary
+        viewModel.states.value.gameResult == GameOfLife.Companion.GameOfLifeResult.NoOneSurvived -> MaterialTheme.colorScheme.onError
+        viewModel.states.value.gameResult != null -> MaterialTheme.colorScheme.onPrimary
+        else -> MaterialTheme.colorScheme.onSurface
+    }
+    val contentColor by animateColorAsState(
+        targetValue = contentColorTarget,
+        label = "contentColor"
+    )
 
-    val isTopInsets = isWidth(sizeClass = WindowWidthSizeClass.Compact)
+    val title = when (viewModel.states.value.gameResult) {
+        GameOfLife.Companion.GameOfLifeResult.StableCombination -> stringResource(
+            id = R.string.stable_combination
+        )
 
-    val topInsets = if (isTopInsets) {
-        Modifier.topWindowInsetsPadding()
-    } else {
-        Modifier
+        GameOfLife.Companion.GameOfLifeResult.NoOneSurvived -> stringResource(id = R.string.no_one_survived)
+        else -> stringResource(id = R.string.GameOfLife)
     }
 
-    BackdropScaffold(
-        modifier = Modifier
-            .horizontalWindowInsetsPadding()
-            .onGloballyPositioned { coordinates ->
-                // Set screen height using the LayoutCoordinates
-                screenHeight = with(localDensity) { coordinates.size.height.toDp() }
-            },
-        scaffoldState = backdropScaffoldState,
-        frontLayerShape = RoundedCornerShape(
-            bottomStart = 0.dp,
-            bottomEnd = 0.dp,
-            topStart = frontCorner,
-            topEnd = frontCorner
-        ),
-        appBar = {
-            GameAppBar()
-        },
-        peekHeight = if (isTopInsets) topWindowInsetsPadding() + 64.dp else 64.dp,
-        persistentAppBar = false,
-        frontLayerScrimColor = Color.Unspecified,
-        frontLayerBackgroundColor = MaterialTheme.colorScheme.background,
-        backLayerBackgroundColor = MaterialTheme.colorScheme.surface,
-        backLayerContent = {
-            Box(
+    Column {
+        GameAppBar(title = title, color = contentColor, backgroundColor = containerColor)
+        Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+            GameContent(
                 modifier = Modifier
                     .clip(RoundedCornerShape(bottomEnd = 12.dp, bottomStart = 12.dp))
-                    .background(containerColor)
-                    .then(topInsets)
-                    .heightIn(max = maxGameHeight)
-            ) {
-                GameContent(viewModel = viewModel)
-            }
-        },
-        frontLayerContent = {
+                    .background(containerColor),
+                viewModel = viewModel
+            )
             GameActions(viewModel = viewModel)
-        })
+        }
+    }
 }