Forem: ozboware

One way to make wordle using Javascript

ozboware — Sat, 29 Jan 2022 17:19:12 +0000

Wordle has been gaining quite the following over the last couple of weeks. For those not yet in the know, Wordle is a game where you have 6 tries to guess a five letter word. The word is the same for everyone and only changes once a day. If a letter within your guess is a part of the original word, then the letter is highlighted orange, if it's in the same position of the daily word then it's highlighted green. Letters which aren't a part of the daily word are highlighted grey. You have a choice of using a keyboard or the keyboard printed on the screen to place your letters, each of which will highlight depending on whether or not each letter is in the word.

So I decided to make a version of it myself with some differences. In this version, words will be generated randomly with each play so the game can go on for as many plays as you like throughout the day. The list of available words will also be increased to include nearly 13,000 words as an oppose to the nearly 3,000 Wordle uses, however, for the purposes of this entry and to save space, I'll keep the word count down to just 5 but the full version can be downloaded from Github.

Okay, so let's begin.

First we'll set some variables in Javascript

let wordlist = ['ALPHA', 'GAMMA', 'DELTA', 'NINJA', 'SKILL'];
let currentRow = 0;
let nextRowBlock = 0;
let score = 0;
let remNotification = 0;
let gameFin = 0;
let keyPress;
let restart;
let restart2;
let enterClick;
let deleteClick;
let objArray = []
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);

All of these are going to come into play throughout the script. countOccurences there is used to count the number of times a character shows in an array, I've used this to ensure the correct number of letters are highlighted grey, orange and green. The wordlist is only there for the purposes of this entry, in the full game I've placed the in a separate JS file.

Next, I added a container

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

added in some style for the body and container

html, body{
    margin:0 auto;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family: fantasy;
}

#container{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid;
    border-right: 1px solid;
}

and called upon the gameStart function in Javascript we're about to create

gameStart();

Next, we begin on the gameStart function which looks like this:

function gameStart(){
    container.innerHTML = '';
    gameFin = 0;
    currentRow = 0;
    nextRowBlock = 0;
    score = 0;
    remNotification = 0;
        let wordlist = ['ALPHA', 'GAMMA', 'DELTA', 'NINJA', 'SKILL'];
    let rand = Math.floor(Math.random() * wordlist.length);
    chosenWord = wordlist[rand];

    let logo = document.createElement('div');
    logo.className = 'logo';

    let domName = 'WORDLED';
    for(i = 0; i < domName.length; i++){
        let spanClass = (i == 0 || i % 2 == 0)? 'logo_green' : 'logo_gold';
        let logoSpan = document.createElement('span');
        logoSpan.className = spanClass;
        logoSpan.innerText = domName[i];
        logo.append(logoSpan);
    }

    container.append(logo);

    let navBar = document.createElement('div');
    navBar.className = 'nav_bar';
        let giveUpBtn = document.createElement('button');
        giveUpBtn.id = 'giveUpBtn';
        giveUpBtn.innerText = 'Give up';
        giveUpBtn.addEventListener("click", function quitClick(event) {
            if(gameFin == 0){
                notification.innerText = 'The word was ' + chosenWord + '. Press Enter to play again';
                gameOver();
            }
        });
    navBar.append(giveUpBtn);
    container.append(navBar);

    let gameArea = document.createElement('div');
    gameArea.className = 'game_area';
    for(i = 0; i < 6; i++){
        let row = document.createElement('div');
        row.className = 'row';
        for(j = 0; j < 5; j++){
            let rowBlock = document.createElement('div');
            rowBlock.className = 'row_block';
            row.append(rowBlock);
        }
        gameArea.append(row);
    }
    container.append(gameArea);

    let notification = document.createElement('div');
    notification.id = 'notification';
    notification.innerText = 'Start guessing!'
    container.append(notification);

    let keyLayoutTop = 'QWERTYUIOP';
    let keyLayoutMid = 'ASDFGHJKL';
    let keyLayoutBot = 'ZXCVBNM';

    let keyboard = document.createElement('div');
    keyboard.id = 'keyboard';

        let topKeys = document.createElement('div');
        topKeys.id = 'topKeys';
        addKeys(topKeys, keyLayoutTop, 'keyboardKey_s');
        keyboard.append(topKeys);

        let midKeys = document.createElement('div');
        midKeys.id = 'midKeys';
        addKeys(midKeys, keyLayoutMid, 'keyboardKey_m');
        keyboard.append(midKeys);

        let botKeys = document.createElement('div');
        botKeys.id = 'botKeys';
        let deleteKey = document.createElement('span');
        deleteKey.className = 'keyboardKey_l';
        deleteKey.innerHTML = '&#x2190;';
        deleteKey.addEventListener("click", function deleteClick(event) {
            if(gameFin == 0){
                let wordRow = document.getElementsByClassName('row')[currentRow];
                let rowBlockEl = wordRow.childNodes;
                deleteLetter(rowBlockEl);
            }
        });
        botKeys.append(deleteKey);
        addKeys(botKeys, keyLayoutBot, 'keyboardKey_s');
        let enterKey = document.createElement('span');
        enterKey.className = 'keyboardKey_l';
        enterKey.innerText = 'Enter';
        enterKey.addEventListener("click", enterClick = function(event) {
            if(gameFin == 0){
                let wordRow = document.getElementsByClassName('row')[currentRow];
                let rowBlockEl = wordRow.childNodes;
                submitWord(wordRow);
            }
        });
        botKeys.append(enterKey);
        keyboard.append(botKeys);

    container.append(keyboard);

    let alphabet = 'abcdefghijklmnopqrstuvwxyz';
    document.addEventListener('keyup', keyPress = function(event) {
        if(gameFin == 0){
            let wordRow = document.getElementsByClassName('row')[currentRow];
            let rowBlockEl = wordRow.childNodes;
            for(i = 0; i < alphabet.length; i++){
                if ((event.key === alphabet[i] || event.key === alphabet[i].toUpperCase())) {
                    addLetter(rowBlockEl, alphabet[i]);
                }
            }
            if (event.key === 'Enter') {
                submitWord(wordRow, keyPress);
            }
            if (event.key === 'Backspace') {
                deleteLetter(rowBlockEl);
            }
        }
    });
}

That's quite a bit to take in, so let's break down what the function is doing.

First, because the function also serves as a restart to the game, the container is emptied and the global variables are reset

container.innerHTML = '';
gameFin = 0;
currentRow = 0;
nextRowBlock = 0;
score = 0;
remNotification = 0;

We then fetch a random number between 0 and the number of words in the list and use that to fetch a word from the list

let rand = Math.floor(Math.random() * wordlist.length);
chosenWord = wordlist[rand];

Next, I placed in the logo which is basically just a word so there's no need for images here. I set the variable domName to the word I wanted to use and placed each letter within their own span so I could style them

let logo = document.createElement('div');
logo.className = 'logo';

let domName = 'WORDLED';
for(i = 0; i < domName.length; i++){
    let spanClass = (i == 0 || i % 2 == 0)? 'logo_green' : 'logo_gold';
    let logoSpan = document.createElement('span');
    logoSpan.className = spanClass;
    logoSpan.innerText = domName[i];
    logo.append(logoSpan);
}

container.append(logo);

styling the logo

.logo{
    text-align: center;
    margin-top: 12px;
    cursor:pointer;
    text-shadow: 2px 3px 2px #000;
    transition:.5s
}

.logo:hover{
    filter: brightness(1.125);
}

.logo_green, .logo_gold{
    font-size: 26px;
    color: #fff;
    width: 49px;
    height: 35px;
    border-radius: 12px;
    margin: 3px;
    display: inline-block;
}

.logo_gold{
    background-color: #d7bf4a;
}

.logo_green{
    background-color: #35a535;
}

Back to the JS, I then created the navBar area which currently only contains the give up button.

let navBar = document.createElement('div');
navBar.className = 'nav_bar';
    let giveUpBtn = document.createElement('button');
    giveUpBtn.id = 'giveUpBtn';
    giveUpBtn.innerText = 'Give up';
    giveUpBtn.addEventListener("click", function quitClick(event) {
        if(gameFin == 0){
            notification.innerText = 'The word was ' + chosenWord + '. Press Enter to play again';
            gameOver();
        }
    });
navBar.append(giveUpBtn);
container.append(navBar);

Here, the give up button has a click event which calls on the gameOver function and changes the notification element to display the word of the play.

Then some more styling

.nav_bar{
    text-align: center;
    height: 33px;
    margin-top: 11px;
}

#giveUpBtn{
    padding: 5px 10px;
    font-size: 17px;
    cursor: pointer;
}

Next we build the game area and the blocks/rows we'll be guessing within. 5 blocks x 6 rows

let gameArea = document.createElement('div');
gameArea.className = 'game_area';
for(i = 0; i < 6; i++){
    let row = document.createElement('div');
    row.className = 'row';
    for(j = 0; j < 5; j++){
        let rowBlock = document.createElement('div');
        rowBlock.className = 'row_block';
        row.append(rowBlock);
    }
    gameArea.append(row);
}
container.append(gameArea);

and styled that

.game_area{
    margin-top:5px;
}

.row, .row_block{
    display: flex;
    justify-content: center;
    margin: 5px;
}

.row_block{
    font-size: 40px;
    border: 1px solid;
    width: 56px;
    height: 51px;
    border-radius: 12px;
}

Next we add in the notification element

let notification = document.createElement('div');
notification.id = 'notification';
notification.innerText = 'Start guessing!'
container.append(notification);

and its style

#notification{
    font-family: arial;
    text-align: center;
    letter-spacing: 1px;
    font-size: 19px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 22px;
}

Then we add in the on screen keyboard

let keyLayoutTop = 'QWERTYUIOP';
let keyLayoutMid = 'ASDFGHJKL';
let keyLayoutBot = 'ZXCVBNM';

let keyboard = document.createElement('div');
keyboard.id = 'keyboard';

    let topKeys = document.createElement('div');
    topKeys.id = 'topKeys';
    addKeys(topKeys, keyLayoutTop, 'keyboardKey_s');
    keyboard.append(topKeys);

    let midKeys = document.createElement('div');
    midKeys.id = 'midKeys';
    addKeys(midKeys, keyLayoutMid, 'keyboardKey_m');
    keyboard.append(midKeys);

    let botKeys = document.createElement('div');
    botKeys.id = 'botKeys';
    let deleteKey = document.createElement('span');
    deleteKey.className = 'keyboardKey_l';
    deleteKey.innerHTML = '&#x2190;';
    deleteKey.addEventListener("click", function deleteClick(event) {
        if(gameFin == 0){
            let wordRow = document.getElementsByClassName('row')[currentRow];
            let rowBlockEl = wordRow.childNodes;
            deleteLetter(rowBlockEl);
        }
    });
    botKeys.append(deleteKey);
    addKeys(botKeys, keyLayoutBot, 'keyboardKey_s');
    let enterKey = document.createElement('span');
    enterKey.className = 'keyboardKey_l';
    enterKey.innerText = 'Enter';
    enterKey.addEventListener("click", enterClick = function(event) {
        if(gameFin == 0){
            let wordRow = document.getElementsByClassName('row')[currentRow];
            let rowBlockEl = wordRow.childNodes;
            submitWord(wordRow);
        }
    });
    botKeys.append(enterKey);
    keyboard.append(botKeys);

container.append(keyboard);

Here, I separated the board into 3 different rows. I set variables for each row containing the letters in QWERTY order and inserted them using the addKeys function we will create shortly. The delete and enter keys were added in separately with each key coupled to their respective functions.

Styling for the keyboard

#keyboard{
    text-align:center;
    margin-top: 5px;
}

#topKeys, #midKeys, #botKeys{
    display: flex;
    justify-content:center;
}

.keyboardKey_s, .keyboardKey_m, .keyboardKey_l{
    background-color: #c5c5c5;
    font-size: 30px;
    height: 32px;
    padding: 5px 0;
    margin: 2.5px;
    display: flex;
    justify-content: center;
    font-family: arial;
    cursor: pointer;
}

.keyboardKey_s{
    width: 52px;
}

