jj3

var flag = 0; // 1 PC & 0 User
var size = 0;
var tam = size;
var nim = 0;
var wait=1;
var turn = 1;
var stack = 0;
var pieces = 0;
var game_ash;
var game; //variavel que guarda a ash do jogo

////////////////////////
var vez = 0;
var username = "";
var password = "";
var online = 0;

function register(){


        var name = document.getElementById("user").value;
        var pass = document.getElementById("pass").value;

        if(checkLogin()){

                var xhr = new XMLHttpRequest();

                xhr.open("POST","http://twserver.alunos.dcc.fc.up.pt:8008/register",true);
                xhr.onreadystatechange = function() {
                    if(xhr.readyState < 4)
                        return;
                    if(xhr.status == 200){ //faz login
                        var resposta = JSON.parse(xhr.responseText);


                        username = name;
                        password = pass;

                        document.getElementById('painel_login').style.display = 'none';
                        document.getElementById('jogo_on').style.display = 'none';
                        document.getElementById('painel_jogo').style.display = 'block';


                    }
                    else{
                            alert("Password errada!");
                            document.getElementById("my_login").reset();
                    }

                }
                xhr.send(JSON.stringify({"nick": name,"pass": pass}));
        }
        else{
                document.getElementById("my_login").reset();

        }

}
function checkLogin()
{
    var nameRegex = /^[a-zA-Z0-9\_]+$/;
    var username_teste = document.getElementById('user').value;
    var password_teste= document.getElementById('pass').value;
    var match = document.getElementById('user').value.match(nameRegex);

    if(username_teste.length === 0)
    {
        alert("Your username is empty!");
        return false;
    }

    if(match === null)
    {
        alert("Your username is not valid. Only characters A-Z, a-z and '_' are  acceptable.");
        return false;
    }

    if(username_teste.length > 15)
    {
        alert("You have more than 15 characters on username!");
        return false;
    }

    if(password_teste.length === 0)
    {
        alert("Your password is empty!");
        return false;
    }

    if(password_teste.length < 4)
    {
        alert("Your password is too small!");
        return false;
    }

    document.getElementById('user').innerHTML = username_teste;
    return true;
}

function join(){

        console.log("pass join: " + password);
        var group = "19";
       /* var name = document.getElementById("user").value;
        var pass = document.getElementById("pass").value;

        É a password e username definidos globalmente!!

        */



        size = "5";

                    var xhr = new XMLHttpRequest();

                    xhr.open("POST","http://twserver.alunos.dcc.fc.up.pt:8008/join",true);
                    xhr.onreadystatechange = function() {
                        if(xhr.readyState < 4)
                            return;
                        if(xhr.status == 200){
                             game_ash = JSON.parse(xhr.responseText);
                             game=game_ash.game;
                         //update(name);
                         online = 1; // <- NO LEAVE E QUANDO ACABA O JOGO TENS DE POR A 0 (ZERO FDP) OH BURRO DO CARALHO


                         // miguel paneleiro é aqui que faço update?
                                        // SIM CABRÃO!
                             /*

                             aqui vais ter de fazer o seguinte: (cria função que é melhor)!

                            tens de meter um botão para ele poder fazer o leave (mas isto fazes depois de teres o update feito)
                            apagas tudo do painel do utilizador!
                            a caixa para ele escolher o tamanho do tabuleiro e o botão play DESAPARECEM!

                            No final desta função o user vai ficar à espera. (E PONTO!)
                            ATÉ RECEBER UMA RESPOSTA DO UPDATE!

                            logo crias uma flag global para que é saberes se o jogador está ou não à espera (espera = 1;)

                            Daqui fica resolvido se fizeres isto que eu disse!

                         */
                            wait =1;

                            gerar_tab_on(5);

                        }

                    }
                    xhr.send(JSON.stringify({"group": group,"nick": username,"pass": password, "size": size}));

}

