From a92def2529b7423667f606a0eabb12ef9f892870 Mon Sep 17 00:00:00 2001 From: Thomas Andres Gomez Date: Fri, 9 May 2025 19:29:56 +0200 Subject: [PATCH] Add currency tooltip in chat / character inventory. --- .../composable/character/purse/PurseDialog.kt | 2 - .../lwa/ui/composable/currency/Currency.kt | 125 ++++++++++++++++++ .../ui/composable/tooltip/TooltipLayout.kt | 10 +- .../detail/inventory/item/InventoryItem.kt | 5 +- .../detail/inventory/item/InventoryPurse.kt | 22 ++- .../ui/screen/campaign/text/CampaignChat.kt | 3 +- .../text/messages/PurseTextMessage.kt | 53 +++++--- 7 files changed, 174 insertions(+), 46 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/currency/Currency.kt diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/character/purse/PurseDialog.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/character/purse/PurseDialog.kt index 63f4573..8a6e708 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/character/purse/PurseDialog.kt +++ b/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 diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/currency/Currency.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/currency/Currency.kt new file mode 100644 index 0000000..f663efc --- /dev/null +++ b/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, + ) + } + ) +} \ No newline at end of file diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/tooltip/TooltipLayout.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/tooltip/TooltipLayout.kt index b66bd6b..98105db 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/composable/tooltip/TooltipLayout.kt +++ b/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 TooltipLayout( if (tips != null && tooltip != null) { TooltipArea( modifier = modifier, - tooltip = { - Box( - modifier = Modifier.width(width = 448.dp), - contentAlignment = Alignment.TopEnd, - content = { tooltip(tips) }, - ) - }, + tooltip = { tooltip(tips) }, content = content, delayMillis = delayMillis, tooltipPlacement = tooltipPlacement, diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryItem.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryItem.kt index 423616e..68d8cb6 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryItem.kt +++ b/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) diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt index e2585f7..da0c79f 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/detail/inventory/item/InventoryPurse.kt +++ b/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( - painter = painterResource(Res.drawable.ic_gold_32px), - modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp), - contentDescription = null, + Currency( + currency = CurrencyUio.Gold, ) AnimatedContent( targetState = purse.gold, @@ -83,10 +85,8 @@ fun InventoryPurse( } Row(verticalAlignment = Alignment.Bottom) { - Image( - painter = painterResource(Res.drawable.ic_silver_32px), - modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp), - contentDescription = null, + Currency( + currency = CurrencyUio.Silver, ) AnimatedContent( targetState = purse.silver, @@ -101,10 +101,8 @@ fun InventoryPurse( } Row(verticalAlignment = Alignment.Bottom) { - Image( - painter = painterResource(Res.drawable.ic_copper_32px), - modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp), - contentDescription = null, + Currency( + currency = CurrencyUio.Copper, ) AnimatedContent( targetState = purse.copper, diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt index 5fcd12e..c3a1453 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/CampaignChat.kt +++ b/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, diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/messages/PurseTextMessage.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/messages/PurseTextMessage.kt index 6a05095..0030718 100644 --- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/text/messages/PurseTextMessage.kt +++ b/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( - painter = painterResource(Res.drawable.ic_gold_32px), - modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp), - contentDescription = null, + Currency( + tooltipPlacement = placement, + currency = CurrencyUio.Gold, ) } } @@ -96,10 +109,9 @@ fun PurseTextMessage( maxLines = 1, text = "$it", ) - Image( - painter = painterResource(Res.drawable.ic_silver_32px), - modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp), - contentDescription = null, + Currency( + tooltipPlacement = placement, + currency = CurrencyUio.Silver, ) } } @@ -113,10 +125,9 @@ fun PurseTextMessage( maxLines = 1, text = "$it", ) - Image( - painter = painterResource(Res.drawable.ic_copper_32px), - modifier = Modifier.padding(bottom = 2.dp).size(size = 16.dp), - contentDescription = null, + Currency( + tooltipPlacement = placement, + currency = CurrencyUio.Copper, ) } }