Migrate ReflexGame UI to Compose and StateFlow

app/build.gradle.kts

@@ -1,5 +1,6 @@
 plugins {
     alias(libs.plugins.android.application)
+    alias(libs.plugins.kotlin.compose)
 }
 
 android {
@@ -16,7 +17,7 @@ android {
     }
 
     buildFeatures {
-        viewBinding = true
+        compose = true
     }
 
     buildTypes {
@@ -44,15 +45,17 @@ kotlin {
     }
 }
 
-
 dependencies {
-    // UI
     implementation(libs.androidx.core.ktx)
-    implementation(libs.androidx.appcompat)
-    implementation(libs.androidx.constraintlayout)
-    implementation(libs.androidx.recyclerview)
-    implementation(libs.androidx.fragment.ktx)
+    implementation(libs.androidx.activity.compose)
     implementation(libs.androidx.lifecycle.viewmodel.ktx)
-    implementation(libs.androidx.lifecycle.livedata.ktx)
+    implementation(libs.androidx.lifecycle.runtime.compose)
+    implementation(platform(libs.androidx.compose.bom))
+    implementation(libs.androidx.compose.ui)
+    implementation(libs.androidx.compose.ui.tooling.preview)
+    implementation(libs.androidx.compose.material3)
     implementation(libs.google.material)
+
+    debugImplementation(platform(libs.androidx.compose.bom))
+    debugImplementation(libs.androidx.compose.ui.tooling)
 }

app/src/main/kotlin/com/juandiana/reflexgame/ui/MainActivity.kt

@@ -1,86 +1,26 @@
 package com.juandiana.reflexgame.ui
 
 import android.os.Bundle
-import android.view.MotionEvent
-import android.view.View
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
 import androidx.activity.viewModels
-import androidx.appcompat.app.AppCompatActivity
-import androidx.recyclerview.widget.GridLayoutManager
-import androidx.recyclerview.widget.RecyclerView
 import com.juandiana.reflexgame.app.ReflexGameApp
-import com.juandiana.reflexgame.databinding.ActivityMainBinding
-import com.juandiana.reflexgame.ui.model.MainUiState
+import com.juandiana.reflexgame.ui.theme.ReflexGameTheme
 
-class MainActivity : AppCompatActivity() {
+class MainActivity : ComponentActivity() {
     private val viewModel by viewModels<MainViewModel> {
         MainViewModelFactory(
             ReflexGameApp.instance.resourcesProvider,
             ReflexGameApp.instance.gameEngine
         )
     }
-    private lateinit var binding: ActivityMainBinding
-    private lateinit var squaresAdapter: SquaresAdapter
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        binding = ActivityMainBinding.inflate(layoutInflater)
-        setContentView(binding.root)
-        squaresAdapter = SquaresAdapter()
-        binding.squaresGrid.apply {
-            adapter = squaresAdapter
-            layoutManager = object : GridLayoutManager(this@MainActivity, viewModel.columnCount) {
-                override fun canScrollVertically(): Boolean {
-                    return false
-                }
+        setContent {
+            ReflexGameTheme {
+                MainScreenRoute(viewModel = viewModel)
             }
-            itemAnimator = null
-            addOnItemTouchListener(onItemTouchListener)
-        }
-        binding.button.setOnClickListener { viewModel.onButtonClicked() }
-        viewModel.uiState.observe(this, this::observeUiState)
-    }
-
-    private fun observeUiState(uiState: MainUiState) {
-        with(binding) {
-            titleText.visibility = if (uiState.showTitle) View.VISIBLE else View.INVISIBLE
-            scoreValue.text = uiState.scoreText
-            button.text = uiState.buttonText
-            if (uiState.chronometerIsRunning) {
-                binding.elapsedTimeValue.base = uiState.chronometerStartTime
-                binding.elapsedTimeValue.start()
-            } else {
-                binding.elapsedTimeValue.stop()
-            }
-        }
-        squaresAdapter.submitList(uiState.squares)
-    }
-
-    private val onItemTouchListener = object : RecyclerView.OnItemTouchListener {
-        override fun onInterceptTouchEvent(rv: RecyclerView, e: MotionEvent): Boolean {
-            return true
-        }
-
-        override fun onTouchEvent(recyclerView: RecyclerView, motionEvent: MotionEvent) {
-            when (motionEvent.actionMasked) {
-                MotionEvent.ACTION_DOWN -> {
-                    val itemView = recyclerView.findChildViewUnder(motionEvent.x, motionEvent.y)
-                    if (itemView != null) {
-                        val itemPosition = recyclerView.getChildAdapterPosition(itemView)
-                        viewModel.onSquareTapped(index = itemPosition)
-                    }
-                }
-                MotionEvent.ACTION_POINTER_DOWN -> {
-                    val itemView = recyclerView.findChildViewUnder(motionEvent.getX(motionEvent.actionIndex), motionEvent.getY(motionEvent.actionIndex))
-                    if (itemView != null) {
-                        val itemPosition = recyclerView.getChildAdapterPosition(itemView)
-                        viewModel.onSquareTapped(index = itemPosition)
-                    }
-                }
-            }
-        }
-
-        override fun onRequestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {
-            // Do nothing
         }
     }
 }

app/src/main/kotlin/com/juandiana/reflexgame/ui/MainScreen.kt

@@ -0,0 +1,227 @@
+package com.juandiana.reflexgame.ui
+
+import androidx.compose.foundation.background
+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.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.PointerEventPass
+import androidx.compose.ui.input.pointer.changedToDownIgnoreConsumed
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.juandiana.reflexgame.R
+import com.juandiana.reflexgame.ui.theme.ReflexGameTheme
+import com.juandiana.reflexgame.ui.theme.spacing
+import java.util.Locale
+
+@Composable
+fun MainScreenRoute(viewModel: MainViewModel) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    MainScreen(
+        showTitle = uiState.showTitle,
+        squares = uiState.squares,
+        scoreText = uiState.scoreText,
+        buttonText = uiState.buttonText,
+        elapsedTimeText = uiState.elapsedTimeText,
+        columnCount = viewModel.columnCount,
+        onSquareTouched = viewModel::onSquareTouched,
+        onButtonClicked = viewModel::onButtonClicked
+    )
+}
+
+@Composable
+fun MainScreen(
+    showTitle: Boolean,
+    squares: List<SquareState>,
+    scoreText: String,
+    buttonText: String,
+    elapsedTimeText: String,
+    columnCount: Int,
+    onSquareTouched: (Int) -> Unit,
+    onButtonClicked: () -> Unit
+) {
+    Surface(modifier = Modifier.fillMaxSize()) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(MaterialTheme.spacing.medium)
+        ) {
+            Text(
+                modifier = Modifier
+                    .align(Alignment.CenterHorizontally)
+                    .alpha(if (showTitle) 1f else 0f),
+                text = stringResource(id = R.string.game_over).uppercase(Locale.getDefault()),
+                style = MaterialTheme.typography.displayLarge
+            )
+            Spacer(modifier = Modifier.height(MaterialTheme.spacing.medium))
+            SquaresGrid(
+                modifier = Modifier.fillMaxWidth(),
+                squares = squares,
+                columnCount = columnCount,
+                onSquareTouched = onSquareTouched
+            )
+            Spacer(modifier = Modifier.height(MaterialTheme.spacing.medium))
+            HeadsUpDisplay(
+                modifier = Modifier.fillMaxWidth(),
+                scoreText = scoreText,
+                elapsedTimeText = elapsedTimeText
+            )
+            Spacer(modifier = Modifier.height(MaterialTheme.spacing.medium))
+            Button(
+                onClick = onButtonClicked,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text(
+                    text = buttonText,
+                    fontWeight = FontWeight.Bold
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun SquaresGrid(
+    squares: List<SquareState>,
+    columnCount: Int,
+    onSquareTouched: (Int) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier
+            .background(Color.Black)
+            .padding(MaterialTheme.spacing.border)
+    ) {
+        squares.chunked(columnCount).forEachIndexed { rowIndex, rowSquares ->
+            Row(modifier = Modifier.fillMaxWidth()) {
+                rowSquares.forEachIndexed { columnIndex, squareState ->
+                    val index = rowIndex * columnCount + columnIndex
+                    SquareItem(
+                        modifier = Modifier.weight(1f),
+                        squareState = squareState,
+                        onSquareTouched = { onSquareTouched(index) }
+                    )
+                }
+                repeat(columnCount - rowSquares.size) {
+                    Spacer(
+                        modifier = Modifier
+                            .weight(1f)
+                            .aspectRatio(1f)
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun HeadsUpDisplay(
+    scoreText: String,
+    elapsedTimeText: String,
+    modifier: Modifier
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = stringResource(id = R.string.score),
+            fontWeight = FontWeight.Bold
+        )
+        Spacer(modifier = Modifier.width(MaterialTheme.spacing.small))
+        Text(
+            modifier = Modifier.weight(1f),
+            text = scoreText
+        )
+        Text(
+            text = stringResource(id = R.string.time),
+            fontWeight = FontWeight.Bold
+        )
+        Spacer(modifier = Modifier.width(MaterialTheme.spacing.small))
+        Text(text = elapsedTimeText)
+    }
+}
+
+@Composable
+private fun SquareItem(
+    squareState: SquareState,
+    onSquareTouched: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val border = MaterialTheme.spacing.border
+    val color = when (squareState) {
+        SquareState.CLEAR -> Color.White
+        SquareState.FLASHED -> Color.Blue
+        SquareState.TAPPED_SUCCESSFULLY -> Color.Green
+        SquareState.TAPPED_ERRONEOUSLY -> Color.Red
+    }
+    Box(
+        modifier = modifier
+            .aspectRatio(1f)
+            .padding(border)
+            .background(color)
+            .pointerInput(onSquareTouched) {
+                awaitPointerEventScope {
+                    while (true) {
+                        val event = awaitPointerEvent(pass = PointerEventPass.Initial)
+                        if (event.changes.any { it.changedToDownIgnoreConsumed() }) {
+                            onSquareTouched()
+                        }
+                    }
+                }
+            }
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun MainScreenPreview() {
+    ReflexGameTheme {
+        MainScreen(
+            showTitle = false,
+            squares = listOf(
+                SquareState.CLEAR,
+                SquareState.FLASHED,
+                SquareState.CLEAR,
+                SquareState.TAPPED_SUCCESSFULLY,
+                SquareState.CLEAR,
+                SquareState.CLEAR,
+                SquareState.TAPPED_ERRONEOUSLY,
+                SquareState.CLEAR,
+                SquareState.FLASHED,
+                SquareState.CLEAR,
+                SquareState.CLEAR,
+                SquareState.CLEAR,
+                SquareState.CLEAR,
+                SquareState.CLEAR,
+                SquareState.FLASHED,
+                SquareState.CLEAR
+            ),
+            scoreText = "8",
+            buttonText = "Stop",
+            elapsedTimeText = "00:12",
+            columnCount = 4,
+            onSquareTouched = {},
+            onButtonClicked = {}
+        )
+    }
+}

app/src/main/kotlin/com/juandiana/reflexgame/ui/MainScreenState.kt

@@ -0,0 +1,16 @@
+package com.juandiana.reflexgame.ui
+
+enum class SquareState {
+    CLEAR,
+    FLASHED,
+    TAPPED_SUCCESSFULLY,
+    TAPPED_ERRONEOUSLY
+}
+
+data class MainScreenState(
+    val showTitle: Boolean,
+    val squares: List<SquareState>,
+    val scoreText: String,
+    val buttonText: String,
+    val elapsedTimeText: String
+)