Dice Duel 5 — scores, winning and polish

A game with no finish line

Chapter 4 left you with something genuinely nice to look at. Tap the die, it tumbles, a number lands, a score climbs.

And then it keeps climbing. 30. 47. 112. Nobody wins, because nothing in the code has ever heard of winning. Two players can sit there tapping until one of them gets bored, and being bored is not the same as losing.

This chapter is the last 10% — the part that turns a working toy into a finished thing. An ending, a rematch button, and three small touches that make the board look designed rather than assembled.

The rule gets a name

Right at the top of the file, above every composable:

1// Reach this score and the duel is over.
2private const val TARGET = 30

const val is a value fixed when the app is built. The number 30 is baked straight into the compiled code wherever TARGET appears — there is no lookup at runtime, so it costs exactly what typing 30 would have cost.

The point is not speed. The point is that 30 now lives in one place. The subtitle changes to read from it:

1    Text(
2        text = "First to $TARGET wins the duel",
3        color = scheme.onSurfaceVariant,
4        fontSize = 15.sp,
5        fontWeight = FontWeight.Medium,
6        letterSpacing = 1.sp
7    )

So does the progress bar, and so does the line under the banner. Change 30 to 50 and four things on screen agree with each other without you touching any of them. A rule written down twice is a rule that will eventually disagree with itself.

Somebody has to win

One new piece of state, alongside die, p1, p2 and turn:

1    // 0 means nobody has won yet.
2    var winner by remember { mutableStateOf(0) }

It is an Int, not a Boolean, because it has three answers to give, not two: nobody yet, player 1, player 2. Using 0 as "nobody" works because there is no player 0 — the sentinel value is impossible by construction, which is the only kind of sentinel worth trusting.

Now the scoring block inside the LaunchedEffect grows two words.

Two guards and a reset

Note that both of these are local functions — declared inside GameScreen, so they can see and change p1, winner and the rest directly. Nothing outside this screen can call them, which is exactly right for one game's private rules.

Stacking the banner over the board

The board has been a Column since chapter 1. A Column puts things under each other, and the banner needs to sit on top. So the whole thing goes inside a Box:

1    Box(modifier = modifier.fillMaxSize()) {
2        Column(
3            modifier = Modifier
4                .fillMaxSize()
5                .background(sky)
6                .safeDrawingPadding()
7                .padding(pagePad),
8            horizontalAlignment =
9                Alignment.CenterHorizontally
10        ) {
11            TitleBlock()
12            Spacer(Modifier.height(24.dp))
13            ScoreBoard(p1 = p1, p2 = p2, turn = turn)
14            Spacer(Modifier.weight(1f))
15            DieFace(
16                value = die,
17                size = 172.dp,
18                modifier = Modifier.graphicsLayer {
19                    rotationZ = spin
20                    scaleX = lift
21                    scaleY = lift
22                },
23                onRoll = { roll() }
24            )
25            Spacer(Modifier.weight(1f))
26            TurnHint(turn = turn, rolling = rolling)
27        }
28
29        if (winner != 0) {
30            WinBanner(
31                winner = winner,
32                onPlayAgain = { playAgain() }
33            )
34        }
35    }

A Box draws its children in the order you write them, each one over the last. The board is written first, so the banner lands on top of it.

Everything between TitleBlock() and TurnHint(...) is chapter 4's code, untouched apart from one number: the gap under the subtitle drops from 26dp to 24dp, because the panels are taller now that they carry progress bars.

The page padding moves into a named value declared with the other state:

1    val pagePad = PaddingValues(
2        horizontal = 20.dp,
3        vertical = 18.dp
4    )

Same 20dp and 18dp as before. Naming it just keeps the Column's modifier chain readable now that there is a Box wrapped round it.

And then four lines do the entire ending. if (winner != 0) is not a special Compose feature — it is an ordinary Kotlin if in a place where composables are allowed. When winner changes from 0 to 1, that condition becomes true, Compose notices during recomposition and the banner enters the screen. When playAgain() sets it back to 0, the banner leaves. You never call "show" or "hide" anything.

