Napisałem prostą grę "Papier, Kamień, Nożyce", w której gracz gra przeciwko komputerowi. Wszystko działa tak jak bym tego chciał z jednym wyjątkiem, mianowicie w HTMLu umieściłem spana, który zawiera informację o remisie, gdy dojdzie do remisu dodawana jest do niego klasa z animacją, a następnie zabierana po kolejnym wywołaniu metody Game.startGame(). Problem, polega na tym, że wszystko działa w porządku, klasa jest usuwana i dodawana po każdym wywołaniu metody, do momentu aż nie mamy kilku remisów pod rząd, wtedy klasa zostaje i jest odejmowana dopiero wtedy gdy gracz i komputer wybiorą różne opcje.
Kod do całości: https://codepen.io/CvtS/pen/oNXqJoZ
Tutaj umieszczam klasę z problemem.
class Game {
constructor() {
this.optionsImg = document.querySelectorAll('.img');
this.optionsBtns = document.querySelectorAll('button');
this.optionsBtns.forEach(option => option.addEventListener('click', this.startGame.bind(this)))
this.youWins = document.querySelector('.results > .you-win');
this.draw = document.querySelector('.results > .draw');
this.PcWins = document.querySelector('.results > .pc-win');
this.stats = new Stats(0, 0, 0);
this.render.call(this, this.stats.getStats());
}
startGame(e) {
this.optionsImg.forEach(choice => choice.className = 'img');
//Tutaj
if (this.draw.classList.contains('draw-animation')) {
this.draw.classList.toggle('draw-animation');
}
this.choice = new Choice(e.target.dataset.option);
const yourChoice = this.choice.getYourChoice(),
PcChoice = this.choice.getPcChoice();
if (yourChoice === PcChoice) {
[...this.optionsImg].find(choice => choice.dataset.option === PcChoice && choice.dataset.option === PcChoice).classList.add('draw-color');
//Tutaj
this.draw.classList.toggle('draw-animation');
} else {
[...this.optionsImg].find(choice => choice.dataset.option === yourChoice).classList.add('player-choice');
[...this.optionsImg].find(choice => choice.dataset.option === PcChoice).classList.add('pc-choice');
}
this.stats.refreshStats(Result.whoWin(yourChoice, PcChoice));
this.render.call(this, this.stats.getStats());
}
render(stats) {
this.youWins.textContent = `You: ${stats.wins}`;
this.PcWins.textContent = `PC: ${stats.loses}`;
}
}