fix: add card elevation and interaction feedback (Closes #8) (#75)

sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/charactermodel/attributespage/Attribute.kt

@@ -2,10 +2,10 @@ package org.shahondin1624.lib.components.charactermodel.attributespage
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -13,6 +13,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
@@ -36,66 +37,87 @@ fun Attribute(
     onEdit: (() -> Unit)? = null,
 ) {
     val textColor = contrastTextColor(attribute.type.color)
-    Card(
+    val cardModifier = Modifier.testTag(TestTags.attributeCard(attribute.type.name))
-        modifier = Modifier
+    val elevation = CardDefaults.cardElevation(
-            .testTag(TestTags.attributeCard(attribute.type.name))
+        defaultElevation = 2.dp,
-            .then(
+        pressedElevation = 6.dp,
-                if (onEdit != null) Modifier.clickable { onEdit() }
+        hoveredElevation = 4.dp
-                else Modifier
+    )
-            )
+    if (onEdit != null) {
-    ) {
+        Card(
-        Row(
+            onClick = onEdit,
-            verticalAlignment = Alignment.CenterVertically,
+            modifier = cardModifier,
-            horizontalArrangement = Arrangement.Start,
+            elevation = elevation
-            modifier = Modifier.fillMaxWidth()
         ) {
-            Row(
+            AttributeCardContent(attribute, textColor, onRoll)
-                modifier = Modifier
+        }
-                    .weight(1f)
+    } else {
-                    .padding(horizontal = SMALL_PADDING)
+        Card(
-                    .background(attribute.type.color, shape = RoundedCornerShape(4.dp))
+            modifier = cardModifier,
-                    .clip(RoundedCornerShape(4.dp)),
+            elevation = elevation
-                horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
-                verticalAlignment = Alignment.CenterVertically
+            AttributeCardContent(attribute, textColor, onRoll)
-            ) {
+        }
-                Text(
+    }
-                    text = attribute.type.name,
+}
-                    modifier = Modifier
+
-                        .weight(1f)
+@Composable
-                        .padding(start = SMALL_PADDING),
+private fun AttributeCardContent(
-                    textAlign = TextAlign.Center,
+    attribute: Attribute,
-                    color = textColor,
+    textColor: Color,
-                    maxLines = 1,
+    onRoll: (DiceRoll) -> Unit
-                    overflow = TextOverflow.Ellipsis
+) {
-                )
+    Row(
-                Text(
+        verticalAlignment = Alignment.CenterVertically,
-                    text = attribute.value.toString(),
+        horizontalArrangement = Arrangement.Start,
-                    modifier = Modifier
+        modifier = Modifier.fillMaxWidth()
-                        .padding(end = SMALL_PADDING),
+    ) {
-                    textAlign = TextAlign.Center,
+        Row(
-                    color = textColor,
+            modifier = Modifier
-                    maxLines = 1,
+                .weight(1f)
-                    overflow = TextOverflow.Ellipsis
+                .padding(horizontal = SMALL_PADDING)
-                )
+                .background(attribute.type.color, shape = RoundedCornerShape(4.dp))
-            }
+                .clip(RoundedCornerShape(4.dp)),
-            IconButton(
+            horizontalArrangement = Arrangement.SpaceBetween,
-                onClick = {
+            verticalAlignment = Alignment.CenterVertically
-                    val result = attribute.test()
+        ) {
-                    onRoll(result)
+            Text(
-                },
+                text = attribute.type.name,
-                modifier = Modifier
+                modifier = Modifier
-                    .padding(end = SMALL_PADDING)
+                    .weight(1f)
-                    .testTag(TestTags.rollButton(attribute.type.name))
+                    .padding(start = SMALL_PADDING),
-            ) {
+                textAlign = TextAlign.Center,
-                Image(
+                color = textColor,
-                    painter = painterResource(Res.drawable.dice),
+                maxLines = 1,
-                    contentDescription = "Roll dice",
+                overflow = TextOverflow.Ellipsis
-                    colorFilter = ColorFilter.tint(
+            )
-                        color = MaterialTheme.colorScheme.onSurface
+            Text(
-                    ),
+                text = attribute.value.toString(),
-                    modifier = Modifier.size(24.dp)
+                modifier = Modifier
-                )
+                    .padding(end = SMALL_PADDING),
-            }
+                textAlign = TextAlign.Center,
+                color = textColor,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+        IconButton(
+            onClick = {
+                val result = attribute.test()
+                onRoll(result)
+            },
+            modifier = Modifier
+                .padding(end = SMALL_PADDING)
+                .testTag(TestTags.rollButton(attribute.type.name))
+        ) {
+            Image(
+                painter = painterResource(Res.drawable.dice),
+                contentDescription = "Roll dice",
+                colorFilter = ColorFilter.tint(
+                    color = MaterialTheme.colorScheme.onSurface
+                ),
+                modifier = Modifier.size(24.dp)
+            )
         }
     }
 }

sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/charactermodel/attributespage/Talent.kt

@@ -2,7 +2,6 @@ package org.shahondin1624.lib.components.charactermodel.attributespage
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -11,6 +10,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -18,6 +18,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
@@ -43,80 +44,102 @@ fun Talent(
     onEdit: (() -> Unit)? = null,
 ) {
     val textColor = contrastTextColor(talent.attribute.color)
-    Card(
+    val cardModifier = Modifier.testTag(TestTags.talentCard(talent.name))
-        modifier = Modifier
+    val elevation = CardDefaults.cardElevation(
-            .testTag(TestTags.talentCard(talent.name))
+        defaultElevation = 2.dp,
-            .then(
+        pressedElevation = 6.dp,
-                if (onEdit != null) Modifier.clickable { onEdit() }
+        hoveredElevation = 4.dp
-                else Modifier
+    )
-            )
+    if (onEdit != null) {
-    ) {
+        Card(
-        Row(
+            onClick = onEdit,
-            verticalAlignment = Alignment.CenterVertically,
+            modifier = cardModifier,
-            horizontalArrangement = Arrangement.Start,
+            elevation = elevation
-            modifier = Modifier.fillMaxWidth()
         ) {
-            Row(
+            TalentCardContent(talent, attributes, textColor, onRoll)
-                modifier = Modifier
+        }
-                    .weight(1f)
+    } else {
-                    .padding(horizontal = SMALL_PADDING)
+        Card(
-                    .background(
+            modifier = cardModifier,
-                        talent.attribute.color,
+            elevation = elevation
-                        shape = RoundedCornerShape(4.dp)
+        ) {
-                    )
+            TalentCardContent(talent, attributes, textColor, onRoll)
-                    .clip(RoundedCornerShape(4.dp)),
+        }
-                horizontalArrangement = Arrangement.SpaceBetween,
+    }
-                verticalAlignment = Alignment.CenterVertically
+}
-            ) {
+
-                Text(
+@Composable
-                    text = talent.name,
+private fun TalentCardContent(
-                    modifier = Modifier
+    talent: TalentDefinition,
-                        .weight(1f)
+    attributes: Attributes,
-                        .padding(start = SMALL_PADDING),
+    textColor: Color,
-                    textAlign = TextAlign.Start,
+    onRoll: (DiceRoll) -> Unit
-                    color = textColor,
+) {
-                    maxLines = 1,
+    Row(
-                    overflow = TextOverflow.Ellipsis
+        verticalAlignment = Alignment.CenterVertically,
-                )
+        horizontalArrangement = Arrangement.Start,
-                Text(
+        modifier = Modifier.fillMaxWidth()
-                    text = attributes.getAttributeByType(talent.attribute).value.toString(),
+    ) {
-                    modifier = Modifier
+        Row(
-                        .widthIn(min = 24.dp)
+            modifier = Modifier
-                        .padding(horizontal = SMALL_PADDING),
+                .weight(1f)
-                    textAlign = TextAlign.End,
+                .padding(horizontal = SMALL_PADDING)
-                    color = textColor,
+                .background(
-                    maxLines = 1,
+                    talent.attribute.color,
-                    overflow = TextOverflow.Ellipsis
+                    shape = RoundedCornerShape(4.dp)
-                )
+                )
-                Text(
+                .clip(RoundedCornerShape(4.dp)),
-                    text = talent.value.toString(),
+            horizontalArrangement = Arrangement.SpaceBetween,
-                    modifier = Modifier
+            verticalAlignment = Alignment.CenterVertically
-                        .widthIn(min = 24.dp)
+        ) {
-                        .padding(end = SMALL_PADDING),
+            Text(
-                    textAlign = TextAlign.End,
+                text = talent.name,
-                    color = textColor,
+                modifier = Modifier
-                    maxLines = 1,
+                    .weight(1f)
-                    overflow = TextOverflow.Ellipsis
+                    .padding(start = SMALL_PADDING),
-                )
+                textAlign = TextAlign.Start,
-            }
+                color = textColor,
-            IconButton(
+                maxLines = 1,
-                onClick = {
+                overflow = TextOverflow.Ellipsis
-                    val result = talent.test(modifiers = emptyList(), attributes = attributes)
+            )
-                    onRoll(result)
+            Text(
-                },
+                text = attributes.getAttributeByType(talent.attribute).value.toString(),
-                modifier = Modifier
+                modifier = Modifier
-                    .padding(end = SMALL_PADDING)
+                    .widthIn(min = 24.dp)
-                    .testTag(TestTags.rollButton(talent.name))
+                    .padding(horizontal = SMALL_PADDING),
-            ) {
+                textAlign = TextAlign.End,
-                Image(
+                color = textColor,
-                    painter = painterResource(Res.drawable.dice),
+                maxLines = 1,
-                    contentDescription = "Roll dice",
+                overflow = TextOverflow.Ellipsis
-                    colorFilter = ColorFilter.tint(
+            )
-                        color = MaterialTheme.colorScheme.onSurface
+            Text(
-                    ),
+                text = talent.value.toString(),
-                    modifier = Modifier.size(24.dp)
+                modifier = Modifier
-                )
+                    .widthIn(min = 24.dp)
-            }
+                    .padding(end = SMALL_PADDING),
+                textAlign = TextAlign.End,
+                color = textColor,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+        IconButton(
+            onClick = {
+                val result = talent.test(modifiers = emptyList(), attributes = attributes)
+                onRoll(result)
+            },
+            modifier = Modifier
+                .padding(end = SMALL_PADDING)
+                .testTag(TestTags.rollButton(talent.name))
+        ) {
+            Image(
+                painter = painterResource(Res.drawable.dice),
+                contentDescription = "Roll dice",
+                colorFilter = ColorFilter.tint(
+                    color = MaterialTheme.colorScheme.onSurface
+                ),
+                modifier = Modifier.size(24.dp)
+            )
         }
     }
 }