The banner itself

This is the biggest new composable in Dice Duel, so it comes in two halves. First the values it works out before drawing anything.

Then the drawing.

Two touches on the board

A bar that fills as you climb

Each player panel gains a slim track under its score.

It is called from inside PlayerPanel, after the score:

1        Spacer(Modifier.height(10.dp))
2        ScoreTrack(
3            score = score,
4            accent = accent,
5            modifier = Modifier.padding(horizontal = 20.dp)
6        )

The panel that is not your turn steps back

1    val pop by animateFloatAsState(
2        targetValue = if (active) 1f else 0.95f,
3        animationSpec = tween(durationMillis = 220),
4        label = "panel"
5    )

…applied at the very top of the panel's modifier chain:

1    Column(
2        modifier = modifier
3            .graphicsLayer {
4                scaleX = pop
5                scaleY = pop
6            }
7            .clip(shape)
8            .background(panel)
9            .border(3.dp, ring, shape)
10            .padding(vertical = 16.dp),

Five per cent is almost nothing measured with a ruler, and impossible to miss when it moves. Combined with the coloured ring that was already there, the active panel now has two independent signals — colour and size — which is what an interface needs if one of them is unavailable to a particular reader.

The panel's vertical padding drops from 18dp to 16dp at the same time, because the progress bar has made the card taller.

The die stops being flat

Two new imports in DieFace.kt:

1import androidx.compose.ui.graphics.Brush
2import androidx.compose.ui.graphics.lerp

and the flat fill becomes a gradient:

1    // A faint diagonal shade makes the flat square read
2    // as a solid object catching the light.
3    val shade = lerp(faceColor, pipColor, 0.09f)
4    drawRoundRect(
5        brush = Brush.linearGradient(
6            colors = listOf(faceColor, shade),
7            start = Offset.Zero,
8            end = Offset(side, side)
9        ),
10        size = Size(side, side),
11        cornerRadius = radius
12    )

lerp mixes two colours: 9% of the way from the near-white face towards the near-black pips gives a very slightly grey off-white, about #E9E7EF. Brush.linearGradient paints from Offset.Zero — the top-left corner — down to Offset(side, side), the bottom-right, so the shade runs diagonally.

Nine per cent is small on purpose. Turn it up to 0.4f and Run it once: the die stops looking like plastic and starts looking like a badly lit photograph. Then put it back.

Now make it yours

Dice Duel is finished, which is a good moment to break it. Three changes, in rising order of difficulty, and none of them needs anything you have not already seen.

A different target. The easiest and the most instructive. Change TARGET to 20 and play a round; change it to 100 and play another. Notice that the subtitle, the progress bars and the banner's second line all follow without a single other edit. That is what naming a rule buys you. Then try making it a choice: replace the constant with var target by remember { mutableStateOf(30) } and put three small buttons on the win banner — 20, 30, 50 — that set it before the rematch. The compiler will tell you every place that assumed a constant.

Best of five. Add two more values, wins1 and wins2, and a round counter. playAgain() already resets a board; what you need now is a second level above it — a match that resets only when somebody reaches three. The interesting design question is what the banner says between rounds ("Player 1 takes round 2 — 2 to 1") versus at the end of the match, and you will find the answer is two different banners sharing one layout, in the same way EmptyMessage will be shared in Pocket Notes.

A third player. The hardest, and the one that teaches most. turn stops being 1-or-2 and becomes 1, 2 or 3, so if (turn == 1) … else … no longer covers the cases — that is a job for a when. Three panels will not fit side by side at 46sp, so something has to shrink. And you will very quickly notice that p1, p2 and p3 as separate values is the wrong shape: a List<Int> of scores with turn as an index into it makes every one of these rules shorter. Rewriting the state before you rewrite the screen is the right order.