Reputation: 59
I'm currently making a slide puzzle game using JavaFX:
To play the game, you click buttons next to the empty box to switch the two, and the point of the game is to get all the buttons in numerical order from 1 to 15 in the least amount of moves possible. I finished coding the game for the most part (still have a few features I want to add), but now I want to style the buttons using CSS.
But here's the thing: there is a boolean value for each button that determines if it can be moved (true if it's next to the emptyButton, false otherwise). How can I style the buttons so that if their corresponding boolean value is true, the background color is green, and red otherwise? I'm not too skilled in CSS so any help would be much appreciated. Thanks!
Upvotes: 2
Views: 1705
Reputation: 210
The easiest way is by creating pseudoclass, as mentioned, here is an example:
private PseudoClass empty = PseudoClass.getPseudoClass("empty");
in the button change add:
pseudoClassStateChanged(empty,isNextToEmpty(sampleButton));
given that the method isNextToEmpty() returns the Boolean value you added to the button.
In a css file:
.button:empty {
-fx-background-color: green;}
Upvotes: 3