Tugas 8 PPB A

Nama: Meylina Tesa Hapsari

NRP: 5025221149

Kelas: PPB A

Link GitHub 

var waterAmount by remember { mutableStateOf(0) }
val maxWaterAmount = 2400
val fillRatio = waterAmount / maxWaterAmount.toFloat()

• waterAmount: menyimpan jumlah air yang sudah diminum (dalam mL)
• maxWaterAmount: kapasitas maksimum botol
• fillRatio: menghitung seberapa penuh botol (antara 0 sampai 1)

val waterColor = Color(0xFF2196F3) // Material Blue
val textColor = if (fillRatio > 0.50f) Color.White else Color.Blue

• Mengatur warna air menggunakan warna biru dari palet Material
• Megubah warna teks menjadi putih ketika air sudah lebih dari 50%

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colorScheme.surface),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Box(
        modifier = Modifier
            .width(150.dp)
            .height(400.dp),
        contentAlignment = Alignment.Center
    )

...

• Mengatur letak gambar botol, teks, dan tombol

Canvas(modifier = Modifier.fillMaxSize()) {
    val width = size.width
    val height = size.height
    val neckWidth = width * 0.4f
    val neckHeight = height * 0.15f
    val cornerRadius = width * 0.2f

    val capWidth = neckWidth * 1.2f  // Lebih lebar dari leher
    val capHeight = neckHeight * 0.5f
    val capLeft = (width - capWidth) / 2
    val capTop = 0f

    // Gambar botol
    val bottlePath = Path().apply {
        // Leher atas
        val neckLeft = (width - neckWidth) / 2
        val neckRight = (width + neckWidth) / 2

        moveTo(neckLeft, capHeight)
        lineTo(neckRight, capHeight)
        lineTo(neckRight, neckHeight)

        // Kanan badan
        arcTo(
            rect = Rect(
                left = neckRight - cornerRadius,
                top = neckHeight,
                right = neckRight + cornerRadius,
                bottom = neckHeight + 2 * cornerRadius
            ),
            startAngleDegrees = -90f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        lineTo(width, height - cornerRadius)

        // Bawah
        arcTo(
            rect = Rect(
                left = width - 2 * cornerRadius,
                top = height - 2 * cornerRadius,
                right = width,
                bottom = height
            ),
            startAngleDegrees = 0f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )

        lineTo(2 * cornerRadius, height)

        // Kiri bawah
        arcTo(
            rect = Rect(
                left = 0f,
                top = height - 2 * cornerRadius,
                right = 2 * cornerRadius,
                bottom = height
            ),
            startAngleDegrees = 90f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )

        lineTo(39f, neckHeight + cornerRadius)

        // Kiri badan atas
        arcTo(
            rect = Rect(
                left = neckLeft - cornerRadius,
                top = neckHeight,
                right = neckLeft + cornerRadius,
                bottom = neckHeight + 2 * cornerRadius
            ),
            startAngleDegrees = 180f,
            sweepAngleDegrees = 90f,
            forceMoveTo = false
        )
        close()
    }

    drawRoundRect(
        color = Color.Black,
        topLeft = Offset(capLeft, capTop),
        size = Size(capWidth, capHeight),
        cornerRadius = CornerRadius(x = 12f, y = 12f) // bikin sedikit melengkung
    )

    clipPath(bottlePath) {
        drawRect(
            color = waterColor,
            topLeft = Offset(0f, waterTop),
            size = Size(width, waterHeight)
        )
    }

    // Outline botol
    drawPath(
        path = bottlePath,
        color = Color.Black.copy(alpha = 0.3f),
        style = Stroke(width = 4f)
    )

• Mengatur gambar botol, gambar tutup botol, air, dan outline botol

Text(
    text = "$waterAmount ml",
    color = textColor,
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

• Menampilkan volume air secara realtime di tengah botol

Text(
    text = "Total amount is: $waterAmount ml",
    style = MaterialTheme.typography.bodyLarge
)

• Menampilkan total air yang diminum di bawah botol

Button(
    onClick = {
        if (waterAmount < maxWaterAmount) waterAmount += 100
    },
    shape = RoundedCornerShape(50),
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary
    )
) {
    Text("Drink", color = Color.White)
}

• Mengatur tombol untuk menambahkan air sebanyak 100 mL setiap ditekan dan tidak melebihi maxWaterAmount