├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
├── src
    ├── index.css
    └── index.js
└── package.json


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krshrimali/reactjs-sample-tic-tac-toe/main/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krshrimali/reactjs-sample-tic-tac-toe/main/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/krshrimali/reactjs-sample-tic-tac-toe/main/public/logo512.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-sample-tic-tac-toe
2 | 
3 | From the [official tutorial page of ReactJS](https://reactjs.org/tutorial/tutorial.html). Run the following commands to demo:
4 | 
5 | ```bash
6 | npm install
7 | npm start
8 | ```
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font: 14px "Century Gothic", Futura, sans-serif;
 3 |   margin: 20px;
 4 | }
 5 | 
 6 | ol, ul {
 7 |   padding-left: 30px;
 8 | }
 9 | 
10 | .board-row:after {
11 |   clear: both;
12 |   content: "";
13 |   display: table;
14 | }
15 | 
16 | .status {
17 |   margin-bottom: 10px;
18 | }
19 | 
20 | .square {
21 |   background: #fff;
22 |   border: 1px solid #999;
23 |   float: left;
24 |   font-size: 24px;
25 |   font-weight: bold;
26 |   line-height: 34px;
27 |   height: 34px;
28 |   margin-right: -1px;
29 |   margin-top: -1px;
30 |   padding: 0;
31 |   text-align: center;
32 |   width: 34px;
33 | }
34 | 
35 | .square:focus {
36 |   outline: none;
37 | }
38 | 
39 | .kbd-navigation .square:focus {
40 |   background: #ddd;
41 | }
42 | 
43 | .game {
44 |   display: flex;
45 |   flex-direction: row;
46 | }
47 | 
48 | .game-info {
49 |   margin-left: 20px;
50 | }
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "react-scripts": "5.0.1",
12 |     "web-vitals": "^2.1.4"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import ReactDOM from 'react-dom/client'
  3 | import './index.css'
  4 | 
  5 | // Controlled Component
  6 | // class Square extends React.Component {
  7 | //   render() {
  8 | //     return (
  9 | //       <button className='square' onClick={() => this.props.onClick()}>
 10 | //         {this.props.value}
 11 | //       </button>
 12 | //     )
 13 | //   }
 14 | // }
 15 | 
 16 | // function component -> preferred when this component doesn't have a state and just a render function to call
 17 | function Square(props) {
 18 |   return (
 19 |     <button className='square' onClick={props.onClick}>
 20 |       {props.value}
 21 |     </button>
 22 |   )
 23 | }
 24 | 
 25 | class Board extends React.Component {
 26 |   renderSquare(i) {
 27 |     return (
 28 |       <Square
 29 |         value={this.props.squares[i]}
 30 |         onClick={() => this.props.onClick(i)}
 31 |       />
 32 |     )
 33 |   }
 34 | 
 35 |   render() {
 36 |     return (
 37 |       <div>
 38 |         <div className='board-row'>
 39 |           {this.renderSquare(0)}
 40 |           {this.renderSquare(1)}
 41 |           {this.renderSquare(2)}
 42 |         </div>
 43 |         <div className='board-row'>
 44 |           {this.renderSquare(3)}
 45 |           {this.renderSquare(4)}
 46 |           {this.renderSquare(5)}
 47 |         </div>
 48 |         <div className='board-row'>
 49 |           {this.renderSquare(6)}
 50 |           {this.renderSquare(7)}
 51 |           {this.renderSquare(8)}
 52 |         </div>
 53 |       </div>
 54 |     )
 55 |   }
 56 | }
 57 | 
 58 | class Game extends React.Component {
 59 |   handleClick(i) {
 60 |     const history = this.state.history
 61 |     const current = history[history.length - 1]
 62 |     const squares = current.squares.slice()
 63 |     if (calculateWinner(squares) || squares[i]) {
 64 |       return
 65 |     }
 66 |     squares[i] = this.state.xIsNext ? 'X' : 'O'
 67 |     this.setState({
 68 |       history: history.concat([{ squares: squares }]),
 69 |       xIsNext: !this.state.xIsNext,
 70 |     })
 71 |   }
 72 | 
 73 |   constructor(props) {
 74 |     super(props)
 75 |     this.state = {
 76 |       history: [
 77 |         {
 78 |           squares: Array(9).fill(null),
 79 |         },
 80 |       ],
 81 |       xIsNext: true,
 82 |     }
 83 |   }
 84 | 
 85 |   render() {
 86 |     const history = this.state.history
 87 |     const current = history[history.length - 1]
 88 |     const winner = calculateWinner(current.squares)
 89 |     let status
 90 |     if (winner) {
 91 |       status = 'Winner: ' + winner
 92 |     } else {
 93 |       status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O')
 94 |     }
 95 |     return (
 96 |       <div className='game'>
 97 |         <div className='game-board'>
 98 |           <Board
 99 |             squares={current.squares}
100 |             onClick={(i) => this.handleClick(i)}
101 |           />
102 |         </div>
103 |         <div className='game-info'>
104 |           <div>{status}</div>
105 |           <ol>{/* TODO */}</ol>
106 |         </div>
107 |       </div>
108 |     )
109 |   }
110 | }
111 | 
112 | const root = ReactDOM.createRoot(document.getElementById('root'))
113 | root.render(<Game />)
114 | 
115 | function calculateWinner(squares) {
116 |   const lines = [
117 |     [0, 1, 2],
118 |     [3, 4, 5],
119 |     [6, 7, 8],
120 |     [0, 3, 6],
121 |     [1, 4, 7],
122 |     [2, 5, 8],
123 |     [0, 4, 8],
124 |     [2, 4, 6],
125 |   ]
126 |   for (let i = 0; i < lines.length; i++) {
127 |     const [a, b, c] = lines[i]
128 |     if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
129 |       return squares[a]
130 |     }
131 |   }
132 | 
133 |   return null
134 | }
135 | 


--------------------------------------------------------------------------------