let fieldId;
let field;
let down;
let down2;
let up;
let up2;
let left;
let left2;
let right;
let right2;
let topRight;
let topLeft;
let bottomRight;
let bottomLeft;
let rowMin;
let rowMax;
let selectedPiece;
let turnTotal = 0;
let turnPlayer;
let piecesX;
let piecesO;
let scoreX = 0;
let scoreCounterX = 100;
let scoreO = 0;
let scoreCounterO = 100;
let gameOver = false;
let winner;
let somethingIsSelected = false;

document.getElementById("scoreCounter").innerText = "Score counter: 100";
document.getElementById("scoreX").innerText = "Score X: 0";
document.getElementById("scoreO").innerText = "Score O: 0";
for(let i = 0; i < 64; i++){
    fieldId = i.toString();
    document.getElementById("field"+fieldId).selected = 0;                                                              //Sorgt dafür dass alle Felder die selected variable haben und diese 0 ist
    document.getElementById("field"+fieldId).piece = 0;                                                                 //Sorgt dafür dass alle Felder die piece variable haben und diese 0 ist
    document.getElementById("field"+fieldId).fieldNum = i;                                                              //Gibt jedem Feld eine Feldnummer, brauche ich für's movement
}
for(let i = 56; i < 64; i++){
    fieldId = i.toString();
    document.getElementById("field"+fieldId).piece = 1;                                                                 //Setzt die piece Variable von Feld 0 bis 8 auf 1 -> Diese Felder haben einen Spielstein von Spieler 1
}
for(let i = 0; i < 8; i++){
    fieldId = i.toString();
    document.getElementById("field"+fieldId).piece = 2;                                                                 //Setzt die piece Variable von Feld 0 bis 8 auf 1 -> Diese Felder haben einen Spielstein von Spieler 1
}

drawPieces();
resetValidMoves();
advanceTurn();

