Dice Roller

Build a dice roller: pick how many six-sided dice to roll, hit Roll, and see the faces (and total). The state is just the chosen count and the array of rolled values; rolling fills that array with count random numbers from 1–6, and each value renders as a die face.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A count selector, a Roll button, the dice faces, and a total.

Examples

count 3, Roll -> e.g. [4, 1, 6] -> faces, total 11
change count to 5, Roll -> an array of 5 fresh values

each value v -> Math.floor(Math.random() * 6) + 1   (1..6 inclusive)
face for v -> FACES[v - 1]

Notes

• Count + values. count from the select; dice is an array of length count after a roll.
• Roll = regenerate. Build a fresh array of count randoms each Roll; don't mutate the old one.
• 1..6 inclusive. Math.floor(Math.random() * 6) + 1 — the + 1 shifts 0–5 to 1–6.
• Faces + total. Map each value to a die glyph; total = dice.reduce((a, b) => a + b, 0).