TheLazy.Dev
Portfolio GitHub

Blog

javascript |css |gamedev |programming

One way to make Roulette using Javascript - Part 1

ozboware

ozboware

Posted on December 9, 2021

One way to make Roulette using Javascript - Part 1

Making the betting board

As with Tic Tac Toe, this isn't meant to be a definitive "how to" on the subject, more of a "how I did it". Because this is a bigger project than my previous one, I've split the blog into different parts. In this part we'll be focusing on creating the betting table using Javascript and CSS.

First I created the container element

let container = document.createElement('div');
container.setAttribute('id', 'container');
document.body.append(container);
Enter fullscreen mode Exit fullscreen mode

Which basically translates to

<div id="container"></div>
Enter fullscreen mode Exit fullscreen mode

Then I created a function named buildBettingBoard

function buildBettingBoard(){

}
Enter fullscreen mode Exit fullscreen mode

In that function I created the betting board wrapper

let bettingBoard = document.createElement('div');
bettingBoard.setAttribute('id', 'betting_board');
Enter fullscreen mode Exit fullscreen mode

followed by the winning lines wrapper

let wl = document.createElement('div');
wl.setAttribute('class', 'winning_lines');
Enter fullscreen mode Exit fullscreen mode

followed by the potential winning points starting from top to bottom

var wlttb = document.createElement('div');
wlttb.setAttribute('id', 'wlttb_top');
wlttb.setAttribute('class', 'wlttb');
for(i = 0; i < 11; i++){
    let j = i;
    var ttbbetblock = document.createElement('div');
    ttbbetblock.setAttribute('class', 'ttbbetblock');
    ttbbetblock.onclick = function(){
        let num = (j == 0)? '1, 2, 3, 4, 5, 6' : ((j == 1)? '4, 5, 6, 7, 8, 9' : ((j == 2)? '7, 8, 9, 10, 11, 12' : ((j == 3)? '10, 11, 12, 13, 14, 15' : ((j == 4)? '13, 14, 15, 16, 17, 18' : ((j == 5)? '16, 17, 18, 19, 20, 21' : ((j == 6)? '19, 20, 21, 22, 23, 24' : ((j == 7)? '22, 23, 24, 25, 26, 27' : ((j == 8)? '25, 26, 27, 28, 29, 30' : ((j == 9)? '28, 29, 30, 31, 32, 33' : '31, 32, 33, 34, 35, 36')))))))));
        var objType = 'double_street';
        setBet(num, objType, 5);
    };
    wlttb.append(ttbbetblock);
}
wl.append(wlttb);

for(c =  1; c < 4; c++){
    let d = c;
    var wlttb = document.createElement('div');
    wlttb.setAttribute('id', 'wlttb_'+c);
    wlttb.setAttribute('class', 'wlttb');
    for(i = 0; i < 12; i++){
        let j = i;
        var ttbbetblock = document.createElement('div');
        ttbbetblock.setAttribute('class', 'ttbbetblock');
        ttbbetblock.onclick = function(){
            if(d == 1 || d == 2){
                var numA = ((2 - (d - 1)) + (3 * j));
                var numB = ((3 - (d - 1)) + (3 * j));
                var num = numA + ', ' + numB;
            }
            else{
                var numA = (1 + (3 * j));
                var numB = (2 + (3 * j));
                var numC = (3 + (3 * j));
                var num = numA + ', ' + numB + ', ' + numC;
            }
            var objType = (d == 3)? 'street' : 'split';
            var odd = (d == 3)? 11 : 17;
            setBet(num, objType, odd);
        };
        wlttb.append(ttbbetblock);
    }
    wl.append(wlttb);
}
Enter fullscreen mode Exit fullscreen mode

Broken down. First there are the top winning points wrapper

var wlttb = document.createElement('div');
wlttb.setAttribute('id', 'wlttb_top');
wlttb.setAttribute('class', 'wlttb');
Enter fullscreen mode Exit fullscreen mode

Then, because there are 11 potential betting points, I wrapped them up in a loop and added in each element

