Previous parts: , , , , Part 1 Part 2 Part 3 Part 4 Part 5 Hi all. I’m continuing with my experiments in the Checkers game. And firstly, I want to say thank you for his help with SVG images for figures. They look good now: maratabdulin It’s time to add Players and the ability to change the current player on every next turn. For Player, I’ll create a new class in our models - . Initial logic is very easy, it’s just contained information about the player label: light player or dark player (Ha, ha, the dark side of the checkers:)) PlayerModel // src/models/PlayerModel.ts

import { Labels } from 'models/Labels';

class PlayerModel {
    label: Labels;

    constructor(label: Labels) {
        this.label = label;
    }
}

export { PlayerModel }; Now it has only 1 field which we will set during instance creation in the constructor. We will initialize player instances in component: App.tsx // src/App.tsx

function App() {
    const [board, setBoard] = useState<BoardModel>(new BoardModel());
    const lightPlayer = new PlayerModel(Labels.Light); // user
    const darkPlayer = new PlayerModel(Labels.Dark);
    const [currentPlayer, setCurrentPlayer] = useState<PlayerModel>(lightPlayer);

    const restart = () => {
        const newBoard = new BoardModel();
        newBoard.createCells();
        newBoard.addFigures();
        setBoard(newBoard);
        setCurrentPlayer(lightPlayer);
    };

    const changePlayer = () => {
        setCurrentPlayer(currentPlayer?.label === Labels.Light ? darkPlayer : lightPlayer);
    };

    useEffect(() => {
        restart();
    }, []);

    return (
        <div className="app">
            <div className="player">Current Player: {currentPlayer.label}</div>
            <Board
                board={board}
                currentPlayer={currentPlayer}
                onChangePlayer={changePlayer}
                onSetBoard={setBoard}
            />
        </div>
    );
} We’ve created 2 instances for players and a state for the current player. is a simple function that will switch the player on every next turn. and we will send it as a prop to component. changePlayer currentPlayer changePlayer Board I also added a new div with class to show which turn is right now, and some styles: player // src/App.css

.player {
    height: 60px;
    text-transform: capitalize;
    font-weight: 600;
} Now let’s add these 2 new props to Board types: // src/components/Board.tsx

type BoardProps = {
    board: BoardModel;
    currentPlayer: PlayerModel;
    onChangePlayer: () => void;
    onSetBoard: (board: BoardModel) => void;
}; And finally, in our function, we will call after every figure movement and in else conditions we will check that our selected figure label is the same as a current player’s label. This will allow us to move only current players’ figures: handleCellClick onChangePlayer // src/components/Board/Board.tsx

const handleCellClick = (cell: CellModel) => {
    if (selected && selected !== cell && selected.figure?.canMove(cell)) {
        selected.moveFigure(cell);
        setSelected(null);
        onChangePlayer(); // change player after we move the figure
        updateBoard();
    } else {
        if (cell.figure?.label === currentPlayer.label) {
            // we can only select our figures
            setSelected(cell);
        }
    }
}; I also want to add logic that will calculate the correct available cell where we can move our figure. (Full game rules I’ll implement later) According to the rules, every figure can be moved only forward (except Dama) for the neighbor's dark cell. For example, the figure from C3 can be moved only to D4 or B4 cells, and figure A3 only to B4 cells: To do this let’s add a function to our : isForwardCell CellModel //src/models/CellModel.ts

isForwardCell(targetCell: CellModel, selectedFigure: FigureModel): boolean {
    const { cell, label } = selectedFigure;

    const dx = Math.abs(cell.x - targetCell.x);
    const dy = cell.y - targetCell.y;

    return label === Labels.Light ? dx === 1 && dy === 1 : dx === 1 && dy === -1;
} The idea is next: we take and . Then we calculate diff between the selected cell x position and the target cell x position. As we can move our figure only to 1 pos to left or right then we check that is equal to 1, for the Y axis it depends on the figure labels, as figures can be moved to the top or to the bottom parts of the board. so will be 1 or -1. targetCell selectedFigure dx dy And this function will be called in our FigureModel canMove method: //src/models/FigureModel.ts

canMove(targetCell: CellModel): boolean {
    return this.cell.isForwardCell(targetCell, this);
} After all of these changes we can select only figures based on which turn is now and move the figure only to the correct cell: Link to the repo

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Target

Checkers on React - Part 6 - Player

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Checkers on React - Part 1 - Project Configuration and Initialization

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

10 facts about Mobile Rewarded Surveys

11 Phases Of Simple Mobile Game App Development

The Noonification: Migrating from WebGL to WebGPU (12/20/2023)

Checkers on React - Part 1 - Project Configuration and Initialization

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

10 facts about Mobile Rewarded Surveys

11 Phases Of Simple Mobile Game App Development

The Noonification: Migrating from WebGL to WebGPU (12/20/2023)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps