JSFiddle - React, Tailwind, and code Playground

by ronilan

HTML

<a href="#" id="button1" class="button handleButton" data-cell="1">[]</a>
<a href="#" id="button2" class="button handleButton" data-cell="2">[]</a>
<a href="#" id="button3" class="button handleButton" data-cell="3">[]</a>
<hr>
<a href="#" id="button4" class="button handleButton" data-cell="4">[]</a>
<a href="#" id="button5" class="button handleButton" data-cell="5">[]</a>
<a href="#" id="button6" class="button handleButton" data-cell="6">[]</a>
<hr>
<a href="#" id="button7" class="button handleButton" data-cell="7">[]</a>
<a href="#" id="button8" class="button handleButton" data-cell="8">[]</a>
<a href="#" id="button9" class="button handleButton" data-cell="9">[]</a>

JavaScript

// input is a number 
// output is the board



var app = {

    // array of 9
    // 0  = empty
    // 1 = user
    // -1 = ai
    
    board: [0,0,0,0,0,0,0,0,0],
    
    vector: {
        hTop: 0,
        hMid: 0,
        hBot: 0,
        vLeft: 0,
        vMid: 0,
        vRight: 0,
        dLeft: 0,
        dRight: 0        
    },
    
    attack: {},
    
    init: function() {
        app.bindEvents();
    },
    
    // user interface input
    userTurn: function(buttonNumber){
        
       $("#button"+buttonNumber).html("x");
       $("#button"+buttonNumber).off("click", function() {
       
       });       
       
        if (app.board[buttonNumber-1] === 0 ) {
             app.board[buttonNumber-1] = 1;
             // ai play automatically
             app.aiTurn();
            
            //checkEndGame
        }
      
       

        
    },

    aiTurn: function() {
        //
       var buttonNumber = Math.floor((Math.random() * 9) + 1);   
       
       // check endGame
    },
    
    computeVectors: function(buttonNumber, whoPlayed){
  
        switch(buttonNumber) {
        case 1:
            vector.hTop++;
            vector.vLeft++; 
            vector.dLeft++;
            break;
        case 2:
            vector.hTop++;
            vector.vMid++; 
            break;
        case 3:
            vector.hTop++;
            vector.vRight++; 
            vector.dRight++;
            break;            
        case 4:
            vector.hMid++;
            vector.vLeft++; 
            vector.dLeft++;
            break;
        case 5:
            vector.hMid++;
            vector.vMid++; 
            break;
        case 5:
            vector.hMid++;
            vector.vRight++; 
            vector.dRight++;
            break; 
         case 7:
            vector.hBot++;
            vector.vLeft++; 
            vector.dLeft++;
            break;
        case 8:
            vector.hBot++;
            vector.vMid++; 
            break;
...