Tugas 4 - PPB D

Nama : Widian Sasi Disertasiani

NRP : 5025211024

Kelas : PPB D

Materi : Dice Roll App

    Sebelumnya saya membuat applikasi dice roller berdasarkan tutorial dari web berikut : Dice Roller, dan didapatkan output seperti berikut:

Karna merasa bosan dan monoton, saya memodifikasi code menjadi seperti berikut:

package com.example.diceroller

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.animation.core.*

import androidx.compose.foundation.Image

import androidx.compose.foundation.background

import androidx.compose.foundation.clickable

import androidx.compose.foundation.layout.*

import androidx.compose.foundation.shape.CircleShape

import androidx.compose.material3.Button

import androidx.compose.material3.ButtonDefaults

import androidx.compose.material3.Surface

import androidx.compose.material3.Text

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.draw.alpha

import androidx.compose.ui.draw.clip

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.res.painterResource

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

import kotlinx.coroutines.delay

import kotlin.random.Random

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContent {

            DiceRollerApp()

        }

    }

}

@Composable

fun DiceRollerApp() {

    var diceRoll by remember { mutableStateOf(1) }

    var isRolling by remember { mutableStateOf(false) }

    val alphaAnim = remember { Animatable(1f) }

    Surface(

        modifier = Modifier.fillMaxSize(),

        color = Color(0xFFFFE4E1)

    ) {

        Column(

            modifier = Modifier.fillMaxSize(),

            verticalArrangement = Arrangement.Center,

            horizontalAlignment = Alignment.CenterHorizontally

        ) {

            Text(

                text = "Roll the Dice! 🎲✨",

                fontSize = 26.sp,

                color = Color.Magenta

            )

            Spacer(modifier = Modifier.height(16.dp))

            LaunchedEffect(isRolling) {

                if (isRolling) {

                    repeat(10) {

                        diceRoll = Random.nextInt(1, 7)

                        alphaAnim.animateTo(0.5f, animationSpec = tween(100))

                        alphaAnim.animateTo(1f, animationSpec = tween(100))

                        delay(50)

                    }

                    isRolling = false

                }

            }

            Image(

                painter = painterResource(id = getDiceImage(diceRoll)),

                contentDescription = "Dice Image",

                modifier = Modifier

                    .size(150.dp)

                    .clip(CircleShape)

                    .background(Color.White)

                    .alpha(alphaAnim.value)

                    .clickable { if (!isRolling) isRolling = true }

            )

            Spacer(modifier = Modifier.height(16.dp))

            Button(

                onClick = { if (!isRolling) isRolling = true },

                colors = ButtonDefaults.buttonColors(containerColor = Color.Blue)

            ) {

                Text(text = "Roll Dice", color = Color.White)

            }

            Spacer(modifier = Modifier.height(16.dp))

            Text(

                text = "Tap the dice or press the button to roll! 🐰💕",

                fontSize = 18.sp,

                color = Color.Gray

            )

        }

    }

}

fun getDiceImage(roll: Int): Int {

    return when (roll) {

        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

    }

}

Berikut cara penggunaannya: 

Demo youtube : Demo

Github : Tugas 4