Apply Big road baccarat logic on my react table

Question

I am creating a baccarat big road for my small project. But I am having a difficulties on applying the logic of baccarat big road. The one that I am applying is the baccarat road on Baccarat Scoreboard mobile app by GameStrings. Please advice me or give me an insight to how implement the logic of big road.

function App() {

  const maxRow = 5;
  const maxColumn = 10;
  const [games, setGames] = useState(
    Array.from({ length: maxRow }, (_, row) =>
      Array.from({ length: maxColumn }, (_, col) => ({
        round: "",
      }))
    )
  );

  const results = [
    {
      id: 1,
      verdict: 1,
    },

    {
      id: 1,
      verdict: 1,
    },
    {
      id: 1,
      verdict: 1,
    },
    {
      id: 1,
      verdict: 1,
    },
    {
      id: 1,
      verdict: 1,
    },
    {
      id: 6,
      verdict: 1,
    },
    {
      id: 1,
      verdict: 1,
    },
    {
      id: 6,
      verdict: 0,
    },
  
  ];


  function gameNow() {
    let prevVerdict;
    let prevRound;
    let prevIndex;

    let toLeft = false;
    let toLeftArray = [];
    //tsting
    let checkRoundToLeft;
    let checkIndexPlusTwo;
    let checkIndexPlusOne;
    //

    let round = 1;
    let ind = 0;
    const game = [...games];
    const updatedGames = results.map((result, index) => {
      // if index === 0
      if (index === 0) {
        game[ind][`round${round}`] = result.verdict;
      } else {
        // second game here
        if (prevVerdict === result.verdict) {
          // check if the row is sagad na previous index is 4
          if (prevIndex === 4) {
            round = prevRound + 1;
            game[prevIndex][`round${round}`] = result.verdict;
            toLeft = true;
            toLeftArray.push(round);
          }
         
          else {
            // check 
            if (round !== 1) {
              checkRoundToLeft = game[ind][`round${round - 1}`];
              checkIndexPlusTwo = game[ind + 2][`round${round}`];
              checkIndexPlusOne = game[ind + 1][`round${round}`];
              console.log(checkIndexPlusTwo, ind + 2, round);

              if (
                checkRoundToLeft === result.verdict ||
                checkIndexPlusTwo === result.verdict
              ) {
                round = prevRound + 1;
                ind = prevIndex;
                ind = prevIndex + 1;
                console.log(result.id);
                game[ind][`round${round}`] = result.verdict;
                toLeft = true;
                toLeftArray.push(round);
              } else {
                ind = prevIndex + 1;

                game[ind][`round${round}`] = result.verdict;
              }
            } else {
              ind = prevIndex + 1;
              // console.log("hello", ind, round);
              game[ind][`round${round}`] = result.verdict;
            }
          }
        }

        // if prev results !== current results
        else {
          // check if to the lefy . toLeftArray index number 0 is the turning point
          if (toLeft === true) {
            round = prevRound + 1;

            game[prevIndex][`round${round}`] = 3;

            round = toLeftArray[0];
            ind = 0;
            game[ind][`round${round}`] = result.verdict;
            toLeft = false;
            toLeftArray = [];
          } else {
            round = prevRound + 1;
            ind = 0;
            game[ind][`round${round}`] = result.verdict;
          }
        }
      }
      // record all previous data and position
      prevIndex = ind;
      prevRound = round;
      prevVerdict = result.verdict;

      return game;
    });

    setGames(game);
  }

  const getRoundStyle = (roundValue) => {
    let background;
    if (roundValue === 1) {
      background = "red";
    } else if (roundValue === 0) {
      background = "blue";
    } else if (roundValue === 2) {
      background = "green";
    } else if (roundValue === 3) {
      background = "black";
    }

    return {
      borderRadius: "50%",
      background: background,
      width: "10px",
      height: "10px",
      color: "transparent",
    };
  };

  // function updateResult(num) {
  //   results.push({ id: num, verdict: num });
  // }

  return (
    <div>
      <button onClick={gameNow}>Game</button>
      <table style={{ width: "20%" }}>
        <thead>
          <tr>
            <th style={{ display: "none", width: "70%" }}>Round 1</th>
            <th style={{ display: "none", width: "30%" }}>Round 2</th>
            <th style={{ display: "none", width: "30%" }}>Round 3</th>
            <th style={{ display: "none", width: "30%" }}>Round 4</th>
            <th style={{ display: "none", width: "30%" }}>Round 5</th>
            <th style={{ display: "none", width: "70%" }}>Round 6</th>
            <th style={{ display: "none", width: "30%" }}>Round 7</th>
            <th style={{ display: "none", width: "30%" }}>Round 8</th>
            <th style={{ display: "none", width: "30%" }}>Round 9</th>
            <th style={{ display: "none", width: "30%" }}>Round 10</th>
          </tr>
        </thead>
        <tbody>
          {games.map((game, index) => (
            <tr key={index}>
              <td>
                <div style={getRoundStyle(game.round1)}>{game.round1}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round2)}>{game.round2}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round3)}>{game.round3}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round4)}>{game.round4}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round5)}>{game.round5}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round6)}>{game.round6}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round7)}>{game.round7}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round8)}>{game.round8}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round9)}>{game.round9}</div>
              </td>
              <td>
                <div style={getRoundStyle(game.round10)}>{game.round10}</div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;