Tutorial - Task 5

public/javascripts/renderChessboard.js

 // Tutorial 3
     // Task 2
-    function renderChessboard(pov){
+    function renderChessboard_task2(pov){
         // Erstellung eines HTML-Strings
 
         // POV Schwarz
@@ -13,18 +13,18 @@
             col.reverse();
         }
 
-        let result = '';
-        result += '<table id="chessboard">';
+        let HTML = '';
+        HTML += '<table id="chessboard">';
 
         for (let i of row) {
-            result += '<tr id="row' + i + '">';
+            HTML += '<tr id="row' + i + '">';
             for (let j of col) {
-                result += '<td id="' + j + i + '">' + j + i + '</td>';
+                HTML += '<td id="' + j + i + '">' + j + i + '</td>';
             }
-            result += '</tr>';
+            HTML += '</tr>';
           }
-        result += '</table>';
-        return result;
+        HTML += '</table>';
+        return HTML;
     }
 
     // Task 4
@@ -100,7 +100,7 @@
         return FEN;
     }
 
-    function renderCompleteChessboard(fen, pov){
+    function renderChessboard_task4(fen, pov){
         //  es wir von korrekten FEN ausgegangen
 
         // POV Schwarz
@@ -146,4 +146,47 @@
             table.appendChild(tr);
           }
         document.getElementById("chessboardElement").appendChild(table);
+    }
+
+    // Task 5
+    function renderChessboard_task5(pov){
+        // Erstellung eines HTML-Strings
+
+        // 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();
+        }
+
+        let HTML = '';
+        HTML += '<table id="chessboard">';
+
+        for (let i of row) {
+            HTML += '<tr id="row' + i + '">';
+            for (let j of col) {
+                HTML += '<td id="' + j + i + '"><span class="boardPosition">' + j + i + '</span><span class="chessPiece"></span></td>';
+            }
+            HTML += '</tr>';
+          }
+        HTML += '</table>';
+        //console.log(HTML);
+        return HTML;
+    }
+
+    function placePieces(fen){
+        //  es wir von korrekten FEN ausgegangen
+
+        // Array aus Unicode für Schachfiguren
+        let FEN = convertFEN(fen);
+        
+        // Schachbrett 
+        let squares = document.getElementsByClassName("chessPiece");
+
+        for (let i of squares){
+            i.innerHTML = FEN.shift(); // entfernt ersten Eintrag aus Array und gibt ihn zurück
+        }
     }
\ No newline at end of file

routes/index.js

@@ -3,7 +3,8 @@ var router = express.Router();
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express', pov: 'w', fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR' });
+  // res.render('index', { title: 'Express', pov: 'w', fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR' });
+  res.render('index', { title: 'Express', pov: 'b', fen: 'RNBKQBNR/PPPPPPPP/8/8/8/8/pppppppp/rnbkqbnr' });
 });
 
 module.exports = router;

views/index.hbs

@@ -4,7 +4,14 @@
 
     <script src="javascripts/renderChessboard.js"></script>
     <script>
-        //document.getElementById("chessboardElement").innerHTML = renderChessboard("{{pov}}");
-        renderCompleteChessboard("{{fen}}", "{{pov}}");
+        // Task 2
+        // document.getElementById("chessboardElement").innerHTML = renderChessboard_task2("{{pov}}");
+
+        // Task 4 
+        // renderChessboard_task4("{{fen}}", "{{pov}}");
+
+        // Task 5
+        document.getElementById("chessboardElement").innerHTML = renderChessboard_task5("{{pov}}");
+        placePieces("{{fen}}");
     </script>
     
\ No newline at end of file