for(i = 0; i < 11; i++){
    let j = i;
    var ttbbetblock = document.createElement('div');
    ttbbetblock.setAttribute('class', 'ttbbetblock');
Enter fullscreen mode Exit fullscreen mode

Each element has its own click event

ttbbetblock.onclick = function(){
    let num = (j == 0)? '1, 2, 3, 4, 5, 6' : ((j == 1)? '4, 5, 6, 7, 8, 9' : ((j == 2)? '7, 8, 9, 10, 11, 12' : ((j == 3)? '10, 11, 12, 13, 14, 15' : ((j == 4)? '13, 14, 15, 16, 17, 18' : ((j == 5)? '16, 17, 18, 19, 20, 21' : ((j == 6)? '19, 20, 21, 22, 23, 24' : ((j == 7)? '22, 23, 24, 25, 26, 27' : ((j == 8)? '25, 26, 27, 28, 29, 30' : ((j == 9)? '28, 29, 30, 31, 32, 33' : '31, 32, 33, 34, 35, 36')))))))));
    var objType = 'double_street';
    setBet(num, objType, 5);
};
Enter fullscreen mode Exit fullscreen mode

As you can see, I set j = i because the function only recognises the last i in the loop which causes all sorts of problems. I then iterated over the possible combinations for each betting block, but this looks a bit messy and confusing, so I placed the combinations into an equation that's easier to understand. Knowing the first line consists of "1, 2, 3, 4, 5, 6" and seeing each combination that followed, I concluded the best formula to use would be

var numA = (1 + (3 * j));
var numB = (2 + (3 * j));
var numC = (3 + (3 * j));
var numD = (4 + (3 * j));
var numE = (5 + (3 * j));
var numF = (6 + (3 * j));
let num = numA + ', ' + numB + ', ' + numC + ', ' + numD + ', ' + numE + ', ' + numF;
Enter fullscreen mode Exit fullscreen mode

Obviously all of that could be put into one line, but for the sake of readability, I'll leave it as it is.

Next I set an objType, in this case "double_street" and then called upon the setBet function which I will be demonstrating at the end and contains: the number combination, objType and payout/odds for the bet. I repeated for the rest of the TTB lines. I then worked on the left to right winning combinations

for(c = 1; c < 12; c++){
    let d = c;
    var wlrtl = document.createElement('div');
    wlrtl.setAttribute('id', 'wlrtl_'+c);
    wlrtl.setAttribute('class', 'wlrtl');
    for(i = 1; i < 4; i++){
        let j = i;
        var rtlbb = document.createElement('div');
        rtlbb.setAttribute('class', 'rtlbb'+i);
        rtlbb.onclick = function(){
            var numA = (3 + (3 * (d - 1))) - (j - 1);
            var numB = (6 + (3 * (d - 1))) - (j - 1);
            let num = numA + ', ' + numB;
            setBet(num, 'split', 17);
        };
        wlrtl.append(rtlbb);
    }
    wl.append(wlrtl);
}
Enter fullscreen mode Exit fullscreen mode

And finally on the corner bet blocks which are the bets for any four numbers

for(c = 1; c < 3; c++){
    var wlcb = document.createElement('div');
    wlcb.setAttribute('id', 'wlcb_'+c);
    wlcb.setAttribute('class', 'wlcb');
    for(i = 1; i < 12; i++){
        let count = (c == 1)? i : i + 11;
        var cbbb = document.createElement('div');
        cbbb.setAttribute('id', 'cbbb_'+count);
        cbbb.setAttribute('class', 'cbbb');
        cbbb.onclick = function(){
            var numA = '2';
            var numB = '3';
            var numC = '5';
            var numD = '6';
            let num = (count >= 1 && count < 12)? (parseInt(numA) + ((count - 1) * 3)) + ', ' + (parseInt(numB)+((count - 1) * 3)) + ', ' + (parseInt(numC)+((count - 1) * 3)) + ', ' + (parseInt(numD)+((count - 1) * 3)) : ((parseInt(numA) - 1) + ((count - 12) * 3)) + ', ' + ((parseInt(numB) - 1)+((count - 12) * 3)) + ', ' + ((parseInt(numC) - 1)+((count - 12) * 3)) + ', ' + ((parseInt(numD) - 1)+((count - 12) * 3));
            var objType = 'corner_bet';
            setBet(num, objType, 8);
        };
        wlcb.append(cbbb);
    }
    wl.append(wlcb);
}
Enter fullscreen mode Exit fullscreen mode

Then I appended the winning lines block to the betting board

bettingBoard.append(wl);
Enter fullscreen mode Exit fullscreen mode

Right now, not much is going to happen when you load the page because the function hasn't been called on and there's no styling. But basically what's just been written is all of the potential betting points such as the corner bets as well as the 2, 3 & 6 number splits that aren't drawn on directly to the board. Once the styling is done, you'll see these points bordered for now.

Now it's time to draw the table. At the top of the table I placed the "1 to 18" and 19 to 36 betting points

let bbtop = document.createElement('div');
bbtop.setAttribute('class', 'bbtop');
let bbtopBlocks = ['1 to 18', '19 to 36'];
for(i = 0; i < bbtopBlocks.length; i++){
    let f = i;
    var bbtoptwo = document.createElement('div');
    bbtoptwo.setAttribute('class', 'bbtoptwo');
    bbtoptwo.onclick = function(){
        let num = (f == 0)? '1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18' : '19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36';
        var objType = (f == 0)? 'outside_low' : 'outside_high';
        setBet(num, objType, 1);
    };
    bbtoptwo.innerText = bbtopBlocks[i];
    bbtop.append(bbtoptwo);
}
bettingBoard.append(bbtop);
Enter fullscreen mode Exit fullscreen mode

Underneath that I included the 0-36 and 2 to 1 betting blocks. I started by creating the number board element

let numberBoard = document.createElement('div');
numberBoard.setAttribute('class', 'number_board');
Enter fullscreen mode Exit fullscreen mode

Then I added in the zero point

let zero = document.createElement('div');
zero.setAttribute('class', 'number_0');
zero.onclick = function(){
    var objType = 'zero';
    var odds = 35;
    setBet('0', objType, odds);
};
let nbnz = document.createElement('div');
nbnz.setAttribute('class', 'nbn');
nbnz.innerText = '0';
zero.append(nbnz);
numberBoard.append(zero);
Enter fullscreen mode Exit fullscreen mode

followed by the main number blocks and the 2 to 1 blocks

var numberBlocks = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, '2 to 1', 2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35, '2 to 1', 1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34, '2 to 1'];
for(i = 0; i < numberBlocks.length; i++){
    let a = i;
    var nbClass = (numberBlocks[i] == '2 to 1')? 'tt1_block' : 'number_block';
    var numberBlock = document.createElement('div');
    numberBlock.setAttribute('class', nbClass);
    numberBlock.onclick = function(){
        if(numberBlocks[a] != '2 to 1'){
            setBet(''+numberBlocks[a]+'', 'inside_whole', 35);
        }else{
            num = (a == 12)? '3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36' : ((a == 25)? '2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35' : '1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34');
            setBet(num, 'outside_column', 2);
        }
    };
    var nbn = document.createElement('div');
    nbn.setAttribute('class', 'nbn');
    nbn.innerText = numberBlocks[i];
    numberBlock.append(nbn);
    numberBoard.append(numberBlock);
}
bettingBoard.append(numberBoard);
Enter fullscreen mode Exit fullscreen mode

