How to disable click button in widget before the previous button has been destroyed/finished

Hey so I want to create my roguelike game and I want to create widget UI, in the picture that I share, the animal skeleton in there is a button when the player click on it it will move them to a map. When they have slayed all the enemy in that map the player will be back to the widget and they can select the second skeleton. The problem is I dont know how to make the second or third skeleton button to be disabled before the player finish the quest in the first skeleton. So right now even from the beginning the player can just click the second or third skeleton skeleton before finishing the first one. So how to make my second skeleton being disabled before player finish the first one and being enabled after the player finish the first skeleton?

You can control the Visibility of any widget element like so:

Set the initially inaccessible buttons as NHT; and make them Visible once the player is ready to progress.

Another, a much more graceful way to handle this is to have each fight represented with a User Widget rather than a button.

  • this way each Fight can have its own logic scripted inside the instance of the widget
  • each Fight widget has a boolean switch indicating whether its accessible to the player
  • we can still interact with the Fight widget (to display a helpful a message regarding why this fight is still locked, perhaps) but the internal logic based on that bool prevents us from progressing
  • and it would be much easier to add any number of fights without having to duplicate the script
  • and it would allow you to generate those fights in a procedural fashion, with some optional randomness - since roguelikes revolve around this type of game loops