function update(name){ // MARAvilha que ele aqui já junta o tabuleiro
    console.log("UP" + "DATE !!!");
    var xhr = new XMLHttpRequest();
    console.log("name :" + username + "\nash " + game + "\ngame " +game);

     xhr.open("GET",'http://twserver.alunos.dcc.fc.up.pt:8008/update?nick='+username + '&game='+ game, true);
     //alert("update");
     var flag=0;
     var eventSource = new EventSource('http://twserver.alunos.dcc.fc.up.pt:8008/update?'+'nick=' + username + '&game='+ game);
     eventSource.onmessage = function(event) {
         evdata =  JSON.parse(event.data);

         //if(evdata.winner == null )
            //{alert("winner")}
         if(evdata.turn != null )
         {

            console.log("quem é a jogar: " + evdata.turn);
            console.log("rank: " + evdata.rack);
            /*
                AQUI É QUE COMANDA O JOGO

                Se a flag esepera == 1
                    metes a 0;
                    metes a aparecer o tabuleiro!
                        AO METERES A APARECER O TABULEIRO, LÁ DENTRO NA FUNÇÃO QUE DEIXAR O USER JOGAR/CLICAR NO TABULEIRO
                        CRIA OUTRA FLAG GLOBAL QUE SÓ PODE CLICAR SE FOR A VEZ DELE (vez==1)

                Se o tunr == nome do user
                    vez = 1
                SENAÕ
                    vez = 0

                AINDA TENS DE TRATAR DO RACK
                 cria uma função onde mandas o rack e altera o tabuleiro!




            */
             if(wait==1){
                 wait=0;
                 gerar_tab_on(size);
             }

             if(evdata.turn === username) { vez = 1; }
             else { vez = 0; }

             /*
                    TRATAR DO RACK!
                    */
         }

    }
}

function notify(stack,pieces){
    console.log("NOTIFY !!! e game " + game + "pieces e stack" + pieces + stack);
    //pieces é o numero de peças que tem numa coluna
    //stack coluna onde jogou
   /* var name = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

    ESTÀ DEFINIDO GLOBALMENTE

    */
    //var game = game_ash.game;
    var stack = stack;
    var pieces = pieces;

                var xhr = new XMLHttpRequest();


                xhr.open("POST","http://twserver.alunos.dcc.fc.up.pt:8008/notify",true);
                xhr.onreadystatechange = function() {
                    if(xhr.readyState < 4)
                        return;
                    if(xhr.status == 200){
                         var notify = JSON.parse(xhr.responseText);
                         console.log("peças - " + notify.pieces + "stack - " + notify.stack);
                    }
                }
                xhr.send(JSON.stringify({"nick": username,"pass":password,"game": game, "stack": stack,"pieces":pieces}));


               /*

                    SUPONDO QUE ESTA FUNÇÃO ESTÁ A FUNCIONAR!
                    AQUI NÃO FAZES MAIS NADA!
                    SÓ VOU EXPLICAR O QUE TENS QUE FAZER AQUI PORQUE NÃO SEI ONDE TENS AS MERDAS!

                    Quando o jogador CLICA NO TABULEIRO, for uma jogada válida e ser a vez dede, é que chamas o notify!


                    ENTENDESTE OH SEU BURRO!?
                    MARAvilha MARAvilha! TODO CONTENTE! DIARIAMENTE!
               */
}


