JSFiddle - React, Tailwind, and code Playground

by fairmutex

HTML

<button class='neutral' id='btn'>Click</button>

JavaScript

var leftClickHandler = function () {
    var btnClasses = this.classList;
    if (btnClasses.contains('neutral') || btnClasses.contains('question')) {
        if (true) {
            this.setAttribute('class', 'bomb');
            this.innerHTML = 'B';
            console.log('Bomb');
        } else {
            this.setAttribute('class', 'cleared');
            console.log('Cleared');
            this.innerHTML = 'C';
        }
        this.removeEventListener('click', leftClickHandler);
        this.removeEventListener('contextmenu', rightClickHandler);
        this.addEventListener('contextmenu', rightClickPreventDefault);
    }
};


var rightClickHandler = function (event) {
    event.preventDefault();
    var btnClasses = this.classList;
    if(btnClasses.contains('neutral')) {
        this.setAttribute('class', 'flagged');
        alert('Flagged');
        this.innerHTML = 'F';
        this.removeEventListener('click', leftClickHandler);
    }
    else if(btnClasses.contains('flagged')) {
        this.setAttribute('class', 'question');
        alert('question');
        this.innerHTML = '?';
        this.addEventListener('click', leftClickHandler);
    }else if(btnClasses.contains('question')) {
    
        this.setAttribute('class', 'neutral');
        console.log('neutral');
        this.innerHTML = 'N';
    }else{
       
            alert('something wong');
    }
    return false;
};


// This just disables context menu
var rightClickPreventDefault = function (event) {
    event.preventDefault();
};
document.getElementById('btn').addEventListener('click', leftClickHandler);
document.getElementById('btn').addEventListener('contextmenu', rightClickHandler, false);