How can I reload (recompose) my game board on the ...

# compose

[Nat Strangerweather]

How can I reload (recompose) my game board on the click of a button? 🧵

[Nat Strangerweather]

@Composable
fun GameBoard() {
    val viewModel: MainViewModel = viewModel()

    val boardLetters = viewModel.shakeLetterBag().sliceArray(0..48)

       Column(
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Center,
    ) {
        LazyVerticalGrid(
            cells = GridCells.Fixed(7),
            verticalArrangement = <http://Arrangement.Top|Arrangement.Top>
        ) {
            items(boardLetters) { data ->
                Piece(data)
            }
        }
    }
}

[Nat Strangerweather]

@Composable
fun HomePage() {
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = {

            }) {
                Icon(imageVector = Icons.Filled.Refresh, contentDescription = "refresh icon")
            }
        }
    ) {
        Column(
            Modifier
                .fillMaxSize()
                .padding(10.dp)
        ) {
            ScoreBoard()
            WordBoard()
            GameBoard()
            Button()
        }
    }
}

[Nat Strangerweather]

I have created the FAB in my HomePage to restart the game.

[Chris Fillmore]

Looking at your code, my understanding here is your boardLetters should be some state in your view model, like this:

class MainViewModel : ViewModel() {
  ...
  var boardLetters by mutableStateOf(/* initial value */)
}

Your composable will recompose based on your game’s state. So as boardLetters gets updated, the UI will redraw. So, in order to completely reset your game, all you need to do is set boardLetters back to its initial value.

[Chris Fillmore]

So you could have a button like:

Button(onClick = {
  mainViewModel.boardLetters = /* initial value */
}) {
  Text("Reset game")
}

[Nat Strangerweather]

Oh I see! Thanks very much, will try that out! 😊