Tugas 4 PPB A 2025 - Aplikasi Dice Roller

Nama     : Rayhan Arvianta Bayuputra

NRP        : 5025211217

Kelas      : PPB A

TA            : 2024 (Genap)

Aplikasi Dice Roller dengan Komponen Button

Pada pertemuan kali ini, kami membuat sebuah aplikasi bernama Dice Roller. Berikut cuplikannya.

Berikut adalah kode sumber dari aplikasi Dice Roller

package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.diceroller.ui.theme.DiceRollerTheme

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

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

@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)
        }
    }
}

Main Activity Class

Kelas MainActivity merupakan pintu masuk utama aplikasi, yang merupakan turunan dari ComponentActivity. Di dalam metode onCreate(), fungsi setContent {} digunakan untuk menginisialisasi tampilan aplikasi menggunakan Jetpack Compose.

Di dalamnya, tema aplikasi DiceRollerTheme diterapkan menggunakan fungsi Surface, yang bertindak sebagai container utama dengan warna latar belakang yang diambil dari MaterialTheme.colorScheme.background. Fungsi DiceRollerApp() dipanggil untuk menampilkan UI utama aplikasi.

DiceRollerApp Function

Fungsi DiceRollerApp() bertanggung jawab untuk menampilkan komponen utama aplikasi, yaitu tombol dan gambar dadu.

Di dalam fungsi ini, DiceWithButtonAndImage() dipanggil untuk mengatur tampilan dan logika permainan dadu. Modifier fillMaxSize().wrapContentSize(Alignment.Center) digunakan agar elemen-elemen UI ditempatkan di tengah layar, sehingga tampilan lebih seimbang.

DiceWithButtonAndImage Function

Fungsi DiceWithButtonAndImage() adalah inti dari aplikasi, yang menangani logika pelemparan dadu serta menampilkan gambar dan tombol.

Di dalamnya, variabel result dideklarasikan menggunakan remember { mutableStateOf(1) }, yang berarti nilai ini akan disimpan dalam memori dan diperbarui secara dinamis saat tombol ditekan. Nilai awalnya adalah 1, yang berarti saat aplikasi pertama kali dibuka, gambar dadu akan menampilkan angka 1.

Variabel imageResource digunakan untuk menentukan gambar dadu berdasarkan nilai result. Struktur when(result) digunakan untuk mencocokkan nilai dengan gambar dadu yang sesuai (dice_1, dice_2, dll.).

Tampilan UI dan Interaksi Pengguna

Fungsi ini menggunakan Column untuk menyusun elemen UI secara vertikal. Elemen utama dalam tampilan ini adalah:

1. Gambar Dadu → Ditampilkan menggunakan Image(), di mana painterResource(imageResource) digunakan untuk memilih gambar berdasarkan nilai result.
2. Tombol "Roll" → Ditampilkan menggunakan Button(), yang memiliki aksi onClick untuk mengacak angka dadu.

Saat tombol ditekan, kode result = (1..6).random() akan menghasilkan angka acak antara 1 hingga 6, kemudian gambar dadu akan diperbarui secara otomatis.

Demo Aplikasi

Github Repository: https://github.com/arvianta/PPB_Week4_DiceRollerButton