Exploring Blazor WebAssembly

Having previously used Blazor SSR, I was keen to try Blazor WebAssembly, so I decided to create a little game.

The following technologies were used:

  • C# 11
  • Blazor .NET 7
  • Visual Studio 2022
  • Bootstrap 4

There are two applications and a class library:

  • TicTacToe
  • TicTacToe.Console
  • TicTacToe.Common

Player vs Computer

The first application is a player vs computer game using Blazor WebAssembly. Who is X and goes first is randomly selected. There is a choice of four players to challenge by clicking on their respective name:

  • Tipsy the drinker
  • Genghis the conqueror
  • Boris the cautious
  • Sima Yi the stategist

Sima Yi is unbeatable, he uses the Minimax algorithm - he is a little slower in making a move.

The other players use rules to determine their moves. This is an example of the winning rule:

public class BlockRule : Rule
{
    public override Position? Execute(int moveCount, Board board, Value side)
    {
        var opponent = board.GetOtherSide(side);
        var squares = board.WinningSquares(opponent);

        return squares.HasItems ? squares.First.Position : null;
    }
}

Here we define the rule configuration for Boris, our cautious player:

public class Boris : ComputerPlayer
{
    public Boris(Value side) : base("Boris", side)
    {
        AddRule<FirstMoveRule>();
        AddRule<WinRule>();
        AddRule<BlockRule>();
        AddRule<CounterCornersRule>();
        AddRule<CenterRule>();
        AddRule<CreateForkRule>();
        AddRule<RandomRule>();

        Celebration = "Patience wins the day!";
    }
}

And Tipsy, our wine sampling friend:

public class Tipsy : ComputerPlayer
{
    public Tipsy(Value side) : base("Tipsy", side)
    {
        AddRule<RandomRule>();

        Celebration = "Wow! What happened?!";
    }
}

It's simple to add new rules, and new players can be easily configured.

Interestingly, Sima Yi is unable to beat Boris.

Computer vs Computer

The second application TicTacToe.Console was created to test the player configurations.

The application randomly selects opponents, displays games in progress, and updates statistics:

Tic-Tac-Toe

Conclusion

I must say, I always enjoy using Blazor — WebAssembly did not disappoint.

It was also nice to have created a player that held his own against the Minimax algorithm.