.keyboardKey_m{
    width: 58px;
}

.keyboardKey_l{
    width: 81px;
}

The last thing to add to the stylesheet was the background colours for the tile change

.blockGreen{
    background-color: #35a535;
    color:#fff;
}

.blockGrey{
    background-color: #737373;
    color:#fff;
}

.blockGold{
    background-color: #d7bf4a;
    color:#fff;
}

We won't need to add anything else to the stylesheet from here out. The rest is all Javascript.

Finally, back in the startGame function, I added the event listeners for keyboard use which basically runs through the alphabet, back space and enter and runs the respective function for each.

let alphabet = 'abcdefghijklmnopqrstuvwxyz';
document.addEventListener('keyup', keyPress = function(event) {
    if(gameFin == 0){
        let wordRow = document.getElementsByClassName('row')[currentRow];
        let rowBlockEl = wordRow.childNodes;
        for(i = 0; i < alphabet.length; i++){
            if ((event.key === alphabet[i] || event.key === alphabet[i].toUpperCase())) {
                addLetter(rowBlockEl, alphabet[i]);
            }
        }
        if (event.key === 'Enter') {
            submitWord(wordRow, keyPress);
        }
        if (event.key === 'Backspace') {
            deleteLetter(rowBlockEl);
        }
    }
});

And that's it for startGame. Next we'll add in the addKeys function which checks for a click on the on screen keyboard and runs the addLetter function we'll be creating shortly

function addKeys(el, layout, keyClass){
    for(i = 0; i < layout.length; i++){
        let j = i;
        let key = document.createElement('span');
        key.className = keyClass;
        key.id = 'keyboard_' + layout[i];
        key.innerText = layout[i];
        key.addEventListener("click", function keyboardPress(event) {
            if(gameFin == 0){
                let wordRow = document.getElementsByClassName('row')[currentRow];
                let rowBlockEl = wordRow.childNodes;
                addLetter(rowBlockEl, layout[j]);
            }
        });
        el.append(key);
    }
}

Then we add in the addLetter function which clears the notification bar and adds a letter to each block in order. After adding a letter, it increases the nextRowBlock variable by 1. When this reaches 5, it prevents you from typing any more letters

function addLetter(rowBlockEl, letter){
    if(remNotification == 0){
        remNotification = 1;
        notification.innerText = '';
    }
    if(nextRowBlock < 5){
        rowBlockEl[nextRowBlock].innerText = letter.toUpperCase();
        nextRowBlock++;
    }
}

Next we'll add in the deleteLetter function which does exactly what it says on the tin. It deletes the last letter on the row and reduces nextRowBlock by 1

function deleteLetter(rowBlockEl){
    if(nextRowBlock > 0){
        nextRowBlock--;
        rowBlockEl[nextRowBlock].innerText = '';
    }
}

Next I added in a count function which counts the number of times a character appears in a string

function count(str, find) {
    return (str.split(find)).length - 1;
}

Followed by the submitWord function

function submitWord(wordRow, keyPress){
    if(nextRowBlock > 0 && nextRowBlock % 5 == 0){
        let word = wordRow.innerText.replace(/[\n\r]/g, '');
        if(wordlist.includes(word)){
            let answer = [];
            for(i = 0; i < word.length; i++){
                let letter = word[i].toUpperCase();
                answer.push(letter);
                let blockClass = 'blockGrey';
                if(chosenWord.toUpperCase().includes(letter)){
                    if(chosenWord[i].toUpperCase() === letter){
                        score++;
                        blockClass = ' blockGreen';
                        if(count(word, letter) > count(chosenWord, letter)){
                            for(j = 0; j < wordRow.childNodes.length; j++){
                                if(wordRow.childNodes[j].innerText == letter && wordRow.childNodes[j].className == 'row_block  blockGold'){
                                    wordRow.childNodes[j].className = 'row_block  blockGrey';
                                    let index = answer.indexOf(letter);
                                    if (index !== -1) {
                                        answer.splice(index, 1);
                                    }
                                }
                            }
                        }
                    }else{
                        if(count(chosenWord, letter) > 0){
                            if(countOccurrences(answer, letter) <= count(chosenWord, letter)){
                                blockClass = ' blockGold';
                            }
                            else{
                                blockClass = ' blockGrey';
                            }
                        }
                    }
                }
                wordRow.childNodes[i].className = 'row_block ' + blockClass;
                let keyboard = document.getElementById('keyboard_' + letter);
                if(chosenWord.toUpperCase().includes(letter)){
                    keyboard.className += ' blockGreen';
                }
                else{
                    keyboard.className += ' blockGrey';
                }
            }

            if(score === 5){
                notification.innerText = 'Well done, you won! Enter to play again';
                gameOver();
            }
            else if(currentRow == 5){
                notification.innerText = 'You lost. The word was ' + chosenWord + '. Press Enter to play again';
                gameOver();
            }
            else{
                score = 0;
                nextRowBlock = 0;
                currentRow++;
            }
        }else{
            remNotification = 0;
            notification.innerText = 'Word not in list';
        }
    }else{
        remNotification = 0;
        notification.innerText = 'You must enter 5 characters';
    }
}

Let's break that function down to see what it does.

First we check to see if the row contains 5 letters by checking the nextRowBlock variable

