Tic Tac Toe

The Quadrille API can be highlighted by implementing Tic Tac Toe in two distinct ways: using multiple layers or a single aggregate layer.

1. Using Multiple Layers

In this approach, you’ll store each player’s moves in separate quadrilles (player1 and player2). This separation simplifies processing each player’s moves but may require additional synchronization logic to handle interactivity across layers.

Define Winning Patterns

Winning patterns—rows, columns, and diagonals—are shared between players and manually defined using base quadrilles:

ℹ️
  • Here, is used, but any glyph will work since the search(pattern, false) algorithm only checks for occupied cells, not the values.
  • The row and column winning patterns each require just a single base quadrille of 1x3 and 3x1 dimensions, respectively.
  • For more complex games or larger boards, you might consider generating patterns programmatically to save time and effort.

User Interaction

Players interact by clicking on cells to make their moves. The process involves:

  • Checking that the clicked cell is within bounds, determined by the Quadrille’s mouseRow and mouseCol properties.
  • Ensuring the selected cell is empty in both the current and the opponent’s quadrille, using the isEmpty(row, col) method.
  • Updating the current player’s turn using the player1 and player2 order property.

Once validated, the move is filled into the current player’s quadrille, and a winner check is performed.

Check for Winner

After each move, the current player’s quadrille is checked against the predefined winning patterns using search(pattern, false). This method ensures that the cells occupied by the player match a winning configuration, with disregard of the actual values. If a match is found, the player is declared the winner.

2. Using an Aggregate Layer

This approach uses a single shared game quadrille to track the entire game state. Player 1’s moves are represented by 'X', and Player 2’s by 'O'. While this approach simplifies interaction logic you’ll still need to define separate winning patterns for each player.

Define Winning Patterns

Separate arrays of quadrilles are used to store each player’s winning patterns—rows, columns, and diagonals. Player 1 ('X') and Player 2 ('O') will each have their own unique set of patterns.

ℹ️
  • Here, X and O should be used, since the search(pattern, true) algorithm checks for occupied cells, along with the values.
  • Once the X patterns are defined, you can use the Quadrille replace(‘X’, ‘O’) method to easily generate the O patterns.
  • The row and column winning patterns each require just a single base quadrille of 1x3 and 3x1 dimensions, respectively.
  • For more complex games or larger boards, you might consider generating patterns programmatically to save time and effort.

User Interaction

Players interact by clicking on cells to make their moves. The process involves:

  • Verifying that the clicked cell is within bounds using the game mouseRow and mouseCol properties.
  • Checking that the selected cell is unoccupied using the game isEmpty(row, col) method.
  • Updating the cell with the symbol corresponding to the current player, determined by the game order property.

If the cell is valid, the move is filled into the shared game quadrille, and the check for a winner follows.

Check for Winner

Winning patterns for the current player are checked against the shared game state using search(pattern, true). Strict matching ensures that the cells occupied match a winning configuration, along with their values. If a match is found in either player’s array of patterns, the respective player is declared the winner.