Broken down. To save having to write out the same function 40 times, I decided to place all the possible elements in an array in the order I wanted them printed on the page

var numberBlocks = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, '2 to 1', 2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35, '2 to 1', 1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34, '2 to 1'];
Enter fullscreen mode Exit fullscreen mode

I then iterated through the array

for(i = 0; i < numberBlocks.length; i++){}
Enter fullscreen mode Exit fullscreen mode

Every 13th iteration "2 to 1" pops up and I wanted a different style for those blocks than the inside number blocks to keep them as an outside bet, so I checked whether the iteration was a number or "2 to 1" then set the class in a variable

var nbClass = (numberBlocks[i] == '2 to 1')? 'tt1_block' : 'number_block';
Enter fullscreen mode Exit fullscreen mode

I then proceeded to create the number block elements

var numberBlock = document.createElement('div');
numberBlock.setAttribute('class', nbClass);
Enter fullscreen mode Exit fullscreen mode

and their click events

numberBlock.onclick = function(){
    if(numberBlocks[a] != '2 to 1'){
        setBet(''+numberBlocks[a]+'', 'inside_whole', 35);
    }else{
        num = (a == 12)? '3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36' : ((a == 25)? '2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35' : '1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34');
        setBet(num, 'outside_column', 2);
    }
};
Enter fullscreen mode Exit fullscreen mode

