XOX Winners is a classic Tic-Tac-Toe game with an exciting twist. It offers a variety of game types as well as the chance to compete against a computer opponent while still allowing players to enjoy the classic action. To win the game, you must line up three markers in a row, whether they are placed vertically, horizontally, or diagonally.

• XOX-Winners page.

• Overview
• Features
• Testing
• Validator Testing
• Deployment
• Credits

The navigation bar in the game has a minimalistic appearance. It comprises of a logo that can be clicked on to navigate to the home page.

The landing page of the XOX Winners game provides a seamless entry into the gameplay experience. Users are welcomed with the game's visually beautiful and user-friendly interface when they launch it. Players can pick between "Player vs. Player" and "Player vs. Machine" on the landing page, which acts as their starting point.

• Play against another player on the same device and take turns making moves.

• Challenge the computer opponent in a one-on-one match. Test your skills against an AI that makes strategic moves.
• In "Player vs Machine" mode, the computer automatically chooses a free cell.

• The game board adjusts to fit different screen sizes, providing a responsive and enjoyable gaming experience on various devices.

• The number of rounds in the game is indicated by totalRounds.
• The game moves on to the following round after each round, and the round number is increased.
• The game concludes when the predetermined number of rounds has been completed, and the winner is decided using the scores.

• Keep track of the scores for each player (Player X and Player O) as the game progresses through multiple rounds.

• Restart the game at any time with a click of the "Restart" button to start a fresh match.

The game has a rules section that describes how the game works and its rules so as to facilitate players to have a more competitive and fun game.

The site has a footer with the description of the copyrights

• The game's interface is simple to use and features both written and visual elements.
• The current round number and each round's outcome are displayed on the round display.
• Visually appealing graphics are used to depict the game board and score information.

• The interface of the game is made to be responsive and adjustable for various screen sizes and gadgets.

The site was not difficult to create, although I had a lot of difficulties in making a flow that would facilitate the development of the game, after a lot of research I found these two links (https://codepen.io/lando464/pen/BPGEKO) and (https://codepen.io/janschreiber/pen/xZbEvM) from the game where I inspired to create the board and the javaScript code.

1. Problem: No game logic implemented

• Description: Initially, the project lacked the necessary game logic for handling player moves, win detection, and round tracking.
• Solution: Implemented the game logic by adding event listeners to each cell for player moves, creating an array to store the board state, and implementing win detection using predefined winning combinations.
• Commit: Link to related commit

2. Problem: No Restart Functionality

• Description: The game lacked a restart functionality to reset the game state and scores.
• Solution: Added an event listener to the restart button, which reloads the page to restart the game.
• Commit: Link to related commit

3. Problem: Computer decision did not consider winning

• Description: computer's decision-making process for selecting a move. Specifically, the previous implementation of computerMove() did not consider winning moves for the computer.
• Solution: Create a for with winningCombination by following this code
• Commit: Link to related commit

4. Problem: Game wouldn't restart in player vs machine mode after 5 rounds

• Description: The game always continues after 5 rounds, sometimes it freezes and does not continue and does not reset the game board
• Solution: I went to the endGame function and changed if playerScores >=5 to announce the winner and start nextRound. then I removed the if condition (currentRound === totalRounds) and called endGame() in the handleCellClick(event) function and computerMove() function.
• Commit 1: Link to related commit
• Commit 2: Link to related commit

5. Problem: After I play, I can play before the machine makes its move

• Description: In the game's "Player vs Machine" mode, the player had the ability to make a move during the machine's turn. This was because the click event on board cells was not disabled during machine play, allowing the player to interact with the board and make a move.
• Solution: The solution to this problem involved removing the click event from all cells when it is the machine's turn to move, and adding it back after the machine has made its move. This has been implemented in the handleCellClick, computerMove and startNextRound functions. Now, the player can only interact with the board when it's their turn, preventing them from making a move during the machine's turn.
• Commit: Link to related commit

• In player vs machine mode when the machine wins the game it does not hide the board and shows the round and the winner, it only does this when Player X wins or Tie. I made changes to the endGame() function and computerMove() to checkWin currentPlayer roundResult.textContent = Player ${currentPlayer} Won!; // Display round result it still didn't work. I spend the last 5 days trying to figured it out where my code is not working, i went through tutorials but they were showing me different methods but as i didnt have much time i couldnt solve it and i had to be sure most of the codes work to reach a pass.

• Add sound effect when computer and player make their moves;
• Add difficulties in the game (Easy, Medium and Difficult);
• Fix the machine wins the game that does not hide the board and shows the round and the winner;

The subsequent web browsers were utilized to evaluate the website's compatibility and consistent appearance. Comprehensive responsiveness tests were conducted, and the results indicated satisfactory performance across these platforms, ensuring a seamless user experience.

• Desktop
• Laptop
• Tablet
• Smartphone

• Desktop
• Laptop
• Tablet
• Smartphone

• Desktop
• Laptop
• Tablet
• Smartphone

By running the test at Validator w3 html Document checking completed. No errors or warnings to show

By running the test at Jigsaw w3 css/ W3C CSS Validation Results for TextArea (CSS Level 3 + SVG) No errors were found in your stylesheet.

The code was tested on jshint Without errors.

• The following metrics were returned:

• There are 17 functions in this file.
• Function with the largest signature take 1 arguments, while the median is 0.
• Largest function has 29 statements in it, while the median is 3.
• The most complex function has a cyclomatic complexity value of 21 while the median is 1.

• Three warnings:

• 57 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (handleGameModeSelection)
• 91 Expected an assignment or function call and instead saw an expression.
• 174 Expected an assignment or function call and instead saw an expression.

• I confirmed that colors and fonts chosen are easy to read and accessible by running it through lightouse in chrome devtools

The site was deployed to GitHub pages. The steps to deploy are as follows:

• Log in to your GitHub account and go to the main page of your repository.
• Click on the "Settings" tab at the top of the repository page.
• Scroll down to the "GitHub Pages" section.
• In the "Source" drop-down menu, select "main" or "master" (depending on your setup) and choose the "root" or "docs" folder if you are using a specific folder to host your site.
• Click on "Save."
• The page will refresh, and after a few moments, you will see a message stating that the deployment was successful. The live link to your site will be provided just below this message.

• The text for the "XOX Winners" project was inspired on my knowledge and this Link.
• The font of the text was used googlefonts.

• The logo of the project was created by me using photoshop and font Posey Textured for the text.
• Screenshot of the responsive where taken from ui.dev.
• To create Skeleton of the project it was used the Balsamiq wireframe.

• HTML5
• CSS
• JAVASCRIPT

• The code was inspired by these 2 versions lando464 & janschreiber.
• I used codeanywhere for the development of the project as a whole.
• I used gitpod for the development of the project as a whole.
• Assistance with HTML, CSS was provided by Developer Mozilla CSS-tricks, TikTok and JavaScript HTML DOM.
• Tutorials and documentation from Code Institute Love Math and youtube video.
• My Mentor Can Sücüllü were consulted during the development process.
• I used Basic writing and formatting syntax from GitHub Docs
• I created a custom 404 page for GitHub by following this link.