if(nextRowBlock > 0 && nextRowBlock % 5 == 0){

I then took the innerText of the wordRow element which is set on each call and removed all new lines

let word = wordRow.innerText.replace(/[\n\r]/g, '');

I then checked to see if the word list contains the guess, ensuring the guess isn't just random letters typed in

if(wordlist.includes(word)){

next we set an empty array variable to dump in each letter

let answer = [];

followed by running through the guess, letter by letter

for(i = 0; i < word.length; i++){

set a variable to contain the letter in uppercase so I didn't have to keep on typing word[i].toUpperCase()

let letter = word[i].toUpperCase();

pushed each letter to the array

answer.push(letter);

and set a variable for the blockClass which is going to change the background colour of the row block depending on whether or not the letter is in the word and in the correct place

let blockClass = 'blockGrey';

Next I checked to see if the chosen word contains the letter

if(chosenWord.toUpperCase().includes(letter)){

then checked to see if the current letter is in the same position as the chosen word

if(chosenWord[i].toUpperCase() === letter){

if the letters are in equal positions, I increased the score by 1 and set blockClass to green, then checked to see if the guess contained more of the same letter than the chosen word

score++;
blockClass = ' blockGreen';
if(count(word, letter) > count(chosenWord, letter)){

If the guess does contain more of the same letter, it iterates over the row's child elements, checks for all containing the same letter with the gold class, changes it to grey and removes the letter from the array we set earlier

for(j = 0; j < wordRow.childNodes.length; j++){
    if(wordRow.childNodes[j].innerText == letter && wordRow.childNodes[j].className == 'row_block  blockGold'){
        wordRow.childNodes[j].className = 'row_block  blockGrey';
        let index = answer.indexOf(letter);
        if (index !== -1) {
            answer.splice(index, 1);
        }
    }
}

Next, if the current letter isn't in the same position as the letter in the chosen word, we count the number of times the letter has already appeared from the guess and if it's lower than or equal to the number of times it's in the chosen word, we highlight it gold, else we highlight it grey

else{
    if(countOccurrences(answer, letter) <= count(chosenWord, letter)){
        blockClass = ' blockGold';
    }
    else{
        blockClass = ' blockGrey';
    }
}

Then we update the classes of the blocks in the row

wordRow.childNodes[i].className = 'row_block ' + blockClass;

Next, we want to highlight the keyboard on the screen to let the player know which letters are and aren't a part of the word. First we set the element to a variable

let keyboard = document.getElementById('keyboard_' + letter);

Then we check to see if the letter of the board is in the word. If it is we'll add a green class, else we add in a grey

if(chosenWord.toUpperCase().includes(letter)){
    keyboard.className += ' blockGreen';
}
else{
    keyboard.className += ' blockGrey';
}

Next we check out the score. If it equals 5, the player has guessed the word, the notification gets set with a congratulations and gameOver is called

if(score === 5){
    notification.innerText = 'Well done, you won! Enter to play again';
    gameOver();
}

else if the player is on the last row, the player has lost, the notification set and game over is called

else if(currentRow == 5){
    notification.innerText = 'You lost. The word was ' + chosenWord + '. Press Enter to play again';
    gameOver();
}

else the score is reset and the player moves onto the next try

else{
    score = 0;
    nextRowBlock = 0;
    currentRow++;
}

The next else statement is for if the word isn't in the word list, in which case remNotification is set to 0 and the notification lets the player know the word doesn't exist

else{
    remNotification = 0;
    notification.innerText = 'Word not in list';
}

and the final else statement is in case the player didn't enter 5 characters, in which case a warning pops up in the notifications

else{
    remNotification = 0;
    notification.innerText = 'You must enter 5 characters';
}

Finally we add in the gameOver function which removes all event listeners, then changes the listener for the Enter key to start the game again

function gameOver(){
    gameFin = 1;
    document.removeEventListener('keyup', deleteClick, false);
    document.removeEventListener('keyup', enterClick, false);
    document.removeEventListener('keyup', keyPress, false);
    document.removeEventListener('keyup', restart, false);
    document.addEventListener('keyup', restart = function(event) {
        if (event.key === 'Enter') {
            document.removeEventListener('keyup', restart, false);
            gameStart();
        }
    });
}

And that's it. You should have a functioning Wordle based game that you can play whenever you like and something like this:

The full game can be downloaded from Github here or it can be played online here

The full code:

Javascript

let wordlist = ['ALPHA', 'GAMMA', 'DELTA', 'NINJA', 'SKILL'];
let currentRow = 0;
let nextRowBlock = 0;
let score = 0;
let remNotification = 0;
let gameFin = 0;
let keyPress;
let restart;
let restart2;
let enterClick;
let deleteClick;
let objArray = []
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);

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

gameStart();

function gameOver(){
    gameFin = 1;
    document.removeEventListener('keyup', deleteClick, false);
    document.removeEventListener('keyup', enterClick, false);
    document.removeEventListener('keyup', keyPress, false);
    document.removeEventListener('keyup', restart, false);
    document.addEventListener('keyup', restart = function(event) {
        if (event.key === 'Enter') {
            document.removeEventListener('keyup', restart, false);
            gameStart();
        }
    });
}

function gameStart(){
    container.innerHTML = '';
    gameFin = 0;
    currentRow = 0;
    nextRowBlock = 0;
    score = 0;
    remNotification = 0;
    let rand = Math.floor(Math.random() * wordlist.length);
    chosenWord = wordlist[rand];

    let logo = document.createElement('div');
    logo.className = 'logo';

    let domName = 'WORDLED';
    for(i = 0; i < domName.length; i++){
        let spanClass = (i == 0 || i % 2 == 0)? 'logo_green' : 'logo_gold';
        let logoSpan = document.createElement('span');
        logoSpan.className = spanClass;
        logoSpan.innerText = domName[i];
        logo.append(logoSpan);
    }

    container.append(logo);

    let navBar = document.createElement('div');
    navBar.className = 'nav_bar';
        let giveUpBtn = document.createElement('button');
        giveUpBtn.id = 'giveUpBtn';
        giveUpBtn.innerText = 'Give up';
        giveUpBtn.addEventListener("click", function quitClick(event) {
            if(gameFin == 0){
                notification.innerText = 'The word was ' + chosenWord + '. Press Enter to play again';
                gameOver();
            }
        });
    navBar.append(giveUpBtn);
    container.append(navBar);

    let gameArea = document.createElement('div');
    gameArea.className = 'game_area';
    for(i = 0; i < 6; i++){
        let row = document.createElement('div');
        row.className = 'row';
        for(j = 0; j < 5; j++){
            let rowBlock = document.createElement('div');
            rowBlock.className = 'row_block';
            row.append(rowBlock);
        }
        gameArea.append(row);
    }
    container.append(gameArea);

    let notification = document.createElement('div');
    notification.id = 'notification';
    notification.innerText = 'Start guessing!'
    container.append(notification);

    let keyLayoutTop = 'QWERTYUIOP';
    let keyLayoutMid = 'ASDFGHJKL';
    let keyLayoutBot = 'ZXCVBNM';

    let keyboard = document.createElement('div');
    keyboard.id = 'keyboard';

        let topKeys = document.createElement('div');
        topKeys.id = 'topKeys';
        addKeys(topKeys, keyLayoutTop, 'keyboardKey_s');
        keyboard.append(topKeys);

        let midKeys = document.createElement('div');
        midKeys.id = 'midKeys';
        addKeys(midKeys, keyLayoutMid, 'keyboardKey_m');
        keyboard.append(midKeys);

        let botKeys = document.createElement('div');
        botKeys.id = 'botKeys';
        let deleteKey = document.createElement('span');
        deleteKey.className = 'keyboardKey_l';
        deleteKey.innerHTML = '&#x2190;';
        deleteKey.addEventListener("click", function deleteClick(event) {
            if(gameFin == 0){
                let wordRow = document.getElementsByClassName('row')[currentRow];
                let rowBlockEl = wordRow.childNodes;
                deleteLetter(rowBlockEl);
            }
        });
        botKeys.append(deleteKey);
        addKeys(botKeys, keyLayoutBot, 'keyboardKey_s');
        let enterKey = document.createElement('span');
        enterKey.className = 'keyboardKey_l';
        enterKey.innerText = 'Enter';
        enterKey.addEventListener("click", enterClick = function(event) {
            if(gameFin == 0){
                let wordRow = document.getElementsByClassName('row')[currentRow];
                let rowBlockEl = wordRow.childNodes;
                submitWord(wordRow);
            }
        });
        botKeys.append(enterKey);
        keyboard.append(botKeys);

    container.append(keyboard);

    let alphabet = 'abcdefghijklmnopqrstuvwxyz';
    document.addEventListener('keyup', keyPress = function(event) {
        if(gameFin == 0){
            let wordRow = document.getElementsByClassName('row')[currentRow];
            let rowBlockEl = wordRow.childNodes;
            for(i = 0; i < alphabet.length; i++){
                if ((event.key === alphabet[i] || event.key === alphabet[i].toUpperCase())) {
                    addLetter(rowBlockEl, alphabet[i]);
                }
            }
            if (event.key === 'Enter') {
                submitWord(wordRow, keyPress);
            }
            if (event.key === 'Backspace') {
                deleteLetter(rowBlockEl);
            }
        }
    });
}

function deleteLetter(rowBlockEl){
    if(nextRowBlock > 0){
        nextRowBlock--;
        rowBlockEl[nextRowBlock].innerText = '';
    }
}

function count(str, find) {
    return (str.split(find)).length - 1;
}

function submitWord(wordRow, keyPress){
    if(nextRowBlock > 0 && nextRowBlock % 5 == 0){
        let word = wordRow.innerText.replace(/[\n\r]/g, '');
        if(wordlist.includes(word)){
            let answer = [];
            for(i = 0; i < word.length; i++){
                let letter = word[i].toUpperCase();
                answer.push(letter);
                let blockClass = 'blockGrey';
                if(chosenWord.toUpperCase().includes(letter)){
                    if(chosenWord[i].toUpperCase() === letter){
                        score++;
                        blockClass = ' blockGreen';
                        if(count(word, letter) > count(chosenWord, letter)){
                            for(j = 0; j < wordRow.childNodes.length; j++){
                                if(wordRow.childNodes[j].innerText == letter && wordRow.childNodes[j].className == 'row_block  blockGold'){
                                    wordRow.childNodes[j].className = 'row_block  blockGrey';
                                    let index = answer.indexOf(letter);
                                    if (index !== -1) {
                                        answer.splice(index, 1);
                                    }
                                }
                            }
                        }
                    }else{
                        if(countOccurrences(answer, letter) <= count(chosenWord, letter)){
                            blockClass = ' blockGold';
                        }
                        else{
                            blockClass = ' blockGrey';
                        }
                    }
                }
                wordRow.childNodes[i].className = 'row_block ' + blockClass;
                let keyboard = document.getElementById('keyboard_' + letter);
                if(chosenWord.toUpperCase().includes(letter)){
                    keyboard.className += ' blockGreen';
                }
                else{
                    keyboard.className += ' blockGrey';
                }
            }

            if(score === 5){
                notification.innerText = 'Well done, you won! Enter to play again';
                gameOver();
            }
            else if(currentRow == 5){
                notification.innerText = 'You lost. The word was ' + chosenWord + '. Press Enter to play again';
                gameOver();
            }
            else{
                score = 0;
                nextRowBlock = 0;
                currentRow++;
            }
        }else{
            remNotification = 0;
            notification.innerText = 'Word not in list';
        }
    }else{
        remNotification = 0;
        notification.innerText = 'You must enter 5 characters';
    }
}

function addKeys(el, layout, keyClass){
    for(i = 0; i < layout.length; i++){
        let j = i;
        let key = document.createElement('span');
        key.className = keyClass;
        key.id = 'keyboard_' + layout[i];
        key.innerText = layout[i];
        key.addEventListener("click", function keyboardPress(event) {
            if(gameFin == 0){
                let wordRow = document.getElementsByClassName('row')[currentRow];
                let rowBlockEl = wordRow.childNodes;
                addLetter(rowBlockEl, layout[j]);
            }
        });
        el.append(key);
    }
}

function addLetter(rowBlockEl, letter){
    if(remNotification == 0){
        remNotification = 1;
        notification.innerText = '';
    }
    if(nextRowBlock < 5){
        rowBlockEl[nextRowBlock].innerText = letter.toUpperCase();
        nextRowBlock++;
    }
}

CSS

html, body{
    margin:0 auto;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family: fantasy;
}

#container{
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid;
    border-right: 1px solid;
}

.logo{
    text-align: center;
    margin-top: 12px;
    cursor:pointer;
    text-shadow: 2px 3px 2px #000;
    transition:.5s
}

.logo:hover{
    filter: brightness(1.125);
}

.logo_green, .logo_gold{
    font-size: 26px;
    color: #fff;
    width: 49px;
    height: 35px;
    border-radius: 12px;
    margin: 3px;
    display: inline-block;
}

.logo_gold{
    background-color: #d7bf4a;
}

.logo_green{
    background-color: #35a535;
}

.nav_bar{
    text-align: center;
    height: 33px;
    margin-top: 11px;
}

#giveUpBtn{
    padding: 5px 10px;
    font-size: 17px;
    cursor: pointer;
}

.game_area{
    margin-top:5px;
}

.row, .row_block{
    display: flex;
    justify-content: center;
    margin: 5px;
}

.row_block{
    font-size: 40px;
    border: 1px solid;
    width: 56px;
    height: 51px;
    border-radius: 12px;
}

#notification{
    font-family: arial;
    text-align: center;
    letter-spacing: 1px;
    font-size: 19px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 22px;
}

#keyboard{
    text-align:center;
    margin-top: 5px;
}

#topKeys, #midKeys, #botKeys{
    display: flex;
    justify-content:center;
}

.keyboardKey_s, .keyboardKey_m, .keyboardKey_l{
    background-color: #c5c5c5;
    font-size: 30px;
    height: 32px;
    padding: 5px 0;
    margin: 2.5px;
    display: flex;
    justify-content: center;
    font-family: arial;
    cursor: pointer;
}

.keyboardKey_s{
    width: 52px;
}

.keyboardKey_m{
    width: 58px;
}

.keyboardKey_l{
    width: 81px;
}


.blockGreen{
    background-color: #35a535;
    color:#fff;
}

.blockGrey{
    background-color: #737373;
    color:#fff;
}

.blockGold{
    background-color: #d7bf4a;
    color:#fff;
}

One Way to Cheat Wordle using Javascript

ozboware — Tue, 25 Jan 2022 12:44:40 +0000

After creating my own version of Wordle I took a look at the code behind the original Wordle game to check for similarities and found that it's pretty easy to cheat the game and get not only the word of the day, but every word for the next 5 years. Now, the simplest way to cheat is to just look at the script, but the dev in me just wanted to do more, so I created a function that will push an alert to the screen showing the player the word of the day. It's a simple enough function, you can either paste it in the console (F12, click console, paste and then enter), or you could use it in a browser extension and have the alert each time you go onto the page, you could possibly even wrap it up in a .exe file and run it locally.

So the code is

let date = new Date();
let dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let dayName = dayNames[date.getDay()];
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
let today = month + "/" + day + "/" + year;
let startDate = new Date("06/19/2021");
let endDate = new Date(today);
let days = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
fetch ("https://www.nytimes.com/games/wordle/main.4951a4aa.js")
    .then(x => x.text())
    .then(y => {
        let wordArray = y.slice(y.indexOf('var Ma='), y.indexOf(',Oa='))
            .replace('var Ma=', '')
            .replace('[', '')
            .replace(']', '')
            .replace(/"/g, '')
            .split(',');
        alert('The word for today (' + dayName + ' ' + day + '/' + month + '/' + year + ') is ' + wordArray[days].toUpperCase());
    });

go to the Wordle screen, paste that code into the console, submit it and an alert will pop up telling you the wordle of the day or something like

One way to make Roulette using Javascript - Part 4

ozboware — Sun, 12 Dec 2021 16:05:50 +0000

Wrapping up with style

In part 3 we worked on setting bets and controlling the wheel. Today we're going to finish off the styling and add in some more functionality such as the ability to remove bets, change the bet value ... basically everything to make it a proper game of roulette. First things first, let's change the container style from

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

#container{
    display: flex;
    justify-content: center;
    background-color: #016D29;
    height: 470px;
    padding: 20px;
    color: #fff;
}

We've removed the align-items property which would have pushed the board down with the container, changed the background colour to a shade of green, stretched the container out to fill the board and changed the main colour to white. Now to change the betting board numbers colours to red and black. First, in the stylesheet we add in two more classes

.redNum{
    background-color: #E0080B;
}

.blackNum{
    background-color: #000;
}

Next, I created another global array for all the red coloured numbers

let numRed = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36];

Then, underneath the nbClass variable in the buildBettingBoard function, I checked to see if the numRed array contained the iteration numberBlocks was on, if it did then the class would be set to ' redNum', if it didn't another check was made to make sure the current iteration wasn't on "2 to 1", if it weren't then the class would be set to ' blackNum', else the class would stay empty

var colourClass = (redBlocks.includes(numberBlocks[i]))? ' redNum' : ((nbClass == 'number_block')? ' blackNum' : '');

Finally, I changed

numberBlock.setAttribute('class', nbClass);

numberBlock.setAttribute('class', nbClass + colourClass);

Now the board is starting to take shape. Next I'll change the red and black one to one bets at the bottom of the board to their respective background colour. So, on line 263, just under the "var d = i" line, we add the following

var colourClass = (otoBlocks[i] == 'RED')? ' redNum' : ((otoBlocks[i] == 'BLACK')? ' blackNum' : '');

then we change

otoBlock.setAttribute('class', 'oto_block');

otoBlock.setAttribute('class', 'oto_block' + colourClass);

Now, when the page is loaded, all the colours are in place. As of now, the wager has been set to 5 so now we're going to add in the ability to change the wager. We're going to add in some chips underneath the wheel with the values: 1, 5, 10 and 100.

So first, back to the javascript. Near the end of the buildBettingBoard function, underneath bettingBoard.append(otoBoard); first I created the chipDeck element

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

Next, I set the values of each chip to an array

let chipValues = [1, 5, 10, 100, 'clear'];

I then iterated over the array

for(i = 0; i < chipValues.length; i++){}

Inside the iteration I first set cvi to i, which will be used in the click event

let cvi = i;

I then set the chip colour class to a variable depending on the value of the chip

let chipColour = (i == 0)? 'red' : ((i == 1)? 'blue' : ((i == 2)? 'orange' : ((i == 3)? 'gold' : 'clearBet')));

I then created the chip element and first set its class

let chip = document.createElement('div');
chip.setAttribute('class', 'cdChip ' + chipColour);

followed by the chip's click event which, if isn't the clear chip, is basically changing the wager variable set earlier to the value of the array's iteration

