Feat: TicTacToe

Author: Abhijeet Jain

package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "antd": "^5.20.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -1,24 +1,29 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import {Card, DatePicker} from 'antd';
+import MyButton from './components/MyButton';
+import ProfileCard from './components/ProfileCard';
+import TicTacToe from './components/TicTacToe';
+import Board from './components/TicTacToe/Board';
 
 function App() {
+  const [count, setCount] = React.useState(0);
+
+  function handleClick(){
+    setCount(count+1);
+    console.log(`Button clicked ${count} times`);
+  }
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {/* <h1>Welcome to my App!</h1>
+      <MyButton count={count} OnClick={handleClick}/>
+      <br/>
+      <MyButton count={count} OnClick={handleClick}/>
+      <ProfileCard />
+      <br/> */}
+      {/* <TicTacToe /> */}
+      <Board />
     </div>
   );
 }

src/components/MyButton/index.tsx

@@ -0,0 +1,20 @@
+import {Button} from 'antd';
+import { MouseEventHandler, useState } from 'react';
+
+// function handleClick(count: number, setCount: Function){
+//     alert("Button Clicked");
+//     setCount(count+1);
+// }
+
+export default function MyButton({count, OnClick}: {count: number, OnClick: MouseEventHandler<HTMLButtonElement>}){
+    // const [count, setCount] = useState(0);
+    console.log("Rendering MyButton"); // why is this being called twice?
+
+    // function handleClick(){
+    //     setCount(count+1);
+    //     console.log(`Button clicked ${count} times`);
+    // }
+    return(
+        <Button onClick={OnClick}>Clicked {count} times</Button>
+    )
+}

src/components/ProfileCard/index.tsx

@@ -0,0 +1,47 @@
+// import { Card } from "antd";
+
+
+const user = {
+    name: "Iron Man",
+    imgSrc: "https://www.shutterstock.com/shutterstock/photos/2061533240/display_1500/stock-photo-mountain-view-california-october-iron-man-cardstock-mask-of-marvel-book-character-2061533240.jpg",
+    imageSize: 90,
+    altDesc: "Iron Man profile photo"
+}
+
+interface IProduct {
+    title: string;
+    id: number;
+    isFruit: boolean;
+}
+
+const products: IProduct[] = [
+    { title: 'Cabbage', isFruit: false, id: 1 },
+    { title: 'Garlic', isFruit: false, id: 2 },
+    { title: 'Apple', isFruit: true, id: 3 },
+];
+
+export default function ProfileCard() {
+    let title: JSX.Element | null;
+    let image: JSX.Element | null;
+    let productsList: JSX.Element[] = products.map((product) => <li key={product.id} style={{ color: product.isFruit ? 'red' : 'green' }}>{product.title}</li>);
+    if (user.name.length != 0) {
+        title = <h1>{user.name}</h1>;
+        image = <img
+            className="avatar"
+            src={user.imgSrc}
+            alt={user.altDesc}
+            style={{ height: user.imageSize, width: user.imageSize }} />;
+
+    }
+    else {
+        title = <h1>John Doe</h1>;
+        image = <img src="https://www.shutterstock.com/shutterstock/photos/2061533240/display_1500/stock-photo-mountain-view-california-oct" />;
+    }
+    return (
+        <div>
+            {title}
+            {image}
+            <ul>{productsList}</ul>
+        </div>
+    );
+}

src/components/TicTacToe/Board/index.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import Square from "../Square";
+import { nextTick } from "process";
+
+export default function Board(){
+    const [squares, setSquares] = useState<Array<String | null>>(Array(9).fill(null));
+    const [isXNext, setIsXNext] = useState(true);
+
+    const calculateWinner = () => {
+        const lines = [
+            [0, 1, 2],
+            [3, 4, 5],
+            [6, 7, 8],
+            [0, 3, 6],
+            [1, 4, 7],
+            [2, 5, 8],
+            [0, 4, 8],
+            [2, 4, 6]
+        ];
+        
+        for(let i = 0; i<lines.length; i++){
+            console.log("called");
+            const [a, b, c] = lines[i];
+
+            if(squares[a] && squares[a] == squares[b] && squares[a] == squares[c]){
+                return squares[a];
+            }
+
+        }
+        return null;
+
+    }
+
+    const handleClick = (i: number) => {
+        const squaresCopy = squares.slice();
+        if(squaresCopy[i] || calculateWinner()){
+            return;
+        }
+        squaresCopy[i] = isXNext ? 'X' : 'O';
+        setSquares(squaresCopy);
+        setIsXNext(!isXNext);
+    }
+
+    const status = () => {
+        const winner = calculateWinner();
+        if(winner){
+            return `Winner is ${winner}`;
+        }
+    }
+
+    return (
+        <>
+            <div className='board-row'>
+                <Square value={squares[0]} OnSquareClicked={() => handleClick(0)} />
+                <Square value={squares[1]} OnSquareClicked={() => handleClick(1)} />
+                <Square value={squares[2]} OnSquareClicked={() => handleClick(2)} />
+            </div>
+            <div className='board-row'>
+                <Square value={squares[3]} OnSquareClicked={() => handleClick(3)} />
+                <Square value={squares[4]} OnSquareClicked={() => handleClick(4)} />
+                <Square value={squares[5]} OnSquareClicked={() => handleClick(5)} />
+            </div>
+            <div className='board-row'>
+                <Square value={squares[6]} OnSquareClicked={() => handleClick(6)} />
+                <Square value={squares[7]} OnSquareClicked={() => handleClick(7)} />
+                <Square value={squares[8]} OnSquareClicked={() => handleClick(8)} />
+            </div>
+        <div>{status()}</div>
+        </>
+    )
+}

src/components/TicTacToe/Square/index.tsx

@@ -0,0 +1,9 @@
+import { Button } from 'antd';
+import { MouseEventHandler, useState } from 'react';
+
+export default function Square({value, OnSquareClicked}: {value: String | null, OnSquareClicked: MouseEventHandler<HTMLButtonElement>}){
+    
+    return (
+        <Button className='square'  onClick={OnSquareClicked}>{value || ""}</Button>
+    )
+}

src/components/TicTacToe/Square/styles.css

@@ -0,0 +1,26 @@
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.board-row{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}

src/components/TicTacToe/index.tsx

@@ -0,0 +1,11 @@
+import Square from "./Square";
+
+export default function TicTacToe() {
+    return (
+        <>
+            
+        </>
+
+
+    )
+}

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './components/TicTacToe/Square/styles.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';