function gerar_tab_on(size){
    document.getElementById('jogo_on').style.display = 'none';

    document.getElementById('tabuleiro').style.display = 'block';
    document.getElementById('gerar_tab').style.display = 'block';

    document.getElementById('play').style.display = 'inline-block';
    document.getElementById('quit').style.display = 'inline-block';

    nim = size * size;
        var table = document.getElementById('tableclass');
    console.log("= " + size);



    for (var i = size -1; i < size; i++) {
        var row = table.insertRow();
        row.classList.add('tr');
        console.log(1);
        for (var j = size - i -1; j >= 0; j--) {
            var td = row.insertCell();
            td.classList.add('td');
            console.log(2);
            /*if(vez==1){
                cell_onclick_on(td,i, j);

            }*/

        }
    }
/*
    // ORIGINAL!!!
    for (var i = 0; i < size; i++) {
        var row = table.insertRow();
        row.classList.add('tr');

        for (var j = 0; j < i+1; j++) {
            var td = row.insertCell();
            td.classList.add('td');
            if(vez==1){
                cell_onclick_on(td,i, j);

            }

        }
    }*/


    //nao conseguimos apagar para depois usar o rack
    /*for(var i=size;i>=1;i--){
        var row = table.deleteCell();
        for(var j=tam+1-i;j<=size;j++){
            var td = row.deleteCell();
            td.classList.remove(0);


        }
    }*/


    //clearBoard();

}
function cell_onclick(cell, l, c) {

        cell.onclick = function() {
            if (flag == 0 && cell.className == "td") {
                for (var i = l; i >= 0; i--) {
                    var cell_vizinha = getCell(i, c);
                    if (cell_vizinha.className == "inactive")
                        break;

                    cell_vizinha.className = "inactive";
                    notify(stack,pieces);
                    nim--;

                }
                // nim = nim - (l + 1);

            }


        }


        cell.onmouseover = function() {
            if (cell.className !== "inactive" && cell.className !== "temporario")
                for (var i = l - 1; i >= 0; i--) {
                    var cell_vizinha = getCell(i, c);
                    if (cell_vizinha.className == "inactive"
                            || cell_vizinha.className == "temporario")
                        break;
                    cell_vizinha.className = "active";
                }
        }

        cell.onmouseout = function() {
            if (cell.className !== "inactive" && cell.className !== "temporario")
                for (var i = l; i >= 0; i--) {
                    var cell_vizinha = getCell(i, c);
                    if (cell_vizinha.className == "inactive"
                            || cell_vizinha.className == "temporario")
                        break;
                    cell_vizinha.className = "td";
                }
        }


    }


function gerar_tab(size) {
    document.getElementById('jogo_on').style.display = 'none';

    document.getElementById('tabuleiro').style.display = 'block';
    document.getElementById('gerar_tab').style.display = 'block';

    document.getElementById('play').style.display = 'inline-block';
    document.getElementById('quit').style.display = 'inline-block';
    tam=size;
    nim = tam * tam;
    console.log("NIM " + nim + "TAM " + tam);
    var table = document.getElementById('tableclass');
    console.log("= " + tam);
    for (var i = 0; i < tam; i++) {
        var row = table.insertRow();
        row.classList.add('tr');

        for (var j = 0; j < tam; j++) {
            var td = row.insertCell();
            td.classList.add('td');
            cell_onclick(td, i, j);
        }
    }


    if (flag != 0)
        setTimeout(pc_play, 100);

}

function gerar_tab2() {
    var table = document.getElementById('tabelaclassificacao');

    for (var i = 0; i < 11 ;i++) {
        var row = table.insertRow();
        row.classList.add('tr_1');

        for (var j = 0; j < 2 ;j++) {
            var td = row.insertCell();
            td.classList.add('td_1');

        }
    }
    var n = "Nome";
    var t = "Tempo";
    document.getElementById("tabelaclassificacao").rows[0].cells[0].innerHTML = n;
    document.getElementById("tabelaclassificacao").rows[0].cells[1].innerHTML = t;


    for ( i = 1; i <= 10 ;i++) {
        var player_class = i  + 'º     --------------      ';
        var player_time = "-- / -- / --";
        console.log(player_class);
            document.getElementById("tabelaclassificacao").rows[i].cells[0].innerHTML = player_class;
            document.getElementById("tabelaclassificacao").rows[i].cells[1].innerHTML = player_time;

    }

}


function getCell(l, c) {
    var boardElement = document.getElementById("tableclass");
    return boardElement.rows[l].cells[c];
}

function pc_play() {
    document.getElementById('demo_3').style.display = 'none';

    var x, y;
    var cell;
    // alert(nim);

    if (nim <= 0)
        return;

    do {
        x = Math.floor((Math.random() * tam));
        y = Math.floor((Math.random() * tam));
        // console.log(x + " " + y + " " + tam);
    } while (getCell(x, y).className != "td");

    for (var i = x; i >= 0; i--) {
        var cell_vizinha = getCell(i, y);
        if (cell_vizinha.className == "inactive")
            break;
        cell_vizinha.className = "temporario";

    }

    setTimeout(function() {
        for (var i = x; i >= 0; i--) {
            var cell_vizinha = getCell(i, y);
            if (cell_vizinha.className == "inactive")
                break;
            cell_vizinha.className = "inactive";
            nim--;

        }
        winner();

        flag = 0;
    }, 1000);
}