chip.onclick = function(){
    if(cvi !== 4){
        wager = parseInt(chip.childNodes[0].innerText);
    }
};

else it empties the bet and numberBet arrays and clears the chips from the table

else{
    bet = [];
    numbersBet = [];
    removeChips();
}

I then set the chip's text by creating a span so I can control the alignment and setting its innerText to the array's iteration

let chipSpan = document.createElement('span');
chipSpan.setAttribute('class', 'chipSpan');
chipSpan.innerText = chipValues[i];

and appended the chipSpan to the chip, the chip to the chipDeck and the chipDeck to the bettingBoard

chip.append(chipSpan);
chipDeck.append(chip);
bettingBoard.append(chipDeck);

Now, after the page has been refreshed, you may just see a line of numbers, so we have to add in some style. First we style the chipDeck

.chipDeck{
    position: absolute;
    margin-left: -383px;
    margin-top: -75px;
    width: 310px;
    height:39px;
    border: 1px solid;
    border-radius: 10px;
    box-shadow: inset -2px -4px rgb(0 0 0 / 20%);
}

This adds in a white block underneath the wheel. We can shape and position the chips within this boundary. First the chip

.cdChip{
    width: 27px;
    height: 27px;
    background-color: #fff;
    border: 5px solid;
    border-radius: 100%;
    display: inline-block;
    margin-left: 9px;
    color: #000;
    cursor: pointer;
}

then the chip's text

