From 37316c7706397ea6333a58fbe97b4f4f9d98fece Mon Sep 17 00:00:00 2001
From: Klaas-Jan Boon <klaas-janboon@live.nl>
Date: Wed, 11 Sep 2024 02:49:27 +0200
Subject: [PATCH] Fix  "game_menu" example buttons not changing color on
 Interaction (#15153)

# Objective

Fixes #15079 , repairing the `game_menu` example

## Solution

- Changed the target component for the color updates from `UiImage` to
`BackgroundColor`.
- Changed the width of the `button_style` to `300px` to prevent overlap
with the text.

## Testing

Checked that buttons now correctly update their background color on
hover/exit/press.

---

## Showcase



https://github.com/user-attachments/assets/8f7ede9b-c271-4b59-91f9-27d9e3db1429
---
 examples/games/game_menu.rs | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs
index 5c5f1c4752..5e64a164c4 100644
--- a/examples/games/game_menu.rs
+++ b/examples/games/game_menu.rs
@@ -345,16 +345,16 @@ mod menu {
     // This system handles changing all buttons color based on mouse interaction
     fn button_system(
         mut interaction_query: Query<
-            (&Interaction, &mut UiImage, Option<&SelectedOption>),
+            (&Interaction, &mut BackgroundColor, Option<&SelectedOption>),
             (Changed<Interaction>, With<Button>),
         >,
     ) {
-        for (interaction, mut image, selected) in &mut interaction_query {
-            image.color = match (*interaction, selected) {
-                (Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON,
-                (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON,
-                (Interaction::Hovered, None) => HOVERED_BUTTON,
-                (Interaction::None, None) => NORMAL_BUTTON,
+        for (interaction, mut background_color, selected) in &mut interaction_query {
+            *background_color = match (*interaction, selected) {
+                (Interaction::Pressed, _) | (Interaction::None, Some(_)) => PRESSED_BUTTON.into(),
+                (Interaction::Hovered, Some(_)) => HOVERED_PRESSED_BUTTON.into(),
+                (Interaction::Hovered, None) => HOVERED_BUTTON.into(),
+                (Interaction::None, None) => NORMAL_BUTTON.into(),
             }
         }
     }
@@ -363,14 +363,14 @@ mod menu {
     // the button as the one currently selected
     fn setting_button<T: Resource + Component + PartialEq + Copy>(
         interaction_query: Query<(&Interaction, &T, Entity), (Changed<Interaction>, With<Button>)>,
-        mut selected_query: Query<(Entity, &mut UiImage), With<SelectedOption>>,
+        mut selected_query: Query<(Entity, &mut BackgroundColor), With<SelectedOption>>,
         mut commands: Commands,
         mut setting: ResMut<T>,
     ) {
         for (interaction, button_setting, entity) in &interaction_query {
             if *interaction == Interaction::Pressed && *setting != *button_setting {
-                let (previous_button, mut previous_image) = selected_query.single_mut();
-                previous_image.color = NORMAL_BUTTON;
+                let (previous_button, mut previous_button_color) = selected_query.single_mut();
+                *previous_button_color = NORMAL_BUTTON.into();
                 commands.entity(previous_button).remove::<SelectedOption>();
                 commands.entity(entity).insert(SelectedOption);
                 *setting = *button_setting;
@@ -385,7 +385,7 @@ mod menu {
     fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
         // Common style for all buttons on the screen
         let button_style = Style {
-            width: Val::Px(250.0),
+            width: Val::Px(300.0),
             height: Val::Px(65.0),
             margin: UiRect::all(Val::Px(20.0)),
             justify_content: JustifyContent::Center,