Tic Tac Toe I

Prompt

Do you know what Tic Tac Toe is? Your task is to create a Tic Tac Toe game.

The objective is to develop a program that enables two players to take turns playing on a 3x3 grid, with the first player being designated as "X" and the second player as "O". The winner is the player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row.

Requirements

Render a 3x3 "Tic Tac Toe" board.
Enable players to place 'X' and 'O' marks on the board.
Implement a restart button that resets the game to its initial state.
Display the game status, which includes:
- Next player: X
- Match draw
- Winner: X
Ensure the styling closely resembles the one shown in the provided GIF.

Example

Playground (Prompt 1)

Hint 1

Consider a way to represent the game board's state. Using an array is a practical approach, with each element corresponding to a square on the board. This array can hold values like 'X', 'O', or null. 'X' and 'O' represent the respective player's move in a square, while null indicates an unselected square. As players make their moves, update this array to reflect the current state of the game.

Hint 2

The game needs to alternate turns between the two players, 'X' and 'O'. One way to do this is by tracking the number of moves made so far. Consider a function that counts the filled squares in your game state array. If the count of filled squares is even, it could be 'X's turn; if odd, then it's 'O's turn. This pattern ensures that the players alternate after each move. How can you integrate this counting logic into your game's state updates to determine and display whose turn it is next?

Solution (Prompt 1)

My Attempt (Prompt 1)

Interviewer Criteria

HTML/CSS

Does my layout accurately reflect the classic Tic Tac Toe design?
Are my CSS class names both self-explanatory and meaningful, enhancing readability?
Did I use the button HTML element to build the squares in my Tic Tac Toe game, ensuring good semantic structure and accessibility?
How effortlessly was I able to create the Tic Tac Toe grid layout using CSS?

JavaScript

Is the game logic for determining the next player and calculating the winner both robust and efficient?
How effectively did I manage the game's state, particularly in terms of updating and rendering the squares?
Do my variable and function names across the codebase enhance the readability and maintainability of my code?
How effectively did I handle potential errors and edge cases, like clicking an already filled square or handling server errors?
Do I have a solid understanding of how to use Promises in JavaScript, and am I proficient in handling the .then() and .catch() methods for successful and failed operations, respectively?

React

Did I efficiently manage the game's state by deriving all necessary values (like the next player, winner, and game status) from a single squares state, instead of maintaining multiple states?
Have I used React hooks, such as useState, optimally to manage the game's state?
Did I ensure proper use of the key prop in React lists, especially in rendering the game squares, to optimize performance?
Are my components, especially <Square /> and <Board /> , designed for maximum reusability and clarity?
Have I ensured that the state of the Tic Tac Toe game, particularly the squares array, is not directly mutated, and that I'm manipulating the array in an immutable way?

Component Architecture

Have I structured my components (Game, Board, Square) to maintain a clear and logical hierarchy?
Are the component names and their respective functionalities clear and easy to understand?
Did I effectively separate the game logic from the UI components to maintain clean code architecture?

Time Checkpoints

10:00 AM
Interview starts
10:03 AM
Interviewer introduces the prompt
10:05 AM
Candidate reviews the prompt, seeks clarification as needed, and initiates coding
10:10 AM
Game, Square, and Board components barebones built
10:12 AM
Squares state initialized and <Square/> rendered using squares state and map method
10:20 AM
Styling of Tic Tac Toe completed
10:22 AM
Adjusted board to render empty squares with Array.fill
10:27 AM
Square selection logic implemented
10:30 AM
Logic to calculate next player implemented
10:32 AM
Game status calculated and rendered
10:34 AM
Restart game button and functionality added
10:36 AM
Winner calculation logic added
10:40 AM
sendRequest function imported and used
10:45 AM
Board updating logic moved to sendRequest function
10:50 AM
Error and loading state added
11:00 AM
Interview ends