.cdChipSpan{
    display: inherit;
    position: relative;
    top: 5px;
    width: 26px;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

Next I moved and styled the "spin" button because currently it's stuck up on the board. So I changed that style from

.spinBtn{
    position: relative;
    top: 253px;
    font-size:28px;
    cursor:pointer
}

.spinBtn{
    position: absolute;
    margin-top: 329px;
    margin-left: -392px;
    font-size: 15px;
    background-color: #ffec00;
    padding: 10px 5px;
    border-radius: 100%;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

Now I wanted to see how much was being bet so first I created a couple of global variables

let bankValue = 1000;
let currentBet = 0;

back in the buildBettingBoard function, I added in the bank container underneath the chipDeck

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

then I created the bank element

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

followed by the bank's text which is wrapped in a span element

let bankSpan = document.createElement('div');
bankSpan.setAttribute('id', 'bankSpan');
bankSpan.innerText = '' + bankValue.toLocaleString("en-GB") + '';

then I appended the bankSpan element to the bank element and the bank to the bankContainer

bank.append(bankSpan);
bankContainer.append(bank);

I repeated the process with the bet value element

let bet = document.createElement('div');
bet.setAttribute('class', 'bet');
let betSpan = document.createElement('span');
betSpan.setAttribute('id', 'betSpan');
betSpan.innerText = '' + currentBet.toLocaleString("en-GB") + '';
bet.append(betSpan);
bankContainer.append(bet);

next I had to style the new elements

.bank, .bet{
    display: inline-block;
    width: calc(50% - 28px);
    background-color: #000;
    font-size: 18px;
    margin-left: 7px;
    padding: 5px;
    border: 4px solid silver;
    border-radius: 7px;
    text-align: right;
}

Now I had to make the bank work. For this I just need to minus the wager from the bankvalue and refresh the content of the element. For the bet, all I need do is plus the wager to the currentBet variable and refresh the content of the bet element. So, in the setBet function underneath bet.push(obj);, we add in the following

bankValue = bankValue - wager;
currentBet = currentBet + wager;

and underneath that I updated the elements to display the values

document.getElementById('bankSpan').innerText = '' + bankValue.toLocaleString("en-GB") + '';
document.getElementById('betSpan').innerText = '' + currentBet.toLocaleString("en-GB") + '';

Now when you play, you'll see the bank going down and the bet rising with each bet placed. It's all good until the wheel stops turning then we see it doesn't change. The bank doesn't go up with a win and bet doesn't reset to zero. So, back to the spin function. Right above the payout variable I changed the bankValue variable to include any winnings

bankValue = (bankValue + (bet[i].odds * bet[i].amt) + bet[i].amt);

then, outside the for loop and above bet = [];, I reset the currentBet variable to 0 and updated the bankSpan and betSpan elements.

currentBet = 0
document.getElementById('bankSpan').innerText = '' + bankValue.toLocaleString("en-GB") + '';
document.getElementById('betSpan').innerText = '' + currentBet.toLocaleString("en-GB") + '';

Okay, looking good so far. Next I wanted a bar to display the list of previous numbers drawn. Back in the buildBettingBoard function just above container.append(bettingBoard), I built in the previous numbers block

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

Which is basically going to be just a white bordered rectangle, this was followed by the main pnContent block

let pnContent = document.createElement('div');
pnContent.setAttribute('id', 'pnContent');

I then set an on-wheel function to the pnContent so when you hover over the numbers and scroll, the content will scroll left and right. This was so I could keep the scrollbar hidden as it blocks off most of the content when it's displayed. Even using the webkit scrollbar styling doesn't work on every browser, so I thought this was the best for UX

pnContent.onwheel = function(e){
    e.preventDefault();
    pnContent.scrollLeft += e.deltaY;
};

Finally, I appended the pnContent to the pnBlock and the pnBlock to the bettingBoard.

pnBlock.append(pnContent);  
bettingBoard.append(pnBlock);

Now when you refresh the page ... nothing. Ah yes, we need to add in the style.

.pnBlock{
    position: absolute;
    border: 1px solid;
    width: 500px;
    height: 45px;
    margin-top: 10px;
    margin-left: -1px;
}

#pnContent{
    border: 4px solid #d5b714;
    width: 485px;
    height: 31px;
    position: relative;
    display: block;
    margin-left: 4px;
    margin-top: 3px;
    background-color: #fff;
    color: #000;
    overflow:hidden;
}

The numbers will be added in using span elements, one for red, one for green and one for black, so I styled those in now

.pnRed, .pnBlack, .pnGreen{
    position: relative;
    display: inline;
    padding:10px;
    font-size: 19px;
    top: 5px;
}

.pnRed{
    color: red;
}

.pnBlack{
    color: black;
}

.pnGreen{
    color: green;
}

Now we have to get the numbers showing after every spin, so we go back to the spin function. Right above bet = [], I created the pnClass variable. It checks to see if the winningSpin number is in the numRed array, if it is the style will be pnRed, if it's not and the number is zero then the style will be pnGreen, else it'll be pnBlack

let pnClass = (numRed.includes(winningSpin))? 'pnRed' : ((winningSpin == 0)? 'pnGreen' : 'pnBlack');

then I called on the pnContent element and set it to a variable

let pnContent = document.getElementById('pnContent');

then I created the pnSpan element, gave it the class we set out earlier and set its text to the winning number

let pnSpan = document.createElement('span');
pnSpan.setAttribute('class', pnClass);
pnSpan.innerText = winningSpin;

next I appended the pnSpan to the pnContent element

pnContent.append(pnSpan);

finally I scrolled the pnContent element to the end of the sequence so, as the content grows, it will display the end numbers

pnContent.scrollLeft = pnContent.scrollWidth;

and that is that for that function. Now give the wheel a spin 12 or 15 times to see it in action.

You may have noticed by now that when you clear the bets from the board, the bank and current bet values don't reset, so let's fix that first. Back to the buildBettingBoard function and the chipDeck, right above bet = []; in the click event, just add the following

bankValue = bankValue + currentBet;
currentBet = 0;
document.getElementById('bankSpan').innerText = '' + bankValue.toLocaleString("en-GB") + '';
document.getElementById('betSpan').innerText = '' + currentBet.toLocaleString("en-GB") + '';

The next thing to do is change the chips on the table. Currently they're just white dots plonked onto the table. We're going to alter them to show the value of the bet and change colour depending on how high the bet is.

Before we get onto the styling, first we should change the way the bet objects are placed in their array. Right now, every time we make a bet a new object is added to the array. This can get quite bulky and when searching through the bets to find the value, it could slow things down. Instead of a new object being created with each bet, we're going to check if the bet has already been placed first, if it has we'll update the value plus whatever the current wager value is, if not, then we'll add in the new object. So we go into the setBet function. First we move

bankValue = bankValue - wager;
currentBet = currentBet + wager;
document.getElementById('bankSpan').innerText = '' + bankValue.toLocaleString("en-GB") + '';
document.getElementById('betSpan').innerText = '' + currentBet.toLocaleString("en-GB") + '';

to the top of the function, then underneath that we add in the following

for(i = 0; i < bet.length; i++){
    if(bet[i].numbers == n && bet[i].type == t){
        bet[i].amt = bet[i].amt + wager;
        return;
    }
}

which iterates through the bet array and checks to see if the numbers and bet type have a match. If there's a match, the bet value for that object is updated and we call upon return to prevent the function from going any further and setting the bet again. Now, after doing this, I noticed some odd behaviour. Whenever I cleared the bets, the arrays weren't being cleared properly. Every time I placed a new bet the number and bet arrays filled back up to the original and added the new bet afterwards. The only way I could get around this was by creating a new function - clearBet and calling on that in the onclick event of the chipDeck

function clearBet(){
    bet = [];
    numbersBet = [];
}

Okay, so now it all seems to be functioning correctly. Next we have a similar problem with the chips being laid on the table. Every time there's a click, a brand new element is created, this can cause performance issues if many bets are placed, so let's make sure only one chip element is being placed per bet. That's pretty simple to do, in the setBet function where the chip is being created, wrap it in the following if statement

if(!e.querySelector('.chip')){}

That way, it will only create the chip if the element doesn't already exist. Now we're going to work some more on the chips in that if statement.

First we set the colour class

let chipColour = (wager < 5)? 'red' : ((wager < 10)? 'blue' : ((wager < 100)? 'orange' : 'gold'));

then we change the chip.setAttribute property

chip.setAttribute('class', 'chip ' + chipColour);

Then we create the chipSpan element and as it's going to be the first chip laid we only need to set the innerText to equal the wager

let chipSpan = document.createElement('span');
chipSpan.setAttribute('class', 'chipSpan');
chipSpan.innerText = wager;

Finally, we append the chipSpan to the chip

chip.append(chipSpan);

so the if statement should now look like this

if(!e.querySelector('.chip')){
    let chipColour = (wager < 5)? 'red' : ((wager < 10)? 'blue' : ((wager < 100)? 'orange' : 'gold'));
    let chip = document.createElement('div');
    chip.setAttribute('class', 'chip ' + chipColour);
    let chipSpan = document.createElement('span');
    chipSpan.setAttribute('class', 'chipSpan');
    chipSpan.innerText = wager;
    chip.append(chipSpan);
    e.append(chip);
}

next we go back to the following statement

for(i = 0; i < bet.length; i++){
    if(bet[i].numbers == n && bet[i].type == t){
        bet[i].amt = bet[i].amt + wager;
        return;
    }
}

just above the return, we add in the following

let chipColour = (bet[i].amt < 5)? 'red' : ((bet[i].amt < 10)? 'blue' : ((bet[i].amt < 100)? 'orange' : 'gold'));
e.querySelector('.chip').setAttribute('class', 'chip ' + chipColour);
let chipSpan = e.querySelector('.chipSpan');
chipSpan.innerText = bet[i].amt;

This is similar to adding the original chip except it's not checking for the wager, it's checking for the total bet, updating the chip span to tell us the bet amount and updating the colour of the chip depending on the amount bet.

Next, I wanted to see which chip was currently in use, I thought about changing the cursor to an image, but then I'd have to use an image but as I wanted to make this version using only code, I opted to raise and add a shadow for the selected chip when it was clicked. So back to the chipDeck in the buildBettingBoard function.

In the chip onclick function, right under if(cvi !== 4){, I set the cdChipActive elements to a variable

let cdChipActive = document.getElementsByClassName('cdChipActive');

javascript

then iterated over them and removed the class name from the element

for(i = 0; i < cdChipActive.length; i++){
    cdChipActive[i].classList.remove('cdChipActive');
}

I then set the currently clicked element's class name to a variable

let curClass = this.getAttribute('class');

and, if the current class doesn't contain the cdChipActive class, set the new class for the element

if(!curClass.includes('cdChipActive')){
    this.setAttribute('class', curClass + ' cdChipActive');
}

then I slightly altered the chipColour variable to start the game with the 5 chip being set to active

let chipColour = (i == 0)? 'red' : ((i == 1)? 'blue cdChipActive' : ((i == 2)? 'orange' : ((i == 3)? 'gold' : 'clearBet')));

finally, I styled and positioned the element that is currently active

.cdChipActive{
    position: relative;
    top: -4px;
    box-shadow: 0 4px rgb(0 0 0 / 20%);
}

Now each token raises when you click it so you know what you're betting. The next problem I wanted to work on was setting a game over function. Currently the game just keeps on going infinitely, running the bank into the negative. We want it to stop when the bank and the bet reach 0.

First we need to make sure the bet can't exceed whatever's remaining in the bank, so we go back to the setBet function. Right at the top of the function I checked to see if the bankValue was lower than the wager, if it was I changed the wager to equal bankValue

wager = (bankValue < wager)? bankValue : wager;

Now, once the bank hits zero, no more bets can be placed ... except for bets of zero. To stop this, we wrap the rest of the setBet function in the following

if(wager > 0){}

So now the game stops as soon as the bank and bet hit zero. Now we need an option to start the game again. For this, I created a new function

function gameOver(){}

Inside that function I made a notification element

let notification = document.createElement('div');
notification.setAttribute('id', 'notification');

I then created the notification span with the "bankrupt" message and added it to the notification element

let nSpan = document.createElement('span');
nSpan.setAttribute('class', 'nSpan');
nSpan.innerText = 'Bankrupt';
notification.append(nSpan);

next, I created the "play again button" which will call on the resetGame function and added it to the notification element

let nBtn = document.createElement('div');
nBtn.setAttribute('class', 'nBtn');
nBtn.innerText = 'Play again';  
nBtn.onclick = function(){
    resetGame();
};
notification.append(nBtn);

I then added the notification element to the beginning of the container element

container.prepend(notification);

Next I created the resetGame function which is just resetting the main variables, removing the notification and replacing the board

function resetGame(){
    bankValue = 1000;
    currentBet = 0;
    wager = 5;
    bet = [];
    numbersBet = [];
    previousNumbers = [];
    document.getElementById('betting_board').remove();
    document.getElementById('notification').remove();
    buildBettingBoard();
}

Now we want the gameOver notification to show when the bank and the bet hits zero. It's no good showing it as soon as the bank hits zero while there's an active bet, so for this we go back into the spin function, right at the end of the timeout function, under removeChips(); we add the following

if(bankValue == 0 && currentBet == 0){
    gameOver();
}

finally we style the elements

#notification{
    position: absolute;
    width: 500px;
    height: 318px;
    background-color: #ad0205;
    z-index: 10;
    border: 8px solid #d3b201;
    border-radius: 12px;
    transition: 1s;
}

.nSpan{
    display: block;
    position: relative;
    top: 105px;
    font-size: 53px;
    text-align: center;
}

.nBtn{
    display: block;
    position: relative;
    top: 116px;
    left: 25%;
    width: 45%;
    padding: 10px;
    font-size: 32px;
    text-align: center;
    background-color: green;
    border-radius: 15px;
    box-shadow: 3px 4px rgb(0 0 0 / 25%);
    cursor: pointer;
    transition: .5s;
}

.nBtn:active{
    top: 118px;
    left: calc(25% + 2px);
    box-shadow: 1px 2px rgb(0 0 0 / 25%);
}

As we have a notification for game over, we may as well make the win look a bit more attractive while we're at it. I'll start by adding a new function called win

function win(){};

in that function we'll begin by adding the notification element

let notification = document.createElement('div');
notification.setAttribute('id', 'notification');

we'll add to that the content block

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

which includes an element for the winning number and its colour

let nsnumber = document.createElement('span');
nsnumber.setAttribute('class', 'nsnumber');
nsnumber.style.cssText = (numRed.includes(winningSpin))? 'color:red' : 'color:black';
nsnumber.innerText = winningSpin;
nSpan.append(nsnumber);

a message element stating "win"

let nsTxt = document.createElement('span');
nsTxt.innerText = ' Win';
nSpan.append(nsTxt);

along with a breakdown element for the payout

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

which includes the payout broken down into blocks of total bet, total win and payout

let nsWinBlock = document.createElement('div');
nsWinBlock.setAttribute('class', 'nsWinBlock');
nsWinBlock.innerText = 'Bet: ' + betTotal;
nSpan.append(nsWinBlock);
nsWin.append(nsWinBlock);
nsWinBlock = document.createElement('div');
nsWinBlock.setAttribute('class', 'nsWinBlock');
nsWinBlock.innerText = 'Win: ' + winValue;
nSpan.append(nsWinBlock);
nsWin.append(nsWinBlock);
nsWinBlock = document.createElement('div');
nsWinBlock.setAttribute('class', 'nsWinBlock');
nsWinBlock.innerText = 'Payout: ' + (winValue + betTotal);
nsWin.append(nsWinBlock);
nSpan.append(nsWin);

I then appended the nSpan to the notification element and prepended notification to the container

notification.append(nSpan);
container.prepend(notification);

This was followed by setting 2 timeouts. 1 was set 3 seconds after the notification was shown, the other after 4 seconds. The first set the opacity of the notification to 0. This was followed by the removal of the element.

setTimeout(function(){
    notification.style.cssText = 'opacity:0';
}, 3000);
setTimeout(function(){
    notification.remove();
}, 4000);

I then added in a transition to the notification element in the stylesheet

transition: 1s;

along with the styling for the newly added blocks

.nsWin{
    position:absolute;
    left: 4px;
}

.nsWinBlock{
    display: inline-block;
    font-size: 21px;
    border-right: 1px solid;
    border-left: 1px solid;
    padding-left: 40px;
    padding-right: 40px;
}

Combined, this gives a fadeout effect to the winning notification element. Now place a bet on black and red or any guranteed win and give it a spin.

Next, I wanted the ability to remove accidental bets from the table. I opted to take advantage of the right click here, which when activated will remove the wager from the bet clicked. Time to create one last function

function removeBet(){}

inside that function I made sure the wager wasn't on 0

wager = (wager == 0)? 100 : wager;

I then looped over the bet objects and checked for a number and type match

for(i = 0; i < bet.length; i++){
    if(bet[i].numbers == n && bet[i].type == t){}
}

On finding a match we then make sure the current bet amount isn't 0

if(bet[i].amt != 0){}

if not, we set the wager again by checking if the current bet amount is greater than the wager. If it is then the wager stays the same, if it's lower then the wager is set to whatever the bet is

wager = (bet[i].amt > wager)? wager : bet[i].amt;

Next I lowered the bet amount in the object by the wager, changed the bankValue plus the wager, changed the betValue minus the wager and refreshed the bank/bet elements to display the difference

bet[i].amt = bet[i].amt - wager;
bankValue = bankValue + wager;
currentBet = currentBet - wager;
document.getElementById('bankSpan').innerText = '' + bankValue.toLocaleString("en-GB") + '';
document.getElementById('betSpan').innerText = '' + currentBet.toLocaleString("en-GB") + '';

next I hid the chip if the current bet is on 0

if(bet[i].amt == 0){
    e.querySelector('.chip').style.cssText = 'display:none';
}

and updated the chip colour/figure if the bet is greater than zero

else{
    let chipColour = (bet[i].amt < 5)? 'red' : ((bet[i].amt < 10)? 'blue' : ((bet[i].amt < 100)? 'orange' : 'gold'));
    e.querySelector('.chip').setAttribute('class', 'chip ' + chipColour);
    let chipSpan = e.querySelector('.chipSpan');
    chipSpan.innerText = bet[i].amt;
}

The full function

function removeBet(e, n, t, o){
    wager = (wager == 0)? 100 : wager;
    for(i = 0; i < bet.length; i++){
        if(bet[i].numbers == n && bet[i].type == t){
            if(bet[i].amt != 0){
                wager = (bet[i].amt > wager)? wager : bet[i].amt;
                bet[i].amt = bet[i].amt - wager;
                bankValue = bankValue + wager;
                currentBet = currentBet - wager;
                document.getElementById('bankSpan').innerText = '' + bankValue.toLocaleString("en-GB") + '';
                document.getElementById('betSpan').innerText = '' + currentBet.toLocaleString("en-GB") + '';
                if(bet[i].amt == 0){
                    e.querySelector('.chip').style.cssText = 'display:none';
                }else{
                    let chipColour = (bet[i].amt < 5)? 'red' : ((bet[i].amt < 10)? 'blue' : ((bet[i].amt < 100)? 'orange' : 'gold'));
                    e.querySelector('.chip').setAttribute('class', 'chip ' + chipColour);
                    let chipSpan = e.querySelector('.chipSpan');
                    chipSpan.innerText = bet[i].amt;
                }
            }
        }
    }
}

The next step was to go through all of the betting points again and adding the right click event to call on the removeBet function. For instance:

numberBlock.oncontextmenu = function(e){
    e.preventDefault();
    if(numberBlocks[a] != '2 to 1'){
        removeBet(this, ''+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');
        removeBet(this, num, 'outside_column', 2);
    }
};

Next problem to fix was resetting the wager to the last bet amount after the bank was pushed to zero during a bet and the bet was won. Currently, the wager sticks on zero. To change this I created another global variable

let lastWager = 0;

then, at the top of the setBet function set the lastWager to equal the current wager

lastWager = wager;

then, at the end of the spin function set the wager back to equal the lastWager

wager = lastWager;

Now the bet won't be set to zero on a win. Finally, now that all of the testing is out of the way, I only wanted to spin the wheel if the bet was higher than 0 so I removed the button from the table by taking it out of the buildBettingBoard function and placing it in the setBet function, after if(wager > 0), wrapped in a statement checking if it doesn't already exist so it isn't added to the table multiple times

if(!container.querySelector('.spinBtn')){
    let spinBtn = document.createElement('div');
    spinBtn.setAttribute('class', 'spinBtn');
    spinBtn.innerText = 'spin';
    spinBtn.onclick = function(){
        this.remove();
        spin();
    };
    container.append(spinBtn);
}

and in the removeBet function, I checked to see if the bet value equalled zero, and removed the spin button if it did

if(currentBet == 0 && container.querySelector('.spinBtn')){
    document.getElementsByClassName('spinBtn')[0].remove();
}

And that's it. There are a couple of betting points missing (0-1, 0-2, 0-3), you could include a rebet function, add in some sound, animations, images and even a menu. But for the sake of this entry that's all there is to it. One way to make roulette using Javascript. I hope someone found it of some use.

You can play the game and see the full code on codePen here

Or you can download it from Github here

One way to make Roulette using Javascript - Part 3

ozboware — Sat, 11 Dec 2021 16:12:18 +0000

Place your bets!

In part 2 we covered creating the wheel and getting it spinning. In this part we're going to make it into a game. In part 1 we already set the click events for each betting point on the table, now we're going to work on the setBet and spin functions. First we need to set some variables outside of any functions at the top of the script

let wager = 5;
let bet = [];
let numbersBet = [];

Here we have a set wager, the bet is for an array of objects containing the numbers bet, the bet type, wager and payout odds. The numbersBet variable is for the array of numbers that have been betted on, each number will only be placed in once and this is checked against the winning number before the search for the bets begin.

Now we go back to the setBet function. Currently it looks like this

function setBet(n, t, o){
    console.log(n);
    console.log(t);
    console.log(o);
}

we're going to change it to this

function setBet(n, t, o){
    var obj = {
        amt: wager,
        type: t,
        odds: o,
        numbers: n
    };
    bet.push(obj);
    let numArray = n.split(',').map(Number);
    for(i = 0; i < numArray.length; i++){
        if(!numbersBet.includes(numArray[i])){
            numbersBet.push(numArray[i]);
        }
    }
}

Broken down. Earlier we set the bet variable as an array ready for objects. Here, we're setting the object to be pushed into the array containing: the wager, bet type, odds and numbers bet on.

var obj = {
    amt: wager,
    type: t,
    odds: o,
    numbers: n
};
bet.push(obj);

All of this was set for each betting point in part 1. We then split the numbers into an array

let numArray = n.split(',').map(Number);

iterated through them and, if each iteration's number isn't already in the numbersBet array, add it to the array.

for(i = 0; i < numArray.length; i++){
    if(!numbersBet.includes(numArray[i])){
        numbersBet.push(numArray[i]);
    }
}

Next we start the build on the spin function.

function spin(){}

Inside that function, we'll begin by adding a log in the console for the numbers that have been bet on to see if the numbersBet push is working correctly

console.log(numbersBet);

Then we'll set a randomly generated number between 0 & 36

var winningSpin = Math.floor(Math.random() * 36);

Next we check to see if the numbersBet array contains the winning number

if(numbersBet.includes(winningSpin)){
    for(i = 0; i < bet.length; i++){
        var numArray = bet[i].numbers.split(',').map(Number);
        if(numArray.includes(winningSpin)){
            console.log(winningSpin);
            console.log('odds ' + bet[i].odds);
            console.log('payout ' + ((bet[i].odds * bet[i].amt) + bet[i].amt));
        }
    }
}

Broken down. First, if the numbersBet array contains the random number chosen, we iterate through the bet array containing the betting information

for(i = 0; i < bet.length; i++){}

In that loop, we then take the numbers property value and split it into an array

var numArray = bet[i].numbers.split(',').map(Number);

if the array contains the winning number we get a log in the console of the winning number, the odds for the bet and the payout for the win.

if(numArray.includes(winningSpin)){
    console.log(winningSpin);
    console.log('odds ' + bet[i].odds);
    console.log('payout ' + ((bet[i].odds * bet[i].amt) + bet[i].amt));
}

This will loop over until all the objects/bets have been checked in the bet array. Next, if the numbersBet array doesn't contain the random number we'll get a log in the console of the winning number and a no win message

else{
    console.log(winningSpin);
    console.log('no win');
}

Finally, we wrap up by resetting the numbersBet and bet arrays

bet = [];
numbersBet = [];

The full function so far should look like this

function spin(){
    console.log(numbersBet);
    var winningSpin = Math.floor(Math.random() * 36);

    if(numbersBet.includes(winningSpin)){
        for(i = 0; i < bet.length; i++){
            var numArray = bet[i].numbers.split(',').map(Number);
            if(numArray.includes(winningSpin)){
                console.log(winningSpin);
                console.log('odds ' + bet[i].odds);
                console.log('payout ' + ((bet[i].odds * bet[i].amt) + bet[i].amt));
            }
        }
    }else{
        console.log(winningSpin);
        console.log('no win');
    }

    bet = [];
    numbersBet = [];
}

All that's left is to add in the spin button. Now we go back to the end of the buildBettingBoard function and we add the following

let spinBtn = document.createElement('div');
spinBtn.setAttribute('class', 'spinBtn');
spinBtn.innerText = 'spin';
spinBtn.onclick = function(){
    spin();
};
container.append(spinBtn);

And give it some basic styling

.spinBtn{
    position: relative;
    top: 253px;
    font-size:28px;
    cursor:pointer
}

Now, after you've refreshed the page, you'll be able to place bets and get an instant win/loss message in the console. Now the basic game logic is functioning, we can get to work designing the user interface. I thought the best place to start was building the chips which will just be elements with the class "chip" with a choice of colours depending on the size of the bet. So in the CSS we add in the following

.chip{
    width: 21px;
    height: 21px;
    background-color:#fff;
    border: 3px solid;
    border-radius: 100%;
    position:absolute;
}

.gold{
    border-color:gold;
}

.red{
    border-color:red;
}

.green{
    border-color:green;
}

.blue{
    border-color:blue;
}

Next we want the chip to be placed on the table where the bet has been made so, within every call for setBet in the buildBettingBoard function we're going to add "this". So, for instance

setBet(num, 'outside_oerb', 1);

will become

setBet(this, num, 'outside_oerb', 1);

and the actual function

function setBet(n, t, o){}

will become

function setBet(e, n, t, o){}

then we're going to continue building on the setBet function. At the bottom of the setBet function we add the following

let chip = document.createElement('div');
chip.setAttribute('class', 'chip');
e.append(chip);

We put this at the bottom of the function because we're going to have a number on the chip representing the bet and the colour of the chip to change depending on the bet amount. All that will come a little later. For now, the chips are being placed but they're not aligned correctly. Now we have to do some aligning. It should be relatively easy given the chips are being added to elements already in place. All we have to do on our stylsheet is call upon the parent element and chip and change its positioning, like such

.tt1_block .chip{
    margin-left: 19px;
    margin-top: -24px;
}

.number_block .chip{
    margin-left: 7px;
    margin-top: -24px;
}

.wlrtl .chip{
    margin-left: -9px;
    margin-top: 9px;
}

.cbbb .chip{
    margin-left: -4px;
    margin-top: -5px;
}

.ttbbetblock .chip{
    margin-left: -7px;
    margin-top: -8px;
}

#wlttb_top .chip{
    margin-left: -5px;
    margin-top: -8px;
}

.bbtoptwo .chip{
    margin-left: 108px;
    margin-top: -25px;
}

.number_0 .chip{
    margin-left: -8px;
    margin-top: -22px;
}

.bo3_block .chip{
    margin-left: 65px;
    margin-top: -26px;
}

.oto_block .chip{
    margin-left: 45px;
    margin-top: -25px;
}

Now, when you click on a betting spot, the chip should be neatly aligned with the bet. Next, let's tidy up the board a bit and get rid of the betting spot borders. In the stylesheet go to .ttbbetblock and change it to

.ttbbetblock{
    width: 19.1px;
    height: 10px;
    position: relative;
    display: inline-block;
    margin-left: 22.52px;
    top: -2px;
    cursor:pointer;
    z-index:3;
}

Just remove the border from ..rtlbb1, .rtlbb2, .rtlbb3 and with the corner bets, remove the border from .cbbb, change its margin-left to 22.52px and change the following elements

#cbbb_1, #cbbb_4, #cbbb_5, #cbbb_7, #cbbb_9, #cbbb_11, #cbbb_12, #cbbb_15, #cbbb_16, #cbbb_18, #cbbb_20, #cbbb_22{
    margin-left: 21px;
}

