PPB: TUGAS 4

Nama     : Shazia Ingeyla Naveeda
NRP       : 5025211203
Kelas     : PPB (A)

Membuat Aplikasi Dice Roller Interaktif

Link Github

Pada pertemuan keempat ini akan membuat aplikasi Dice Roller interaktif yang memungkinkan pengguna melempar dadu dengan mengetuk composable Button. Hasil lemparan ditampilkan dengan composable Image di layar. Menggunakan Jetpack Compose dengan Kotlin untuk membuat tata letak aplikasi, lalu menulis logika bisnis untuk menangani peristiwa yang terjadi saat composable Button diketuk.

 MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceRollerTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    DiceRollerApp()
                }
            }
        }
    }
}

MainActivity merupakan titik masuk aplikasi. Dalam onCreate, metode setContent digunakan untuk menampilkan antarmuka pengguna dengan Jetpack Compose. Tema aplikasi (DiceRollerTheme) diterapkan, dan seluruh tampilan ditempatkan dalam Surface, yang memberi latar belakang dari tema. Di dalam Surface, fungsi utama UI dipanggil, yaitu DiceRollerApp().

DiceRollerApp()

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
    )
}

Fungsi DiceRollerApp adalah sebuah @Composable yang menampilkan komponen DiceWithButtonAndImage(). Fungsi ini juga menggunakan Modifier agar elemen tampil di tengah layar (wrapContentSize(Alignment.Center)).

DiceWithButtonAndImage()

@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier) {
    var result by remember { mutableStateOf( 1) }
    val imageResource = when(result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }
    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
        Image(painter = painterResource(imageResource), contentDescription = result.toString())
        
        Button(
            onClick = { result = (1..6).random() },
        ) {
            Text(text = stringResource(R.string.roll), fontSize = 24.sp)
        }
    }
}

Ini adalah fungsi utama yang menangani logika dan tampilan:

Menggunakan var result by remember { mutableStateOf(1) } untuk menyimpan angka dadu saat ini, dimulai dari 1.

val imageResource = when(result) { ... } memilih gambar dadu (dice_1 hingga dice_6) berdasarkan nilai result.

Column digunakan untuk menata layout secara vertikal dan memusatkan kontennya.

Image(...) menampilkan gambar dadu sesuai dengan nilai result.

Button(...) akan mengubah nilai result ke angka acak dari 1 sampai 6 ketika ditekan, yang secara otomatis mengganti gambar dadu karena sifat reactive dari Compose.

Text(...) di dalam tombol menampilkan teks dari strings.xml dengan ID roll, dan menggunakan ukuran huruf 24.sp.