4 in a row

Cell.tsx

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';

type Props = {
  children: React.ReactNode;
};

function Cell(props: Props) {
  const theme = {
    color: convertColor(props.children),
  };

  function convertColor(value: any) {
    switch (value) {
      case 1:
        return 'tomato';
      case 2:
        return 'royalblue';
    }
  }

  return (
    <ThemeProvider theme={theme}>
      <StyledCell>{props.children}</StyledCell>
    </ThemeProvider>
  );
}

export const StyledCell = styled.td`
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 50px;
  block-size: 50px;
  margin: 5px;
  border: 1px solid black;
  border-radius: 50%;
  font-size: 0;
  background-color: ${(props) => props.theme.color} !important;
  user-select: none;
`;

export default Cell;

Row.tsx

import React from 'react';
import styled from 'styled-components';

import Cell, { StyledCell } from './Cell';

type Props = {
  data: number[];
  onClick: (event: any) => void;
};

function Row(props: Props) {
  return (
    <StyledRow onClick={props.onClick}>
      {props.data.map((cell: number, index: number) => (
        <Cell key={index}>{cell}</Cell>
      ))}
    </StyledRow>
  );
}

const StyledRow = styled.tr`
  display: flex;
  flex-direction: column-reverse;

  &:hover {
    ${StyledCell} {
      background-color: lightgray;
    }
  }
`;

export default Row;

Table.tsx

import React from 'react';
import styled from 'styled-components';

import Row from './Row';

function createTable(rows: number, cells: number) {
  let table: number[][] = [];

  for (let i = 0; i < rows; i++) {
    const row: number[] = Array(cells).fill(0);

    table.push(row);
  }

  return table;
}

function Table() {
  const table = createTable(7, 6);

  const [currentUser, setCurrentUser] = React.useState<number>(1);

  function changeActiveUser() {
    if (currentUser === 1) setCurrentUser(2);
    else if (currentUser === 2) setCurrentUser(1);
  }

  const [data, setData] = React.useState<number[][]>(table);

  function recalculateTable(index: number) {
    const newData = data.map((row: number[], position: number) => {
      if (index === position) {
        const firstEmptyCell = row.indexOf(0);
        const cellValue = currentUser;

        row[firstEmptyCell] = cellValue;
      }

      return [...row];
    });

    setData(newData);
  }

  function handleClick(index: number) {
    recalculateTable(index);
    changeActiveUser();

    console.log(checkHorizontalWinner(table));
  }

  function checkHorizontalWinner(table: number[][]) {
    for (let r = 0; r < 7; r++) {
      for (let c = 0; c < 6; c++) {
        if (table[r][c]) {
          if (
            table[r][c] === table[r][c + 1] &&
            table[r][c] === table[r][c + 2] &&
            table[r][c] === table[r][c + 3]
          ) {
            return table[r][c];
          }
        }
      }
    }
  }

  return (
    <StyledTable>
      <tbody>
        {data.map((row, index) => (
          <Row key={index} onClick={() => handleClick(index)} data={row} />
        ))}
      </tbody>
    </StyledTable>
  );
}

const StyledTable = styled.table`
  display: flex;
  border-collapse: collapse;

  & tbody {
    display: inherit;
  }
`;

export default Table;