From 1593dd91b50fdaf0395511457f679009d7acf512 Mon Sep 17 00:00:00 2001 From: Alexandre G Pereira Date: Sat, 10 Feb 2024 19:05:20 -0300 Subject: [PATCH] Get monster icon color black/white by background color --- .../hunter/detail/ui/MonsterDetailScreen.kt | 2 ++ .../hunter/ui/compose/MonsterImage.kt | 18 ++++++++++++- .../hunter/ui/compose/MonsterTypeIcon.kt | 25 ++++++++++++++++--- 3 files changed, 41 insertions(+), 4 deletions(-) diff --git a/feature/monster-detail/android/src/main/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt b/feature/monster-detail/android/src/main/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt index f78bd79a..0ab0df4b 100644 --- a/feature/monster-detail/android/src/main/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt +++ b/feature/monster-detail/android/src/main/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt @@ -73,6 +73,7 @@ import br.alexandregpereira.hunter.ui.compose.AppBarIcon import br.alexandregpereira.hunter.ui.compose.ChallengeRatingCircle import br.alexandregpereira.hunter.ui.compose.MonsterTypeIcon import br.alexandregpereira.hunter.ui.compose.Window +import br.alexandregpereira.hunter.ui.compose.getTintColor import br.alexandregpereira.hunter.ui.transition.AlphaTransition import br.alexandregpereira.hunter.ui.transition.getPageOffset import br.alexandregpereira.hunter.ui.transition.getTransitionData @@ -385,6 +386,7 @@ private fun MonsterTypeIcon( MonsterTypeIcon( iconRes = data.imageState.type.iconRes, iconSize = 32.dp, + tint = data.imageState.backgroundColor.getColor(isSystemInDarkTheme()).getTintColor() ) } } diff --git a/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterImage.kt b/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterImage.kt index b9f59e8f..0b2d67ba 100644 --- a/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterImage.kt +++ b/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterImage.kt @@ -60,7 +60,11 @@ fun MonsterImage( fontSize = challengeRatingFontSize ) - MonsterTypeIcon(iconRes = iconRes, iconSize = iconSize) + MonsterTypeIcon( + iconRes = iconRes, + iconSize = iconSize, + tint = backgroundColor.getTintColor() + ) } } @@ -75,3 +79,15 @@ fun MonsterImagePreview() = HunterTheme { iconRes = R.drawable.ic_aberration ) } + +@Preview +@Composable +fun MonsterImageBlackBackgroundPreview() = HunterTheme { + MonsterImage( + url = "asdasdas", + backgroundColor = "#000000", + contentDescription = "Anything", + challengeRating = 18f, + iconRes = R.drawable.ic_aberration + ) +} diff --git a/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterTypeIcon.kt b/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterTypeIcon.kt index e8129aaa..c3fd2824 100644 --- a/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterTypeIcon.kt +++ b/ui/core/src/main/kotlin/br/alexandregpereira/hunter/ui/compose/MonsterTypeIcon.kt @@ -31,13 +31,16 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import br.alexandregpereira.hunter.ui.util.toColor +import kotlin.math.pow @Composable fun MonsterTypeIcon( @DrawableRes iconRes: Int, iconSize: Dp, modifier: Modifier = Modifier, - contentDescription: String = "" + contentDescription: String = "", + tint: Color = Color.Black, ) = Box( contentAlignment = Alignment.TopEnd, modifier = modifier @@ -47,9 +50,25 @@ fun MonsterTypeIcon( Icon( painter = painterResource(iconRes), contentDescription = contentDescription, - tint = Color.Black.copy(alpha = LocalContentAlpha.current), + tint = tint, modifier = Modifier .size(iconSize) .alpha(0.7f) ) -} \ No newline at end of file +} + +fun String.getTintColor(): Color { + val color = this.toColor() + val luminance = colorToLuminance(color.red, color.green, color.blue) + return if (luminance > 0.5) Color.Black else Color.White +} + +private fun colorToLuminance(red: Float, green: Float, blue: Float): Double { + // Adjust colors based on luminance + val rLum = if (red <= 0.03928f) red / 12.92f else ((red + 0.055f) / 1.055f).pow(2.4f) + val gLum = if (green <= 0.03928f) green / 12.92f else ((green + 0.055f) / 1.055f).pow(2.4f) + val bLum = if (blue <= 0.03928f) blue / 12.92f else ((blue + 0.055f) / 1.055f).pow(2.4f) + + // Apply the luminance formula + return (0.2126 * rLum + 0.7152 * gLum + 0.0722 * bLum).toDouble() +}