Basically, the click event for the number blocks sets the bet at whichever number the iteration is currently on, if it falls on a "2 to 1" it sets the bet for the "3, 6, 9 ..." etc. Finally, because I wanted the text turned -90deg, I placed it in its own element and appended everything to the board

var nbn = document.createElement('div');
nbn.setAttribute('class', 'nbn');
nbn.innerText = numberBlocks[i];
numberBlock.append(nbn);
numberBoard.append(numberBlock);
Enter fullscreen mode Exit fullscreen mode

The next thing to work on was the bottom three outside bets, the "1 to 12", "13 to 24" and "25 to 36" blocks.

let bo3Board = document.createElement('div');
bo3Board.setAttribute('class', 'bo3_board');    
let bo3Blocks = ['1 to 12', '13 to 24', '25 to 36'];
for(i = 0; i < bo3Blocks.length; i++){
    let b = i;
    var bo3Block = document.createElement('div');
    bo3Block.setAttribute('class', 'bo3_block');
    bo3Block.onclick = function(){
        num = (b == 0)? '1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12' : ((b == 1)? '13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24' : '25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36');
        setBet(num, 'outside_dozen', 2);
    };
    bo3Block.innerText = bo3Blocks[i];
    bo3Board.append(bo3Block);
}
bettingBoard.append(bo3Board);
Enter fullscreen mode Exit fullscreen mode

Nothing really different about this compared to all the rest, it's cretaing the elements and running through the series of bets in the click function before being appended to the board. Finally we finish up by adding the one to one outside bets to the board

let otoBoard = document.createElement('div');
otoBoard.setAttribute('class', 'oto_board');    
let otoBlocks = ['EVEN', 'RED', 'BLACK', 'ODD'];
for(i = 0; i < otoBlocks.length; i++){
    let d = i;
    var otoBlock = document.createElement('div');
    otoBlock.setAttribute('class', 'oto_block');
    otoBlock.onclick = function(){
        num = (d == 0)? '2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36' : ((d == 1)? '1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36' : ((d == 2)? '2, 4, 6, 8, 10, 11, 13, 15, 17, 20, 22, 24, 26, 28, 29, 31, 33, 35' : '1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35'));
        setBet(num, 'outside_oerb', 1);
    };
    otoBlock.innerText = otoBlocks[i];
    otoBoard.append(otoBlock);
}
bettingBoard.append(otoBoard);
Enter fullscreen mode Exit fullscreen mode

and added it to the container

container.append(bettingBoard);
Enter fullscreen mode Exit fullscreen mode

That's it for the buildBettingBoard function. Last thing to do for now in Javascript is call on the function when the page loads, which is done by simply adding the following in the script

buildBettingBoard();
Enter fullscreen mode Exit fullscreen mode

and include the setBet function, which I'm going to leave as just showing a log in the console for the numbers betted on, the type of bet and the payout/odds

function setBet(n, t, o){
    console.log(n);
    console.log(t);
    console.log(o);
}
Enter fullscreen mode Exit fullscreen mode

Now when you load your page, you should just see a line of numbers and bets. They can be clicked but it needs some style.

I didn't want the page to be highlightable, mostly because it doesn't give a good look when things highlight as you go about placing bets. I set the font to arial and the cursor to default for now so it didn't show the usual text cursor when hovering over the board