#cbbb_3, #cbbb_14{
    margin-left: 20.5px;
}

#cbbb_6, #cbbb_17{
    margin-left: 23px;
}

#cbbb_8, #cbbb_10, #cbbb_19, #cbbb_21{
    margin-left: 22px;
}

Now the chips can be placed and the game is taking shape. We want the chips to disappear after the spin has taken place. For this I had to create a recursive function because, for whatever reason, either the Javascript .remove() property was only removing half of the elements at a time or the loop was iterating through only half of the elements, or it was a combination of the two

function removeChips(){
    var chips = document.getElementsByClassName('chip');
    if(chips.length > 0){
        for(i = 0; i < chips.length; i++){
            chips[i].remove();
        }
        removeChips();
    }
}

All that's doing is checking for all the elements with the class name "chip" and if there are one or more it removes the elements, then calls back on itself and repeats the action until all of the elements have been removed. We then call on the function at the end of the spin function.

Now we want to slow things down a bit between the spin button being pushed and the results being shown. So we stop our wheel and ball from spinning by removing the animation properties from the wheel and balltrack classes. Now we can get to work on making it spin and land on the number randomly chosen. I began by placing all the numbers on the wheel in anti-clockwise order into a global array at the top of the script so it doesn't have to keep on being set

let wheelnumbersAC = [0, 26, 3, 35, 12, 28, 7, 29, 18, 22, 9, 31, 14, 20, 1, 33, 16, 24, 5, 10, 23, 8, 30, 11, 36, 13, 27, 6, 34, 17, 25, 2, 21, 4, 19, 15, 32];

and added the variables for the wheel and ballTrack underneath the calls buildWheel and buildBettingBoard at the top of the script, again so they didn't have to keep on being set with each spin

let wheel = document.getElementsByClassName('wheel')[0];
let ballTrack = document.getElementsByClassName('ballTrack')[0];

Then I created a new function called spinWheel

function spinWheel(winningSpin){}

In this function I began by iterating over the wheelnumbersAC array and calculating the angle the ballTrack should stop at compared to the number that has been chosen

for(i = 0; i < wheelnumbersAC.length; i++){
    if(wheelnumbersAC[i] == winningSpin){
        var degree = (i * 9.73) + 362;
    }
}

I added in an extra 362 degrees so the ball wouldn't just slowly crawl at the end to the numbers closest to zero. Then I added back in the animations we took away earlier

wheel.style.cssText = 'animation: wheelRotate 5s linear infinite;';
ballTrack.style.cssText = 'animation: ballRotate 1s linear infinite;';

followed by 4 timeout functions which will slow and eventually stop the ball. First was the function set to run after 2 seconds

setTimeout(function(){
    ballTrack.style.cssText = 'animation: ballRotate 2s linear infinite;';
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerText = '@keyframes ballStop {from {transform: rotate(0deg);}to{transform: rotate(-'+degree+'deg);}}';
    document.head.appendChild(style);
}, 2000);

This function is slowing the ball rotation down to half the speed as well as creating a new style to stop the ball in the next function. The "ballStop" keyframes here starts at 0deg but ends at minus the degree angle calculated at the beginning of the main function. Next, after a further 4 seconds or 6 seconds in total, I switched to the ballStop keyframes

setTimeout(function(){
    ballTrack.style.cssText = 'animation: ballStop 3s linear;';
}, 6000);

As the ballTrack was set to 3 seconds, the next function would follow 3 seconds later or 9 seconds in total

setTimeout(function(){
    ballTrack.style.cssText = 'transform: rotate(-'+degree+'deg);';
}, 9000);

This makes sure the ball stops at the angle we want it to instead of it zapping back to zero. Finally, after 10 seconds, we stop the wheel from rotating by removing its extra styling and we remove the ballStop keyframes style

setTimeout(function(){
    wheel.style.cssText = '';
    style.remove();
}, 10000);

Then, underneath the winningSpin variable in the spin() function, we call on the spinWheel() function and wrap the rest of the function in a timeout set to 9 seconds.

function spin(){
    console.log(numbersBet);
    let winningSpin = Math.floor(Math.random() * 36);
    spinWheel(winningSpin);
    setTimeout(function(){
        if(numbersBet.includes(winningSpin)){
            for(i = 0; i < bet.length; i++){
                var numArray = bet[i].numbers.split(',').map(Number);
                if(numArray.includes(winningSpin)){
                    console.log(winningSpin);
                    console.log('odds ' + bet[i].odds);
                    console.log('payout ' + ((bet[i].odds * bet[i].amt) + bet[i].amt));
                }
            }
        }else{
            console.log(winningSpin);
            console.log('no win');
        }

        bet = [];
        numbersBet = [];
        removeChips();
    }, 9000);
}

Now, when you refresh the page, after you've pressed "spin" the ball should appear to land on the number generated randomly and shown to you in the console.

The full code from part 1 up to this point is available on the Codepen demo here.

The full code for this part

Javascript

let wager = 5;
let bet = [];
let numbersBet = [];

let wheelnumbersAC = [0, 26, 3, 35, 12, 28, 7, 29, 18, 22, 9, 31, 14, 20, 1, 33, 16, 24, 5, 10, 23, 8, 30, 11, 36, 13, 27, 6, 34, 17, 25, 2, 21, 4, 19, 15, 32];

let wheel = document.getElementsByClassName('wheel')[0];
let ballTrack = document.getElementsByClassName('ballTrack')[0];

function setBet(e, n, t, o){
    var obj = {
        amt: wager,
        type: t,
        odds: o,
        numbers: n
    };
    bet.push(obj);
    let numArray = n.split(',').map(Number);
    for(i = 0; i < numArray.length; i++){
        if(!numbersBet.includes(numArray[i])){
            numbersBet.push(numArray[i]);
        }
    }
    let chip = document.createElement('div');
    chip.setAttribute('class', 'chip');
    e.append(chip);
}

