An array eating its tail kind of thing

JavaScript
1

Hi guys;

I’m trying to do this thing:
Let say I have an array of 12 elements; each containing an integer.
I want to call a function. That function would get as parameter the place in the array. Then the function would read the value of this element in the array; let’s call it ‘nTime’. Set it to zero. And will increment by 1 the value contained in the next cells of the array for the ‘nTime’ given. Also if the next cell which value should be incremented is > to the number cells in the array then that value should be inscribed in the first cell of the array and so on. In a circle.

For an example:

It’s the base for a game for 2 players. 1 player has the lower row with 6 cases. The second player has the upper row with 6 case. When it’s his turn to play; the player click on a case (which will contain seeds or beans instead of numbers). Let say it’s the first move. At the beginning each player has 4 seeds in each of his cases. If I decide to click on the case number 5 for example. That case contains 4 seeds and each of the 4 seeds must be sowed one by one to the adjacent cases going counter clockwise. So from (on the screen)

[ 4 ] - [ 4 ] - [ 4 ] - [ 4 ] - [ 4 ] - [ 4 ]

[ 4 ] - [ 4 ] - [ 4 ] - [ 4 ] - [ 4 ] - [ 4 ]

I should get:

[ 4 ] - [ 4 ] - [ 4 ] - [ 5 ] - [ 5 ] - [ 5 ]

[ 4 ] - [ 4 ] - [ 4 ] - [ 4 ] - [ 0 ] - [ 5 ]

Then if the second player was to play is third case (keeping in mind that the first case of the opposite player is at the top to the right) I should obtain:

[ 5 ] - [ 5 ] - [ 5 ] - [ 0 ] - [ 5 ] - [ 5 ]

[ 5 ] - [ 5 ] - [ 4 ] - [ 4 ] - [ 0 ] - [ 5 ]

If now the first player was to play his last case it should give that:

[ 5 ] - [ 6 ] - [ 6 ] - [ 1 ] - [ 6 ] - [ 6 ]

[ 5 ] - [ 5 ] - [ 4 ] - [ 4 ] - [ 0 ] - [ 0 ]

And so on.

It works so far I have tested. But certainly there is an easier cleaner way to achieve that?

Here is what I’ve done so far:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Les Jeux Cornichons </title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
        table, th, td, tr {
          border: 2px solid;
          text-align: center;
          padding: 10px;
          cursor: pointer;
        }
        </style>
</head>

<body>
    <table style="width: 70%; margin-top: 10px; margin-left: 15%; font-size: 1.8em;">
        <tr style="text-align:center" >
            <th id="cell12" >4</th>
            <th id="cell11" >4</th>
            <th id="cell10" >4</th>
            <th id="cell9" >4</th>
            <th id="cell8" >4</th>
            <th id="cell7" >4</th>
        </tr>
        <tr>
            <th id="cell1" onclick="shiftCells(1)">4</th>
            <th id="cell2" onclick="shiftCells(2)">4</th>
            <th id="cell3" onclick="shiftCells(3)">4</th>
            <th id="cell4" onclick="shiftCells(4)">4</th>
            <th id="cell5" onclick="shiftCells(5)">4</th>
            <th id="cell6" onclick="shiftCells(6)">4</th>
        </tr>
    </table>
</body>

<script>

class classGroup {
        constructor(nbrPeas, occupied, isFull) {
            this.nbrPeas = 4;
            this.occupied = 'false';
            this.isFull = 'false';
        }
    }

    var myArray = [];

    for (var i = 1; i < 13; i++) {
        myArray[i] = new classGroup(4, 'false', 'false');
    }

    function shiftCells(callingCell){
        var byID
        var startLoop = callingCell + 1;
        var stopLoop = callingCell + myArray[callingCell].nbrPeas + 1;

        myArray[callingCell].nbrPeas = 0;


        for (var i = startLoop; i < stopLoop; i++) {
            if(myArray[i].isFull === 'false'){
                if (i < 13){
                    if ((myArray[i].nbrPeas + 1 < 12)){
                        myArray[i].nbrPeas = myArray[i].nbrPeas + 1;
                    }else{
                        myArray[i].isFull = 'true';
                        spillOverflow(i);
                        stopLoop = stopLoop + 1;
                    }
                }else{
                    myArray[i -12].nbrPeas = myArray[i -12].nbrPeas + 1;
                    spillOverflow(i);
                    stopLoop = stopLoop + 1;
                }
            }else{
                stopLoop = stopLoop + 1;
            }
        }

        for (var i = 1; i < 13; i++) {
            byID = 'cell' + i;
            document.getElementById(byID).innerText = myArray[i].nbrPeas;
            console.log(myArray[i].nbrPeas);
        }
    }

    function spillOverflow(cellNbr){
        var freeFound = false;
        var cellIncr = cellNbr + 1;

        while(freeFound === false){
            if(myArray[cellIncr].isFull === 'false'){
                freeFound = true;
                myArray[cellIncr].isFull = 'true';
            }else{
                cellIncr = cellIncr + 1;
            }
        }
    }
</script>
2

Appears to be a duplicate of An array in a loop king of thing