html, body{
    font-family: arial;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Enter fullscreen mode Exit fullscreen mode

I set the container display to flex and centred its content

#container{
    display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

The rest of the styling is all self explanatory, it's just setting sizes, borders, rotation of the numbers, positioning of the betting points etc

#betting_board{
    width: 500px;
    height: 315px;
    border: 1px solid;
}

.bbtop{
    margin-left:2px;
}

.bbtoptwo{
    width: calc(50% - 8px);
    border: 1px solid;
    display: inline-block;
    padding: 12px 4px;
    margin-left: -2px;
    text-align: center;
    font-size:20px;
    font-weight: bold;
}

.number_board{
    margin-left: 1px;
}

.number_block{
    width: 39.94px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    margin: 0 -0.2px;
    padding: 32px 0px;
}

.nbn{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.bo3_board, .oto_board{
    width:500px;
    margin-left: 1px;
}

.bo3_block, .oto_block{
    border: 1px solid;
    display: inline-block;
    padding: 8px 5px;
    width: 156.65px;
    margin-left: -1.98px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.oto_block{
    width: 114.94px;
    margin-left: -1.98px;
}

.number_0{
    position: absolute;
    border: 2px solid;
    margin-left: -57px;
    margin-top: -0.516px;
    padding: 120.55px 20px;
    border-bottom-left-radius: 100%;
    border-top-left-radius: 100%;
}

.tt1_block{
    border: 2px solid;
    width: 65px;
    position: absolute;
    margin-left: 498px;
    padding: 31.65px 0px;
    margin-top: -89.75px;
}

.winning_lines{
    position: absolute;
    margin-top: -137px;
    width: 603px;
    height: 0;
}

.wlttb{
    position: relative;
    width: 100%;
    height: 10px;
    margin-left: -7.75px;
    top: 269px;
}

#wlttb_top{
    position: absolute;
    margin-top: -89px;
    margin-left: 11px;
}

#wlttb_2, #wlttb_3{
    margin-top: 79px;
}

.wlrtl{
    position: relative;
    display: inline-block;
    width: 10px;
    height: 266px;
    top: -3px;
    margin-left: 37px;
}

#wlrtl_2, #wlrtl_3, #wlrtl_6, #wlrtl_9, #wlrtl_11{
    margin-left: 31px;
}
#wlrtl_4, #wlrtl_5, #wlrtl_7, #wlrtl_8, #wlrtl_10{
    margin-left: 32px;
}

.wlcb{
    position: absolute;
    width: 477px;
    height: 41px;
    top: 255px;
    margin-left: 13px;
}

#wlcb_2{
    top: 343px;
}

.cbbb{
    border: 1px solid;
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
    margin-left:19px;
    margin-top: 9.5px;
    cursor: pointer;
}

#cbbb_1, #cbbb_4, #cbbb_5, #cbbb_12, #cbbb_15, #cbbb_16{
    margin-left: 19px;
}
#cbbb_3, #cbbb_14{
    margin-left: 20.5px;
}
#cbbb_7, #cbbb_8, #cbbb_9, #cbbb_11, #cbbb_18, #cbbb_19, #cbbb_20, #cbbb_22{
    margin-left: 20px;
}

#cbbb_6, #cbbb_10, #cbbb_17, #cbbb_21{
    margin-left: 19.5px;
}

.ttbbetblock{
    border: 1px solid;
    width: 18.1px;
    height: 10px;
    position: relative;
    display: inline-block;
    margin-left: 21.52px;
    top: -2px;
    cursor:pointer;
    z-index:3;
}

.rtlbb1, .rtlbb2, .rtlbb3{
    height: 45px;
    border: 1px solid;
    margin-top: 23px;
    width: 10px;
}

.rtlbb2, .rtlbb3{
    margin-top: 42px;
}
Enter fullscreen mode Exit fullscreen mode

Now you should have something like this:

The full code so far

Javascript

let container = document.createElement('div');
container.setAttribute('id', 'container');
document.body.append(container);

buildBettingBoard();