function spin(){
    console.log(numbersBet);
    var winningSpin = Math.floor(Math.random() * 36);
    spinWheel(winningSpin);
    setTimeout(function(){
        if(numbersBet.includes(winningSpin)){
            for(i = 0; i < bet.length; i++){
                var numArray = bet[i].numbers.split(',').map(Number);
                if(numArray.includes(winningSpin)){
                    console.log(winningSpin);
                    console.log('odds ' + bet[i].odds);
                    console.log('payout ' + ((bet[i].odds * bet[i].amt) + bet[i].amt));
                }
            }
        }else{
            console.log(winningSpin);
            console.log('no win');
        }

        bet = [];
        numbersBet = [];
        removeChips();
    }, 3000);
}

function spinWheel(winningSpin){
    for(i = 0; i < wheelnumbersAC.length; i++){
        if(wheelnumbersAC[i] == winningSpin){
            var degree = (i * 9.73) + 362;
        }
    }
    wheel.style.cssText = 'animation: wheelRotate 5s linear infinite;';
    ballTrack.style.cssText = 'animation: ballRotate 1s linear infinite;';

    setTimeout(function(){
        ballTrack.style.cssText = 'animation: ballRotate 2s linear infinite;';
        style = document.createElement('style');
        style.type = 'text/css';
        style.innerText = '@keyframes ballStop {from {transform: rotate(0deg);}to{transform: rotate(-'+degree+'deg);}}';
        document.head.appendChild(style);
    }, 2000);
    setTimeout(function(){
        ballTrack.style.cssText = 'animation: ballStop 3s linear;';
    }, 6000);
    setTimeout(function(){
        ballTrack.style.cssText = 'transform: rotate(-'+degree+'deg);';
    }, 9000);
    setTimeout(function(){
        wheel.style.cssText = '';
        style.remove();
    }, 10000);
}

function removeChips(){
    var chips = document.getElementsByClassName('chip');
    if(chips.length > 0){
        for(i = 0; i < chips.length; i++){
            chips[i].remove();
        }
        removeChips();
    }
}

css

.spinBtn{
    position: relative;
    top: 253px;
    font-size:28px;
    cursor:pointer
}
.chip{
    width: 21px;
    height: 21px;
    background-color:#fff;
    border: 3px solid;
    border-radius: 100%;
    position:absolute;
}

.gold{
    border-color:gold;
}

.red{
    border-color:red;
}

.green{
    border-color:green;
}

.blue{
    border-color:blue;
}


.tt1_block .chip{
    margin-left: 19px;
    margin-top: -24px;
}

.number_block .chip{
    margin-left: 7px;
    margin-top: -24px;
}

.wlrtl .chip{
    margin-left: -9px;
    margin-top: 9px;
}

.cbbb .chip{
    margin-left: -4px;
    margin-top: -5px;
}

.ttbbetblock .chip{
    margin-left: -7px;
    margin-top: -8px;
}

#wlttb_top .chip{
    margin-left: -5px;
    margin-top: -8px;
}

.bbtoptwo .chip{
    margin-left: 108px;
    margin-top: -25px;
}

.number_0 .chip{
    margin-left: -8px;
    margin-top: -22px;
}

.bo3_block .chip{
    margin-left: 65px;
    margin-top: -26px;
}

.oto_block .chip{
    margin-left: 45px;
    margin-top: -25px;
}

.ttbbetblock{
    width: 19.1px;
    height: 10px;
    position: relative;
    display: inline-block;
    margin-left: 22.52px;
    top: -2px;
    cursor:pointer;
    z-index:3;
}

#cbbb_1, #cbbb_4, #cbbb_5, #cbbb_7, #cbbb_9, #cbbb_11, #cbbb_12, #cbbb_15, #cbbb_16, #cbbb_18, #cbbb_20, #cbbb_22{
    margin-left: 21px;
}

#cbbb_3, #cbbb_14{
    margin-left: 20.5px;
}

#cbbb_6, #cbbb_17{
    margin-left: 23px;
}

#cbbb_8, #cbbb_10, #cbbb_19, #cbbb_21{
    margin-left: 22px;
}

That's it for this part. You can now place bets, lay chips, spin the wheel, have the ball land on a designated number and see your win/loss in the console. In the next and final part, we'll be wrapping up by styling the table, tidying up the bets, repositioning the spin button, adding numbers on the chips, preventing the chip elements from being set multiple times, adding in the ability to change bet value, remove bets from the table, view win/loss messages on the screen and remove all the console logs

One way to make Roulette using Javascript - Part 2

ozboware — Fri, 10 Dec 2021 12:22:47 +0000

Building the wheel

In part one we built the betting board and gave it some minimal styling. In this part I'm going to be building the wheel and testing its rotation.

Here, I created a function called buildWheel

function buildWheel(){}

Inside that function I created the wheel wrapper

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

Then I added the outer rim

let outerRim = document.createElement('div');
outerRim.setAttribute('class', 'outerRim');
wheel.append(outerRim);

Next I placed all the possible numbers into an array in the order they appear on the wheel and added each block to the wrapper

let numbers = [0, 32, 15, 19, 4, 21, 2, 25, 17, 34, 6, 27, 13, 36, 11, 30, 8, 23, 10, 5, 24, 16, 33, 1, 20, 14, 31, 9, 22, 18, 29, 7, 28, 12, 35, 3, 26];
for(i = 0; i < numbers.length; i++){
    let a = i + 1;
    let spanClass = (numbers[i] < 10)? 'single' : 'double';
    let sect = document.createElement('div');
    sect.setAttribute('id', 'sect'+a);
    sect.setAttribute('class', 'sect');
    let span = document.createElement('span');
    span.setAttribute('class', spanClass);
    span.innerText = numbers[i];
    sect.append(span);
    let block = document.createElement('div');
    block.setAttribute('class', 'block');
    sect.append(block);
    wheel.append(sect);
}

which in HTML translates to

<div id="sect1" class="sect">
    <span class="single">0</span>
    <div class="block"></div>
</div>

where 1 and 0 will equal whichever iteration the "a" and "numbers[i]" variable are on respectively.

Next I added in the pockets rim element

let pocketsRim = document.createElement('div');
pocketsRim.setAttribute('class', 'pocketsRim');
wheel.append(pocketsRim);

Followed by the ball track element

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

The ball track is the line the ball is going to follow when the wheel is spinning. Next we need to add the ball to the track and add the track to the wheel

let ball = document.createElement('div');
ball.setAttribute('class', 'ball');
ballTrack.append(ball);
wheel.append(ballTrack);

Next I added the pockets element which, once styled, will just be a smaller black circle over the larger circle at half opacity to make the pockets look darker than the numbers

let pockets = document.createElement('div');
pockets.setAttribute('class', 'pockets');
wheel.append(pockets);

Then I added the cone, which is the centre circle of the wheel

let cone = document.createElement('div');
cone.setAttribute('class', 'cone');
wheel.append(cone);

Finally I added in the turret, which is the decoration in the centre of the wheel. I did this in two parts, first the centre piece

let turret = document.createElement('div');
turret.setAttribute('class', 'turret');
wheel.append(turret);

Followed by the handles

let turretHandle = document.createElement('div');
turretHandle.setAttribute('class', 'turretHandle');
let thendOne = document.createElement('div');
thendOne.setAttribute('class', 'thendOne');
turretHandle.append(thendOne);
let thendTwo = document.createElement('div');
thendTwo.setAttribute('class', 'thendTwo');
turretHandle.append(thendTwo);
wheel.append(turretHandle);

Then I appended the wheel to the container

container.append(wheel);

and called on the function just above the buildBettingBoard function call

buildWheel();
buildBettingBoard();

That's it for the buildWheel function. Now when you load the page you'll see the numbers running down the page. Time to add in some style.

First there's the main wheel element

.wheel {
    height: 312px;
    width: 312px;
    position: relative;
    left: -75px;
}

Then I worked on placing in the numbers. Basically, I just created a pie chart with 37 equal pieces that alternated between red and black with 1 green section. There are 360 degrees in a circle, 360 / 37 just about equals 9.73

.block {
    transition: all 1s;
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 100%;
    clip: rect(0px, 145px, 290px, 0px);
}

.sect {
    position: absolute;
    top:10px;
    left:10px;
    width: 290px;
    height: 290px;
    border-radius: 100%;
    clip: rect(0px, 290px, 290px, 145px);
}

#sect1 .block {
    background-color: #016D29;
    transform:rotate(9.73deg);
}

#sect2 .block, #sect4 .block, #sect6 .block, #sect8 .block, #sect10 .block, #sect12 .block, #sect14 .block, #sect16 .block, #sect18 .block, #sect20 .block, #sect22 .block, #sect24 .block, #sect26 .block, #sect28 .block, #sect30 .block, #sect32 .block, #sect34 .block, #sect36 .block {
    background-color: #E0080B;
    transform: rotate(9.73deg);
}

#sect3 .block, #sect5 .block, #sect7 .block, #sect9 .block, #sect11 .block, #sect13 .block, #sect15 .block, #sect17 .block, #sect19 .block, #sect21 .block, #sect23 .block, #sect25 .block, #sect27 .block, #sect29 .block, #sect31 .block, #sect33 .block, #sect35 .block, #sect37 .block {
    background-color: #000;
    transform: rotate(9.73deg);
}

Then I rotated each section plus 9.73deg of the section before

#sect2 {
    transform: rotate(9.73deg);
}

#sect3 {
    transform: rotate(19.46deg);
}

#sect4 {
    transform: rotate(29.19deg);
}

#sect5 {
    transform: rotate(38.92deg);
}

#sect6 {
    transform: rotate(48.65deg);
}

#sect7 {
    transform: rotate(58.38deg);
}

#sect8 {
    transform: rotate(68.11deg);
}

#sect9 {
    transform: rotate(77.84deg);
}

#sect10 {
    transform: rotate(87.57deg);
}

#sect11 {
    transform: rotate(97.3deg);
}

#sect12 {
    transform: rotate(107.03deg);
}

#sect13 {
    transform: rotate(116.76deg);
}

#sect14 {
    transform: rotate(126.49deg);
}

#sect15 {
    transform: rotate(136.22deg);
}

#sect16 {
    transform: rotate(145.95deg);
}

#sect17 {
    transform: rotate(155.68deg);
}

#sect18 {
    transform: rotate(165.41deg);
}

#sect19 {
    transform: rotate(175.14deg);
}

#sect20 {
    transform: rotate(184.87deg);
}

#sect21 {
    transform: rotate(194.6deg);
}

#sect22 {
    transform: rotate(204.33deg);
}

#sect23 {
    transform: rotate(214.06deg);
}

#sect24 {
    transform: rotate(223.79deg);
}

#sect25 {
    transform: rotate(233.52deg);
}

#sect26 {
    transform: rotate(243.25deg);
}

#sect27 {
    transform: rotate(252.98deg);
}

#sect28 {
    transform: rotate(262.71deg);
}

#sect29 {
    transform: rotate(272.44deg);
}

#sect30 {
    transform: rotate(282.17deg);
}

#sect31 {
    transform: rotate(291.9deg);
}

#sect32 {
    transform: rotate(301.63deg);
}

#sect33 {
    transform: rotate(311.36deg);
}

#sect34 {
    transform: rotate(321.09deg);
}

#sect35 {
    transform: rotate(330.82deg);
}

#sect36 {
    transform: rotate(340.55deg);
}

#sect37 {
    transform: rotate(350.28deg);
}

Next I positioned and sized the numbers and gave them a colour of white.

.double, .single{
    position: absolute;
    z-index: 1;
    color: #fff;
    font-size: 14px;
    transform: rotate(3deg);
}

.double{
    left: 148px;
    margin-top: 4.5px;
}

.single{
    left: 152px;
    margin-top: 4.5px;
}

Then the outer rim.

.outerRim {
    position: absolute;
    left:0;
    top:0;
    width: 290px;
    height: 290px;
    border-radius: 100%;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    border: 10px solid #F3c620;
}