function drawPieces() {
    for (let i = 0; i < 64; i++) {
        fieldId = i.toString();
        field = document.getElementById("field" + fieldId);
        if (field.piece === 0) {
            field.innerText = "";
        } else if (field.piece === 1) {
            field.innerText = "X";
        } else if (field.piece === 2) {
            field.innerText = "O";
        } else if (field.piece === 11) {
            field.innerText = "XX";
        } else if (field.piece === 22) {
            field.innerText = "OO";
        }
    }
}
function selectField(field){
    console.log(field.id);
    for(let i = 0; i < 64; i++){
        fieldId = i.toString();
        if(document.getElementById("field"+fieldId).selected === 1){
            somethingIsSelected = true;
        }
    }
    if(!somethingIsSelected && !gameOver && (((field.piece === 1 || field.piece === 11) && turnTotal%2 === 1)||((field.piece === 2 || field.piece === 22) && turnTotal%2 === 0))) {
        field.style.backgroundColor = "rgb(16,43,202, 0.3)";
        field.selected = 1;
        if(field.piece === 1 || field.piece === 11){
            selectedPiece = field;
            validMovesPlayer1(field);
        } else if (field.piece === 2 || field.piece === 22){
            selectedPiece = field;
            validMovesPlayer2(field);
        }
    } else if (field.selected === 1){
        field.selected = 0;
        somethingIsSelected = false;
        resetValidMoves();
    } else if (field.validMove !== 0){
        score(field);
        field.piece = movePiece(field, selectedPiece);
        selectedPiece.piece = 0;
        drawPieces();
        resetValidMoves();
        for(let i = 0; i < 64; i++){
            fieldId = i.toString();
            document.getElementById("field"+fieldId).selected = 0;
            somethingIsSelected = false;
        }
        advanceTurn();
        checkWinCondition();
    }
}
function validMovesPlayer1(field){
    if(field.fieldNum < 8 && field.fieldNum >= 0){
        rowMin = 0;
        rowMax = 7;
    } else if(field.fieldNum < 16 && field.fieldNum >= 8){
        rowMin = 8;
        rowMax = 15;
    } else if(field.fieldNum < 24 && field.fieldNum >= 16){
        rowMin = 16;
        rowMax = 23;
    } else if(field.fieldNum < 32 && field.fieldNum >= 24){
        rowMin = 24;
        rowMax = 31;
    } else if(field.fieldNum < 40 && field.fieldNum >= 32){
        rowMin = 32;
        rowMax = 39;
    } else if(field.fieldNum < 48 && field.fieldNum >= 40){
        rowMin = 40;
        rowMax = 47;
    } else if(field.fieldNum < 56 && field.fieldNum >= 48){
        rowMin = 48;
        rowMax = 55;
    } else if(field.fieldNum < 64 && field.fieldNum >= 56){
        rowMin = 56;
        rowMax = 63;
    }
    if((field.fieldNum + 8) < 64) {
        down = document.getElementById("field" + (field.fieldNum + 8).toString());
        if(down.piece === 0){
            down.validMove = 1;
        }
    }
    if((field.fieldNum - 8) >= 0) {
        up = document.getElementById("field" + (field.fieldNum - 8).toString());
        if(up.piece === 0){
            up.validMove = 1;
        }
    }
    if((field.fieldNum - 16) >= 0) {
        up2 = document.getElementById("field" + (field.fieldNum - 16).toString());
        if(up.validMove === 1 && up2.piece === 0){
            up2.validMove = 1;
        }
    }
    if((field.fieldNum - 1) >= rowMin) {
        left = document.getElementById("field" + (field.fieldNum - 1).toString());
        if(left.piece === 0){
            left.validMove = 1;
        } else if (left.piece === 2 || left.piece === 22){
            left.validMove = 2;
        }
    }
    if((field.fieldNum + 1) <= rowMax) {
        right = document.getElementById("field" + (field.fieldNum + 1).toString());
        if(right.piece === 0){
            right.validMove = 1;
        } else if (right.piece === 2 || right.piece === 22){
            right.validMove = 2;
        }
    }
    if((field.fieldNum - 9) >= (rowMin - 8) && (field.fieldNum - 9) >= 0) {
        topLeft = document.getElementById("field" + (field.fieldNum - 9).toString());
        if (topLeft.piece === 2 || topLeft.piece === 22){
            topLeft.validMove = 2;
        }
    }
    if((field.fieldNum - 7) <= (rowMax - 8) && (field.fieldNum - 7) >= 0) {
        topRight = document.getElementById("field" + (field.fieldNum - 7).toString());
        if (topRight.piece === 2 || topRight.piece === 22){
            topRight.validMove = 2;
        }
    }
    if(field.piece === 11){
        if((field.fieldNum + 16) < 64) {
            down2 = document.getElementById("field" + (field.fieldNum + 16).toString());
            if(down.validMove === 1 && down2.piece === 0){
                down2.validMove = 1;
            }
        }
        if((field.fieldNum + 2) <= rowMax){
            right2 = document.getElementById("field" + (field.fieldNum + 2).toString());
            if(right.validMove === 1 && right2.piece === 0){
                right2.validMove = 1;
            }
        }
        if((field.fieldNum - 2) >= rowMin){
            left2 = document.getElementById("field" + (field.fieldNum - 2).toString());
            if(left.validMove === 1 && left2.piece === 0){
                left2.validMove = 1;
            }
        }
        if((field.fieldNum + 7) >= (rowMin + 8) && (field.fieldNum + 7) < 64) {
            bottomLeft = document.getElementById("field" + (field.fieldNum + 7).toString());
            if (bottomLeft.piece === 2 || bottomLeft.piece === 22){
                bottomLeft.validMove = 2;
            } else if (bottomLeft.piece === 0) {
                bottomLeft.validMove = 1;
            }
        }
        if((field.fieldNum + 9) <= (rowMax + 8) && (field.fieldNum + 9) < 64) {
            bottomRight = document.getElementById("field" + (field.fieldNum + 9).toString());
            if (bottomRight.piece === 2 || bottomRight.piece === 22){
                bottomRight.validMove = 2;
            } else if (bottomRight.piece === 0) {
                bottomRight.validMove = 1;
            }
        }
        if((field.fieldNum - 9) >= (rowMin - 8) && (field.fieldNum - 9) >= 0) {
            topLeft = document.getElementById("field" + (field.fieldNum - 9).toString());
            if (topLeft.piece === 0){
                topLeft.validMove = 1;
            }
        }
        if((field.fieldNum - 7) <= (rowMax - 8) && (field.fieldNum - 7) >= 0) {
            topRight = document.getElementById("field" + (field.fieldNum - 7).toString());
            if (topRight.piece === 0){
                topRight.validMove = 1;
            }
        }
    }
    for(let i = 0; i < 64; i++){
        fieldId = i.toString();
        if(document.getElementById("field"+fieldId).validMove === 1){
            document.getElementById("field"+fieldId).style.backgroundColor = "rgb(33,157,35, 0.3)";
        } else if(document.getElementById("field"+fieldId).validMove === 2){
            document.getElementById("field"+fieldId).style.backgroundColor = "rgb(227,8,8, 0.3)";
        }
    }
}
function validMovesPlayer2(field){
    if(field.fieldNum < 8 && field.fieldNum >= 0){
        rowMin = 0;
        rowMax = 7;
    } else if(field.fieldNum < 16 && field.fieldNum >= 8){
        rowMin = 8;
        rowMax = 15;
    } else if(field.fieldNum < 24 && field.fieldNum >= 16){
        rowMin = 16;
        rowMax = 23;
    } else if(field.fieldNum < 32 && field.fieldNum >= 24){
        rowMin = 24;
        rowMax = 31;
    } else if(field.fieldNum < 40 && field.fieldNum >= 32){
        rowMin = 32;
        rowMax = 39;
    } else if(field.fieldNum < 48 && field.fieldNum >= 40){
        rowMin = 40;
        rowMax = 47;
    } else if(field.fieldNum < 56 && field.fieldNum >= 48){
        rowMin = 48;
        rowMax = 55;
    } else if(field.fieldNum < 64 && field.fieldNum >= 56){
        rowMin = 56;
        rowMax = 63;
    }
    if((field.fieldNum + 8) < 64) {
        down = document.getElementById("field" + (field.fieldNum + 8).toString());
        if(down.piece === 0){
            down.validMove = 1;
        }
    }
    if((field.fieldNum + 16) < 64) {
        down2 = document.getElementById("field" + (field.fieldNum + 16).toString());
        if(down.validMove === 1 && down2.piece === 0){
            down2.validMove = 1;
        }
    }
    if((field.fieldNum - 8) >= 0) {
        up = document.getElementById("field" + (field.fieldNum - 8).toString());
        if(up.piece === 0){
            up.validMove = 1;
        }
    }
    if((field.fieldNum - 1) >= rowMin) {
        left = document.getElementById("field" + (field.fieldNum - 1).toString());
        if(left.piece === 0){
            left.validMove = 1;
        } else if (left.piece === 1 || left.piece === 11){
            left.validMove = 2;
        }
    }
    if((field.fieldNum + 1) <= rowMax) {
        right = document.getElementById("field" + (field.fieldNum + 1).toString());
        if(right.piece === 0){
            right.validMove = 1;
        } else if (right.piece === 1 || right.piece === 11){
            right.validMove = 2;
        }
    }
    if((field.fieldNum + 7) >= (rowMin + 8) && (field.fieldNum + 7) < 64) {
        bottomLeft = document.getElementById("field" + (field.fieldNum + 7).toString());
        if (bottomLeft.piece === 1 || bottomLeft.piece === 11){
            bottomLeft.validMove = 2;
        }
    }
    if((field.fieldNum + 9) <= (rowMax + 8) && (field.fieldNum + 9) < 64) {
        bottomRight = document.getElementById("field" + (field.fieldNum + 9).toString());
        if (bottomRight.piece === 1 || bottomRight.piece === 11){
            bottomRight.validMove = 2;
        }
    }
    if(field.piece === 22){
        if((field.fieldNum - 16) >= 0) {
            up2 = document.getElementById("field" + (field.fieldNum - 16).toString());
            if(up.validMove === 1 && up2.piece === 0){
                up2.validMove = 1;
            }
        }
        if((field.fieldNum + 2) <= rowMax){
            right2 = document.getElementById("field" + (field.fieldNum + 2).toString());
            if(right.validMove === 1 && right2.piece === 0){
                right2.validMove = 1;
            }
        }
        if((field.fieldNum - 2) >= rowMin){
            left2 = document.getElementById("field" + (field.fieldNum - 2).toString());
            if(left.validMove === 1 && left2.piece === 0){
                left2.validMove = 1;
            }
        }
        if((field.fieldNum + 7) >= (rowMin + 8) && (field.fieldNum + 7) < 64) {
            bottomLeft = document.getElementById("field" + (field.fieldNum + 7).toString());
            if (bottomLeft.piece === 0) {
                bottomLeft.validMove = 1;
            }
        }
        if((field.fieldNum + 9) <= (rowMax + 8) && (field.fieldNum + 9) < 64) {
            bottomRight = document.getElementById("field" + (field.fieldNum + 9).toString());
            if (bottomRight.piece === 0) {
                bottomRight.validMove = 1;
            }
        }
        if((field.fieldNum - 9) >= (rowMin - 8) && (field.fieldNum - 9) >= 0) {
            topLeft = document.getElementById("field" + (field.fieldNum - 9).toString());
            if(topLeft.piece === 1 || topLeft.piece === 11){
                topLeft.validMove = 2;
            } else if (topLeft.piece === 0){
                topLeft.validMove = 1;
            }
        }
        if((field.fieldNum - 7) <= (rowMax - 8) && (field.fieldNum - 7) >= 0) {
            topRight = document.getElementById("field" + (field.fieldNum - 7).toString());
            if(topRight.piece === 1 || topRight.piece === 11){
                topRight.validMove = 2;
            } else if (topRight.piece === 0){
                topRight.validMove = 1;
            }
        }
    }
    for(let i = 0; i < 64; i++){
        fieldId = i.toString();
        if(document.getElementById("field"+fieldId).validMove === 1){
            document.getElementById("field"+fieldId).style.backgroundColor = "rgb(33,157,35, 0.3)";
        } else if(document.getElementById("field"+fieldId).validMove === 2){
            document.getElementById("field"+fieldId).style.backgroundColor = "rgb(227,8,8, 0.3)";
        }
    }
}
function resetValidMoves(){
    for(let i = 0; i < 64; i++){
        let fieldId = i.toString();
        document.getElementById("field"+fieldId).validMove = 0;
        document.getElementById("field" + fieldId).style.backgroundColor = "rgb(255,255,255, 1)";
    }
}
function advanceTurn(){
    turnTotal++;
    if(turnTotal%2 === 0){
        turnPlayer = "Player-Turn: O";
    } else {
        turnPlayer = "Player-Turn: X";
    }
    document.getElementById("turnTotal").innerText = "Game-Turn: "+turnTotal;
    document.getElementById("turnPlayer").innerText = turnPlayer;
}
function movePiece(field, selectedPiece){
    if((selectedPiece.piece === 1 && field.fieldNum < 8 && field.fieldNum >= 0)|| selectedPiece.piece === 11){
        return 11;
    } else if((selectedPiece.piece === 2 && field.fieldNum < 64 && field.fieldNum >= 56)|| selectedPiece.piece === 22){
        return 22;
    } else {
        return selectedPiece.piece;
    }
}
function checkWinCondition(){
    piecesX = 0;
    piecesO = 0;
    for(let i = 0; i < 64; i++){
        fieldId = i.toString();
        if(document.getElementById("field"+fieldId).piece === 1){
            piecesX++;
        } else if(document.getElementById("field"+fieldId).piece === 11){
            piecesX += 2;
        } else if(document.getElementById("field"+fieldId).piece === 2){
            piecesO++;
        } else if(document.getElementById("field"+fieldId).piece === 22){
            piecesO += 2;
        }
    }
    if(piecesX >= (2 * piecesO)){
        gameOver = true;
        winner = 1;
        document.getElementById("turnTotal").innerText = "Game Over!";
        document.getElementById("turnPlayer").innerText = "X Won!";
    } else if (piecesO >= (2 * piecesX)){
        gameOver = true;
        winner = 2;
        document.getElementById("turnTotal").innerText = "Game Over!";
        document.getElementById("turnPlayer").innerText = "O Won!";
    }
    if(gameOver){
        for(let i = 0; i < 64; i++){
            fieldId = i.toString();
            if((document.getElementById("field"+fieldId).piece === 1 || document.getElementById("field"+fieldId).piece === 11) && winner === 1){
                document.getElementById("field"+fieldId).style.backgroundColor = "rgb(33,157,35, 0.3)"
            }
            if((document.getElementById("field"+fieldId).piece === 1 || document.getElementById("field"+fieldId).piece === 11) && winner === 2){
                document.getElementById("field"+fieldId).style.backgroundColor = "rgb(227,8,8, 0.3)"
            }
            if((document.getElementById("field"+fieldId).piece === 2 || document.getElementById("field"+fieldId).piece === 22) && winner === 1){
                document.getElementById("field"+fieldId).style.backgroundColor = "rgb(227,8,8, 0.3)"
            }
            if((document.getElementById("field"+fieldId).piece === 2 || document.getElementById("field"+fieldId).piece === 22) && winner === 2){
                document.getElementById("field"+fieldId).style.backgroundColor = "rgb(33,157,35, 0.3)"
            }
        }
    }
}
function score (field){
    if(field.piece === 0 && turnPlayer === "Player-Turn: X" && scoreCounterX > 10){
        scoreCounterX -= 10;
    } else if(field.piece === 0 && turnPlayer === "Player-Turn: O" && scoreCounterO > 10){
        scoreCounterO -= 10;
    } else if (field.piece === 1){
        scoreO += scoreCounterO;
        scoreCounterO = 100;
    } else if (field.piece === 11){
        scoreO += ((scoreCounterO + 50) * 2)
        scoreCounterO = 100;
    } else if (field.piece === 2){
        scoreX += scoreCounterX;
        scoreCounterX = 100;
    } else if (field.piece === 2){
        scoreX += ((scoreCounterX + 50) * 2)
        scoreCounterX = 100;
    }
    if(turnPlayer === "Player-Turn: X"){
        document.getElementById("scoreCounter").innerText = "Score counter: " + scoreCounterO;
    } else if (turnPlayer === "Player-Turn: O"){
        document.getElementById("scoreCounter").innerText = "Score counter: " + scoreCounterX;
    }
    document.getElementById("scoreO").innerText = "Score O: " + scoreO;
    document.getElementById("scoreX").innerText = "Score X: " + scoreX;
}