function buildBettingBoard(){
    let bettingBoard = document.createElement('div');
    bettingBoard.setAttribute('id', 'betting_board');

    let wl = document.createElement('div');
    wl.setAttribute('class', 'winning_lines');

    var wlttb = document.createElement('div');
    wlttb.setAttribute('id', 'wlttb_top');
    wlttb.setAttribute('class', 'wlttb');
    for(i = 0; i < 11; i++){
        let j = i;
        var ttbbetblock = document.createElement('div');
        ttbbetblock.setAttribute('class', 'ttbbetblock');
        ttbbetblock.onclick = function(){
            var numA = (1 + (3 * j));
            var numB = (2 + (3 * j));
            var numC = (3 + (3 * j));
            var numD = (4 + (3 * j));
            var numE = (5 + (3 * j));
            var numF = (6 + (3 * j));
            let num = numA + ', ' + numB + ', ' + numC + ', ' + numD + ', ' + numE + ', ' + numF;
            var objType = 'double_street';
            setBet(num, objType, 5);
        };
        wlttb.append(ttbbetblock);
    }
    wl.append(wlttb);

    for(c =  1; c < 4; c++){
        let d = c;
        var wlttb = document.createElement('div');
        wlttb.setAttribute('id', 'wlttb_'+c);
        wlttb.setAttribute('class', 'wlttb');
        for(i = 0; i < 12; i++){
            let j = i;
            var ttbbetblock = document.createElement('div');
            ttbbetblock.setAttribute('class', 'ttbbetblock');
            ttbbetblock.onclick = function(){
                if(d == 1 || d == 2){
                    var numA = ((2 - (d - 1)) + (3 * j));
                    var numB = ((3 - (d - 1)) + (3 * j));
                    var num = numA + ', ' + numB;
                }
                else{
                    var numA = (1 + (3 * j));
                    var numB = (2 + (3 * j));
                    var numC = (3 + (3 * j));
                    var num = numA + ', ' + numB + ', ' + numC;
                }
                var objType = (d == 3)? 'street' : 'split';
                var odd = (d == 3)? 11 : 17;
                setBet(num, objType, odd);
            };
            wlttb.append(ttbbetblock);
        }
        wl.append(wlttb);
    }

    for(c = 1; c < 12; c++){
        let d = c;
        var wlrtl = document.createElement('div');
        wlrtl.setAttribute('id', 'wlrtl_'+c);
        wlrtl.setAttribute('class', 'wlrtl');
        for(i = 1; i < 4; i++){
            let j = i;
            var rtlbb = document.createElement('div');
            rtlbb.setAttribute('class', 'rtlbb'+i);
            rtlbb.onclick = function(){
                var numA = (3 + (3 * (d - 1))) - (j - 1);
                var numB = (6 + (3 * (d - 1))) - (j - 1);
                let num = numA + ', ' + numB;
                setBet(num, 'split', 17);
            };
            wlrtl.append(rtlbb);
        }
        wl.append(wlrtl);
    }

    for(c = 1; c < 3; c++){
        var wlcb = document.createElement('div');
        wlcb.setAttribute('id', 'wlcb_'+c);
        wlcb.setAttribute('class', 'wlcb');
        for(i = 1; i < 12; i++){
            let count = (c == 1)? i : i + 11;
            var cbbb = document.createElement('div');
            cbbb.setAttribute('id', 'cbbb_'+count);
            cbbb.setAttribute('class', 'cbbb');
            cbbb.onclick = function(){
                var numA = '2';
                var numB = '3';
                var numC = '5';
                var numD = '6';
                let num = (count >= 1 && count < 12)? (parseInt(numA) + ((count - 1) * 3)) + ', ' + (parseInt(numB)+((count - 1) * 3)) + ', ' + (parseInt(numC)+((count - 1) * 3)) + ', ' + (parseInt(numD)+((count - 1) * 3)) : ((parseInt(numA) - 1) + ((count - 12) * 3)) + ', ' + ((parseInt(numB) - 1)+((count - 12) * 3)) + ', ' + ((parseInt(numC) - 1)+((count - 12) * 3)) + ', ' + ((parseInt(numD) - 1)+((count - 12) * 3));
                var objType = 'corner_bet';
                setBet(num, objType, 8);
                console.log(num);
            };
            wlcb.append(cbbb);
        }
        wl.append(wlcb);
    }

    bettingBoard.append(wl);

    let bbtop = document.createElement('div');
    bbtop.setAttribute('class', 'bbtop');
    let bbtopBlocks = ['1 to 18', '19 to 36'];
    for(i = 0; i < bbtopBlocks.length; i++){
        let f = i;
        var bbtoptwo = document.createElement('div');
        bbtoptwo.setAttribute('class', 'bbtoptwo');
        bbtoptwo.onclick = function(){
            let num = (f == 0)? '1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18' : '19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36';
            var objType = (f == 0)? 'outside_low' : 'outside_high';
            setBet(num, objType, 1);
        };
        bbtoptwo.innerText = bbtopBlocks[i];
        bbtop.append(bbtoptwo);
    }
    bettingBoard.append(bbtop);

    let numberBoard = document.createElement('div');
    numberBoard.setAttribute('class', 'number_board');

    let zero = document.createElement('div');
    zero.setAttribute('class', 'number_0');
    zero.onclick = function(){
        var objType = 'zero';
        var odds = 35;
        setBet('0', objType, odds);
    };
    let nbnz = document.createElement('div');
    nbnz.setAttribute('class', 'nbn');
    nbnz.innerText = '0';
    zero.append(nbnz);
    numberBoard.append(zero);

    var numberBlocks = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, '2 to 1', 2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35, '2 to 1', 1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34, '2 to 1'];
    for(i = 0; i < numberBlocks.length; i++){
        let a = i;
        var nbClass = (numberBlocks[i] == '2 to 1')? 'tt1_block' : 'number_block';
        var numberBlock = document.createElement('div');
        numberBlock.setAttribute('class', nbClass);
        numberBlock.onclick = function(){
            if(numberBlocks[a] != '2 to 1'){
                setBet(''+numberBlocks[a]+'', 'inside_whole', 35);
            }else{
                num = (a == 12)? '3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36' : ((a == 25)? '2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35' : '1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34');
                setBet(num, 'outside_column', 2);
            }
        };
        var nbn = document.createElement('div');
        nbn.setAttribute('class', 'nbn');
        nbn.innerText = numberBlocks[i];
        numberBlock.append(nbn);
        numberBoard.append(numberBlock);
    }
    bettingBoard.append(numberBoard);

    let bo3Board = document.createElement('div');
    bo3Board.setAttribute('class', 'bo3_board');    
    let bo3Blocks = ['1 to 12', '13 to 24', '25 to 36'];
    for(i = 0; i < bo3Blocks.length; i++){
        let b = i;
        var bo3Block = document.createElement('div');
        bo3Block.setAttribute('class', 'bo3_block');
        bo3Block.onclick = function(){
            num = (b == 0)? '1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12' : ((b == 1)? '13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24' : '25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36');
            setBet(num, 'outside_dozen', 2);
        };
        bo3Block.innerText = bo3Blocks[i];
        bo3Board.append(bo3Block);
    }
    bettingBoard.append(bo3Board);

    let otoBoard = document.createElement('div');
    otoBoard.setAttribute('class', 'oto_board');    
    let otoBlocks = ['EVEN', 'RED', 'BLACK', 'ODD'];
    for(i = 0; i < otoBlocks.length; i++){
        let d = i;
        var otoBlock = document.createElement('div');
        otoBlock.setAttribute('class', 'oto_block');
        otoBlock.onclick = function(){
            num = (d == 0)? '2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36' : ((d == 1)? '1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36' : ((d == 2)? '2, 4, 6, 8, 10, 11, 13, 15, 17, 20, 22, 24, 26, 28, 29, 31, 33, 35' : '1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35'));
            setBet(num, 'outside_oerb', 1);
        };
        otoBlock.innerText = otoBlocks[i];
        otoBoard.append(otoBlock);
    }
    bettingBoard.append(otoBoard);
    container.append(bettingBoard);
}
Enter fullscreen mode Exit fullscreen mode

CSS

html, body{
    font-family: arial;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#container{
    display: flex;
    justify-content: center;
    align-items: center;
}

#betting_board{
    width: 500px;
    height: 315px;
    border: 1px solid;
}

.bbtop{
    margin-left:2px;
}

.bbtoptwo{
    width: calc(50% - 8px);
    border: 1px solid;
    display: inline-block;
    padding: 12px 4px;
    margin-left: -2px;
    text-align: center;
    font-size:20px;
    font-weight: bold;
}

.number_board{
    margin-left: 1px;
}

.number_block{
    width: 39.94px;
    border: 1px solid;
    text-align: center;
    display: inline-block;
    margin: 0 -0.2px;
    padding: 32px 0px;
}

.nbn{
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.bo3_board, .oto_board{
    width:500px;
    margin-left: 1px;
}

.bo3_block, .oto_block{
    border: 1px solid;
    display: inline-block;
    padding: 8px 5px;
    width: 156.65px;
    margin-left: -1.98px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.oto_block{
    width: 114.94px;
    margin-left: -1.98px;
}

.number_0{
    position: absolute;
    border: 2px solid;
    margin-left: -57px;
    margin-top: -0.516px;
    padding: 120.55px 20px;
    border-bottom-left-radius: 100%;
    border-top-left-radius: 100%;
}

.tt1_block{
    border: 2px solid;
    width: 65px;
    position: absolute;
    margin-left: 498px;
    padding: 31.65px 0px;
    margin-top: -89.75px;
}

.winning_lines{
    position: absolute;
    margin-top: -137px;
    width: 603px;
    height: 0;
}

.wlttb{
    position: relative;
    width: 100%;
    height: 10px;
    margin-left: -7.75px;
    top: 269px;
}

#wlttb_top{
    position: absolute;
    margin-top: -89px;
    margin-left: 11px;
}

#wlttb_2, #wlttb_3{
    margin-top: 79px;
}

.wlrtl{
    position: relative;
    display: inline-block;
    width: 10px;
    height: 266px;
    top: -3px;
    margin-left: 37px;
}

#wlrtl_2, #wlrtl_3, #wlrtl_6, #wlrtl_9, #wlrtl_11{
    margin-left: 31px;
}
#wlrtl_4, #wlrtl_5, #wlrtl_7, #wlrtl_8, #wlrtl_10{
    margin-left: 32px;
}

.wlcb{
    position: absolute;
    width: 477px;
    height: 41px;
    top: 255px;
    margin-left: 13px;
}

#wlcb_2{
    top: 343px;
}

.cbbb{
    border: 1px solid;
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
    margin-left:19px;
    margin-top: 9.5px;
    cursor: pointer;
}

#cbbb_1, #cbbb_4, #cbbb_5, #cbbb_12, #cbbb_15, #cbbb_16{
    margin-left: 19px;
}
#cbbb_3, #cbbb_14{
    margin-left: 20.5px;
}
#cbbb_7, #cbbb_8, #cbbb_9, #cbbb_11, #cbbb_18, #cbbb_19, #cbbb_20, #cbbb_22{
    margin-left: 20px;
}

#cbbb_6, #cbbb_10, #cbbb_17, #cbbb_21{
    margin-left: 19.5px;
}

.ttbbetblock{
    border: 1px solid;
    width: 18.1px;
    height: 10px;
    position: relative;
    display: inline-block;
    margin-left: 21.52px;
    top: -2px;
    cursor:pointer;
    z-index:3;
}

.rtlbb1, .rtlbb2, .rtlbb3{
    height: 45px;
    border: 1px solid;
    margin-top: 23px;
    width: 10px;
}

.rtlbb2, .rtlbb3{
    margin-top: 42px;
}
Enter fullscreen mode Exit fullscreen mode

In part 2, I shall be building the wheel and testing its animation

💖 💪 🙅 🚩
ozboware
ozboware

Posted on December 9, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

One way to make Roulette using Javascript - Part 1
javascript One way to make Roulette using Javascript - Part 1

December 9, 2021