{"id":25334039,"url":"https://github.com/catrinlam/tic-tac-bros","last_synced_at":"2026-01-31T08:02:46.114Z","repository":{"id":267769241,"uuid":"902281478","full_name":"catrinlam/tic-tac-bros","owner":"catrinlam","description":"Tic Tac Toe game using HTML, CSS and Javascript                                                                                           ","archived":false,"fork":false,"pushed_at":"2024-12-16T16:15:36.000Z","size":2370,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-22T00:04:19.224Z","etag":null,"topics":["css","html","javascript","website"],"latest_commit_sha":null,"homepage":"http://catrin.is-a.dev/tic-tac-bros/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/catrinlam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-12T09:07:48.000Z","updated_at":"2024-12-16T16:15:09.000Z","dependencies_parsed_at":"2025-02-14T05:34:04.553Z","dependency_job_id":"54ae465a-8206-440d-814b-452779584b66","html_url":"https://github.com/catrinlam/tic-tac-bros","commit_stats":null,"previous_names":["catrinlam/tic-tac-bro","catrinlam/tic-tac-bros"],"tags_count":0,"template":false,"template_full_name":"Code-Institute-Org/ci-full-template","purl":"pkg:github/catrinlam/tic-tac-bros","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catrinlam%2Ftic-tac-bros","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catrinlam%2Ftic-tac-bros/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catrinlam%2Ftic-tac-bros/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catrinlam%2Ftic-tac-bros/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catrinlam","download_url":"https://codeload.github.com/catrinlam/tic-tac-bros/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catrinlam%2Ftic-tac-bros/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28934625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T07:49:44.436Z","status":"ssl_error","status_checked_at":"2026-01-31T07:49:34.274Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","website"],"created_at":"2025-02-14T05:33:59.519Z","updated_at":"2026-01-31T08:02:46.092Z","avatar_url":"https://github.com/catrinlam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tic Tac Bros\n\nTic Tac Bros is a web app game that lets friends and family enjoy the classic game of Tic-Tac-Toe together. It features a simple and modern design with smooth functionality. The game works well on desktops, tablets, and mobiles, making it fun and easy to play anywhere.\n\nVisit the live site [here](https://catrin.is-a.dev/tic-tac-bros/)\n\n![Responsive UI](assets/images/docs/responsive-ui.png)\n\n## Contents\n\n- [UX (User Experience)](#ux-user-experience)\n- [Design](#design)\n- [Website Features](#website-features)\n- [Tablet/Mobile View](#tabletmobile-view)\n- [Future Features](#future-features)\n- [Technologies Used](#technologies-used)\n- [Deployment](#deployment)\n- [Testing](#testing)\n- [Credits](#credits)\n\n## UX (User Experience)\n\n### User Stories\n\n- As a user, I want to easily navigate the website and start a game without hassle.\n- As a user, I want the website to look visually appealing and responsive on all devices.\n\n**Navigation Bar**\n\n- As a user, I can read a clear title and a rules toggle so that I know the website name and read the rules of the game.\n\n**Switching Mode Button**\n\n- As a user, I can switch between two gaming modes, one-to-one and computer mode, so that I can play with another player or against a computer.\n\n**Game**\n\n- As a user, I can see the gaming board and a reset so that I can play Tic-Tac-Toe with another player locally.\n- As a user, I can see the text showing which turn is it so that I know which player can make the move now.\n- As a user, I can see the winning cells highlighted so that I know how the player won.\n\n**Reset Button**\n\n- As a user, I can see the reset button so that I can restart the game.\n\n**Score Board**\n\n- As a user, I can see the score between two players so that I know the results.\n\n**Footer**\n\n- As a user, I can see the credit in the footer.\n\n### Strategy\n\nThe goal was to design a simple and accessible game platform that encourages social interaction while offering the familiar and fun experience of a universally loved game.\n\n### Scope\n\nThe project includes a fully functional Tic-Tac-Toe game for two players with plans for adding AI and scoring systems.\n\n### Structural\n\nThe website structure follows a single-page design, making it easy for users to navigate the website and switch between the game and other information.\n\n### Skeleton (Wireframes)\n\n**Mobile View**:\n\n  \u003cimg src=\"assets/images/docs/wireframes/mobile.png\" alt=\"Mobile Wireframes\" style=\"height: 400px; width: auto;\"\u003e\n\n**Tablet View**:\n\n  \u003cimg src=\"assets/images/docs/wireframes/tablet.png\" alt=\"Tablet Wireframes\" style=\"height: 600px; width: auto;\"\u003e\n\n### Surface\n\nThe design features a clean layout with a light colour palette. The 'X' and 'O' are highlighted in blue and yellow for clear distinction. Interactive elements are easy to identify, ensuring a good user experience on all devices.\n\n## Design\n\n### Typography\n\n- Primary font: [Barriecito](https://fonts.google.com/specimen/Barriecito?categoryFilters=Feeling:%2FExpressive%2FPlayful\u0026preview.text=Tic%20Tac%20Bro)\n- Secondary font: [Fontdiner Swanky](https://fonts.google.com/specimen/Fontdiner+Swanky?categoryFilters=Feeling:%2FExpressive%2FPlayful\u0026preview.text=Tic%20Tac%20Bro\u0026query=Fontdiner+Swanky)\n\n### Colour Scheme\n\n- #221C1B: Dark for grid and text\n- #F4EDEA: Light cream for background\n- #F0C293: Peach for accent highlights\n- #A54657: Deep red for 'X'\n- #60A561: Green for 'O'\n\nYou can see the colour theme [here](https://coolors.co/221c1b-f4edea-f0c293-a54657-60a561).\n\n![Colour Theme](assets/images/docs/colour-theme.png)\n\n### Imagery\n\nMinimalist and modern imagery focusing on the Tic-Tac-Toe grid and game pieces.\n\n## Website Features\n\n### Existing Features\n\n- **Navigation Bar**: Displays the logo and provides quick access to game rules.\n\n![Nav Bar](assets/images/docs/nav-bar.png)\n\n- **Switching Mode Button**: Allows switching between two-player mode and one-player vs. computer mode.\n\n![Switching Mode](assets/images/docs/switch-mode.png)\n\n- **Game**: Fully interactive 3x3 tic-tac-toe board.\n\n![Game](assets/images/docs/game.png)\n\n- **Reset Button**: Allows players to restart the game at any point.\n\n![Reset Button](assets/images/docs/reset.png)\n\n- **Scoreboard**: Shows the scores at the bottom.\n\n![Score Board](assets/images/docs/scoreboard.png)\n\n- **Footer**: Shows credits to the team.\n\n![Footer](assets/images/docs/footer.png)\n\n### JavaScript Logic/Functionality\n\n**Board Creation**\n\n- The `createBoard` function generates a 3x3 grid dynamically using HTML.\n- Each cell is styled and linked to an event listener for user interaction.\n- This ensures that the game can reset and rebuild the board dynamically.\n\n**Handling User Clicks**\n\n- The `handleClick` function ensures that only empty cells can be selected.\n- It updates the cell with the current player's symbol (X or O) and switches to the next player.\n- If the game is already won or the cell is not empty, it prevents further interaction.\n\n**Check for a Win**\n\n- The `checkWin` function uses predefined `winningCombinations` to determine if a player has successfully aligned three symbols.\n- It checks all cells in each combination to match the current player's symbol.\n- If a winning combination is found, the cells are highlighted with a green background using the `highlight` function.\n\n**Highlighting Winning Combination**\n\n- The `highlight` function colours the winning cells to visually indicate the winning line.\n\n**Check for a Tie**\n\n- The `checkTie` function checks if all cells are filled without a winner.\n- It uses the `Array.from` method to convert the cell list into an array and ensures none are empty.\n\n**Update and Display Scores**\n\n- The `updateScores` function keeps track of the scores for each player (X and O).\n- It updates the DOM to display the current scores after each win.\n\n**Game Reset**\n\n- The `resetGame` function clears the board, resets the winning state, and prepares the game for a new round.\n- It ensures that the background colour and symbols are cleared, and the game starts with player X.\n\n**Dynamic Player Turn Indicator**\n\n- The `endMessage` dynamically updates to show whose turn it is, whether the game is tied, or if there’s a winner.\n- This ensures the user is informed at every stage of the game.\n\n## Tablet/Mobile View\n\nResponsive layout ensures the grid scales appropriately, and buttons are easily accessible on smaller screens. Interactive elements are optimised for touch input.\n\n**Tablet View**\n\n\u003cimg src=\"assets/images/docs/tablet-view.png\" alt=\"Tablet View\" style=\"height: 600px; width: auto;\"\u003e\n\n**Mobile View**\n\n\u003cimg src=\"assets/images/docs/mobile-view.png\" alt=\"Mobile View\" style=\"height: 500px; width: auto;\"\u003e\n\n## Future Features\n\n- Allow user to switch to different difficult levels\n- Customisable themes for the game board.\n- Multiplayer support over the internet.\n\n## Technologies Used\n\n### Languages\n\n- HTML\n- CSS\n- JavaScript\n\n### Frameworks/Libraries/Programs\n\n- Frameworks or libraries:\n\n  - Bootstrap\n  - Font Awesome\n  - Google Fonts\n\n- Design software:\n  - Figma\n  - Balsamiq\n  - Coolors\n\n## Deployment\n\n- The site was deployed to GitHub pages. The steps to deploy are as follows:\n  - In the GitHub repository, navigate to the Settings tab\n  - From the source section drop-down menu, select the `deploy` Branch\n  - Once the `deploy` branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.\n\nThe live link can be found here - https://catrin.is-a.dev/tic-tac-bros/\n\n## Testing\n\nPlease see [TESTING.md](TESTING.md) file for all manual testing.\n\n## Credits\n\n- https://www.geeksforgeeks.org/simple-tic-tac-toe-game-using-javascript/ - Used the wins array to define our win conditions.\n- https://www.thatsoftwaredude.com/content/6189/step-by-step-guide-to-coding-tic-tac-toe-in-javascript - Followed some of the steps to help write the Javascript.\n- https://medium.com/@canankorkut1/how-to-create-a-tic-tac-toe-with-html-css-and-javascript-10a25fddd356 - Used for implementing game logic.\n- Copilot - Used for autocomplete and to add styles in the JavaScript for faster coding.\n\n\n### Content References\n\n- [Google Fonts](https://fonts.google.com/) was used for font styling\n- [Font Awesome](https://fontawesome.com/) was used for X and O icons\n\n### Team\n\n- Amina [GitHub](https://github.com/aminoacid-01)\n- Catrin [GitHub](https://github.com/catrinlam)\n- Grace [GitHub](https://github.com/Gracey46)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatrinlam%2Ftic-tac-bros","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatrinlam%2Ftic-tac-bros","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatrinlam%2Ftic-tac-bros/lists"}