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