In the , we initialized a new project and made a base configuration. In this tutorial, we will start with creating the game board. previous part The first thing which I want to add is some styles to our component. We need to center our app and we will use for this: App.tsx flex /* src/App.css */
.app {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
} Then I’ll create 2 folders in : - for React components, and - for components models src components models Cell The game board will consist of many cells. In the standard game we have a board with 8 rows and 8 cells in every row, so in general 64 cells. As we can see is our base component. I’ll use the next structure for all React components: Cell component folder

    index.ts - to reexport component

    componentName.tsx - React component

    componentName.css - component styles // components/Cell/index.ts
export { Cell } from './Cell'; Here we just reexport our from Cell Cell.tsx // components/Cell/Cell.tsx
import React, { ReactElement } from 'react';
import './Cell.css';
import { Labels } from '../../models/Labels';
import { mergeClasses } from '../../utils/utils';

type CellProps = {
    label: Labels;
};

export const Cell = ({ label }: CellProps): ReactElement => {
    return <div className={mergeClasses('cell', label)}></div>;
}; This is component. It’s a simple component, which will receive as props. This prop will tell us which type of cell we have - light or dark. In folder let’s create file that described our labels: Cell label models Labels.ts // models/Labels.ts
export enum Labels {
    Light = 'light',
    Dark = 'dark',
} Also, let’s create folder where we will put our helpers. The first function will be utils mergeClasses It will take strings as arguments and join them in one line: // utils/utils.ts
const mergeClasses = (...rest: string[]): string => {
    return rest.join(' ');
}; In our cell component, we will have such classes as a result of function - ‘cell dark’ or ‘cell light‘ based on props mergeClasses Cell And finally styles for Cell. Every cell will have a width and height equal to 64 px and aligned to the center for figures. And additional classes for cell color: dark or light // components/Cell/Cell.css
.cell {
    display: flex;
    width: 64px;
    height: 64px;
    justify-content: center;
    align-items: center;
}

.dark {
    background-color: #000;
}

.light {
    background-color: #e3b778;
} Board The cell component is already finished, now we can create component. It will consist of 64 Cells for the standard game. Board width will be equal to 64 px (cell width) multiple 8. We will use and styles to move other cells to the next row: Board display: flex flex-wrap: wrap // components/Board/Board.css
.board {
    display: flex;
    flex-wrap: wrap;
    width: calc(64px * 8);
    height: calc(64px * 8);
} Our board is a simple component of class . We also can put several into it to see how it will look: board Cells // components/Board/Board.tsx
import React, { ReactElement } from 'react';
import './Board.css';
import { Cell } from '../Cell';
import { Labels } from '../../models/Labels';

export const Board = (): ReactElement => {
    return (
        <div className="board">
            <Cell label={Labels.Light} />
            <Cell label={Labels.Dark} />
            <Cell label={Labels.Light} />
            <Cell label={Labels.Dark} />
        </div>
    );
}; We have 4 cells, and they look good: CellModel and BoardModel To create a full board with 64 cells we need to create some logic. will represent logic for component. It will be a class with some properties, like x and y coordinates, label, and key for React: CellModel Cell // models/CellModel.ts
import { Labels } from './Labels';
import BoardModel from './BoardModel';

export default class CellModel {
    readonly x: number;
    readonly y: number;
    readonly label: Labels;
    board: BoardModel;
    available: boolean;
    key: string;

    constructor(x: number, y: number, label: Labels, board: BoardModel) {
        this.x = x; // x coord
        this.y = y; // y coord
        this.label = label;
        this.board = board;
        this.available = false; // is it free for figure
        this.key = `${String(x)}${String(y)}`;
    }
} Now when we have , we can use it to create . This class will create a full board with 64 cells: CellModel BoardModel // models/BoardModel.ts
import CellModel from './CellModel';
import { Labels } from './Labels';

export default class BoardModel {
    cells: CellModel[][] = [];
    cellsInRow = 8;

    createCells() {
        for (let i = 0; i < this.cellsInRow; i += 1) {
            const row: CellModel[] = [];

            for (let j = 0; j < this.cellsInRow; j += 1) {
                if ((i + j) % 2 !== 0) {
                    row.push(new CellModel(i, j, Labels.Dark, this)); // dark
                } else {
                    row.push(new CellModel(i, j, Labels.Light, this)); // light
                }
            }
            this.cells.push(row);
        }
    }
} We have a constant = 8 . It tells us that the row will consist of 8 cells. Then we create function. This function has 2 cycles to create an array of arrays, and these will be cells for our board. We use to understand which cell is light or dark. cellsInRow createCells % Now it’s time to create a new instance of and it will be in BoardModel App.tsx // src/App.tsx
import React, { useEffect, useState } from 'react';
import './App.css';
import { Board } from './components/Board';
import BoardModel from './models/BoardModel';

function App() {
    const [board, setBoard] = useState<BoardModel>(new BoardModel());

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

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

    return (
        <div className="app">
            <Board board={board} onSetBoard={setBoard} />
        </div>
    );
}

export default App; Here we use hook which will keep . function just create a new instance and save it to . Then we use hook to run it when the App component is mounted. useState BoardModel restart BoardModel board useEffect And now we need to update a little bit the component and render : Board Cells // components/Board/Board.tsx
import React, { Fragment, ReactElement } from 'react';
import './Board.css';
import { Cell } from '../Cell';
import BoardModel from '../../models/BoardModel';

type BoardProps = {
    board: BoardModel;
    onSetBoard: (board: BoardModel) => void;
};

export const Board = ({ board, onSetBoard }: BoardProps): ReactElement => {
    return (
        <div className="board">
            {board.cells.map((row, index) => (
                <Fragment key={index}>
                    {row.map((cell, index) => (
                        <Cell label={cell.label} key={cell.key} />
                    ))}
                </Fragment>
            ))}
        </div>
    );
}; Now it will take 2 props: board, which is a , and function. has cells field which is an array of arrays, so we iterate 2 times on it to render all cells. When we are done with this, we will see a full game board with 64 cells: BoardModel setBoard BoardModel That’s all for this part. Link to the repo

Initialized

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Checkers on React - Part 2 - Creating the Gameboard

Too Long; Didn't Read

Company Mentioned

Roman

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Checkers on React - Part 2 - Creating the Gameboard

Too Long; Didn't Read

Company Mentioned

Roman

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES