ispra_redux_intro_finale

App.js

import React from 'react';

import Board from './Board';
import Winner from './Winner';

import {Provider} from 'react-redux';
import store from './store';

import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";



class App extends React.Component{
  render(){
    return (
      <div className="App">
        <Router>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/winner">Winner</Link>
                </li>
              </ul>
            </nav>
            <Switch>
              <Route path="/">
      <Provider store={store}>
                  <Board></Board>
                </Provider>
              </Route>
              <Route path="/winner">
      <Provider store={store}>
                  <Winner></Winner>
                </Provider>
              </Route>
            </Switch>
          </div>
        </Router>
      </div>
    );
  }
} 

export default App;

Board.js

import React from 'react';
import Square from './Square';


import {useSelector, useDispatch} from 'react-redux';
import { turn, reset } from './tttSlice';

function Board() {
    const dispatch = useDispatch();

    const cells = useSelector((state) => state.board.cells);
    const nextPlayer = useSelector((state) => state.board.nextPlayer);  

    return (
        <div>
            <div className="game">
                <h3>Turno di: {nextPlayer}</h3>
                <div className="row">
                    <Square value={cells[0]} onClick={() => dispatch(turn(0))} />
                    <Square value={cells[1]} onClick={() => dispatch(turn(1))} />
                    <Square value={cells[2]} onClick={() => dispatch(turn(2))} />
                </div>
                <div className="row">
                    <Square value={cells[3]} onClick={() => dispatch(turn(3))} />
                    <Square value={cells[4]} onClick={() => dispatch(turn(4))} />
                    <Square value={cells[5]} onClick={() => dispatch(turn(5))} />
                </div>
                <div className="row">
                    <Square value={cells[6]} onClick={() => dispatch(turn(6))} />
                    <Square value={cells[7]} onClick={() => dispatch(turn(7))} />
                    <Square value={cells[8]} onClick={() => dispatch(turn(8))} />
                </div>
            </div>

            <div>
                <button onClick={() => dispatch(reset())}>Inizia una nuova partita</button>
            </div>
        </div>
    )
}

export default Board;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

package.json

{
  "name": "prova",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Square.js

import React from 'react';

class Square extends React.Component{
    render() {
        return(
            <button onClick={() =>  this.props.onClick() }>
                {this.props.value}
            </button>
        );
    }
}
export default Square;

store.js

import { configureStore } from '@reduxjs/toolkit';

import tttReducer from './tttSlice';

export default configureStore({
    reducer: {
        board: tttReducer
    }
})

tttSlice.js

import {createSlice} from '@reduxjs/toolkit';

export const tttSlice = createSlice({
    name: 'board',
    initialState: {
        cells: Array(9).fill(null),
        nextPlayer: 'X',
        winner: null
    },
    reducers: {
        turn: (state, action) => {
            const i = action.payload;
            if (state.winner){
                alert('c\'è già un vincitore. La partita è finita.');
            } else {
                if (!state.cells[i]){
                    const squares = state.cells.slice();
                    squares[i] = state.nextPlayer;
                    let next = 'X';
                    if (state.nextPlayer === 'X'){
                        next = 'O';
                    }
                    state.cells = squares;
                    state.nextPlayer = next;
                } else {
                    alert('Non puoi selezionare una cella già utilizzata');
                }
            }
            state.winner = calculateWinner(state.cells);
        },
        reset: (state) => {
            state.cells = Array(9).fill(null);
            state.nextPlayer = 'X';
            state.winner = null;
        }
    }
});


function calculateWinner(squares) {
    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++){
          if(squares[lines[i][0]] === squares[lines[i][1]] && squares[lines[i][0]] === squares[lines[i][2]]){
              return squares[lines[i][0]];
          }
      }
      return null;
}


export const { turn, reset } = tttSlice.actions

export default tttSlice.reducer;

Winner.js

import React from 'react';


import {useSelector} from 'react-redux';

function Winner() {
    const winner = useSelector((state) => state.board.winner);  

    return (
        <h1>Il Vincitore è {winner}</h1>
    )

}

export default Winner;