//Crea un array para el tablero
tablero=[];
//Variables para llevar la cuenta de la cantidad de fichas
let fichasBlancas = 12;
let fichasNegras = 12;

//Para saber que casilla se presionó anteriormente
let anteriorX;
let anteriorY;

//Matriz que contiene información de los jugadores
let jugador=[["b",""], ["n",""]];
turno=0;

//variable para controlar si se puede hacer una captura multiple
let segundaCaptura=false;

/**
 * "vacio" representa un espacio vacío
 * "b" representa una ficha blanca
 * "rb" representa una reina blanca
 * "n" representa una ficha negra
 * "rn" representa una reina negra
 */

 /**
  * Todos los botones tienen tres clases, que al final son 
  * un array
  * [0] = "casilla" siempre tendrá esta clase
  * [1] = casillaBlanca || casilla Negra
  * [2] = n || b || rn || rb -> indica que ficha contiene
  * [3] = deshabilitado || habilitado -> indica si esta o no habilitado
  * para mover en ese lugar una ficha
  */

 //Esta función se va a encargar de crear la tabla del juego
//con botones, también de setear la matriz "tablero"
crearTablero();
function crearTablero(){
    
    //obtiene la tabla del html
    tabla = document.getElementById('tablaTablero');
   
    //bandera para setear la clase del color a la casilla
    blanca=true;
    for(i=0; i<8; i++){        
        
        //Crea una fila
        fila = document.createElement('tr');
        
        //Agrega un elemento al tablero
        tablero.push([]);
        
        //Ciclo para crear el tablero en si
        for(j=0;j<8; j++){
            //Crea un objeto td
            dato = document.createElement('td');
            
            //Crea un botón
            boton = document.createElement('button');
            
            //Identifica al botón
            boton.id = ""+i+j;
            
            //Setea la clase de los botones a "casilla"
            boton.className='casilla';

            //Asigna una función a los botones, la función tiene
            //como parámetros las coordenadas del botón
            boton.setAttribute("onclick","jugar("+i+","+j+")");

            //Para alternar los colores
            if(blanca){
                //asigna la clase para dar estilo
                boton.classList.add("casillaBlanca");

                //Deshabilita las casillas blancas
                boton.disabled="disabled";
                blanca = false;
                
                //ninguna casilla blanca lleva ficha
                tablero[i].push("vacio");
                boton.classList.add("vacio");
            }
            else{
                //asigna la clase para dar estilo
                boton.classList.add("casillaNegra");
                blanca=true;
                
                //Si la casilla es negra, debe tener una ficha
                //por lo tanto, de la primera a la tercera fila
                //debe contener fichas blancas
                //y de la 6° a la 8° fila debe contener fichas
                //negras
                if(i<=2){
                    tablero[i].push("b");
                    boton.classList.add("b");
                }
                else if(i>=5){
                    tablero[i].push("n");
                    boton.classList.add("n");
                }
                else{ //si no cumple ninguna, es vacio

                    //Deshabilita las casillas desocupadas
                    boton.disabled="disabled";
                    tablero[i].push("vacio");
                    boton.classList.add("vacio");
                }
            }

            boton.classList.add("deshabilitado");
            
            //agrega el botón al td
            dato.appendChild(boton);
            
            //agrega el td a la fila
            fila.appendChild(dato);
        }
        
        //para que en la siguiente fila comience del mismo color
        //con la que terminó la fila anterior
        blanca = !blanca;
       
        //agrega la fila a la tabla
        tabla.appendChild(fila);
    }

    
}

//Función que recibe la orden del botón
//recibe como parámetro las coordenadas del botón
function jugar(x, y){
    
    //Ficha contendrá n o b    
    //Casilla puede contener, además, rn o rb
    casilla=tablero[x][y];
    let ficha;

    //para hacer el casteo de "rn" a "n"
    //y de "rb" a "b"
    if(casilla=="rn" || casilla=="n"){
        ficha="n";
    }
    else if(casilla=="rb" || casilla=="b"){
        ficha="b";
    }
    if(ficha!=jugador[turno][0] && casilla!="vacio"){
        //Cuando la ficha seleccionada no corresponde al jugador
        //en turno
        refrescarTablero();
        document.getElementById("mensajeTurno").innerHTML="No es tu turno!";
        return;
    }    
    else if(casilla=="vacio"){
        //Si se recibió la orden y la casilla presionada está vacía,
        //quiere decir que fue habilitada porque hay una ficha que
        //puede ser movida a ese lugar. Esa ficha es la del turno en
        //proceso

        

        //Verifica si se produjo una captura de ficha, de ser así
        //elimina la ficha capturada
        comprobarCaptura(x, y);

        //Llena la casilla seleccionada con la ficha del jugador cuyo turno
        //está en curso
        tablero[x][y]=tablero[anteriorX][anteriorY];

        //La casilla que habilitó las casillas, se queda en vacío
        tablero[anteriorX][anteriorY]="vacio";

        //Comprueba si alguna dama llegó al otro lado. De ser así, esta
        //función la convierte en reina
        comprobarReina(x, y);

        //Resetea el tablero en el juego
        refrescarTablero();

        //Comprueba si existe un ganador, de ser así, termina todo el juego
        comprobarGanador();

        

        //Se intercambia el turno si no hubo una segunda captura
        //Si hay posibilidad de hacer una segunda captura, entonces
        //Puede volver a jugar
        //console.log("cambio de turno");
        if(segundaCaptura){
            cambiarTurno();
            segundaCaptura=false;
        }
        cambiarTurno();
    }
    else{
        //Cuando la ficha seleccionada corresponde al jugador en
        //turno

        //Elimina el mensaje de que no es el turno de participante
        //Y muestra el turno de el que corresponde
        if(turno==0)
            mensajeTurno.innerHTML="Turno blancas!";
        else if(turno==1)
            mensajeTurno.innerHTML="Turno negras!";

        anteriorX=x;
        anteriorY=y;

        //Refresca el tablero, deshabilitando todas las casillas vacías
        //Esto es por si se presionó otra ficha nueva, para que no se queden
        //habilitadas las que ya se habian habilitado anteriormente
        refrescarTablero();
        
        /**
         * Cada grupo tiene opciones de habilitación diferente, pues si
         * se presiona una ficha negra, se debe habilitar hacia arriba
         * si se presiona ficha blanca, se debe habilitar hacia abajo
         * si se presiona una reina, se debe habilitar todas las direcciones 
         */
        if(casilla=="b"){
            habilitarOpcionesBlancas(x,y);
        }
        else if(casilla=="n"){
            habilitarOpcionesNegras(x,y);
        }
        else if(casilla=="rn"){
            habilitarOpcionesReinaNegra(x,y);
        }
        else if(casilla=='rb'){
            habilitarOpcionesReinaBlanca(x,y);
        }
        
    }

    
    


//Función que habilita las casillas disponibles para mover una ficha
function habilitarOpcionesBlancas(x, y){
    
    //Va buscando casilla hacia abajo y a la izquierda
    auxX=x+1;
    auxY=y-1;
    while(auxX<8 && auxY>=0 && auxX<=x+2 && auxY>=y-2){
        if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX++;
        auxY--;        
    }

    //Va buscando casilla hacia abajo y a la derecha
    auxX=x+1;
    auxY=y+1;
    while(auxX<8 && auxY<8 && auxX<=x+2 && auxY<=y+2){
        if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX++;
        auxY++;
    }
}

function habilitarOpcionesNegras(x,y){

    //Va buscando casilla hacia arriba y a la izquierda
    auxX=x-1;
    auxY=y-1;
    while(auxX>=0 && auxY>=0 && auxX>=x-2 && auxY>=y-2){
        if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX--;
        auxY--;        
    }

    //Va buscando casilla hacia arriba y a la derecha
    auxX=x-1;
    auxY=y+1;
    while(auxX>=0 && auxY<8 && auxX>=x-2 && auxY<=y+2){
        if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX--;
        auxY++;
    }
}

function habilitarOpcionesReinaBlanca(x, y){
    //Va buscando casilla hacia abajo y a la izquierda
    auxX=x+1;
    auxY=y-1;
    while(auxX<8 && auxY>=0 && auxX<=x+2 && auxY>=y-2){
        if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX++;
        auxY--;        
    }

    //Va buscando casilla hacia abajo y a la derecha
    auxX=x+1;
    auxY=y+1;
    while(auxX<8 && auxY<8 && auxX<=x+2 && auxY<=y+2){
        if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX++;
        auxY++;
    }

    //Va buscando casilla hacia arriba y a la izquierda
    auxX=x-1;
    auxY=y-1;
    while(auxX>=0 && auxY>=0 && auxX>=x-2 && auxY>=y-2){
        if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX--;
        auxY--;        
    }

    //Va buscando casilla hacia arriba y a la derecha
    auxX=x-1;
    auxY=y+1;
    while(auxX>=0 && auxY<8 && auxX>=x-2 && auxY<=y+2){
        if(tablero[auxX][auxY]=="b" || tablero[auxX][auxY]=="rb"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX--;
        auxY++;
    }
}

function habilitarOpcionesReinaNegra(x, y){
    //Va buscando casilla hacia abajo y a la izquierda
    auxX=x+1;
    auxY=y-1;
    while(auxX<8 && auxY>=0 && auxX<=x+2 && auxY>=y-2){
        if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX++;
        auxY--;        
    }

    //Va buscando casilla hacia abajo y a la derecha
    auxX=x+1;
    auxY=y+1;
    while(auxX<8 && auxY<8 && auxX<=x+2 && auxY<=y+2){
        if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX++;
        auxY++;
    }

    //Va buscando casilla hacia arriba y a la izquierda
    auxX=x-1;
    auxY=y-1;
    while(auxX>=0 && auxY>=0 && auxX>=x-2 && auxY>=y-2){
        if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX--;
        auxY--;        
    }

    //Va buscando casilla hacia arriba y a la derecha
    auxX=x-1;
    auxY=y+1;
    while(auxX>=0 && auxY<8 && auxX>=x-2 && auxY<=y+2){
        if(tablero[auxX][auxY]=="n" || tablero[auxX][auxY]=="rn"){
            break;
        }
        if(tablero[auxX][auxY]=="vacio"){
            boton=document.getElementById(""+auxX+auxY);
            boton.removeAttribute("disabled");            
            boton.classList.remove("deshabilitado");
            boton.classList.add("habilitado");
            break;
        }
        auxX--;
        auxY++;
    }
}

//Esta función comprueba si hay un ganador
//En el caso que si lo haya, tiene que deshabilitar todo el tablero,
//mostrar un mensaje el ganador, mostrar el botón de volver a jugar.
function comprobarGanador(){
    if(fichasBlancas==0){
        for(i=0;i<8;i++){
            for(j=0;j<8;j++){
                document.getElementById(""+i+j).disabled="disabled";
            }
        }
        console.log("ganaron las negras!");
    }
    else if(fichasNegras==0){
        for(i=0;i<8;i++){
            for(j=0;j<8;j++){
                document.getElementById(""+i+j).disabled="disabled";
            }
        }
        console.log("ganaron las blancas!");
    }

}

/**
 * Esta función comprueba si alguna dama se convirtió en Reina
 * En el caso de la ficha blanca, comprueba si llegó hasta abajo
 * En el caso de la ficha negra, comprueba si llegó hasta arriba
 * De ser así, convierte la "b" o la "n" a "rb" o "rn" respectivamente
 */
function comprobarReina(x, y){
    if(tablero[x][y]=="b" && x==7){
        tablero[x][y]='rb';
    }
    else if(tablero[x][y]=="n" && x==0){
        tablero[x][y]="rn";
    }
}

//Verifica si se produjo una captura de ficha, de ser así
//elimina la ficha capturada
function comprobarCaptura(x, y){
    
    if(x==anteriorX+2 && y==anteriorY-2){
        if(tablero[anteriorX+1][anteriorY-1]=="b" || tablero[anteriorX+1][anteriorY-1]=="rb"){
            fichasBlancas--;
        }
        else if(tablero[anteriorX+1][anteriorY-1]=="n" || tablero[anteriorX+1][anteriorY-1]=="rn"){
            fichasNegras--;
        }        
        tablero[anteriorX+1][anteriorY-1]="vacio";
        comprobarSegundaCaptura(x, y);
        
    }
    else if(x==anteriorX+2 && y==anteriorY+2){
        if(tablero[anteriorX+1][anteriorY+1]=="b" || tablero[anteriorX+1][anteriorY+1]=="rb"){
            fichasBlancas--;
        }
        else if(tablero[anteriorX+1][anteriorY+1]=="n" || tablero[anteriorX+1][anteriorY+1]=="rn"){
            fichasNegras--;
        }        
        tablero[anteriorX+1][anteriorY+1]="vacio";
        comprobarSegundaCaptura(x, y);
        
    }
    else if(x==anteriorX-2 && y==anteriorY-2){
        if(tablero[anteriorX-1][anteriorY-1]=="b" || tablero[anteriorX-1][anteriorY-1]=="rb"){
            fichasBlancas--;
        }
        else if(tablero[anteriorX-1][anteriorY-1]=="n" || tablero[anteriorX-1][anteriorY-1]=="rn"){
            fichasNegras--;
        }        
        tablero[anteriorX-1][anteriorY-1]="vacio";
        comprobarSegundaCaptura(x, y);
        
    }
    else if(x==anteriorX-2 && y==anteriorY+2){
        if(tablero[anteriorX-1][anteriorY+1]=="b" || tablero[anteriorX-1][anteriorY+1]=="rb"){
            fichasBlancas--;
        }
        else if(tablero[anteriorX-1][anteriorY+1]=="n" || tablero[anteriorX-1][anteriorY+1]=="rn"){
            fichasNegras--;
        }        
        tablero[anteriorX-1][anteriorY+1]="vacio";
        comprobarSegundaCaptura(x, y);
        
    }


}

//intercambia los turnos
function cambiarTurno(){
    if(turno==0){
        turno=1;
    }
    else{
        turno=0;
    }

    mensajeTurno=document.getElementById("mensajeTurno");

    if(turno==0)
        mensajeTurno.innerHTML="Turno blancas!";
    else if(turno==1)
        mensajeTurno.innerHTML="Turno negras!";
}

//Mira la matriz tablero y setea las imagenes correspondientes
//en la parte gráfica
//TODO También tiene que deshabilitar todas las casillas vacías!!
function refrescarTablero(){
    for(i=0; i<8; i++){
        for(j=0; j<8; j++){
            auxBoton=document.getElementById(""+i+j);
            auxBoton.classList[1]=tablero[i][j];
            if(tablero[i][j]=="vacio"){
                auxBoton.disabled="disabled";
                auxBoton.classList.toggle('habilitado',false);
                auxBoton.classList.toggle('deshabilitado', true);
                auxBoton.classList.toggle("n", false);
                auxBoton.classList.toggle("b", false);
                auxBoton.classList.toggle("rb", false);
                auxBoton.classList.toggle("rn", false);
                auxBoton.classList.toggle("vacio", true);
            }
            else if(tablero[i][j]=="n"){
                auxBoton.classList.toggle('habilitado',false);
                auxBoton.classList.toggle('deshabilitado', true);
                auxBoton.classList.toggle("vacio", false);
                auxBoton.classList.toggle("b", false);
                auxBoton.classList.toggle("rb", false);
                auxBoton.classList.toggle("rn", false);
                auxBoton.classList.toggle("n", true);
            }
            else if(tablero[i][j]=="b"){
                auxBoton.classList.toggle('habilitado',false);
                auxBoton.classList.toggle('deshabilitado', true);
                auxBoton.classList.toggle("vacio", false);
                auxBoton.classList.toggle("n", false);
                auxBoton.classList.toggle("rb", false);
                auxBoton.classList.toggle("rn", false);
                auxBoton.classList.toggle("b", true);
            }
            else if(tablero[i][j]=="rb"){
                auxBoton.classList.toggle('habilitado',false);
                auxBoton.classList.toggle('deshabilitado', true);
                auxBoton.classList.toggle("vacio", false);
                auxBoton.classList.toggle("n", false);
                auxBoton.classList.toggle("b", false);
                auxBoton.classList.toggle("rn", false);
                auxBoton.classList.toggle("rb", true);
            }
            else if(tablero[i][j]=="rn"){
                auxBoton.classList.toggle('habilitado',false);
                auxBoton.classList.toggle('deshabilitado', true);
                auxBoton.classList.toggle("vacio", false);
                auxBoton.classList.toggle("n", false);
                auxBoton.classList.toggle("b", false);
                auxBoton.classList.toggle("rb", false);
                auxBoton.classList.toggle("rn", true);
            }
        }
    }
}

function comprobarSegundaCaptura(x,y){
    //Si el turno es de las blancas
    if(turno==0){
        //Comprueba que la siguiente opción posible 
        //no salga del tablero

        //Avanza hacia abajo a la izquierda
        if((x+2)<8 && (y-2)>=0){
            //Si la ficha que está al lado es negra o reina negra
            if(tablero[x+1][y-1]=="n" || tablero[x+1][y-1]=="rn"){
                //Si la siguiente opcion está vacia
                if(tablero[x+2][y-2]=="vacio"){
                    //Si pasa todo esto, se resetea el turno
                    //al que jugó recién
                    segundaCaptura=true;
                }
            }

        }

        //Avanza hacia abajo y a la derecha
        if((x+2)<8 && (y+2)<8){
            if(tablero[x+1][y+1]=="n" || tablero[x+1][y+1]=="rn"){
                if(tablero[x+2][y+2]=="vacio"){
                    segundaCaptura=true;
                }
            }
        }
        
        //En el caso de ser una reina blanca, se le agrega también
        //la comprobación para saber si puede capturar hacia atrás
        if(tablero[anteriorX][anteriorY]=="rb"){
            
            //Avanza hacia arriba a la izquierda
            if((x-2)>=0 && (y-2)>=0){
                
                //Si la ficha que está al lado es negra o reina negra
                if(tablero[x-1][y-1]=="n" || tablero[x-1][y-1]=="rn"){
                    
                    //Si la siguiente opcion está vacia
                    if(tablero[x-2][y-2]=="vacio"){
                        
                        //Si pasa todo esto, se resetea el turno
                        //al que jugó recién
                        segundaCaptura=true;
                    }
                }
            }

            //Avanza hacia arriba y a la derecha
            if((x-2)>=0 && (y+2)<8){
                if(tablero[x-1][y+1]=="n" || tablero[x-1][y+1]=="rn"){
                    if(tablero[x-2][y+2]=="vacio"){
                        segundaCaptura=true;
                    }
                }
            }
        }
        



    }

    

    //Si el turno es de las negras
    else if(turno==1){
        //Comprueba que la siguiente opción posible 
        //no salga del tablero

        //Avanza hacia arriba a la izquierda
        if((x-2)>=0 && (y-2)>=0){
            //Si la ficha que está al lado es blanca o reina blanca
            if(tablero[x-1][y-1]=="b" || tablero[x-1][y-1]=="rb"){
                //Si la siguiente opcion está vacia
                if(tablero[x-2][y-2]=="vacio"){
                    //Si pasa todo esto, se resetea el turno
                    //al que jugó recién
                    segundaCaptura=true;
                }
            }
        }

        //Avanza hacia arriba y a la derecha
        if((x-2)>=0 && (y+2)<8){
            if(tablero[x-1][y+1]=="b" || tablero[x-1][y+1]=="rb"){
                if(tablero[x-2][y+2]=="vacio"){
                    segundaCaptura=true;
                }
            }
        }
        
        //En el caso de ser una reina negra, se le agrega también
        //la comprobación para saber si puede capturar hacia adelante
        if(tablero[anteriorX][anteriorY]=="rn"){
            
            //Avanza hacia abajo a la izquierda
            if((x+2)<8 && (y-2)>=0){
                //Si la ficha que está al lado es blanca o reina blanca
                if(tablero[x+1][y-1]=="b" || tablero[x+1][y-1]=="rb"){
                    //Si la siguiente opcion está vacia
                    if(tablero[x+2][y-2]=="vacio"){
                        //Si pasa todo esto, se resetea el turno
                        //al que jugó recién
                        segundaCaptura=true;
                    }
                }

            }

            //Avanza hacia abajo y a la derecha
            if((x+2)<8 && (y+2)<8){
                if(tablero[x+1][y+1]=="b" || tablero[x+1][y+1]=="rb"){
                    if(tablero[x+2][y+2]=="vacio"){
                        segundaCaptura=true;
                    }
                }
            } 
        }


    }

}

function imprimirTablero(){
    for(i=0; i<8; i++){
        console.log(tablero[i]);
    }
}

}