function winner() {
    if (nim <= 0) {
        if (flag == 0) {
            alert("Parabéns, ganhaste!");

        } else {
            alert("Perdeste, tente de novo!");

        }

        document.getElementById('tabuleiro').style.display = 'none';
        document.getElementById('gerar_tab').style.display = 'none';
        // document.getElementById('myFunction').style.display = 'none';
        document.getElementById('quit').style.display = 'none';
        document.getElementById('play').style.display = 'none';
        document.getElementById('try_again').style.display = 'block';

        return;
    }
}

function cell_onclick_on(cell, pieces, stack) {
    l=size-pieces;
    c=stack;
    cell.onclick = function() {
        if (cell.className == "td") {
            for (var i = l; i >= 0; i--) {
                var cell_vizinha = getCell(i, c);
                if (cell_vizinha.className == "inactive")
                    break;

                cell_vizinha.className = "inactive";
                notify(stack,pieces);
                nim--;

            }
            // nim = nim - (l + 1);

        }


    }


    cell.onmouseover = function() {
        if (cell.className !== "inactive" && cell.className !== "temporario")
            for (var i = l - 1; i >= 0; i--) {
                var cell_vizinha = getCell(i, c);
                if (cell_vizinha.className == "inactive"
                        || cell_vizinha.className == "temporario")
                    break;
                cell_vizinha.className = "active";
            }
    }

    cell.onmouseout = function() {

        if (cell.className !== "inactive" && cell.className !== "temporario")
            for (var i = l; i >= 0; i--) {
                var cell_vizinha = getCell(i, c);
                if (cell_vizinha.className == "inactive"
                        || cell_vizinha.className == "temporario")
                    break;
                cell_vizinha.className = "td";
            }
    }


}

function clearBoard() {

    var i;
    for (i = 0; i < tam; i++) {
        if (document.getElementById("tableclass").rows.length != 0)
            document.getElementById("tableclass").deleteRow(0);
    }
}
function clearBoard_rank() {

    var i;
    for (i = 0; i < 10; i++) {
        if (document.getElementById("tabelaclassificacao").rows.length != 0)
            document.getElementById("tabelaclassificacao").deleteRow(0);

    }
}

function myFunction(size,flag) {
    var x, text;
    flag=1;
    x = document.getElementById("numb").value;
    document.getElementById('demo_3').style.display = 'none';
    tam = x;
    //clearBoard();
    gerar_tab(size);
}

function first_play() {
    document.getElementById('demo').style.display = 'none';
    document.getElementById('demo_2').style.display = 'block';

    flag = 0// user

}
function first_play_pc() {
    document.getElementById('demo').style.display = 'none';
    document.getElementById('demo_2').style.display = 'block';

    flag = 1; // pc

}

function dif_play() {
    document.getElementById('demo_2').style.display = 'none';
    document.getElementById('demo_3').style.display = 'block';

}
function registar() {
    document.getElementById('header_painel2').style.display = 'none';
    document.getElementById('painel_login').style.display = 'block';
}

