Dice Duel 3 — rolling, state and randomness

The chapter where it becomes a game

You have a board and a die. Tap the die and nothing happens, because the screen has no memory — it is a very well-drawn photograph.

Today it gets one. Four values:

• die — the number showing
• p1 — player 1's score
• p2 — player 2's score
• turn — whose go it is

Four Ints. That is the entire game. By the end of this lesson two people can genuinely play Dice Duel, taking turns, watching the scores climb. There is no ending yet and no animation, but the thing works.

Two words that change everything

You met these in Part 3. Here they are doing a real job:

    var die by remember { mutableStateOf(5) }

Three separate ideas are packed into that line.

mutableStateOf(5) makes a box holding 5 that Compose watches. Any composable that reads the box gets quietly written down as a reader. Change what is in the box and every one of those readers is re-run. You never call anything to make the screen update; it simply follows.

remember { ... } says: run that block the first time, then hold on to the result. Without it, the box would be built again on every redraw, and the die would snap back to 5 every time anything on the screen changed. A brand new box every frame is the same as no memory at all.

by is Kotlin's delegate keyword. It says "when someone reads die, ask the box; when someone writes die, tell the box". Without it you would be typing die.value everywhere. With it, die behaves exactly like a normal Int — which is why p1 += rolled below reads like ordinary arithmetic.

The price of by is two imports that nothing else needs, and forgetting them produces the single most confusing error in all of Compose. It is entry 1 in the Error Doctor. Add all five imports now:

1import androidx.compose.runtime.getValue
2import androidx.compose.runtime.mutableStateOf
3import androidx.compose.runtime.remember
4import androidx.compose.runtime.setValue
5import kotlin.random.Random

The memory and the rule

Making the die the button

The die is the only thing worth tapping on this screen, so it should be the button. There is no Button here and there does not need to be one — Modifier.clickable makes anything tappable.

DieFace.kt gains one import:

import androidx.compose.foundation.clickable

...one parameter, and one modifier:

This is state hoisting doing its job. DieFace holds nothing, decides nothing, and could be dropped into any project. Everything it does is described by what it is given: a number to draw, and someone to tell.

Wiring it up

The body of GameScreen changes from literals to live values:

1        TitleBlock()
2        Spacer(Modifier.height(26.dp))
3        ScoreBoard(p1 = p1, p2 = p2, turn = turn)
4        Spacer(Modifier.weight(1f))
5        DieFace(
6            value = die,
7            size = 172.dp,
8            onRoll = { roll() }
9        )
10        Spacer(Modifier.weight(1f))
11        TurnHint(turn = turn)

ScoreBoard(p1 = p1, ...) looks strange the first time. The left p1 is the parameter's name; the right p1 is your state. They are allowed to match, and matching them is the clearest thing to do.

Nothing else in ScoreBoard, PlayerPanel or TitleBlock changes at all. Not one line. That is the payoff for writing them with parameters in chapter 1 — the moment real data existed, they were ready for it.

A hint that tells the truth

"Tap the die to roll" was true but useless. Replace it with something that names the player who is up, in that player's own colour:

What you get

Two people can now play. Tap, the number changes, a score goes up, the ring moves to the other panel, and the bottom line changes colour.

Three things are worth noticing while you play it:

The number jumps. There is no motion at all — the face is one value, then it is another. It works, and it feels like reading a lookup table rather than throwing something. Chapter 4 is entirely about fixing that.

The scores sail past 30. Nothing is watching for a winner. Play long enough and you will see 84 to 91, which is a fine way to prove that chapter 5 has a job to do.

Rotate the phone and everything resets. remember survives redraws, not a full configuration change — Android throws the whole Activity away and builds a new one. rememberSaveable is the fix, and Part 4 covered it. Dice Duel leaves it as remember on purpose: a duel is a two-minute thing, and this way you get to see the difference for yourself rather than read about it.