Lösung Erweiterungsaufgaben

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Schachbrett vanilla js Lösung</title>
    <link rel="stylesheet" href="schachbrett.css">
</head>
    <body>
        <header>
            Schachbrett Aufgabe
        </header>
        <section id="chessSizeSection">
            <div style="display: flex; flex-direction: column">
                <div style="display: flex; flex-direction: row">
                    <label for="chessSize">select the chess size</label>
                    <select name="chessSize" id="chessSize"></select>
                </div>
                <button onclick="startGame()">start game</button>
            </div>
        </section>
        <section class="flex-container-row" >
            <div class="chessboard" id="gamePad"></div>
            <div style="min-width: 50px;"></div>
            <div class="chessboard" id="templateBoard"></div>
        </section>
        <section class="flex-container-row" id="buttons"></section>
        <section class="flex-container-row" id="checkButton"></section>

        <script src="schachbrett.js"></script>
    </body>

</html>

header {
    background-color: aliceblue;
    margin: 10px;
    border-radius: 5px;
    min-height: 30px;
    border: 5px solid silver;
    display: flex;
    justify-content: center;
}
section {
    display: flex;
    flex-direction: row;
}
.chessboard {
    display: flex;
    flex-wrap: wrap;
}
.field {
    border: black solid 1px;
    min-width: 30px;
    min-height: 30px;
}
.flex-container-row {
    display: flex;
    flex-direction: row;
    padding: 10px;
    margin: 20px;
}
.flex-container-row > div {
    min-width: 20px;
    min-height: 20px;
    text-align: center;
}
button {
    width: 80px;
    height: 60px;
}

let rowAndColumnCount = 10;
let templateArr = new Array(rowAndColumnCount * rowAndColumnCount);
let gameArr = new Array(rowAndColumnCount * rowAndColumnCount);

const colors = [
    'red',
    'green',
    'lightblue',
    'pink'
];
let selectedColor = colors[2];
let clickCounter = 0;

let gameBoard = document.getElementById('gamePad');
let templateBoard = document.getElementById('templateBoard');

const buttons = document.getElementById('buttons');
const checkButton = document.getElementById('checkButton');
const chessSizeSelect = document.getElementById('chessSize');
const chessSizeSection = document.getElementById('chessSizeSection');
const gameSection= document.getElementById('gameSection');

fillChessSizes();

function fillChessSizes() {
    for(let i = 2; i < 13; i++) {
        const option = document.createElement('option');
        option.value = i.toString();
        option.innerText = i.toString();
        if ( i === rowAndColumnCount) {
            option.selected = true
        }
        chessSizeSelect.appendChild(option);
    }
}

function startGame() {
    // find the number of rows
    rowAndColumnCount = chessSizeSelect.value;

    templateArr = new Array(rowAndColumnCount * rowAndColumnCount);
    gameArr = new Array(rowAndColumnCount * rowAndColumnCount);

    createChessBoard(gameBoard.id, false);
    createChessBoard(templateBoard.id, true);

    addButtons(buttons.id);

    addCheckButton(checkButton.id);

    // hide the
    chessSizeSection.style.display = 'none';
    gameSection.style.display = 'inherit';
    buttons.style.display = 'inherit';
    checkButton.style.display = 'inherit';
}

function createChessBoard(parentId, prefill) {
    const parentElement = document.getElementById(parentId);
    // define the max with of the element
    parentElement.setAttribute('style', 'width: ' + ( ( (rowAndColumnCount) * 32) + 10 ) + 'px;')
    while (parentElement.firstChild) parentElement.removeChild(parentElement.firstChild);
    for(let i = 0; i < (rowAndColumnCount * rowAndColumnCount); i++) {
        const div = document.createElement('div');
        div.onclick = onGameClick;
        div.className = 'field';
        // div.innerText = i.toString();
        if (prefill) {
            const colorValue = colors[ getRandomValue(0, colors.length - 1 ) ];
            div.setAttribute('style', 'background-color: ' + colorValue + ';');
            // save to the template arr
            templateArr[i] = colorValue;
        } else {
            div.id = i.toString();
        }
        parentElement.appendChild(div);
    }
}

function addButtons(parentId) {
    const parentElement = document.getElementById(parentId);
    while (parentElement.firstChild) parentElement.removeChild(parentElement.firstChild);
    for( let i = 0; i < colors.length; i++ ) {
        const colorName = colors[i];
        const btn = document.createElement('button');
        btn.innerText = colorName;
        btn.onclick = onButtonColorSelectClick;
        btn.setAttribute('style', 'background-color: ' + colorName + ';');
        // add it
        parentElement.appendChild(btn);
    }
}

function addCheckButton(parentId) {
    const parentElement = document.getElementById(parentId);
    while (parentElement.firstChild) parentElement.removeChild(parentElement.firstChild);
    const btn = document.createElement('button');
    btn.innerText = 'check';
    btn.onclick = onButtonCheckClick;
    // add it
    parentElement.appendChild(btn);
}

function getRandomValue(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function onGameClick() {
    clickCounter++;
    document.getElementById(this.id).setAttribute('style', 'background-color: ' + selectedColor + ';')
    gameArr[this.id] = selectedColor;
}

function onButtonColorSelectClick() {
    console.log(this.innerText);
    selectedColor = this.innerText;
}

function onButtonCheckClick() {
    for(let i = 0; i < templateArr.length; i++) {
        if (templateArr[i] !== gameArr[i]) {
            alert ('Da ist etwas nicht ganz korrekt!');
            return;
        }
    }
    alert ('Gratuliere! in ' + clickCounter + ' clicks, gelöst!');

    if ( confirm(' Nochmals spielen?')) {
        templateArr = new Array(rowAndColumnCount * rowAndColumnCount);
        gameArr = new Array(rowAndColumnCount * rowAndColumnCount);
        clickCounter = 0;
        createChessBoard(gameBoard.id, false);
        createChessBoard(templateBoard.id, true);
        chessSizeSection.style.display = 'none';
        gameSection.style.display = 'inherit';
        buttons.style.display = 'inherit';
        checkButton.style.display = 'inherit';
    } else {
        buttons.style.display = 'none';
        checkButton.style.display = 'none';
    }

}

Lösung