purple_ghost

Connect Four

#gameContainer{
    width:420px;
    height:420px;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    border: 7px solid red;
    box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2);
}

.column{
    border:7px solid red;
    width: 59px;
    background-color: red;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    position: relative;
}

.slot{
    background-color: black;
    width:100%;
    position: absolute;
    z-index: 2;
    height:48px;
    border-radius: 50%;
}

.slot.clickable.purple:hover{
    background-color: purple;
}

.slot.clickable.green:hover{
    background-color: green;
}

#playButton{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}

#playButton:hover{
    background-color: grey;
}

#scoreBoard{
    position:absolute;
    bottom:0;
    display:flex;
    flex-wrap: nowrap;
    flex-direction: column;
}

.scores{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

if(isWinner(this.column, this.row, nextColor, slotsArray) == true) 
            gameOver(nextColor);

// change next color
            let oldColor = nextColor;
            nextColor == "purple" ? (nextColor = "green") : (nextColor = "purple");
            document.querySelectorAll(".clickable").forEach((el) => {
                el.classList.remove(oldColor);
                el.classList.add(nextColor);
            });
        }
    }
    // create slots and push to columns
    columns.forEach((el, col) => {
        let slotColumn = [];
        for(i = 0; i<6; i++) {
            const div = document.createElement("div");
            div.classList.add("slot");
            el.appendChild(div);
            const slot = new Slot(div, col, i);
            slotColumn.push(slot);
            div.onclick = function() {
                slot.clicked();
            };
            div.style.top = i * 70 + 2 + "px";
        }
        slotsArray.push(slotColumn);
    });
    slotsArray.forEach(col=>{
        col[5].element.classList.add("clickable", nextColor)
    })
    console.log(slotsArray)
}
// check if game is draw
function isDraw(slotsArray) {
    let isDraw = true;
    slotsArray.forEach(col=>{
        col.forEach(slot=> {
            if(slot.state == "") isDraw = false;
        });
    });
    return isDraw;
}
// test the lines to see if someone has won
function testLines(lines, color, slotsArray) {
    let connectedSlots = 1; // slots touching, if 4 you win
    lines.forEach(line=>{
        for(i = 0; i<line.length; i++) {
            const slotLocation = line[i];
            column = slotLocation[0];
            row = slotLocation[1];
            // don't allow for searching off screen
            if(column >= 0 && column <= 6 && row >= 0 && row <= 5) {
                // make sure it is defined
                if(typeof(slotsArray[column][row]) !== 'undefined') {
                    if(slotsArray[column][row].state == color) {
                        connectedSlots += 1;
                        console.log(connectedSlots);
                    } else break;
                }
            } else break;
        }
    });

if(connectedSlots >= 4) return true;

return false;
}
// check if there is a winner
function isWinner(col, row, color, slotsArray) {
    const winningLines = {
        horizontal: [
            [
                [col-1, row],
                [col-2, row],
                [col-3, row],
                [col-4, row]
            ],
            [
                [col+1, row],
                [col+2, row],
                [col+3, row],
                [col+4, row]
            ]
        ],
        vertical: [
            [
                [col, row-1],
                [col, row-2],
                [col, row-3],
                [col, row-4]
            ],
            [
                [col, row+1],
                [col, row+2],
                [col, row+3],
                [col, row+4]
            ]
        ],
        diagonalLeft: [
            [
                [col-1, row-1],
                [col-2, row-2],
                [col-3, row-3],
                [col-4, row-4]
            ],
            [
                [col+1, row+1],
                [col+2, row+2],
                [col+3, row+3],
                [col+4, row+4]
            ]
        ],
        diagonalRight: [
            [
                [col-1, row+1],
                [col-2, row+2],
                [col-3, row+3],
                [col-4, row+4]
            ],
            [
                [col+1, row-1],
                [col+2, row-2],
                [col+3, row-3],
                [col+4, row-4]
            ]
        ]
    };
    if(testLines(winningLines.horizontal, color, slotsArray)==true) return true;
    if(testLines(winningLines.vertical, color, slotsArray)==true) return true;
    if(testLines(winningLines.diagonalLeft, color, slotsArray)==true) return true;
    if(testLines(winningLines.diagonalRight, color, slotsArray)==true) return true;

return false;
}
// check if game is over
function gameOver(winner) {
    console.log("game over");
    setScore(winner);
    // delete game
    document.querySelectorAll(".column").forEach((column)=>{
        column.innerHTML = "";
        column.parentNode.removeChild(column);
        document.getElementById("playButton").style.display = "inherit";
    });
}
// set score on the scoreboard
function setScore(winner) {
    if (winner == "undefined") return;
    
    document.getElementById(winner+"Score").innerHTML =
        parseInt(document.getElementById(winner+"Score").innerHTML) + 1;
}