Merge pull request #5 from Cyrus-Kiprop/feature/testing

Feature/testing

Author: shubham14p3

.eslintignore

@@ -0,0 +1 @@
+jest.config.js

.gitignore

@@ -1 +1,2 @@
 node_modules/
+yarn-error.log

README.md

@@ -31,20 +31,74 @@ In this project,we are building a Tic Tac Toe game made on Javascript.The tic-ta
 
 ## Built With
 
+```sh
+Front-End(client)
+```
+
 - HTML + CSS
 - JavaScript
 - Bootstrap
 
+```sh
+Testing Frameworks
+```
+
+- Jest
+
 ## Getting Started
 
-To get started with the app, cd to the directory where you would like the repo to live by typing on your terminal:
+To get a local copy up and running follow these simple example steps.
+
+### Prerequisites
+
+- Node
+
+- Basic knowledge of npm/yarn
+
+### Installation
 
-Clone the repo typing:
+1. Clone the repo
 
+```sh
+git clone https://github.com/Cyrus-Kiprop/Javascript-Tic-Tac-Toe.git
 ```
-$git clone https://github.com/Cyrus-Kiprop/Javascript-Tic-Tac-Toe.git
+
+2. CD into the project root directory
+
+```sh
+cd ./Javascript-Tic-Tac-Toe.git
+```
+
+3. Install Dependencies and packages
+
+```sh
+npm install
 ```
 
+4. Build the files
+
+```sh
+npm run build
+```
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+Open the index.html file using live servers.
+
+```sh
+right click on index.html file and open it with the browser or with live server.
+```
+
+### Navigate to your browser and open port 8080 (use your live server port):
+
+```JS
+http//localhost:8080
+```
+
+### Enjoy the game
+
 # Rules
 
 1. The game is played on a grid that's 3 squares by 3 squares.
@@ -81,6 +135,22 @@ The match is over if the winnning critera is met, or else the match will be a dr
 Reset - The data of Players will be not saved and the user need to provide the entire data once more at the beggining.
 Restart- The player is taken back to thr board, and the players can replay the game.
 
+## Roadmap
+
+See the [open issues](https://github.com/Cyrus-Kiprop/Javascript-Tic-Tac-Toe/issues) for a list of proposed features (and known issues).
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/NewAwesomeFeature`)
+3. Commit your Changes (`git commit -m 'Add some NewAmazingFeature'`)
+4. Push to the Branch (`git push origin feature/NewAmazingFeature`)
+5. Open a Pull Request
+
 ## Authors
 
 👤 **Cyrus Kiprop**
@@ -94,12 +164,6 @@ Restart- The player is taken back to thr board, and the players can replay the g
 - Github: [@ShubhamRaj](https://github.com/shubham14p3)
 - Linkedin: [Shubham14p3](https://www.linkedin.com/in/shubham14p3/)
 
-## 🤝 Contributing
-
-Contributions, issues and feature requests are welcome!
-
-Feel free to check the [issues page](https://github.com/Cyrus-Kiprop/Javascript-Tic-Tac-Toe/issues/).
-
 ## Show your support
 
 Give a ⭐️ if you like this project!
@@ -108,7 +172,7 @@ Give a ⭐️ if you like this project!
 
 - Project requested by [Microverse Program](https://www.microverse.org/).
 
-## Future Enhancement 
+## Future Enhancement
 
 - Adding Validation.
 - Adding AI Logic.

assets/js/index.js

@@ -1,4 +1,5 @@
-// using the object oriented way
+import '../styles/reset.css';
+import '../styles/main.css';
 
 const boardUtils = (function boardUtils() {
   const WINNING_COMBINATIONS = [
@@ -17,15 +18,14 @@ const boardUtils = (function boardUtils() {
 }());
 
 const gameUtils = (function gameUtils() {
-  const container = document.getElementById('container');
-
   const winningMessage = (player) => winDrawUI(`Congratulation ${player} is the winner!!`);
 
   const drawMessage = () => winDrawUI("It's a draw ");
 
   const handleGameReset = () => window.location.reload();
 
   const winDrawUI = (message) => {
+    const container = document.getElementById('container');
     const div = document.createElement('div');
     div.setAttribute('class', 'bg-dark');
     const hide = document.getElementById('hide');
@@ -68,16 +68,19 @@ const gameUtils = (function gameUtils() {
 }());
 
 const form = document.getElementById('welcome-form');
-form.addEventListener('submit', (event) => {
-  const player1 = document.getElementById('player-one-name').value || 'player1';
-  const player2 = document.getElementById('player-two-name').value || 'player2';
-  const board = document.getElementById('play-area');
-  event.preventDefault();
-  form.classList.toggle('none');
-  board.classList.toggle('none');
-
-  const game = new TicTacToe(player1, player2);
-  game.start();
+
+document.addEventListener('DOMContentLoaded', () => {
+  form.addEventListener('submit', (event) => {
+    const player1 = document.getElementById('player-one-name').value || 'player1';
+    const player2 = document.getElementById('player-two-name').value || 'player2';
+    const board = document.getElementById('play-area');
+    event.preventDefault();
+    form.classList.toggle('none');
+    board.classList.toggle('none');
+
+    const game = new TicTacToe(player1, player2);
+    game.start();
+  });
 });
 
 function TicTacToe(player1, player2) {
@@ -142,6 +145,7 @@ function Player(name, board, signature) {
 
   this.myTurn = function myTurn() {
     board.cells.forEach((cell) => {
+      cell.setAttribute('data-clickable', 'true');
       if (cell.innerHTML === '') {
         cell.addEventListener('click', makeMove);
       }
@@ -151,9 +155,11 @@ function Player(name, board, signature) {
     const { target } = event;
     target.innerText = this.signature;
     board.cells.forEach((element) => {
+      element.setAttribute('data-clickable', 'true');
       element.removeEventListener('click', makeMove, { useCapture: true });
     });
   };
+  this.playerMove = makeMove;
 }
 
 function Board() {
@@ -167,7 +173,7 @@ function Board() {
     boardUtils.WINNING_COMBINATIONS.forEach((combination) => {
       const firstCell = positions[combination[0]].innerText;
       const secondCell = positions[combination[1]].innerText;
-      const thirdCell = positions[combination[2]].innerText;
+      const thirdCell = positions[combination[2]].innerText || '';
 
       const confirmWin = firstCell !== ''
         && secondCell === firstCell
@@ -191,3 +197,12 @@ function Board() {
     });
   };
 }
+
+const game = {
+  Board,
+  Player,
+  gameUtils,
+  boardUtils,
+};
+
+export default game;

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

dist/app.bundle.js

@@ -55,6 +55,6 @@ <h2 class="mb-4 mt-5">Tic-Tac-Toe Game</h2>
         </div>
       </div>
     </div>
-    <script src="./assets/js/index.js"></script>
+    <script src="app.bundle.js"></script>
   </body>
 </html>