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 index 5eda0a20..401e15d5 100644 --- 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 index c4685744..0f0f81ed 100644 --- 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 index bc001047..33824daf 100644 --- 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 index 7a52fddd..90fabcf8 100644 --- 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/ui/monster-compendium/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/monster/MonterCompendium.kt b/ui/monster-compendium/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/monster/MonterCompendium.kt index 4c21bf05..f3235f03 100644 --- a/ui/monster-compendium/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/monster/MonterCompendium.kt +++ b/ui/monster-compendium/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compendium/monster/MonterCompendium.kt @@ -18,11 +18,9 @@ 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 @@ -30,7 +28,9 @@ 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 &&