Yahtzee: two-column score card with larger text, scrolls sideways when needed

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_0177JQTtqM7EzJyXYiZYEJTX

app/src/main/java/org/prolibertate/games/ui/game/YahtzeeScreen.kt

@@ -6,6 +6,9 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.horizontalScroll
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Row
@@ -254,28 +257,61 @@ private fun ScoreCard(
     writable: Set<YahtzeeCategory>,
     onWrite: (YahtzeeCategory) -> Unit,
 ) {
-    Column(modifier = Modifier.fillMaxWidth()) {
-        Row(modifier = Modifier.fillMaxWidth()) {
-            Text("", modifier = Modifier.weight(2f), style = MaterialTheme.typography.labelSmall)
-            state.cards.indices.forEach { seat ->
-                Text(
-                    text = if (seat == localSeat) "You" else "S$seat",
-                    modifier = Modifier.weight(1f),
-                    style = MaterialTheme.typography.labelSmall,
-                    fontWeight = FontWeight.Bold,
-                )
-            }
-        }
-        YahtzeeSection.entries.forEach { section ->
-            YahtzeeCategory.entries.filter { it.section == section }.forEach { category ->
-                CardRow(state, localSeat, category, writable, onWrite)
-            }
-            if (section == YahtzeeSection.UPPER) {
+    // Upper boxes and bonus on the left, lower boxes and total on the right, so
+    // each half is wide enough for text that can actually be read. Each half
+    // has a floor on its width; if two of them do not fit (many players, large
+    // text) the pair scrolls sideways instead of squeezing.
+    BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
+        val needed = (CARD_LABEL_WIDTH + CARD_SEAT_WIDTH * state.cards.size).dp
+        val half = maxOf((maxWidth - CARD_GAP.dp) / 2, needed)
+        Row(
+            modifier = Modifier.horizontalScroll(rememberScrollState()),
+            horizontalArrangement = Arrangement.spacedBy(CARD_GAP.dp),
+        ) {
+            Column(modifier = Modifier.width(half)) {
+                CardHeader(state, localSeat)
+                CardSection(YahtzeeSection.UPPER, state, localSeat, writable, onWrite)
                 TotalRow("Bonus at 63", state.cards.map { it.upperBonus })
             }
+            Column(modifier = Modifier.width(half)) {
+                CardHeader(state, localSeat)
+                CardSection(YahtzeeSection.LOWER, state, localSeat, writable, onWrite)
+                Divider()
+                TotalRow("Total", state.cards.indices.map { state.totalFor(it) }, bold = true)
+            }
         }
-        Divider()
-        TotalRow("Total", state.cards.indices.map { state.totalFor(it) }, bold = true)
+    }
+}
+
+private const val CARD_LABEL_WIDTH = 120
+private const val CARD_SEAT_WIDTH = 56
+private const val CARD_GAP = 12
+
+@Composable
+private fun CardHeader(state: YahtzeeState, localSeat: Int) {
+    Row(modifier = Modifier.fillMaxWidth()) {
+        Text("", modifier = Modifier.weight(2f))
+        state.cards.indices.forEach { seat ->
+            Text(
+                text = if (seat == localSeat) "You" else "S$seat",
+                modifier = Modifier.weight(1f),
+                style = MaterialTheme.typography.labelLarge,
+                fontWeight = FontWeight.Bold,
+            )
+        }
+    }
+}
+
+@Composable
+private fun CardSection(
+    section: YahtzeeSection,
+    state: YahtzeeState,
+    localSeat: Int,
+    writable: Set<YahtzeeCategory>,
+    onWrite: (YahtzeeCategory) -> Unit,
+) {
+    YahtzeeCategory.entries.filter { it.section == section }.forEach { category ->
+        CardRow(state, localSeat, category, writable, onWrite)
     }
 }
 
@@ -292,12 +328,12 @@ private fun CardRow(
         modifier = Modifier
             .fillMaxWidth()
             .clickable(enabled = open) { onWrite(category) }
-            .padding(vertical = 2.dp),
+            .padding(vertical = 5.dp),
     ) {
         Text(
             text = category.label,
             modifier = Modifier.weight(2f),
-            style = MaterialTheme.typography.bodySmall,
+            style = MaterialTheme.typography.bodyMedium,
             fontWeight = if (open) FontWeight.Bold else FontWeight.Normal,
         )
         state.cards.forEachIndexed { seat, card ->
@@ -311,7 +347,7 @@ private fun CardRow(
                     else -> "—"
                 },
                 modifier = Modifier.weight(1f),
-                style = MaterialTheme.typography.bodySmall,
+                style = MaterialTheme.typography.bodyMedium,
                 color = if (written == null && open) WallaceRed else MaterialTheme.colorScheme.onSurface,
             )
         }
@@ -320,18 +356,18 @@ private fun CardRow(
 
 @Composable
 private fun TotalRow(label: String, values: List<Int>, bold: Boolean = false) {
-    Row(modifier = Modifier.fillMaxWidth().padding(vertical = 2.dp)) {
+    Row(modifier = Modifier.fillMaxWidth().padding(vertical = 5.dp)) {
         Text(
             text = label,
             modifier = Modifier.weight(2f),
-            style = MaterialTheme.typography.bodySmall,
+            style = MaterialTheme.typography.bodyMedium,
             fontWeight = if (bold) FontWeight.Bold else FontWeight.Normal,
         )
         values.forEach {
             Text(
                 text = "$it",
                 modifier = Modifier.weight(1f),
-                style = MaterialTheme.typography.bodySmall,
+                style = MaterialTheme.typography.bodyMedium,
                 fontWeight = if (bold) FontWeight.Bold else FontWeight.Normal,
             )
         }