Change monster compendium section titles layout (#317)

* Change monster compendium section titles layout * Add padding to title card
alexandregpereira · Aug 14, 2024 · d784799 · d784799
1 parent 1af970d
commit d784799
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 36 deletions.
diff --git a/ui/compendium/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/Compendium.kt b/ui/compendium/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/Compendium.kt
@@ -24,16 +24,22 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridItemScope
-import androidx.compose.foundation.lazy.grid.LazyGridItemSpanScope
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.material.Card
+import androidx.compose.material.MaterialTheme.colors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import br.alexandregpereira.hunter.ui.compose.SectionTitle
+import br.alexandregpereira.hunter.ui.compose.imageCardElevation
+import br.alexandregpereira.hunter.ui.compose.imageCardShape
+import br.alexandregpereira.hunter.ui.compose.monsterAspectRatio
 
 @Composable
 fun Compendium(
@@ -45,7 +51,7 @@ fun Compendium(
     contentPadding: PaddingValues = PaddingValues(0.dp),
     key: (CompendiumItemState.Item) -> Any? = { null },
     isHorizontalCard: (CompendiumItemState.Item) -> Boolean = { false },
-    titleLineSpan: LazyGridItemSpanScope.() -> Int? = { null },
+    isHorizontalReading: Boolean = false,
     cardContent: @Composable (CompendiumItemState.Item) -> Unit,
 ) = LazyVerticalGrid(
     columns = columns.toGridCells(),
@@ -60,38 +66,59 @@ fun Compendium(
         space = 16.dp,
         alignment = Alignment.CenterHorizontally
     ),
+    verticalArrangement = Arrangement.spacedBy(
+        space = 16.dp,
+        alignment = Alignment.CenterVertically
+    ),
     modifier = modifier,
 ) {
     items.forEachIndexed { index, item ->
-        val sectionTitlePaddingTop = 32.dp
-        val sectionTitlePaddingBottom = 16.dp
-
+        val isTileCard = index > 0 && isHorizontalReading
         when (item) {
             is CompendiumItemState.Title -> {
                 item(
                     key = item.id,
                     span = {
                         val lineSpan = when {
-                            index == 0 -> maxLineSpan
-                            else -> titleLineSpan()
+                            isTileCard -> 1
+                            else -> maxLineSpan
                         }
-                        GridItemSpan(currentLineSpan = lineSpan ?: maxLineSpan)
+                        GridItemSpan(currentLineSpan = lineSpan)
                     }
                 ) {
+                    val sectionTitlePaddingTop = 32.dp
+                    val sectionTitlePaddingBottom = if (isTileCard) 0.dp else 16.dp
                     val paddingTop = when {
+                        isTileCard -> 0.dp
                         item.isHeader -> sectionTitlePaddingTop
                         else -> 24.dp
                     }
-                    SectionTitle(
-                        title = item.value,
-                        isHeader = item.isHeader,
-                        modifier = Modifier
-                            .animateItems(this, animateItems)
-                            .padding(
-                                top = paddingTop,
-                                bottom = sectionTitlePaddingBottom
+                    val titleModifier = Modifier.monsterAspectRatio().takeIf { isTileCard }
+                        ?: Modifier
+                    Card(
+                        shape = imageCardShape,
+                        elevation = imageCardElevation.takeIf { isTileCard } ?: 0.dp,
+                        backgroundColor = colors.surface.takeIf { isTileCard }
+                            ?: Color.Transparent,
+                        modifier = titleModifier.animateItems(this, animateItems)
+                    ) {
+                        Box(
+                            contentAlignment = Alignment.Center.takeIf { isTileCard }
+                                ?: Alignment.CenterStart,
+                        ) {
+                            SectionTitle(
+                                title = item.value,
+                                isHeader = item.isHeader,
+                                textAlign = TextAlign.Center.takeIf { isTileCard },
+                                modifier = Modifier
+                                    .padding(
+                                        top = paddingTop,
+                                        bottom = sectionTitlePaddingBottom
+                                    )
+                                    .padding(horizontal = 16.dp.takeIf { isTileCard } ?: 0.dp)
                             )
-                    )
+                        }
+                    }
                 }
             }
 
@@ -104,9 +131,7 @@ fun Compendium(
                     }
                 ) {
                     Box(
-                        modifier = Modifier
-                            .animateItems(this, animateItems)
-                            .padding(vertical = 8.dp),
+                        modifier = Modifier.animateItems(this, animateItems)
                     ) {
                         cardContent(item)
                     }

diff --git a/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterCard.kt b/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterCard.kt
@@ -76,13 +76,13 @@ fun ImageCard(
     onLongCLick: () -> Unit = {},
     content: @Composable () -> Unit,
 ) {
-    val shape = Shapes.large
+    val shape = imageCardShape
     val alpha = 0.7f
     val borderColor = MaterialTheme.colors.surface
     Card(
         backgroundColor = Color.Transparent,
         contentColor = MaterialTheme.colors.onSurface,
-        elevation = 2.dp,
+        elevation = imageCardElevation,
         shape = shape,
         modifier = modifier.animatePressed(
             onClick = onCLick,
@@ -119,6 +119,9 @@ fun ImageCard(
     }
 }
 
+val imageCardShape = Shapes.large
+val imageCardElevation = 2.dp
+
 @Preview
 @Composable
 private fun MonsterCardPreview() {

diff --git a/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/ScreenSize.kt b/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/ScreenSize.kt
@@ -16,7 +16,7 @@ data class ScreenSizeInfo(
     val heightInDp: Dp,
     val widthInDp: Dp,
 ) {
-    private val heightSizeType: ScreenWidthOrHeightSizeType = when {
+    internal val heightSizeType: ScreenWidthOrHeightSizeType = when {
         heightInDp < 480.dp -> Compact
         heightInDp < 900.dp -> Medium
         else -> Expanded
@@ -41,7 +41,7 @@ enum class ScreenSizeType {
     LandscapeExpanded,
 }
 
-private enum class ScreenWidthOrHeightSizeType {
+internal enum class ScreenWidthOrHeightSizeType {
     Compact,
     Medium,
     Expanded,
@@ -53,5 +53,11 @@ val ScreenSizeInfo.isLandscape: Boolean
         ScreenSizeType.Portrait -> false
     }
 
+val ScreenSizeInfo.isHeightExpanded: Boolean
+    get() = when (heightSizeType) {
+        Expanded -> true
+        Medium, Compact -> false
+    }
+
 @Composable
 expect fun getPlatformScreenSizeInfo(): ScreenSizeInfo
diff --git a/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/SectionTitle.kt b/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/SectionTitle.kt
@@ -21,19 +21,22 @@ import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.sp
 
 @Composable
 fun SectionTitle(
     title: String,
     isHeader: Boolean,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    textAlign: TextAlign? = null,
 ) {
     val fontSize = if (isHeader) 40.sp else 24.sp
     Text(
         text = title,
         fontWeight = FontWeight.Bold,
         fontSize = fontSize,
+        textAlign = textAlign,
         modifier = modifier.fillMaxWidth()
     )
 }
diff --git a/...c/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/monster/MonterCompendium.kt b/...c/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/monster/MonterCompendium.kt
@@ -18,19 +18,19 @@ package br.alexandregpereira.hunter.ui.compendium.monster
 
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.lazy.grid.LazyGridItemSpanScope
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import br.alexandregpereira.hunter.ui.compendium.Compendium
 import br.alexandregpereira.hunter.ui.compendium.CompendiumColumns
 import br.alexandregpereira.hunter.ui.compendium.CompendiumItemState
 import br.alexandregpereira.hunter.ui.compose.LocalScreenSize
 import br.alexandregpereira.hunter.ui.compose.MonsterCard
+import br.alexandregpereira.hunter.ui.compose.ScreenSizeType
 import br.alexandregpereira.hunter.ui.compose.Window
+import br.alexandregpereira.hunter.ui.compose.isHeightExpanded
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 @Composable
@@ -45,14 +45,13 @@ fun MonsterCompendium(
 ) {
     val screenSizes = LocalScreenSize.current
     val currentWidth = screenSizes.widthInDp
-    val cardWidth = 148
-    val titleLineSpan: LazyGridItemSpanScope.() -> Int = remember(screenSizes.type) {
-        {
-            when {
-                maxLineSpan > 2 -> 1
-                else -> maxLineSpan
-            }
-        }
+    val defaultCardWidth = 148
+    val cardWidth = when (screenSizes.type) {
+        ScreenSizeType.LandscapeExpanded -> if (screenSizes.isHeightExpanded) {
+            180
+        } else defaultCardWidth
+        ScreenSizeType.Portrait,
+        ScreenSizeType.LandscapeCompact -> defaultCardWidth
     }
     Compendium(
         items = items,
@@ -61,7 +60,7 @@ fun MonsterCompendium(
         listState = listState,
         contentPadding = contentPadding,
         columns = CompendiumColumns.Adaptive(cardWidth),
-        titleLineSpan = titleLineSpan,
+        isHorizontalReading = true,
         key = { it.getMonsterCardState().index },
         isHorizontalCard = {
             it.getMonsterCardState().imageState.isHorizontal &&