add sliding transitions when navigating between screens

Author: rohit9625

app/src/main/java/com/devx/tictacpro/MainActivity.kt

@@ -6,6 +6,10 @@ import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionLayout
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInHorizontally
+import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
@@ -56,7 +60,14 @@ fun TicTacProNav(
 
     SharedTransitionLayout {
         NavHost(navController = navController, startDestination = startDest) {
-            composable<Route.AuthScreen> {
+            composable<Route.AuthScreen>(
+                enterTransition = {
+                    slideInHorizontally(initialOffsetX = { it })
+                },
+                exitTransition = {
+                    slideOutHorizontally(targetOffsetX = { -it })
+                }
+            ) {
                 val viewModel = viewModel<AuthViewModel> {
                     AuthViewModel(
                         TicTacProApp.appModule.userPrefs,
@@ -74,7 +85,7 @@ fun TicTacProNav(
                 )
             }
 
-            composable<Route.HomeScreen> {
+            composable<Route.HomeScreen>{
                 val viewModel = viewModel<HomeViewModel>{
                     HomeViewModel(
                         TicTacProApp.appModule.userPrefs,
@@ -126,7 +137,15 @@ fun TicTacProNav(
                 )
             }
 
-            composable<Route.Game>(typeMap = mapOf(typeOf<Player?>() to PlayerNavType)) {
+            composable<Route.Game>(
+                typeMap = mapOf(typeOf<Player?>() to PlayerNavType),
+                enterTransition = {
+                    slideInHorizontally(initialOffsetX = { it })
+                },
+                exitTransition = {
+                    slideOutHorizontally(targetOffsetX = { it })
+                }
+            ) {
                 val args = it.toRoute<Route.Game>()
                 val viewModel = viewModel<GameViewModel> {
                     GameViewModel(
@@ -141,6 +160,7 @@ fun TicTacProNav(
                     gameState = gameState,
                     onEvent = viewModel::onEvent,
                     onNavigateBack = { navController.navigateUp() },
+                    isOnlineGame = args.isOnlineGame,
                     myTurn = args.myTurn
                 )
             }

app/src/main/java/com/devx/tictacpro/presentation/game/GameScreen.kt

@@ -69,6 +69,7 @@ import kotlinx.coroutines.delay
 @Composable
 fun GameScreen(
     gameState: GameState,
+    isOnlineGame: Boolean,
     onEvent: (GameEvent)-> Unit,
     onNavigateBack: ()-> Unit = {},
     myTurn: String? = null
@@ -195,18 +196,20 @@ fun GameScreen(
                 }
             }
 
-            TicTacToeField(
-                state = gameState,
-                onTap = { pos->
-                    if(gameState.winner == null) {
-                        myTurn?.let {
-                            if(it == gameState.playerAtTurn) onEvent(GameEvent.UpdateGame(pos))
-                        } ?: onEvent(GameEvent.UpdateGame(pos))
-                    }
-                },
-                modifier = Modifier
-                    .padding(32.dp)
-            )
+            if((isOnlineGame && gameState.gameCode == null) || !isOnlineGame) {
+                TicTacToeField(
+                    state = gameState,
+                    onTap = { pos->
+                        if(gameState.winner == null) {
+                            myTurn?.let {
+                                if(it == gameState.playerAtTurn) onEvent(GameEvent.UpdateGame(pos))
+                            } ?: onEvent(GameEvent.UpdateGame(pos))
+                        }
+                    },
+                    modifier = Modifier
+                        .padding(32.dp)
+                )
+            }
 
             Button(
                 onClick = { onEvent(GameEvent.ResetGame) },
@@ -434,6 +437,7 @@ fun GameBoard(
 ) {
     val lineLength = remember { Animatable(0f) }
     LaunchedEffect(key1 = Unit) {
+        delay(300)
         lineLength.animateTo(targetValue = 1f, animationSpec = tween(animationDuration))
     }
     Canvas(modifier = modifier) {
@@ -549,6 +553,7 @@ private fun GameScreenPreview() {
                     avatar = R.drawable.boy_avatar_2
                 )
             ),
+            isOnlineGame = false,
             onEvent = {}
         )
     }