<div data-controller="redspotter">
<p>
Score: <span data-target="redspotter.score">0</span>
</p>
<div data-target="redspotter.square" class='square winner'></div>
<div data-target="redspotter.square" class='square'></div>
<div data-target="redspotter.square" class='square'></div>
<div data-target="redspotter.square" class='square'></div>
<div data-target="redspotter.square" class='square'></div>
<div data-target="redspotter.square" class='square'></div>
</div>
.square {
display: inline-block;
width: 100px;
height: 100px;
background: grey;
}
.winner {
background: red;
}
const application = Stimulus.Application.start()
application.register("redspotter", class extends Stimulus.Controller {
static get targets() {
return [ "winner", 'square', "score" ]
}
connect() {
this.shuffle();
$(this.element).on('click', '.square', this.play.bind(this));
}
play(ev) {
const score = Number(this.scoreTarget.textContent);
if (ev.target.classList.contains('winner')) {
this.scoreTarget.textContent = score + 2;
} else {
this.scoreTarget.textContent = score - 2;
}
this.shuffle();
}
shuffle() {
const winner = Math.floor(Math.random() * this.squareTargets.length);
$('.square').removeClass('winner');
$('.square').eq(winner).addClass('winner');
}
})
External CSS
This Pen doesn't use any external CSS resources.