pm3512 / llm-lecture

Tic Tac Toe React App

This repository only contains this Readme. Your task is to build a tic tac toe react app using generative AI tools like ChatGPT or GitHub Copilot to assist you in every aspect of the process.

Before you begin working on the TO-DO, please take note of the following questions which we will be discussing after the activity:

1. What are the advantages and disadvantages of using generative AI tools like ChatGPT and GitHub Copilot?
2. What kind of task did you find worked well with ChatGPT and GitHub Copilot?
3. What kind of task did you find did not work well with ChatGPT and GitHub Copilot?
4. What is something you did not expect when using ChatGPT and GitHub Copilot?

TO-DO

Disclaimer You are should attempt each task, but there is no guarantee that ChatGPT / Copilot can assist you with it. If you find yourself stuck, you may move on or try a different task.

• Make a fork of this repository, work individually or as pairs
• Set up Boilerplate Create React App
• Implement the Core Features
• Write tests Write unit tests for your components and functions using a testing library (e.g., Jest, React Testing Library). Ensure that your tests cover edge cases and provide adequate code coverage.
• Write documentation Document your code, including component descriptions, function explanations, and usage instructions. This will help future developers understand and maintain the codebase.
• Write commit messages and push commits
• Make a Pull Request and write pull request descriptions
• Implement the Stretch Features

Core Features to Implement

1. Display game board: Create a 3x3 game board using a combination of React components and CSS styling. Each cell of the game board should be clickable.

2. Player turns: Implement alternating turns for two players, X and O. Show an indicator (e.g., text or visual cue) to inform the current player whose turn it is.

3. Handle player moves: When a player clicks on an empty cell, mark it with their respective symbol (X or O). Prevent a player from overwriting an occupied cell.

4. Check for win condition: After each move, check if there's a winning combination (3 in a row, column, or diagonal) on the board. If a player wins, display a congratulatory message and highlight the winning combination.

5. Check for draw: If there are no empty cells remaining and no player has won, declare the game as a draw and display an appropriate message.

6. Reset game: Provide a button to reset the game, clearing the game board and resetting the turn indicator.

Stretch Features

1. Player customization: Allow players to choose their own symbols or colors, making the game more personalized.

2. Undo/redo moves: Allow players to undo or redo their moves, enabling them to correct mistakes or try different strategies.

3. Game board size: Let users choose the size of the game board (e.g., 4x4, 5x5) to increase the complexity of the game.

4. CPU player: Create an AI-based CPU player with a basic level of intelligence for a single-player mode. The CPU player should be able to make valid moves and have some strategy to avoid losing.

5. Advanced CPU player: Enhance the AI-based CPU player to include multiple difficulty levels. Implement algorithms such as Minimax, Alpha-Beta Pruning, or Monte Carlo Tree Search to make the CPU player more challenging to defeat.

Super bonus stretch features

1. Write a test for NodeBB

2. Explain some code in NodeBB

3. Add comments to code in NodeBB

Resources

• React Documentation: https://reactjs.org/docs/getting-started.html
• Jest Documentation: https://jestjs.io/docs/getting-started
• React Testing Library Documentation: https://testing-library.com/docs/react-testing-library/intro
• ChatGPT: https://chatgpt.com/
• GitHub Copilot: https://copilot.github.com/