Можно ли как-то сократить код с изменением состояния списка классов

Question

Можно ли как-то сократить код с изменением состояния classlist. Код выглядит очень запутанным и непонятным. Каждый раз, когда нам нужно добавить или удалить класс, когда мы нажимаем кнопку Play или когда мы запускаем setInterval - когда он истекает или когда мы останавливаем его сами. Можно как-то улучшить? Ссылка на jsfiddle: https://jsfiddle.net/ameli7777/po7qdwk8/57/

const spinBlock = document.querySelector('.spin-block');
const spin = document.querySelector('.spin');
const spinStop = document.querySelector('.spin-stop');
const disableBtn = document.querySelectorAll('.dis');
const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const stopActive = document.querySelector('.stop-active');
const autoSpinBlock = document.querySelector('.auto-spin-block');

  amountOfRotation.addEventListener('click', ({ target: { dataset } }) => {
    countdown.classList.remove('stop-game');
    autoButton.classList.add('stop-game');
    countdownNumbValue.innerHTML = dataset.count;
    spin.classList.add('stop-game');
    spinStop.classList.remove('stop-game');
    disableBtn.forEach(item => item.classList.add('disable-btn-clone'));
    spinBlock.classList.add('disable-btn-spin');
    let timerId = setInterval(() => {
      countdownNumbValue.innerHTML--;
        spinBlock.classList.toggle('spin-block-dis');
        stopActive.classList.toggle('stop-btn-inactive');
        autoSpinBlock.classList.add('disable-hover');
        if(countdownNumbValue.innerHTML <= 0) {
            clearInterval(timerId);
            countdown.classList.add('stop-game');
            autoButton.classList.remove('stop-game');
            spinBlock.classList.remove('spin-block-dis');
            autoSpinBlock.classList.remove('disable-hover');
            stopActive.classList.remove('stop-btn-inactive');
            spin.classList.remove('stop-game');
            spinStop.classList.add('stop-game');
            spinBlock.classList.remove('disable-btn-spin');
            disableBtn.forEach(item => item.classList.remove('disable-btn-clone'));
        };
    }, 1500);
    
    countdown.addEventListener('click', () => {
        countdown.classList.add('stop-game');
        autoButton.classList.remove('stop-game');
        spin.classList.remove('stop-game');
        spinStop.classList.add('stop-game');
        spinBlock.classList.remove('disable-btn-spin');
        spinBlock.classList.remove('spin-block-dis');
        clearInterval(timerId);
        autoSpinBlock.classList.remove('disable-hover');
        stopActive.classList.remove('stop-btn-inactive');
        disableBtn.forEach(item => item.classList.remove('disable-btn-clone'));
    }) 
  });

spinBlock.addEventListener('click', () => {
    spin.classList.toggle('stop-game');
    spinStop.classList.toggle('stop-game');
    disableBtn.forEach(item => item.classList.toggle('disable-btn-clone'));
    autoSpinBlock.classList.toggle('disable-hover');
});

.wrapper {
display: flex;
margin-top: 20%;
}
.button-plus, .button-minus {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.button-minus-block {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88%;
    margin-left: 2%;
}
.button-plus-block {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88%;
    margin-right: 2%;
}
.bet-block {
    width: 15.5%;
    display: flex;
    align-items: center;
    height: 41px;
    margin-left: 0.5%;
    margin-top: 2.5%;
}

.total-count, .coin-count {
    color: #ffd100;
    margin: 0;
    font-size: 12px;
}

.auto-button {
    width: 24%;
    display: flex;
    margin-left: 20%;
    margin-top: 1%;
}
.auto-block {
    width: 90%;
    height: 41px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 100;
}

.spin-block {
    background: yellow;
    display: flex;
    align-items: center;
    z-index: 100;
    width: 112px;
    height: 112px;
    justify-content: center;
    cursor: pointer;
}
.spin-block-dis {
    background: red;
}
.spin {
    width: 70%;
    height: 62px;
}
.spin-stop {
    width: 48%;
}
.feature-block { 
    position: absolute;
    margin-left: 6px;
    /* bottom: 70%; */
    width: 8%;
    height: 122px;
    z-index: -1;
    max-height: 0px;
    overflow: hidden;
    /* transition: max-height 0.4s linear; */
    margin-top: -120px;
}
.feature-block ul {
    list-style-type: none;
    color: #ffd100;
    font-size: 14px;
    padding: 10%;
    margin-top: -10%;
}
.feature-block p {
    color: #ffd100;
    font-size: 10px;
    padding: 10%;
    margin: 0;
    padding-bottom: 0;
}
.feature-block ul li:hover {
    color: white;
    cursor: pointer;
}
.auto-spin-block {
    width: 18%;
    height: 41px;
    margin-top: 2.5%;
    margin-left: 0.5%;
    z-index: 10;
}
.auto-spin-block:hover .feature-block {
    max-height: 160px;
    height: 122px;
}
.disable-btn-clone {
    pointer-events: none;
    opacity: 0.4;
}
.disable-btn-spin {
    pointer-events: none;
}
.countdown-txt {
    color: #3d0000;
}
.countdown {
    width: 55%;
    display: flex;
    align-items: center;
    margin-left: 9%;
}
.countdown-numb {
    width: 29px;
    color: #ffd100;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5%;
}
.stop-game {
    display: none;
}
.stop-btn-inactive {
    opacity: 0.3;
}
.disable-hover:hover .feature-block {
    max-height: 0px;
    height: 122px;
}

    <div class="wrapper">
           <div class="bet-block">
                <div class="button-minus-block">
                    <div class="button-minus dis" id="button-minus">
                        <button>
                        -
                        </button>
                    </div>
                </div>
                <div class="total-bet-block">
                    <p class="total-bet-title">TOTAL</p>
                    <p class="total-count">$1.50</p>
                </div>
                <div class="button-plus-block">
                    <div class="button-plus dis" id="button-plus">
                       <button>
                       +
                       </button>
                    </div>
                </div>
            </div>
            <div class="auto-spin-block">
                <div class="auto-block">
                    <div class="auto-button dis">
                        <p>
                        hover on
                        </p>
                    </div>
                    <div class="countdown stop-game">
                        <div class="countdown-numb">
                            <span class="countdown-numb-value"></span>
                        </div>
                        <span class="countdown-txt">STOP</span>
                    </div>
                </div>
                <div class="feature-block">
                    <div class="feature-block-paragraph">
                        <ul class="feature-block-list">
                            <li class="sound-div" data-count="25">25</li>
                            <li class="sound-div" data-count="20">20</li>
                            <li class="sound-div" data-count="15">15</li>
                            <li class="sound-div" data-count="10">10</li>
                            <li class="sound-div" data-count="5">5</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="spin-block">
                <div class="spin">
                    <p>
                    Play
                    </p>
                </div>
                <div class="spin-stop stop-game">
                    <p class="stop-active">
                    Stop
                    </p>
                </div>
            </div>
           </div>

Answer 1

Одним из простых решений является рассмотрение тега body как тега элемента управления, поэтому вы должны переключить класс SINGLE на BODY, например:

document.body.classList.toggle("game-stopped");

Затем на каждом элементе, который вы СКРЫВАЕТЕ с помощью stop-game class, дайте им всем один и тот же класс, например (где game-element - новый класс)

<div class="auto-button game-element dis">
<p>hover on</p>
</div>

Затем создайте следующий CSS:

.game-stopped .game-element{display:none;}

What you выполняются, - когда вы даете body класс остановленной игры, КАЖДЫЙ элемент, который у вас есть класс 'game-element', будет скрыт.