Jetpack Compose Modifier Guessing Game!
Good news, Kotliners! I made a game, where you can test and improve your understanding of how Jetpack Compose modifiers work. In this game, you always see the same component, with different modifiers. The harder the level, the more modifiers are used. Your task is to guess what is the output of the code. You need to choose from a set of possible outputs, and each of those outcomes is the same component, with the same modifiers, but in a different order.
This game was made in Compose Multiplatform, and it is released as a website using Wasm. It looks good both on desktop and on mobile. Options displayed as possible answers are actual composables with modifiers applied, there are no images, so the correct answer is always correct.
When you open an exercise, you might see more options displayed for a moment. This is because many different orders result with visually identical outcomes. So this game first draws all possible options (all permutations or modifiers, limited to 30), and then shows only unique ones.
There are three levels of difficulty that influence the number of modifiers used, and the max number of options displayed (smaller number of options is displayed, if there is a smaller number of unique outcomes from all permutations of modifiers):
- Easy: 2 modifiers, 2 options
- Medium: 3 modifiers, max 4 options
- Hard: 4 modifiers, max 6 options
- Extreme: 6 modifiers, max 10 options
Sources of this game are available here. This game was literally made in a single day (Friday), and only small corrections were made after that. I must say I had a lot of fun making it. I hope you will have fun playing it. If you have any feedback, please let me know.
Currently, the following modifiers are supported:
size(30.dp)size(70.dp)padding(10.dp)padding(20.dp)clip(CircleShape)border(3.dp, Color.Black)border(3.dp, Color.Blue)background(Color.Blue)background(Color.Black)fillMaxSize()fillMaxWidth()fillMaxHeight()offset(10.dp, 10.dp)offset(20.dp, 20.dp)align(Alignment.Center)align(Alignment.BottomEnd)
If there are other modifiers you would like to see in this game, feel free to make PR to the source code.
