Get monster icon color black/white by background color

alexandregpereira · Feb 10, 2024 · 1593dd9 · 1593dd9
1 parent 936de1e
commit 1593dd9
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/...tail/android/src/main/kotlin/br/alexandregpereira/hunter/detail/ui/MonsterDetailScreen.kt b/...tail/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
@@ -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
@@ -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)
     )
-}
+}
+
+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()
+}