{"id":25430416,"url":"https://github.com/edasgh/multiplayer_tic_tac_toe","last_synced_at":"2026-05-06T19:09:29.873Z","repository":{"id":277707219,"uuid":"933263732","full_name":"Edasgh/multiplayer_tic_tac_toe","owner":"Edasgh","description":"This is a multiplayer Tic-Tac-Toe game using HTML, CSS, JavaScript, and Node.js with Socket.io for real-time gaming","archived":false,"fork":false,"pushed_at":"2025-02-22T08:23:22.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-14T12:19:31.734Z","etag":null,"topics":["css","html","js","nodejs","socket-io"],"latest_commit_sha":null,"homepage":"https://multiplayer-tic-tac-toe-6nt4.onrender.com","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/Edasgh.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":"2025-02-15T14:48:16.000Z","updated_at":"2025-02-22T08:23:25.000Z","dependencies_parsed_at":"2025-02-15T15:44:53.392Z","dependency_job_id":null,"html_url":"https://github.com/Edasgh/multiplayer_tic_tac_toe","commit_stats":null,"previous_names":["edasgh/multiplayer_tic_tac_toe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Edasgh/multiplayer_tic_tac_toe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edasgh%2Fmultiplayer_tic_tac_toe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edasgh%2Fmultiplayer_tic_tac_toe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edasgh%2Fmultiplayer_tic_tac_toe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edasgh%2Fmultiplayer_tic_tac_toe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Edasgh","download_url":"https://codeload.github.com/Edasgh/multiplayer_tic_tac_toe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Edasgh%2Fmultiplayer_tic_tac_toe/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264341121,"owners_count":23593296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","js","nodejs","socket-io"],"created_at":"2025-02-17T03:28:13.764Z","updated_at":"2026-05-06T19:09:29.813Z","avatar_url":"https://github.com/Edasgh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MultiPlayer Tic-tac-toe game:\n\nThis program is a multiplayer Tic-Tac-Toe game using HTML, CSS, JavaScript, and Node.js with Socket.io for real-time communication between players. Here’s a brief explanation of how each part of the program works:\n\n## Live Link :\nhttps://multiplayer-tic-tac-toe-6nt4.onrender.com\n\n## Demo Video:\nhttps://youtu.be/7uPLD-colPw?si=3OI1_jwWnehxlCDV\n\n### `index.html`\n\nThis file sets up the structure of the web page:\n\n- Loads necessary scripts and stylesheets.\n- Defines a form for users to enter their name and join the game.\n- Displays elements for game info (user names, turn info) and the Tic-Tac-Toe grid.\n- Includes the necessary scripts to handle the game logic.\n\n### `style.css`\n\nThis file styles the HTML elements:\n\n- Sets up basic styles for the body, headings, and buttons.\n- Styles the game grid and its elements.\n- Includes animations and transitions for better UX.\n- Uses custom fonts from Google Fonts.\n\n### `fonts.css`\n\nThis file defines font styles:\n\n- Specifies different font weights and styles for the \"Poppins\" font.\n- Provides classes for easy use of these font styles in the HTML.\n\n### `index.js`\n\nThis file sets up the server using Node.js and Socket.io:\n\n- Creates an HTTP server and sets up Socket.io for real-time communication.\n- Serves the static files (HTML, CSS, JS) from the root directory.\n- Manages game logic on the server-side, including player connections, game state, and turn handling.\n\n#### Key functions and logic:\n\n- **Connection Handling**: Listens for players connecting and disconnecting, and manages player matchmaking.[socket.on [socket.on(eventName,event)] is used to get the data sent via socket.emit[socket.emit(eventName,data)] function and similarly socket.emit is used to send data to the server (The eventName of socket.on event and socket.emit should be same to get data in the server)]\n- **Game State Management**: Keeps track of game states (e.g., player turns, moves, game over conditions) and updates clients accordingly.\n- **Real-time Updates**: Uses Socket.io to emit events to clients, keeping them in sync with the current game state.\n\n### `scripts.js`\n\nThis file handles the client-side logic and interaction:\n\n- Connects to the server via Socket.io.\n- Manages user interactions, such as joining a game and making moves.\n- Updates the UI based on the current game state received from the server.\n\n#### Key functions and logic:\n\n- **Event Listeners**: Sets up event listeners for form submission and grid button clicks.\n- **Socket Events**: Listens for events from the server (`join_room`, `playing`, `gameOver`) and updates the UI accordingly.\n- **Game Logic**: Implements the game logic, including checking for wins, handling turns, and updating the game state.\n\n### Brief Flow of the Program\n\n1. **User Joins the Game**:\n\n   - User enters their name and submits the form.\n   - Client emits a `join_room` event with the user's name.\n   - Server adds the user to the waiting list and matches them with another player if available.\n\n2. **Game Starts**:\n\n   - When two players are matched, the server emits a `join_room` event with game info (players, turns, etc.) to both clients.\n   - Clients update their UI to show the game board and player info.\n\n3. **Playing the Game**:\n\n   - Players take turns clicking on grid boxes.\n   - Each move emits a `playing` event with the move info to the server.\n   - Server updates the game state and checks for win conditions or a draw.\n   - Server emits updated game state to both clients, who update their UI accordingly.\n\n4. **Game Over**:\n   - If a win or draw condition is met, the server emits a `gameOver` event.\n   - Clients display the game result and reset the game after a short delay.\n\n### To run the program in the browser simply start the server using `npm run start` command and open two windows for two different players","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedasgh%2Fmultiplayer_tic_tac_toe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedasgh%2Fmultiplayer_tic_tac_toe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedasgh%2Fmultiplayer_tic_tac_toe/lists"}