function login() {
    document.getElementById('painel_rank').style.display = 'none';
    document.getElementById('painel_instrucoes').style.display = 'none';
    document.getElementById('gerar_tab').style.display = 'none';
    document.getElementById('painel_jogo').style.display = 'none';
    document.getElementById('tabuleiro').style.display = 'none';
    document.getElementById('painel_init').style.display = 'none';
    document.getElementById('painel_login').style.display = 'block';
}
function login_wData() {
    document.getElementById('painel_login').style.display = 'none';
    document.getElementById('painel_init').style.display = 'block';
}
function config() {
    clearBoard();
    document.getElementById('painel_login').style.display = 'none';
    document.getElementById('painel_rank').style.display = 'none';
    document.getElementById('painel_init').style.display = 'none';
    document.getElementById('painel_instrucoes').style.display = 'none';
    document.getElementById('gerar_tab').style.display = 'none';
    document.getElementById('painel_jogo').style.display = 'block';
    document.getElementById('tabuleiro').style.display = 'none';

}
function modo_jogo() {
    document.getElementById('gerar_tab').style.display = 'none';
    document.getElementById('modo_jogo').style.display = 'none';
    document.getElementById('jogo_on').style.display = 'none';

    document.getElementById('demo').style.display = 'block';
}
function modo_online_jogo() {
    document.getElementById('modo_jogo').style.display = 'none';

    document.getElementById('jogo_on').style.display = 'block';
    //join();

}
function instrucoes() {
    document.getElementById('gerar_tab').style.display = 'none';
    document.getElementById('painel_jogo').style.display = 'none';
    document.getElementById('painel_login').style.display = 'none';
    document.getElementById('painel_init').style.display = 'none';
    document.getElementById('painel_rank').style.display = 'none';
    document.getElementById('painel_instrucoes').style.display = 'block';

}
function rank() {
    document.getElementById('gerar_tab').style.display = 'none';
    document.getElementById('painel_jogo').style.display = 'none';
    document.getElementById('painel_login').style.display = 'none';
    document.getElementById('painel_init').style.display = 'none';
    document.getElementById('painel_instrucoes').style.display = 'none';
    document.getElementById('gerar_tab').style.display = 'none';
    clearBoard_rank();
    document.getElementById('painel_rank').style.display = 'block';
    gerar_tab2();
    document.getElementById('tabelaclassificacao').style.display = 'block';

}

function home() {
    clearBoard();
    document.getElementById('tabuleiro').style.display = 'none';
    document.getElementById('quitgame').style.display = 'none';
    document.getElementById('gerar_tab').style.display = 'none';
    document.getElementById('painel_jogo').style.display = 'none';
    document.getElementById('painel_instrucoes').style.display = 'none';
    document.getElementById('painel_login').style.display = 'none';
    document.getElementById('painel_rank').style.display = 'none';
    document.getElementById('painel_init').style.display = 'block';
    //document.getElementById('demo').style.display = 'block';

}
function table_click() {
    var boardElement = document.getElementById("tabuleiro");
    alert(boardElement.rows[l].cells[c]);
}

function try_again() {
    clearBoard();
    document.getElementById('try_again').style.display = 'none';
    document.getElementById('demo').style.display = 'block';
}
function playbutton(){
    document.getElementById('painel_login').style.display = 'none';
    document.getElementById('painel_rank').style.display = 'none';
    document.getElementById('painel_init').style.display = 'none';
    document.getElementById('painel_instrucoes').style.display = 'none';
    document.getElementById('gerar_tab').style.display = 'block';
    document.getElementById('painel_jogo').style.display = 'block';
    document.getElementById('tabuleiro').style.display = 'block';
}
function quitbutton(){
    document.getElementById('play').style.display = 'none';
    document.getElementById('quit').style.display = 'none';
    document.getElementById('painel_jogo').style.display = 'none';
    document.getElementById('gerar_tab').style.display = 'none';
    document.getElementById('tabuleiro').style.display = 'none';
    document.getElementById('quitgame').style.display = 'block';
}
function yes(){
    clearBoard();
    document.getElementById('tabuleiro').style.display = 'none';
    document.getElementById('quitgame').style.display = 'none';
    document.getElementById('painel_jogo').style.display = 'none';
    document.getElementById('painel_init').style.display = 'block';
    document.getElementById('demo').style.display = 'block';

    }
function quitfunction(){
    document.getElementById('play').style.display = 'block';
    document.getElementById('quitgame').style.display = 'none';
    document.getElementById('quit').style.display = 'block';
    document.getElementById('painel_jogo').style.display = 'block';
    document.getElementById('tabuleiro').style.display = 'block';
    document.getElementById('gerar_tab').style.display = 'block';

}