Запуск рулетки через JS

Есть горизонтальная рулетка. При открытии сайта и запуске рулетки, в консоль выводится 15 раз о прокруте. Я выставил 15 объектов в рулетке в generateItems(), и не знаю как сделать запуск рулетки 1 раз, но сохранить 15 объектов в рулетке

<div class="app">
    <i class="pointer fa-solid fa-location-pin" style="font-size: 40px; color: rgb(163, 41, 41);"></i>
    <div class="scope">
        <ul class="list"></ul>
    </div>

    <button onclick="start()" class="start">Крутить</button>
</div>
function getRandomItem() {
    let item;

    while(!item) {
        item = items[Math.floor(Math.random() * items.length)];

        if (item.price > balance * 0.20)  {
            return getRandomItem();
            } else {
            countFlip++;
            
            balance -= item.price;
            if (balance < 0) {
                console.log('Game over!');
                return;
            }
            if (countFlip % 10 === 0) {
                balance += 2000;
            }
            console.log(`You got ${item.name} for ${item.price}. Your balance is now ${balance}. ${countFlip}`);
            }
        return item;
    }
}

let isSpinning = false;

function generateItems() {
    if (isSpinning) {
        return;
    }
    isSpinning = true;

    document.querySelector('.list').innerHTML = '';
    document.querySelector('.scope').innerHTML = `<ul class="list"></ul>`;

    const list = document.querySelector('.list')
    list.innerHTML = ''

    for (let i = 0; i < 15; i++){
        item = getRandomItem()

        const li = document.createElement('li')
        li.classList.add('list_item')
        li.innerHTML = `
            <img src ="${item.img}" alt="" />
        `
        list.append(li)
    }
}

generateItems()

function start() {
    generateItems()
    const list = document.querySelector('.list')

    requestAnimationFrame(() => {
        list.style.left = '50%'
        list.style.transform = 'translate3d(-50%, 0, 0)'
    },0)

    const item = list.querySelectorAll('li')[7]

    list.addEventListener('transitionend', () =>{
        item.classList.add('active')
        isSpinning = false;
        
    })
}

Ответы (0 шт):