Added UI indicator for the current wave and turns for skill maker (#1730

)
Fate-Grand-Automata · Jan 6, 2024 · 45f3201 · 45f3201
1 parent 61dd899
commit 45f3201
Show file tree

Hide file tree

Showing 12 changed files with 174 additions and 61 deletions.
diff --git a/app/src/main/java/io/github/fate_grand_automata/ui/FGATitle.kt b/app/src/main/java/io/github/fate_grand_automata/ui/FGATitle.kt
@@ -8,10 +8,13 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 
 @Composable
-fun FGATitle(text: String) = Text(
+fun FGATitle(
+    text: String,
+    modifier: Modifier = Modifier,
+) = Text(
     text,
     textAlign = TextAlign.Center,
     color = MaterialTheme.colorScheme.onSurface,
-    modifier = Modifier
+    modifier = modifier
         .fillMaxWidth()
 )
diff --git a/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerActivity.kt b/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerActivity.kt
@@ -8,6 +8,7 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.animation.Crossfade
 import androidx.compose.animation.core.spring
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.res.stringResource
 import androidx.core.view.WindowCompat
 import dagger.hilt.android.AndroidEntryPoint
@@ -78,14 +79,19 @@ fun SkillMakerUI(
 
     val (current, navigate) = vm.navigation
 
+    val turn by vm.turn
+    val wave by vm.wave
+
     Crossfade(
         current,
         animationSpec = spring()
     ) { nav ->
         when (nav) {
             SkillMakerNav.Atk -> {
                 SkillMakerAtk(
-                    onNextWave = { vm.nextStage(it) },
+                    wave = wave,
+                    turn = turn,
+                    onNextWave = { vm.nextWave(it) },
                     onNextTurn = { vm.nextTurn(it) }
                 )
             }

diff --git a/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerAtk.kt b/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerAtk.kt
@@ -1,7 +1,9 @@
 package io.github.fate_grand_automata.ui.skill_maker
 
 import androidx.annotation.StringRes
+import androidx.compose.animation.animateColorAsState
 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
@@ -17,6 +19,7 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
@@ -36,52 +39,78 @@ import io.github.fate_grand_automata.ui.icon
 
 @Composable
 private fun SelectNps(
+    numberOfCardsSelected: Int,
     npSequence: String,
     onNpSequenceChange: (String) -> Unit,
     modifier: Modifier = Modifier
 ) {
+    val numberOfNPs = (1..3).count { it.toString() in npSequence }
+
     Row(
         horizontalArrangement = Arrangement.Center,
         verticalAlignment = Alignment.CenterVertically,
         modifier = modifier
     ) {
-        (1..3).map {
-            val isSelected = it.toString() in npSequence
+        (1..3).map { servantNumber ->
+            val isSelected = servantNumber.toString() in npSequence
+
+            val canSelect = numberOfCardsSelected + numberOfNPs + 1 <= 3
 
-            val selectedColor = when (it) {
+            val selectedColor = when (servantNumber) {
                 1 -> R.color.colorServant1
                 2 -> R.color.colorServant2
                 3 -> R.color.colorServant3
                 else -> R.color.colorAccent
             }
 
-            val onClick = {
-                onNpSequenceChange(
-                    if (isSelected)
-                        npSequence.filter { m -> m.toString() != it.toString() }
-                    else npSequence + it
-                )
-            }
+            val animatedColorState by animateColorAsState(
+                targetValue = when {
+                    isSelected -> colorResource(selectedColor)
+                    !canSelect -> MaterialTheme.colorScheme.surfaceVariant.copy(0.3f)
+                    else -> MaterialTheme.colorScheme.surfaceVariant
+                },
+                label = "Add animation to the changing of color"
+            )
 
             Surface(
                 tonalElevation = 5.dp,
                 shape = MaterialTheme.shapes.medium,
-                color =
-                if (isSelected)
-                    colorResource(selectedColor)
-                else MaterialTheme.colorScheme.surfaceVariant,
+                color = animatedColorState,
                 modifier = Modifier
                     .padding(5.dp),
-                onClick = onClick
+                onClick = {
+                    val newNpSequence = when {
+                        canSelect -> {
+                            if (isSelected) {
+                                npSequence.filter { m -> m.toString() != servantNumber.toString() }
+                            } else {
+                                npSequence + servantNumber
+                            }
+                        }
+
+                        isSelected -> {
+                            npSequence.filter { m -> m.toString() != servantNumber.toString() }
+                        }
+
+                        else -> {
+                            npSequence.dropLast(1) + servantNumber
+                        }
+                    }
+                    onNpSequenceChange(newNpSequence)
+
+
+                }
             ) {
                 Text(
-                    stringResource(R.string.skill_maker_atk_servant_np, it),
+                    stringResource(R.string.skill_maker_atk_servant_np, servantNumber),
                     textAlign = TextAlign.Center,
                     modifier = Modifier.padding(16.dp),
-                    color =
-                    if (isSelected)
-                        Color.White
-                    else Color.Unspecified
+                    color = when {
+                        isSelected -> Color.White
+                        !canSelect -> Color.Unspecified.copy(alpha = 0.3f)
+                        else -> Color.Unspecified
+                    }
+
                 )
             }
         }
@@ -90,36 +119,54 @@ private fun SelectNps(
 
 @Composable
 private fun CardsBeforeNp(
+    modifier: Modifier = Modifier,
+    numberOfNpSelected: Int,
     cardsBeforeNp: Int,
     onCardsBeforeNpChange: (Int) -> Unit
 ) {
-    Column {
+    Column(
+        modifier = modifier
+    ) {
         Text(stringResource(R.string.skill_maker_atk_cards_before_np))
 
         Row {
-            (0..2).map {
-                val isSelected = cardsBeforeNp == it
+            (0..2).map { cardNumber ->
+                val isSelected = cardsBeforeNp == cardNumber
+
+                val canSelect = numberOfNpSelected + cardNumber <= 3
+
+                val animatedColorState by animateColorAsState(
+                    targetValue = when {
+                        isSelected -> colorResource(R.color.colorAccent)
+                        !canSelect -> MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.3f)
+                        else -> MaterialTheme.colorScheme.surfaceVariant
+                    },
+                    label = "Add animation to the changing of color"
+                )
 
                 Surface(
                     tonalElevation = 5.dp,
                     shape = MaterialTheme.shapes.medium,
-                    color =
-                    if (isSelected)
-                        colorResource(R.color.colorAccent)
-                    else MaterialTheme.colorScheme.surfaceVariant,
+                    color = animatedColorState,
                     modifier = Modifier
                         .padding(5.dp),
-                    onClick = { onCardsBeforeNpChange(it) }
+                    enabled = canSelect,
+                    onClick = {
+                        if (canSelect) {
+                            onCardsBeforeNpChange(cardNumber)
+                        }
+                    }
                 ) {
                     Text(
-                        it.toString(),
+                        cardNumber.toString(),
                         textAlign = TextAlign.Center,
                         modifier = Modifier
                             .padding(16.dp, 10.dp),
-                        color =
-                        if (isSelected)
-                            Color.White
-                        else Color.Unspecified
+                        color = when {
+                            isSelected -> Color.White
+                            !canSelect -> Color.Unspecified.copy(alpha = 0.3f)
+                            else -> Color.Unspecified
+                        }
                     )
                 }
             }
@@ -129,6 +176,8 @@ private fun CardsBeforeNp(
 
 @Composable
 fun SkillMakerAtk(
+    wave: Int,
+    turn: Int,
     onNextWave: (AutoSkillAction.Atk) -> Unit,
     onNextTurn: (AutoSkillAction.Atk) -> Unit
 ) {
@@ -137,34 +186,62 @@ fun SkillMakerAtk(
             .fillMaxHeight()
             .padding(16.dp)
     ) {
-        FGATitle(
-            stringResource(R.string.skill_maker_atk_header)
-        )
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+        ) {
+            FGATitle(
+                stringResource(R.string.skill_maker_atk_header),
+                modifier = Modifier.align(Alignment.Center)
+            )
+            Column(
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally,
+                modifier = Modifier.align(Alignment.CenterEnd)
+            ) {
+                Text(stringResource(R.string.skill_maker_main_wave, wave))
+
+                Text(stringResource(R.string.skill_maker_main_turn, turn))
+            }
+        }
 
         var npSequence by rememberSaveable { mutableStateOf("") }
+        var cardsBeforeNp by rememberSaveable { mutableIntStateOf(0) }
+
+        var numberOfNPs by rememberSaveable { mutableIntStateOf(0) }
 
         SelectNps(
+            numberOfCardsSelected = cardsBeforeNp,
             npSequence = npSequence,
-            onNpSequenceChange = { npSequence = it },
+            onNpSequenceChange = { NPs ->
+                npSequence = NPs
+                numberOfNPs = (1..3).count { it.toString() in npSequence }
+            },
             modifier = Modifier
                 .weight(1f)
                 .fillMaxWidth()
         )
 
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.SpaceBetween,
+        Box(
+            contentAlignment = Alignment.Center,
             modifier = Modifier
                 .fillMaxWidth()
         ) {
-            var cardsBeforeNp by rememberSaveable { mutableStateOf(0) }
+
 
             CardsBeforeNp(
+                modifier = Modifier.align(Alignment.CenterStart),
+                numberOfNpSelected = numberOfNPs,
                 cardsBeforeNp = cardsBeforeNp,
                 onCardsBeforeNpChange = { cardsBeforeNp = it }
             )
 
-            Row {
+
+            Row(
+                modifier = Modifier.align(Alignment.CenterEnd),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
                 Button(
                     onClick = { onNextTurn(makeAtkAction(npSequence, cardsBeforeNp)) },
                     modifier = Modifier

diff --git a/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerMain.kt b/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerMain.kt
@@ -70,8 +70,16 @@ fun SkillMakerMain(
                 onSelectedChange = { vm.setEnemyTarget(it) }
             )
 
-            val stage by vm.stage
-            Text(stringResource(R.string.skill_maker_main_battle, stage))
+            Column(
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                val wave by vm.wave
+                Text(stringResource(R.string.skill_maker_main_wave, wave))
+
+                val turn by vm.turn
+                Text(stringResource(R.string.skill_maker_main_turn, turn))
+            }
         }
 
         SkillHistory(vm)

diff --git a/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerSavedState.kt b/app/src/main/java/io/github/fate_grand_automata/ui/skill_maker/SkillMakerSavedState.kt
@@ -7,7 +7,8 @@ import kotlinx.parcelize.Parcelize
 data class SkillMakerSavedState(
     val skillString: String? = null,
     val enemyTarget: Int? = null,
-    val stage: Int = 1,
+    val wave: Int = 1,
+    val turn: Int = 1,
     val currentSkill: Char = '0',
     val currentIndex: Int = 0
 ) : Parcelable