Ending and Restarting Games

Customizing the New Game Button

How can we customize the appearance of the "New Game" button?

Abstract art representing computer programming

Customizing the appearance of the "New Game" button is a great way to enhance the visual appeal of your Minesweeper game. Let's explore a few ways to do this:

Changing Colors

One simple way to customize the button is by changing its colors. We can modify the NewGameButton class to accept custom colors:

1#include "Globals.h"
2#include "Engine/Button.h"
3#include "Engine/Text.h"
4
5class NewGameButton : public Engine::Button {
6 public:
7  NewGameButton(int x, int y, int w, int h,
8    SDL_Color ButtonColor =
9      Config::BUTTON_COLOR,
10    SDL_Color TextColor = { 0, 0, 0, 255 })
11    : Button{ x, y, w, h }
12    , Text{ x, y, w, h, "NEW GAME", TextColor,
13      20 } {
14    SetColor(ButtonColor);
15  }
16
17  void Render(SDL_Surface* Surface) override {
18    Button::Render(Surface);
19    Text.Render(Surface);
20  }
21
22  void HandleLeftClick() override {
23    SDL_Event E{ UserEvents::NEW_GAME };
24    SDL_PushEvent(&E);
25  }
26
27 private:
28  Engine::Text Text;
29};

Now you can create a button with custom colors:

1NewGameButton Button{
2  Config::PADDING,
3  Config::GRID_HEIGHT + Config::PADDING * 2,
4  Config::WINDOW_WIDTH - Config::PADDING * 2,
5  Config::FOOTER_HEIGHT - Config::PADDING,
6  {0, 255, 0, 255},// Green button
7  {255, 255, 255, 255}// White text
8};

Adding Hover Effects

To make the button more interactive, we can add a hover effect:

1class NewGameButton : public Engine::Button {
2public:
3  // ... (previous code)
4
5  void HandleEvent(
6    const SDL_Event& E) override {
7    Button::HandleEvent(E);
8    if (E.type == SDL_MOUSEMOTION) {
9      int mouseX, mouseY;
10      SDL_GetMouseState(&mouseX, &mouseY);
11      if (IsPointInside(mouseX, mouseY)) {
12        SetColor(HoverColor);
13      } else { SetColor(NormalColor); }
14    }
15  }
16
17private:
18  Engine::Text Text;
19  SDL_Color NormalColor{ Config::BUTTON_COLOR };
20  SDL_Color HoverColor{
21    Config::BUTTON_HOVER_COLOR
22  };
23};

Adding an Icon

For a more visual approach, we could add an icon to the button:

1#include "Engine/Image.h"
2
3class NewGameButton : public Engine::Button {
4public:
5  NewGameButton(int x, int y, int w, int h)
6    : Button{ x, y, w, h },
7      Text{ x + h, y, w - h, h, "NEW GAME", {},
8            20 },
9      Icon{ x, y, h, h, "restart_icon.png" } {}
10
11  void Render(SDL_Surface* Surface) override {
12    Button::Render(Surface);
13    Text.Render(Surface);
14    Icon.Render(Surface);
15  }
16
17private:
18  Engine::Text  Text;
19  Engine::Image Icon;
20};

Remember to adjust the text position and add an appropriate icon image to your project.

These customizations will make your "New Game" button more visually appealing and interactive, enhancing the overall user experience of your Minesweeper game.

This Question is from the Lesson: