Add currency tooltip in chat / character inventory.

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/character/purse/PurseDialog.kt

@@ -40,10 +40,8 @@ import androidx.compose.ui.input.key.Key
 import androidx.compose.ui.input.key.KeyEventType
 import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.type
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.Dialog
 import com.pixelized.desktop.lwa.ui.composable.character.LwaDialog
 import com.pixelized.desktop.lwa.ui.composable.decoratedBox.DecoratedBox
 import com.pixelized.desktop.lwa.ui.composable.key.KeyHandler

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/currency/Currency.kt

@@ -0,0 +1,125 @@
+package com.pixelized.desktop.lwa.ui.composable.currency
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.TooltipPlacement
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import com.pixelized.desktop.lwa.ui.composable.tooltip.TooltipDefault
+import com.pixelized.desktop.lwa.ui.composable.tooltip.TooltipLayout
+import com.pixelized.desktop.lwa.ui.theme.lwa
+import lwacharactersheet.composeapp.generated.resources.Res
+import lwacharactersheet.composeapp.generated.resources.generic__copper__singular
+import lwacharactersheet.composeapp.generated.resources.generic__gold__singular
+import lwacharactersheet.composeapp.generated.resources.generic__silver__singular
+import lwacharactersheet.composeapp.generated.resources.ic_copper_32px
+import lwacharactersheet.composeapp.generated.resources.ic_gold_32px
+import lwacharactersheet.composeapp.generated.resources.ic_silver_32px
+import org.jetbrains.compose.resources.DrawableResource
+import org.jetbrains.compose.resources.StringResource
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.resources.stringResource
+
+@Stable
+sealed class CurrencyUio(
+    val icon: DrawableResource,
+    val tooltip: StringResource,
+) {
+    @Stable
+    data object Gold : CurrencyUio(
+        icon = Res.drawable.ic_gold_32px,
+        tooltip = Res.string.generic__gold__singular,
+    )
+
+    @Stable
+    data object Silver : CurrencyUio(
+        icon = Res.drawable.ic_silver_32px,
+        tooltip = Res.string.generic__silver__singular,
+    )
+
+    @Stable
+    data object Copper : CurrencyUio(
+        icon = Res.drawable.ic_copper_32px,
+        tooltip = Res.string.generic__copper__singular,
+    )
+}
+
+@Stable
+object CurrencyDefault {
+    @Stable
+    val size = DpSize(width = 16.dp, height = 16.dp)
+
+    @Stable
+    val padding = PaddingValues(bottom = 2.dp)
+
+    @Stable
+    val brush = Color(0xFF121212).let { color ->
+        Brush.horizontalGradient(
+            listOf(
+                color.copy(alpha = 0f),
+                color,
+                color,
+                color.copy(alpha = 0f),
+            )
+        )
+    }
+
+    @OptIn(ExperimentalFoundationApi::class)
+    @Stable
+    val placement = TooltipPlacement.ComponentRect(
+        anchor = Alignment.Center,
+        alignment = Alignment.BottomEnd,
+    )
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun Currency(
+    modifier: Modifier = Modifier,
+    paddings: PaddingValues = CurrencyDefault.padding,
+    tooltipPlacement: TooltipPlacement = CurrencyDefault.placement,
+    size: DpSize = CurrencyDefault.size,
+    currency: CurrencyUio,
+) {
+    TooltipLayout(
+        modifier = modifier,
+        tooltipPlacement = tooltipPlacement,
+        delayMillis = 0,
+        tips = currency.tooltip,
+        tooltip = {
+            Box(
+                modifier = Modifier
+                    .background(brush = CurrencyDefault.brush)
+                    .padding(horizontal = 8.dp, vertical = 4.dp),
+            ) {
+                Text(
+                    style = MaterialTheme.lwa.typography.system.caption,
+                    text = stringResource(it),
+                )
+            }
+        },
+        content = {
+            Image(
+                modifier = Modifier
+                    .padding(paddingValues = paddings)
+                    .size(size = size),
+                painter = painterResource(currency.icon),
+                contentDescription = null,
+            )
+        }
+    )
+}

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/tooltip/TooltipLayout.kt

@@ -4,11 +4,9 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.TooltipArea
 import androidx.compose.foundation.TooltipPlacement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.Stable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
@@ -36,13 +34,7 @@ fun <T> TooltipLayout(
     if (tips != null && tooltip != null) {
         TooltipArea(
             modifier = modifier,
-            tooltip = {
+            tooltip = { tooltip(tips) },
-                Box(
-                    modifier = Modifier.width(width = 448.dp),
-                    contentAlignment = Alignment.TopEnd,
-                    content = { tooltip(tips) },
-                )
-            },
             content = content,
             delayMillis = delayMillis,
             tooltipPlacement = tooltipPlacement,

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryItem.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.MaterialTheme
@@ -113,7 +114,9 @@ fun InventoryItem(
         modifier = modifier,
         tips = item.tooltips,
         tooltip = { tooltips ->
-            DecoratedBox {
+            DecoratedBox(
+                modifier = Modifier.width(width = 448.dp),
+            ) {
                 Surface {
                     Box(
                         modifier = Modifier.padding(paddingValues = toolTipPaddings)

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt

@@ -9,6 +9,7 @@ import androidx.compose.animation.fadeOut
 import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -25,6 +26,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import com.pixelized.desktop.lwa.ui.composable.currency.Currency
+import com.pixelized.desktop.lwa.ui.composable.currency.CurrencyUio
 import com.pixelized.desktop.lwa.ui.theme.lwa
 import lwacharactersheet.composeapp.generated.resources.Res
 import lwacharactersheet.composeapp.generated.resources.ic_copper_32px
@@ -45,6 +48,7 @@ object InventoryPurseDefault {
     val paddings = PaddingValues(horizontal = 0.dp, vertical = 4.dp)
 }
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun InventoryPurse(
     modifier: Modifier = Modifier,
@@ -65,10 +69,8 @@ fun InventoryPurse(
             horizontalArrangement = Arrangement.spacedBy(space = 8.dp),
         ) {
             Row(verticalAlignment = Alignment.Bottom) {
-                Image(
+                Currency(
-                    painter = painterResource(Res.drawable.ic_gold_32px),
+                    currency = CurrencyUio.Gold,
-                    modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp),
-                    contentDescription = null,
                 )
                 AnimatedContent(
                     targetState = purse.gold,
@@ -83,10 +85,8 @@ fun InventoryPurse(
             }
 
             Row(verticalAlignment = Alignment.Bottom) {
-                Image(
+                Currency(
-                    painter = painterResource(Res.drawable.ic_silver_32px),
+                    currency = CurrencyUio.Silver,
-                    modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp),
-                    contentDescription = null,
                 )
                 AnimatedContent(
                     targetState = purse.silver,
@@ -101,10 +101,8 @@ fun InventoryPurse(
             }
 
             Row(verticalAlignment = Alignment.Bottom) {
-                Image(
+                Currency(
-                    painter = painterResource(Res.drawable.ic_copper_32px),
+                    currency = CurrencyUio.Copper,
-                    modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp),
-                    contentDescription = null,
                 )
                 AnimatedContent(
                     targetState = purse.copper,

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt

@@ -1,6 +1,7 @@
 package com.pixelized.desktop.lwa.ui.screen.campaign.text
 
 import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -66,7 +67,7 @@ data class ChatSettingsUio(
     }
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
+@OptIn(ExperimentalComposeUiApi::class, ExperimentalFoundationApi::class)
 @Composable
 fun CampaignChat(
     modifier: Modifier = Modifier,

composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/messages/PurseTextMessage.kt

@@ -1,25 +1,23 @@
 package com.pixelized.desktop.lwa.ui.screen.campaign.text.messages
 
-import androidx.compose.foundation.Image
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.TooltipPlacement
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.pixelized.desktop.lwa.ui.composable.currency.Currency
+import com.pixelized.desktop.lwa.ui.composable.currency.CurrencyUio
 import com.pixelized.desktop.lwa.ui.theme.lwa
-import lwacharactersheet.composeapp.generated.resources.Res
-import lwacharactersheet.composeapp.generated.resources.ic_copper_32px
-import lwacharactersheet.composeapp.generated.resources.ic_gold_32px
-import lwacharactersheet.composeapp.generated.resources.ic_silver_32px
 import org.jetbrains.compose.resources.StringResource
-import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 
 @Stable
@@ -33,14 +31,30 @@ data class PurseTextMessageUio(
     val copper: Int?,
 ) : TextMessage
 
+@Stable
+object PurseTextDefault {
+    @Stable
+    val spacings: Dp = 3.dp
+
+    @OptIn(ExperimentalFoundationApi::class)
+    @Stable
+    val placement = TooltipPlacement.ComponentRect(
+        anchor = Alignment.Center,
+        alignment = Alignment.TopEnd,
+    )
+}
+
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun PurseTextMessage(
     modifier: Modifier = Modifier,
+    spacings: Dp = PurseTextDefault.spacings,
+    placement : TooltipPlacement = PurseTextDefault.placement,
     message: PurseTextMessageUio,
 ) {
     Row(
         modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(space = 3.dp),
+        horizontalArrangement = Arrangement.spacedBy(space = spacings),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Text(
@@ -80,10 +94,9 @@ fun PurseTextMessage(
                     maxLines = 1,
                     text = "$it",
                 )
-                Image(
+                Currency(
-                    painter = painterResource(Res.drawable.ic_gold_32px),
+                    tooltipPlacement = placement,
-                    modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp),
+                    currency = CurrencyUio.Gold,
-                    contentDescription = null,
                 )
             }
         }
@@ -96,10 +109,9 @@ fun PurseTextMessage(
                     maxLines = 1,
                     text = "$it",
                 )
-                Image(
+                Currency(
-                    painter = painterResource(Res.drawable.ic_silver_32px),
+                    tooltipPlacement = placement,
-                    modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp),
+                    currency = CurrencyUio.Silver,
-                    contentDescription = null,
                 )
             }
         }
@@ -113,10 +125,9 @@ fun PurseTextMessage(
                     maxLines = 1,
                     text = "$it",
                 )
-                Image(
+                Currency(
-                    painter = painterResource(Res.drawable.ic_copper_32px),
+                    tooltipPlacement = placement,
-                    modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp),
+                    currency = CurrencyUio.Copper,
-                    contentDescription = null,
                 )
             }
         }