Followed by the pockets rim, which I made thinner and silver

.pocketsRim {
    position: absolute;
    top: 34px;
    left: 34px;
    width: 235px;
    height: 235px;
    border-radius: 100%;
    border: 3px solid #c0c0c0;
}

Then the ball track. Originally the track had a border so I could align the ball. The the track will be the element that is rotating while the ball always stays in the same position it's been set on the track, giving the impression the ball is rotating around the track. After the ball was positioned, I removed the border.

.ballTrack{
    width: 212px;
    height: 207px;
    position: absolute;
    left: 47.5px;
    top: 50px;
    border-radius: 100%;
    z-index:2;
}

followed by positioning and shaping the ball

.ball{
    background-color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    position: relative;
    left: 109px;
    top: -8px;
}

Next, I styled the pockets.

.pockets {
    position: absolute;
    top: 37px;
    left: 37px;
    width: 235px;
    height: 235px;
    background-color: #000;
    border-radius: 100%;
    opacity: .5;
}

followed by the cone

.cone {
    position: absolute;
    top: 62px;
    left: 61px;
    height: 180px;
    width: 180px;
    border: 3px solid #9f9a9a;
    border-radius: 100%;
    background: radial-gradient(circle at 100px 100px, #892c10, #000);
}

and finished it off with the turret. I did this in 3 pieces: the centre, the handles and the handle decoration

.turret{
    border-radius: 100%;
    background: radial-gradient( circle at 30% 30%, #f3c620, #1a1608 );
    width: 45px;
    height: 45px;
    position: absolute;
    top: 133px;
    left: 134px;
    z-index: 1;
}

.turretHandle{
    background: radial-gradient( circle at 44%, #f3c620, #6a570f);
    width: 87px;
    height: 14px;
    position: absolute;
    left: 113px;
    top: 148px;
}

.thendOne, .thendTwo{
    border-radius: 100%;
    background: radial-gradient( circle at 30% 30%, #f3c620, #1a1608 );
    width: 25px;
    height: 25px;
    position: absolute;
}

.thendOne{
    top: -6px;
    left: -20px;
}

.thendTwo{
    top: -6px;
    left: 83px;
}

That's almost it for the wheel, now when the page is refreshed we have a stationary wheel on the screen. Now we just need to see how it looks when it's rotating. The wheel will be rotating clockwise and the ball will be spinning anti-clockwise. First we add in the keyframes

@keyframes wheelRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
@keyframes ballRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-359deg);
    }
}

Then added in the animation command in the wheel and ballTrack elements

.wheel {
    height: 312px;
    width: 312px;
    position: relative;
    left: -75px;
    animation: wheelRotate 5s linear infinite;
}

.ballTrack{
    width: 212px;
    height: 207px;
    position: absolute;
    left: 47.5px;
    top: 50px;
    border-radius: 100%;
    z-index:2;
    animation: ballRotate 1s linear infinite;
}

For now it's set to infinite. When the page is refreshed, we'll see a turning wheel with a spinning ball next to the betting table, or something like this

The full code up to this point is available here.

The full code for this part:

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;
}

@keyframes wheelRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
@keyframes ballRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-359deg);
    }
}

.wheel {
    height: 312px;
    width: 312px;
    position: relative;
    left: -75px;
  animation: wheelRotate 5s linear infinite;
}

.block {
    transition: all 1s;
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 100%;
    clip: rect(0px, 145px, 290px, 0px);
}

.sect {
    position: absolute;
    top:10px;
    left:10px;
    width: 290px;
    height: 290px;
    border-radius: 100%;
    clip: rect(0px, 290px, 290px, 145px);
}

#sect1 .block {
    background-color: #016D29;
    transform:rotate(9.73deg);
}

#sect2 .block, #sect4 .block, #sect6 .block, #sect8 .block, #sect10 .block, #sect12 .block, #sect14 .block, #sect16 .block, #sect18 .block, #sect20 .block, #sect22 .block, #sect24 .block, #sect26 .block, #sect28 .block, #sect30 .block, #sect32 .block, #sect34 .block, #sect36 .block {
    background-color: #E0080B;
    transform: rotate(9.73deg);
}

#sect3 .block, #sect5 .block, #sect7 .block, #sect9 .block, #sect11 .block, #sect13 .block, #sect15 .block, #sect17 .block, #sect19 .block, #sect21 .block, #sect23 .block, #sect25 .block, #sect27 .block, #sect29 .block, #sect31 .block, #sect33 .block, #sect35 .block, #sect37 .block {
    background-color: #000;
    transform: rotate(9.73deg);
}

#sect2 {
    transform: rotate(9.73deg);
}

#sect3 {
    transform: rotate(19.46deg);
}

#sect4 {
    transform: rotate(29.19deg);
}

#sect5 {
    transform: rotate(38.92deg);
}

#sect6 {
    transform: rotate(48.65deg);
}

#sect7 {
    transform: rotate(58.38deg);
}

#sect8 {
    transform: rotate(68.11deg);
}

#sect9 {
    transform: rotate(77.84deg);
}

#sect10 {
    transform: rotate(87.57deg);
}

#sect11 {
    transform: rotate(97.3deg);
}

#sect12 {
    transform: rotate(107.03deg);
}

#sect13 {
    transform: rotate(116.76deg);
}

#sect14 {
    transform: rotate(126.49deg);
}

#sect15 {
    transform: rotate(136.22deg);
}

#sect16 {
    transform: rotate(145.95deg);
}

#sect17 {
    transform: rotate(155.68deg);
}

#sect18 {
    transform: rotate(165.41deg);
}

#sect19 {
    transform: rotate(175.14deg);
}

#sect20 {
    transform: rotate(184.87deg);
}

#sect21 {
    transform: rotate(194.6deg);
}

#sect22 {
    transform: rotate(204.33deg);
}

#sect23 {
    transform: rotate(214.06deg);
}

#sect24 {
    transform: rotate(223.79deg);
}

#sect25 {
    transform: rotate(233.52deg);
}

#sect26 {
    transform: rotate(243.25deg);
}

#sect27 {
    transform: rotate(252.98deg);
}

#sect28 {
    transform: rotate(262.71deg);
}

#sect29 {
    transform: rotate(272.44deg);
}

#sect30 {
    transform: rotate(282.17deg);
}

#sect31 {
    transform: rotate(291.9deg);
}

#sect32 {
    transform: rotate(301.63deg);
}

#sect33 {
    transform: rotate(311.36deg);
}

#sect34 {
    transform: rotate(321.09deg);
}

#sect35 {
    transform: rotate(330.82deg);
}

#sect36 {
    transform: rotate(340.55deg);
}

#sect37 {
    transform: rotate(350.28deg);
}

.double, .single{
    position: absolute;
    z-index: 1;
    color: #fff;
    font-size: 14px;
    transform: rotate(3deg);
}

.double{
    left: 148px;
    margin-top: 4.5px;
}

.single{
    left: 152px;
    margin-top: 4.5px;
}

.outerRim {
    position: absolute;
    left:0;
    top:0;
    width: 290px;
    height: 290px;
    border-radius: 100%;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    border: 10px solid #F3c620;
}

.pocketsRim {
    position: absolute;
    top: 34px;
    left: 34px;
    width: 235px;
    height: 235px;
    border-radius: 100%;
    border: 3px solid #c0c0c0;
}

.ballTrack{
    width: 212px;
    height: 207px;
    position: absolute;
    left: 47.5px;
    top: 50px;
    border-radius: 100%;
    z-index:2;
    animation: ballRotate 1s linear infinite;
}

.ball{
    background-color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    position: relative;
    left: 109px;
    top: -8px;
}

.pockets {
    position: absolute;
    top: 37px;
    left: 37px;
    width: 235px;
    height: 235px;
    background-color: #000;
    border-radius: 100%;
    opacity: .5;
}

.cone {
    position: absolute;
    top: 62px;
    left: 61px;
    height: 180px;
    width: 180px;
    border: 3px solid #9f9a9a;
    border-radius: 100%;
    background: radial-gradient(circle at 100px 100px, #892c10, #000);
}

.turret{
    border-radius: 100%;
    background: radial-gradient( circle at 30% 30%, #f3c620, #1a1608 );
    width: 45px;
    height: 45px;
    position: absolute;
    top: 133px;
    left: 134px;
    z-index: 1;
}

.turretHandle{
    background: radial-gradient( circle at 44%, #f3c620, #6a570f);
    width: 87px;
    height: 14px;
    position: absolute;
    left: 113px;
    top: 148px;
}

.thendOne, .thendTwo{
    border-radius: 100%;
    background: radial-gradient( circle at 30% 30%, #f3c620, #1a1608 );
    width: 25px;
    height: 25px;
    position: absolute;
}

.thendOne{
    top: -6px;
    left: -20px;
}

.thendTwo{
    top: -6px;
    left: 83px;
}

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

buildWheel();

function buildWheel(){
    let wheel = document.createElement('div');
    wheel.setAttribute('class', 'wheel');

    let outerRim = document.createElement('div');
    outerRim.setAttribute('class', 'outerRim');
    wheel.append(outerRim);

    let numbers = [0, 32, 15, 19, 4, 21, 2, 25, 17, 34, 6, 27, 13, 36, 11, 30, 8, 23, 10, 5, 24, 16, 33, 1, 20, 14, 31, 9, 22, 18, 29, 7, 28, 12, 35, 3, 26];

    for(i = 0; i < numbers.length; i++){
        let a = i + 1;
        let spanClass = (numbers[i] < 10)? 'single' : 'double';
        let sect = document.createElement('div');
        sect.setAttribute('id', 'sect'+a);
        sect.setAttribute('class', 'sect');
        let span = document.createElement('span');
        span.setAttribute('class', spanClass);
        span.innerText = numbers[i];
        sect.append(span);
        let block = document.createElement('div');
        block.setAttribute('class', 'block');
        sect.append(block);
        wheel.append(sect);
    }

    let pocketsRim = document.createElement('div');
    pocketsRim.setAttribute('class', 'pocketsRim');
    wheel.append(pocketsRim);

    let ballTrack = document.createElement('div');
    ballTrack.setAttribute('class', 'ballTrack');
    let ball = document.createElement('div');
    ball.setAttribute('class', 'ball');
    ballTrack.append(ball);
    wheel.append(ballTrack);

    let pockets = document.createElement('div');
    pockets.setAttribute('class', 'pockets');
    wheel.append(pockets);

    let cone = document.createElement('div');
    cone.setAttribute('class', 'cone');
    wheel.append(cone);

    let turret = document.createElement('div');
    turret.setAttribute('class', 'turret');
    wheel.append(turret);

    let turretHandle = document.createElement('div');
    turretHandle.setAttribute('class', 'turretHandle');
    let thendOne = document.createElement('div');
    thendOne.setAttribute('class', 'thendOne');
    turretHandle.append(thendOne);
    let thendTwo = document.createElement('div');
    thendTwo.setAttribute('class', 'thendTwo');
    turretHandle.append(thendTwo);
    wheel.append(turretHandle);

    container.append(wheel);
}

In part 3, I'll be building on the placeBet function and getting the wheel spinning with the ball landing on a random number.

One way to make Roulette using Javascript - Part 1

ozboware — Thu, 09 Dec 2021 11:05:47 +0000

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);

Which basically translates to

<div id="container"></div>

Then I created a function named buildBettingBoard

function buildBettingBoard(){

}

In that function I created the betting board wrapper

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

followed by the winning lines wrapper

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

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);
}

Broken down. First there are the top winning points wrapper

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

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');

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);
};

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;

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);
}

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);
}

Then I appended the winning lines block to the betting board

bettingBoard.append(wl);

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);

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');

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);

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);

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'];

I then iterated through the array

for(i = 0; i < numberBlocks.length; i++){}

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';

I then proceeded to create the number block elements

var numberBlock = document.createElement('div');
numberBlock.setAttribute('class', nbClass);

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);
    }
};

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);

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);

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);

and added it to the container

container.append(bettingBoard);

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();

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);
}

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;
}

I set the container display to flex and centred its content

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

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;
}

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);
}

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;
}

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