Dfyjkt

I'm making a roulette using HTML/CSS/JS.
How it work: The roulette circles are a background-image that is made of 15 circles. 7red 7blue and 1green. The background-img is repeat-x so it never end. Then the javascript randomize a px position of the background img than the roulette image moves to that px. For an example if it randomize 17839, the roulette img will move to that point.
Now I'm trying to figure out how to tell the javascript on with color the roulette stoped.

My question is "How to loop an array(or copy) so it will have at least 2000 string Index of pattern below?"

I was trying to make a array:

var colors = ["red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue", "green"];

And then loop it somehow to make the array verry long. The max px that can be randomized is 20000. Every color circle is 100px. That make the whole patern 1500px long. That mean that I need a array that is at least 2000 string long. It feels wrong to write an array that long at my own so I'm trying to loop the color array to make it longer.

This is some example how I want it to work.

Random number is 1534.

random = 1534; //randomized pixel number
position = Math.floor(random/1500); //dividing the random number with patern lenght
arrayConv = position - 1; //converting to an arrayIndex

The result will be 1, that mean that the color was red (array index 0)

Random number is 17534.

random = 17534; //randomized pixel number
position = Math.floor(random/1500); //dividing the random number with patern lenght
arrayConv = position - 1; //converting to an arrayIndex

The result will be 11, that mean that the color was red (array index 10)

As you said there is 7 blue and 7 red blocks and 1 green in the end. So we can assume that blue/red color can depend on even/odd generated number is, except the case when number can be divided by 15 - in that case it means green.

function resolveColor(number) 
 if (number % 15 === 0) 
 return 'green';
 
 if (number % 2 === 0) 
 return 'red';
 
 return 'blue';


const x = Math.ceil(Math.random()*20000);
console.log('Generated number: ', x);
console.log('Result is: ', resolveColor(x));

has previously discussed by I.r.r and Marchewka PL.There are three colours, And the result of random px calculated would always fall between 1 - 15. You can assign the red and blue as odd and even respectively and have the green colour to be a default; on a conditional statement.