Unscramble App 🧠

 Furstin Aprilavia Putri - 5025221234 - PPB D

Unscramble App: Latihan ViewModel dan State di Android Compose 📱

1. Pendahuluan  

Unscramble App adalah aplikasi permainan sederhana di mana pengguna diminta menebak kata yang diacak. Jika jawaban benar, pengguna mendapatkan skor dan bisa lanjut ke kata berikutnya. Aplikasi ini menerapkan prinsip arsitektur modern menggunakan:

• Jetpack Compose sebagai UI toolkit

• ViewModel untuk menyimpan dan mengelola data UI secara terpisah dari tampilan

• State management agar UI bisa reactive terhadap perubahan data

2. Aplikasi

Kode lengkap dapat dilihat di GitHub : https://github.com/furstinvia/ppb-d-10-unscrambleapp.git

1. GameViewModel.kt

File ini berisi logika utama permainan: daftar kata, skor, pengecekan jawaban, dan sebagainya.

class GameViewModel : ViewModel() {

    private val _score = mutableStateOf(0)
    val score: State<Int> = _score

    private val _currentWord = mutableStateOf("")
    val currentWord: State<String> = _currentWord

    private val _currentScrambledWord = mutableStateOf("")
    val currentScrambledWord: State<String> = _currentScrambledWord

    private var wordList: MutableList<String> = mutableListOf()
    private var usedWords: MutableSet<String> = mutableSetOf()
    
    init {
        getNextWord()
    }

    fun checkUserGuess(guess: String): Boolean {
        if (guess.equals(currentWord.value, ignoreCase = true)) {
            _score.value += 10
            return true
        }
        return false
    }

    fun getNextWord() {
        if (wordList.isEmpty()) {
            wordList = WordList.words.toMutableList()
            usedWords.clear()
        }

        var nextWord: String
        do {
            nextWord = wordList.random()
        } while (usedWords.contains(nextWord))

        usedWords.add(nextWord)
        _currentWord.value = nextWord
        _currentScrambledWord.value = nextWord.toCharArray().apply { shuffle() }.concatToString()
    }
}

2. GameScreen.kt

File ini adalah tampilan UI yang berinteraksi langsung dengan ViewModel.

@Composable
fun GameScreen(viewModel: GameViewModel = viewModel()) {
    val userGuess = remember { mutableStateOf("") }

    val word = viewModel.currentScrambledWord.value
    val score = viewModel.score.value

    Column(
        modifier = Modifier.padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        Text("Skor: $score")
        Text("Tebak kata: $word")

        OutlinedTextField(
            value = userGuess.value,
            onValueChange = { userGuess.value = it },
            label = { Text("Jawaban Anda") }
        )

        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
            Button(onClick = {
                if (viewModel.checkUserGuess(userGuess.value)) {
                    userGuess.value = ""
                    viewModel.getNextWord()
                }
            }) {
                Text("Submit")
            }

            Button(onClick = {
                viewModel.getNextWord()
                userGuess.value = ""
            }) {
                Text("Lewati")
            }
        }
    }
}

3. MainActivity.kt

Entry point aplikasi Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                GameScreen()
            }
        }
    }
}

3. Video Presentasi

https://youtu.be/S-vaEejlUFw