class Counter{ constructor(wrapper){ this.wrapper = wrapper; this.text = this.wrapper.querySelector('.counter-number'); this.btnPlus = this.wrapper.querySelector('.btn-plus'); this.btnMinus = this.wrapper.querySelector('.btn-minus'); this.count = 0; this.maxCount = 99; this.btnPlus.addEventListener('click', this.plus); this.btnMinus.addEventListener('click', this.minus); } plus = () => { this.updateText(); if (this.count !== 99){ this.count++ } this.updateText(); } minus = () => { this.updateText(); if (this.count > 0){ this.count-- } this.updateText(); } updateText(){ this.text.innerText = `${this.count}` } } class colorChanger{ constructor(wrapper){ this.wrapper = wrapper this.btnChanger = this.wrapper.querySelector('.heart') this.colors = ['blue', 'red', 'violet', 'green'] this.count = Math.floor(Math.random()*this.colors.length) this.wrapper.classList.add(this.colors[this.count]) this.btnChanger.addEventListener('click', this.nextColor) } nextColor = () => { this.wrapper.classList.remove(this.colors[this.count]) if (this.count == this.colors.length - 1 ){ this.count = 0 }else{ this.count++ } this.changeFrameColor() } changeFrameColor(){ this.wrapper.classList.add(this.colors[this.count]) } } document.querySelectorAll('.frame').forEach(el => { new colorChanger(el) }) function getRandomPopup(){ let btnsEvent = document.querySelectorAll('.btn-event'), popup = document.querySelector('.popup'), images = popup.querySelectorAll('img'), allText = document.querySelectorAll('.frame-text'), data = [ "-1 ко всем броскам кубика", "+1 ко всем броскам кубика", "Все ЮНИТЫ получают +1 к передвижению", "В начале хода потратьте 1 золота для открытия каждой КАРТЫ", 'Каждая ПЛОЩАДКА получает "Закрыться - получить 1 золото"', 'Ваши ПЛОЩАДКА/БАЗА получают: "Движение дальность 1 за 1 золота"', 'Ничего не происходит', 'БАЗА может вывести на поле боя две КАРТЫ вместо одной', 'Розыгрыш БОМБ требует доплаты +3 золота', 'При уничтожении КАРТЫ вы получаете в КАЗНУ золото равное стоимости уничтоженной КАРТЫ', 'БАЗА получает свойство: "Перетасуйте КОЛОДУ и вытяните КАРТУ. Если это СОБЫТИЕ - можете его бесплатно разыграть"', 'Вывод КАРТ на поле боя возможен на любых клетках возле, ваших ПЛОЩАДОК', 'В начале хода возьмите две КАРТЫ из КОЛОДЫ вместо одной' ]; function changePopupAndText(image, text){ // popup popup.style.display = "block"; image.classList.add('active-event'); // text allText.forEach(el => { el.innerText = `${text}` }) } btnsEvent.forEach(el => { el.addEventListener('click', () => { let randomNumber = Math.floor(Math.random()*images.length); changePopupAndText(images[randomNumber], data[randomNumber]) }) }) popup.addEventListener('click', () => { popup.style.display = "none"; popup.querySelector('.active-event').classList.remove('active-event') }) } function randomCoube(){ let btnCoube = document.querySelector('.coube'), images = [ './images/coube/1.png', './images/coube/2.png', './images/coube/3.png', './images/coube/4.png', './images/coube/5.png', './images/coube/6.png', ]; btnCoube.addEventListener('click', () => { if(btnCoube.style.animation){ btnCoube.style.animation = ""; setTimeout(() => { btnCoube.style.animation = "rotation 1s linear"; btnCoube.src = images[Math.floor(Math.random()*images.length)] }, 200) }else{ btnCoube.style.animation = "rotation 1s linear"; setTimeout(() => { btnCoube.src = images[Math.floor(Math.random()*images.length)] }, 200) } }) } document.querySelectorAll('.counter').forEach(el => { new Counter(el) }) getRandomPopup() randomCoube()