Turn-Based Games: How to synchronize turn-based games with RPC's

How to fix the issue in Solitaire 21

The first thing that needed to be done in Solitaire 21, is to remove Input synchronization & turn off Prediction as mentioned here.

Once this is done, the input was changed to be handled locally only.
As you can see in the image below, the card is moved on the Client (right) but not on the Server (left):

Now, we need to make sure the server is synchronized with the client.
As you probably guessed, we will do this using RPC calls.

Sending RPC To Server

For Solitaire this is quite simple due to the way the grid works in the game.
The grid saves each card with a row and column value, and the spawn tracks each card as an index between 0-2 (ignoring the extra joker card as it's not relevant for this tutorial)

So we want to fetch this information before sending the RPC like so:

//Wait for server ack before allowing players to input (explained later)
_waitForServerAck = true;
//Fetch indexes by using _cardToMove 
int indexOfCard = CardSpawner.instance.GetSpawnedCardIndex(_cardToMove);
GridPiece gridPiece = _cardToMove.lastNearestGridPiece;
//Send RPC call
Grid.instance.SetCardInServer(indexOfCard, gridPiece.rowIndex, gridPiece.columnIndex);
StartCoroutine(PlaceCardOnGridAndCheckForCompleted(_cardToMove));

So now what we want to do, is simply send this information to the server via RPC, and handle the same logic on the server that happened in the client

[ElympicsRpc(ElympicsRpcDirection.PlayerToServer)]
public void SetCardInServer(int cardIndex, int gridPieceRowIndex, int gridPieceColumnIndex)
{
    if (Elympics.IsServer)
    {
        Debug.Log("[Grid] Server - server received RPC from client, doing operations");

        var card = CardSpawner.instance.GetSpawnedCardByIndex(cardIndex);
        var gridPiece = gridPieces.First(x => x.rowIndex == gridPieceRowIndex && x.columnIndex == gridPieceColumnIndex);
        card.lastNearestGridPiece = gridPiece;

        //This coroutine has control over all the functionality of moving a piece, so everything should work from here
        StartCoroutine(PlaceCardOnGridAndCheckForCompleted(card));
    }
}

The server receives this RPC call, and finds the correct card, and grid piece by using the indexes sent from Client.

After that, the coroutine PlaceCardOnGridAndCheckForCompleted(card) is started which is the same code used in the Client to place the card (with some minor changes).

Sending Response RPC To Client

Now the second part of the RPC calls should be done, this is sending the "response" back to the Client when the Server has completed operations.

You want to do this for 2 reasons:

1. If RPC fails, you can detect this issue in the Client and handle appropiately.
2. You do not want your client to send multiple RPC calls to server without receiving a response, because you can have desync issues again.

The simplest way to achieve this, would be to add a boolean variable in your code, something like:

private bool _waitForServerAck = false;

Notice how in the Client code we set this variable to true before sending the RPC call. We do this to block inputs from Client if this variable is true.

Then once the StartCoroutine(PlaceCardOnGridAndCheckForCompleted(card)); code is finished on the Server, we send the RPC call to the Client like this:

[ElympicsRpc(ElympicsRpcDirection.ServerToPlayers)]
public void ServerAck()
{
    _waitForServerAck = false;
    Debug.Log("GAME CAN CONTINUE");
}

Now your game can continue and we have a synchronized Server & Client!

warning

Again, this guide assumed you know the basics about working with Elympics and already have your Server & Client random generator synchronized.
This is why the same cards spawn in the Server & in the Client which allows this implementation to work.