קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE

import './App.scss';
import Board from './components/board';

const App = (props: any): JSX.Element => {

  return (
    <div className="App">
      <h1>TIK-TAK-TOE</h1>
      <Board />
    </div>
  );
}

export default App;

.App {
  text-align: center;
  h1 {
    color: #fff;
  }
}
button {
  background: transparent;
  border: none;
}

.boardContainer {
  margin: 30px;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid turquoise;

  button.squareContainer {
    display: inline-block;
    color: #fff;
    width: 33.3333333%;
    height: 33.333333%;
    border: 1px solid turquoise;
    position: relative;
    cursor: pointer;
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}


.winnerContainer
{
  color: #fff;
  font-size: 20px;
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

import React,{useState, useEffect} from 'react'
import Square from './square';

const optionsToWin = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 5, 9], [3, 7, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9]];

const Board = (props: any) : JSX.Element => {
    const [players, setPlayers] = useState({ one: true, two: false });
    const [resultsOne, setResultsOne] = useState<(number | null)[]>([]);
    const [resultsTwo, setResultsTwo] = useState<(number | null)[]>([]);
    const [position, setPosition] = useState<number | null>();
    const [winner, setWinner] = useState<string | null>(null);
  
  
    const checkPlayerResults = () => {
        optionsToWin.forEach((chanceToWin: number[]) => {
          let results: number[] = chanceToWin.filter((item: number) => resultsOne.includes(item));
          if (results.length > 2) {
            setWinner('Player One ' + resultsOne.toString())
          }
        });
    
        optionsToWin.forEach((chanceToWin: number[]) => {
          let results: number[] = chanceToWin.filter((item: number) => resultsTwo.includes(item));
          if (results.length > 2) {
            setWinner('Player Two ' + resultsTwo.toString())
          }
        })
      }
     
      useEffect(() => {
        if (position) {
          if (players.one) {
            setResultsOne([...resultsOne, position])
            setPlayers({one: false , two: true})
          } else {
            setResultsTwo([...resultsTwo, position]);
            setPlayers({one: true , two: false})
          }
        }
      }, [position]);
    
      useEffect(() => {
        checkPlayerResults();
      }, [resultsOne, resultsTwo]);

      
    return (
        <>
             {!winner ? <div className="boardContainer">
        <Square propsWinner={winner} pos={1} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={2} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={3} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={4} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={5} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={6} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={7} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={8} getPos={setPosition} players={players} setPlayer={setPlayers} />
        <Square propsWinner={winner} pos={9} getPos={setPosition} players={players} setPlayer={setPlayers} />
      </div>
       : <span className="winnerContainer">{winner}</span>}
        </>
    )
}

export default Board;

import React , {useState} from 'react'

import {string ,shape, bool,func,number,arrayOf} from 'prop-types';

interface squareProps {
    players :{one: boolean, two: boolean},
    setPlayer : Function,
    pos: number,
    getPos: Function,
    propsWinner: string | null
}


 const Square = (props: squareProps) : JSX.Element => {
     
    const [state, setstate] = useState<string | null>(null);

    const handleClick = () :void =>{
        props.getPos(props.pos);
        if(props.players.one) {
            setstate('X')
        }else {
            setstate('O');
        }
    }
    
    return (
        <button className="squareContainer" onClick={state || props.propsWinner ? undefined : handleClick}>
           <span>{state}</span>
        </button>
    )
}
export default Square;


Square.propTypes = {
    players : shape({
        one: bool,
        two: bool
    }),
    setPlayer: func,
    getPos: func,
    pos: number,
    propsWinner: string
}