Your first SFML game, Part III: The User Interface· Rodrigo Castro

We already have a fully working game. But… we can’t play it yet!! We have to decide how the game should work with the player… Well, I’ve already decided it for you :D When the player clicks a column, it will try to add a token. If the column has no more empty spaces, the player should retry in another column. When a player has won, or the board is full. A click on the screen will restart the game. You can play again ;)

To do these, we’ll have a class that will interact with the players.

We include board.h because we’re using the board within the userInterface class:

////////////////////////////////////////////////////////////
// uInterface.h
////////////////////////////////////////////////////////////

#ifndef UI
#define UI

#include "board.h"

We define then our userInterface class

class UInterface
{
    public:
        // Constructor
        UInterface(Board &boardRef;);

        // Destructor
        ~UInterface();

        // Called when the mouse has clicked inside the screen
        void placeInColumn(const sf::Input &input;);

    private:
        // the column where the mouse clicks the screen
        unsigned int column;

        // A reference to the board, created in the main loop
        Board &board;

        // The total number of tokens the players have placed
        int nbTurns;

        // The color of the next token to be placed
        Token nextPlayer;

        // Whether the game has finished, a token has been placed
        // or it couldn't be placed in a column
        Move gameStatus;
};

#endif

Then we code the implementation. These is pretty straight forward, once you’ve decided what you want to do. In our case We already know how we want the game to react to the player :

We initialize the constructor :

////////////////////////////////////////////////////////////
// uInterface.cpp
////////////////////////////////////////////////////////////

#include "uInterface.h"

UInterface::UInterface (Board &boardRef;): board(boardRef)
{
    // No movements have been made
    nbTurns = 0;
    // The game starts with the yellow player
    nextPlayer = Yellow;
}

UInterface::~UInterface(){}

Then, we code the method we’ll call when the user has clicked somewhere on screen. We pass the coordinates of the mouse position with the input object. We can get the “X” position with the method input.GetMouseX()

void UInterface::placeInColumn(const sf::Input &input;)
{
    // Get the column where the user has clicked
    // This is just an approximation, as the columns have a little offset
    // This will work only if the user clicks inside the circle
    column = float(input.GetMouseX())/board.getWindowWidth()*BOARD_X_SIZE+1;
    //If it is game over, create a new one
    if(gameStatus == EndOfGame)
    {
        board.restart();
        nbTurns = 0;
        gameStatus = Full;
    }
    else
    {
        // Try to place the token in the desired column
        gameStatus = board.addTokenInColumn(column, nextPlayer);
        // If the column wasn't already full, continue playing
        if(gameStatus != Full)
        {
            nbTurns++;
            // Change the nextplayer
            if(nextPlayer == Yellow)
                nextPlayer = Red;
            else
                nextPlayer = Yellow;
            // if the board is full: game over!!
            if(nbTurns == BOARD_X_SIZE*BOARD_Y_SIZE)
                gameStatus = EndOfGame;
        }
    }
}

We know have an almost complete game, but wait, we can’t play it yet!! Why?? Because in the main code, we haven’t created the board, nor the user interface…What are you waiting?… Read on the next post to be able to play it!!:P

Table of Contents