An array in a loop king of thing...
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.
I'm trying to do that. I haven't fully tested it yet but I think I'm trying to reinvent the wheel when a certainly easier solution exists:
Here is what I've done so far:
HTML Code:
<!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) {
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>
Working on the logic now only. Clicking on any cells at the bottom should work and gives expected values...
I hope I explain clearly enough 🙂
Re: An array in a loop king of thing...
function shiftCells(callingCell) {
// Get the number of peas for the current cell
var nTime = myArray[callingCell].nbrPeas;
// Set current cell's peas to 0
myArray[callingCell].nbrPeas = 0;
for (var i = 1; i <= nTime; i++) {
// Calculate next index in a circular way using modulus
var nextCell = (callingCell + i) % 12;
// Increment the peas of the next cell
myArray[nextCell].nbrPeas++;
}
// Update the HTML table with the new values
for (var i = 1; i <= 12; i++) {
document.getElementById('cell' + i).innerText = myArray[i].nbrPeas;
}
}
Re: An array in a loop king of thing...
