let block = document.getElementsByClassName('demo');
const condom = document.getElementById('condom');
let xx = document.getElementById('disOX');
const akapity = xx.getElementsByTagName('p');
var z = 0;
let Char = 'X';
let Char2 = 'O';
var win = 0;
var lose = 0;
const click = new Audio('yes.wav');
let odswiez = 0;
let nrAkapitu= 1;
let msgEnd= '';

function zmieni(){
    if(z == 0){z++}
    else if(z == 1){z--}
    spr(z);
}                                   //Ustawianie kolejno X O
function spr(z){
    if(z == 0){Char='X';Char2='O'}
    else{Char='O';Char2='X'}
}

for(var i=0; i<block.length; i++){
        block[i].addEventListener('click', wypelnijXO);     //Przypisanie do klekcji block wydarzen
        block[i].addEventListener('click',szuka);
        block[i].addEventListener('click',zmieni);
        block[i].addEventListener('click',errDuble);
};

function szuka(){
    for(var i=0; i<3; i++){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //pierwszy poziomy rzad
            if(block[i].textContent=='O'){lose++; usunDdawanieXO(i)}
            if(win==3){ for (var i=0; i<3; i++) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=0; i<3; i++) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;

        for(var i=3; i<6; i++){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //drugi poziomy rzad
            if(block[i].textContent=='O'){lose++; usunDdawanieXO(i)}
            if(win==3){ for (var i=3; i<6; i++) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=3; i<6; i++) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;

        for(var i=6; i<9; i++){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //trzeci poziomy rzad
            if(block[i].textContent=='O'){lose++; usunDdawanieXO(i)}
            if(win==3){ for (var i=6; i<9; i++) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=6; i<9; i++) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;

        for(var i=0; i<block.length; i+=3){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //pierwszy pionowy rzad
            if(block[i].textContent=='O'){lose++; usunDdawanieXO(i)}
            if(win==3){ for (var i=0; i<block.length; i+=3) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=0; i<block.length; i+=3) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;

        for(var i=1; i<block.length; i+=3){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //drugi pionowy rzad
            if(block[i].textContent=='O'){lose++; usunDdawanieXO(i)}
            if(win==3){ for (var i=1; i<block.length; i+=3) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=1; i<block.length; i+=3) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;

            for(var i=2; i<block.length; i+=3){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //trzeci pionowy rzad
            if(block[i].textContent=='O'){lose++; usunDdawanieXO(i)}
            if(win==3){ for (var i=2; i<block.length; i+=3) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=2; i<block.length; i+=3) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;

        for(var i=2; i<7; i+=2){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //na ukos od lewej do prawej
            if(block[i].textContent=='O'){lose++; usunDdawanieXO(i)}
            if(win==3){ for (var i=2; i<7; i+=2) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=2; i<7; i+=2) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;

        for(var i=0; i<9; i+=4){
            if(block[i].textContent=='X'){ win++; usunDdawanieXO(i)}                                //na ukos od prawej do lewej
            if(block[i].textContent=='O'){lose++;usunDdawanieXO(i)}
            if(win==3){ for (var i=0; i<block.length; i+=4) {block[i].classList.add('winek')} jesliWin();return}
            if(lose==3){for (var i=0; i<block.length; i+=4) {block[i].classList.add('winek')} jesliLose();return}
        }
        win=0;
        lose=0;
        odswiez++;
        if(odswiez==9&&win==0&&lose==0){setTimeout(endRem,1000);setTimeout(odNow,6000)}
}

function wypelnijXO(){
    this.textContent = Char; this.style.cursor="default"; var msg = 'Kolej : ' + Char2; akapity[nrAkapitu].textContent = msg; click.play();nrAkapitu++;     //Wypisanie X lub O zmiana kursora i puszczenie dzwieku
}

function usunDdawanieXO(i){
    block[i].removeEventListener("click", wypelnijXO)                                               //Uniemozliwienie zmiany
}

function jesliWin(){
    stop();
    for (var i=0; i<block.length; i++){ block[i].style.cursor="default"; usunDdawanieXO(i)}; const seekWin =    document.getElementsByClassName('winek');
    for (var i=0; i<3; i++){seekWin[i].style.color='#009900'} ;setTimeout(endX,1000);               //Gdy wygraja X
    setTimeout(odNow,4500)
}

function jesliLose(){
    stop();
    for (var i=0; i<block.length; i++){ block[i].style.cursor="default"; usunDdawanieXO(i)}; const seekWin = document.getElementsByClassName('winek');
    for (var i=0; i<3; i++){seekWin[i].style.color='red'} ;setTimeout(endY,1000);                   //Gdy wygraja O
    setTimeout(odNow,5500)
}
function odNow(){
    location.reload()       //Odswiezenie strony
}
function endX(){                                                                                                        //Animacje
        condom.style.justifyContent='center';condom.innerHTML='<div id="EndX"><span></span><br><br><br><br>WIN</div>';
}
function endY(){
        condom.style.justifyContent='center';condom.innerHTML='<div id="EndO"><span>WIN</span><span></span><span></span><span><span></span></span></div>'
}
function endRem(){
        condom.style.justifyContent='center';condom.innerHTML='<div id="EndRemis"><span>Remis</span><span><span></span></span><span></span><span></span></div>';
}
function errDuble(){
    this.removeEventListener('click',zmieni);                                                               //blad z double clickiem
    this.removeEventListener('click',szuka);
}
function stop(){
    for(var i=0;i<9;i++){
    block[i].removeEventListener('click', wypelnijXO);
    block[i].removeEventListener('click',szuka);                                                //Uniemozliwieni czegokolwiek
    block[i].removeEventListener('click',zmieni);                                               //po skoniczonej grze
    block[i].removeEventListener('click',errDuble);
}}