Skip to content
Snippets Groups Projects
renderChessboard.js 4.23 KiB
Newer Older
MaikoVoigt's avatar
MaikoVoigt committed
// Tutorial 3
    // Task 2
    function renderChessboard(pov){
MaikoVoigt's avatar
MaikoVoigt committed
        // Erstellung eines HTML-Strings
MaikoVoigt's avatar
MaikoVoigt committed

MaikoVoigt's avatar
MaikoVoigt committed
        // POV Schwarz
MaikoVoigt's avatar
MaikoVoigt committed
        let row = ['1', '2', '3', '4', '5', '6', '7', '8'];
        let col = ['H', 'G', 'F', 'E', 'D', 'C', 'B', 'A'];

        if (pov == 'w') {
MaikoVoigt's avatar
MaikoVoigt committed
            // POV Weiß
MaikoVoigt's avatar
MaikoVoigt committed
            row.reverse();
            col.reverse();
        }

MaikoVoigt's avatar
MaikoVoigt committed
        let result = '';
MaikoVoigt's avatar
MaikoVoigt committed
        result += '<table id="chessboard">';

        for (let i of row) {
            result += '<tr id="row' + i + '">';
            for (let j of col) {
                result += '<td id="' + j + i + '">' + j + i + '</td>';
            }
            result += '</tr>';
          }
        result += '</table>';
        return result;
MaikoVoigt's avatar
MaikoVoigt committed
    }

    // Task 4
    function convertFEN(fen){
        // wandelt FEN-String in Schachfiguren-Unicode Liste um

        let FEN = fen;
        // E steht für leeres (empty) Feld
        FEN = FEN.replaceAll("8", "EEEEEEEE");
        FEN = FEN.replaceAll("7", "EEEEEEE");
        FEN = FEN.replaceAll("6", "EEEEEE");
        FEN = FEN.replaceAll("5", "EEEEE");
        FEN = FEN.replaceAll("4", "EEEE");
        FEN = FEN.replaceAll("3", "EEE");
        FEN = FEN.replaceAll("2", "EE");
        FEN = FEN.replaceAll("1", "E");
        FEN = FEN.replaceAll("/", "");
        FEN = FEN.split("");

        // Austausch aller Buchstaben mit Unicode für Schachfiguren
        for (let i = 0; i < FEN.length; i++) {
            switch(FEN[i]){
                case "K":
                    FEN[i] = "&#9812";
                    break;

                case "Q":
                    FEN[i] = "&#9813";
                    break;

                case "R":
                    FEN[i] = "&#9814";
                    break;
                case "B":
                    FEN[i] = "&#9815";
                    break;

                case "N":
                    FEN[i] = "&#9816";
                    break;

                case "P":
                    FEN[i] = "&#9817";
                    break;
                case "k":
                    FEN[i] = "&#9818";
                    break;

                case "q":
                    FEN[i] = "&#9819";
                    break;

                case "r":
                    FEN[i] = "&#9820";
                    break;
                case "b":
                    FEN[i] = "&#9821";
                    break;

                case "n":
                    FEN[i] = "&#9822";
                    break;

                case "p":
                    FEN[i] = "&#9823";
                    break;

                default:
                    FEN[i] = "";
                    break;
            }
        }
        return FEN;
    }

    function renderCompleteChessboard(fen, pov){
        //  es wir von korrekten FEN ausgegangen

        // POV Schwarz
        let row = ['1', '2', '3', '4', '5', '6', '7', '8'];
        let col = ['H', 'G', 'F', 'E', 'D', 'C', 'B', 'A'];

        if (pov == 'w') {
            // POV Weiß
            row.reverse();
            col.reverse();
        }

        // Tabelle erstellen
        let table = document.createElement("table");
        table.id = "chessboard";
 
        // Array aus Unicode für Schachfiguren
        let FEN = convertFEN(fen);

        for (let i of row) {
            // Spalten erzeugen
            let tr = document.createElement("tr");
            tr.id = "row" + i;
            for (let j of col) {
                // Zellen erzeugen
                let td = document.createElement("td");
                td.id = j + i;
                
                // Feldposition
                let boardPosition = document. createElement("span");
                boardPosition.className = "boardPosition";
                boardPosition.innerHTML = j + i;
                td.appendChild(boardPosition);

                // Schachfigur
                let chessPiece = document.createElement("span");
                chessPiece.className = "chessPiece";
                chessPiece.innerHTML = FEN.shift(); // entfernt ersten Eintrag aus Array und gibt ihn zurück
                td.appendChild(chessPiece);

                tr.appendChild(td);
            }
            table.appendChild(tr);
          }
        document.getElementById("chessboardElement").appendChild(table);
MaikoVoigt's avatar
MaikoVoigt committed
    }