Creating the Grid

We'll now update our MinesweeperUI class to construct the MinesweeperGrid. Here's what you need to know:

• The MinesweeperUI has Render() and HandleEvent() methods, which are being called from the main event loop.
• The class is now forwarding those calls to the MinesweeperGrid component.
• As we saw above, the MinesweeperGrid component is then forwarding those HandleEvent and Render() calls to all of its Children - i.e., the MinesweeperCell objects.
• The MinesweeperGrid is being constructed by passing the Padding value from our config, causing the Grid to be drawn slightly offset from the top left edge of the window surface.

This structure ensures that events are properly distributed throughout our game components, and that everything is rendered in the correct position.

1// Minesweeper/UI.h
2#pragma once
3#include "Globals.h"
4#include "Minesweeper/Grid.h"
5
6class MinesweeperUI {
7public:
8  void Render(SDL_Surface* Surface){
9    Grid.Render(Surface);
10  }
11
12  void HandleEvent(const SDL_Event& E){
13    Grid.HandleEvent(E);
14  }
15
16private:
17  MinesweeperGrid Grid{
18    Config::PADDING, Config::PADDING
19  };
20};

Running our program, we should now see a grid of buttons, responding to our cursor:

Now we'll expand our MinesweeperCell objects to let users "clear" them by left-clicking. We'll implement this using a ClearCell() method and an isCleared member variable. Our Engine::Button class has a virtual HandleLeftClick() method which we can override.

1// Minesweeper/Cell.h
2#pragma once
3// ...
4
5class MinesweeperCell : public Engine::Button {
6public:  
7  // ...
8
9protected:
10  void HandleLeftClick() override;
11
12private:
13  void ClearCell();
14  bool isCleared{false};
15  // ...
16};

In the implementation of these functions:

• SetIsDisabled() is inherited from Engine::Button, and will cause our object to stop reacting to mouse events.
• SetColor is inherited from Engine::Rectangle (via Engine::Button) and will change the color of our button. We change the color to a new value that we'll add to the Config namespace in our Globals.h.

This implementation allows users to interact with our cells, changing their state when clicked.

1// Minesweeper/Cell.cpp
2
3// ...
4
5void MinesweeperCell::ClearCell(){
6  if (isCleared) return;
7  isCleared = true;
8  SetIsDisabled(true);
9  SetColor(Config::BUTTON_CLEARED_COLOR);
10}
11
12void MinesweeperCell::HandleLeftClick(){
13  ClearCell();
14}
15
16// ...

1// Globals.h
2// ...
3
4namespace Config{
5  // ...
6  inline constexpr SDL_Color BUTTON_CLEARED_COLOR{
7    240, 240, 240, 255};
8  // ...
9}
10// ...

A cell being cleared is an important action in the context of the wider game - for example, it can trigger a game-over state if the cell contains a mine, and adjacent cells may also need to react. To implement the gameplay, we'll need to notify other components every time a cell is cleared, so we'll use the SDL event loop.

We'll add our first custom event type to our UserEvents namespace:

1// Globals.h
2
3// ...
4
5namespace UserEvents{
6  inline Uint32 CELL_CLEARED =
7    SDL_RegisterEvents(1);
8}
9
10// ...

As we develop our game, cells will need to report various events. To streamline this process, let's create a ReportEvent() helper method.

This method will accept an event type parameter, which SDL represents as a 32-bit unsigned integer. Here's how we'll define it in our MinesweeperCell class:

1// Minesweeper/Cell.h
2
3// ...
4
5#pragma once
6// ...
7
8class MinesweeperCell : public Engine::Button {
9public:
10  // ...
11
12protected:
13  // ...
14
15private:
16  void ReportEvent(uint32_t EventType);
17  // ...
18};

In the implementation, we'll create an event of that type. We'll also attach a pointer to ourselves using the this keyword, so consumers of the event can understand which cell was cleared. We'll finally dispatch the event into the queue using SDL_PushEvent():

1// Minesweeper/Cell.cpp
2
3// ...
4
5void MinesweeperCell::ReportEvent(
6  uint32_t EventType){
7  SDL_Event event{EventType};
8  event.user.data1 = this;
9  SDL_PushEvent(&event);
10}
11
12// ...

Finally, we'll update our ClearCell() implementation to call our ReportEvent() function, passing the correct type.

We'll also update HandleEvent() to react to a cell being cleared. For now, we'll just log out a message, but we'll build upon this later:

1// Minesweeper/Cell.cpp
2
3// ...
4
5void MinesweeperCell::ClearCell(){
6  if (isCleared) return;
7  isCleared = true;
8  SetIsDisabled(true);
9  SetColor(Config::BUTTON_CLEARED_COLOR);
10  ReportEvent(UserEvents::CELL_CLEARED); 
11}
12
13void MinesweeperCell::HandleEvent(
14  const SDL_Event& E){
15  if (E.type == UserEvents::CELL_CLEARED) {
16    // TODO
17    std::cout << "A Cell Was Cleared\n";
18  }
19  Button::HandleEvent(E);
20}
21
22// ...

At this point, you should test the application to verify it's working correctly. You should see the grid as before, but now, left-clicking on a cell will clear it, causing it to change color and stop reacting to future mouse events.

Additionally, check the terminal to verify the event handling is working correctly. You should see "A Cell Was Cleared" logged out multiple times whenever you clear a cell.

1A Cell Was Cleared
2A Cell Was Cleared
3A Cell Was Cleared
4// ...

It's important to understand why multiple log messages appear for each cleared cell:

1. When ClearCell() is called within any of our cells, an SDL_Event is pushed into the queue.
2. The event loop (in main.cpp) receives this event and forwards it to the HandleEvent() method of our MinesweeperUI object.
3. The MinesweeperUI forwards the event to the HandleEvent() method of our MinesweeperGrid object.
4. The MinesweeperGrid forwards the event to the HandleEvent() method of every MinesweeperCell object in its Children array, allowing each cell to react to the event if necessary.

This is why "A Cell Was Cleared" is logged out multiple times. A single left click clears a single cell, but every cell is notified of the action and can react accordingly.

Complete versions of the files we changed in this part are available below

Files not listed above have not been changed since the previous section.

In this lesson, we've laid the groundwork for our Minesweeper game by implementing the grid system and individual cells. We've set up the global configuration, created classes for cells and the grid, and implemented basic interaction functionality.

Key progress in this lesson includes:

1. Defining the game's structure in Globals.h
2. Creating the MinesweeperCell class with clearing functionality
3. Implementing the MinesweeperGrid class to manage all cells
4. Setting up event handling and propagation through the game components
5. Implementing a custom event system for cell clearing

In the next lesson, we'll build upon these foundations and place bombs randomly within our grid. We'll implement the logic for bomb placement, update our cell-clearing functionality to handle bombs, and begin implementing the core game mechanics.