This commit is contained in:
Philippe Torrel
2026-09-24 14:40:26 +02:00
parent 8a51ee133a
commit 5e5bf95b84
23 changed files with 793 additions and 4 deletions
@@ -0,0 +1 @@
Ich bin file 01
@@ -0,0 +1 @@
Ich bin file 02
@@ -0,0 +1 @@
Ich bin file 03
@@ -0,0 +1 @@
Ich bin file 04
@@ -0,0 +1 @@
Ich bin file 05
@@ -0,0 +1 @@
Ich bin file 06
@@ -0,0 +1,12 @@
// const getFileBy = (path, encoding = 'utf-8') => {
// };
/*
Übung 12: Sechs Dateien einlesen
Erstelle die Dateien file_1.txt … file_6.txt und lies sie, wie soeben beschrieben, mit getFileContent(…) aus Codebeispiel 124 ein.
Was passiert, wenn eine Datei fehlt? Überprüfe die Fehlerbehandlung. Erweitere die Fehlermeldung so, dass ausgegeben wird, welche Dateien nicht gelesen werden konnten!
*/
@@ -0,0 +1,13 @@
{
"name": "u12_mehrere-dateien-auslesen",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module"
}
@@ -0,0 +1,77 @@
// TODO: imports
const IP_V = 4; // we use IP protocol version 4
const URL = 'google.de';
// TODO: your modifications
// 1.
// const getIpBy = () => {};
// 2.
// Promises Unterobjekt von Node
// const getPromisesIpBy = () => {};
// 3.
// Promisify Helferfunktion
// const getPromisifyIpBy =
// 4.
// Async await
// const getAsyncIpBy =
// Test Cases:
// =============================
getIpBy(URL, IP_V)
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(color.red(err));
});
getPromisesIpBy(URL)
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(color.red(err));
});
getPromisifyIpBy(URL, IP_V)
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(color.red(err));
});
getAsyncIpBy(URL, IP_V)
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(color.red(err));
});
/* Übung 13: Das Telefonbuch des Internets
Vielleicht hast du einmal die Webseite www.nodejs.com besucht? Dann hat dein Computer die so genannte IP-Adresse des Servers www.nodejs.com herausgefunden.
Ähnlich wie ein Telefonbuch ordnet das Domain Name System (DNS) jedem Server (Host) eine eindeutige IP-Adresse zu, unter der er über das Internet erreichbar ist.
Die Node.js-API bietet eine Funktion, um Namen im DNS nachzuschlagen: dns.lookup(…).
Die Übung besteht nun darin, obiges Beispiel so umzuschreiben, dass der Aufruf von dns.lookup(…) in eine Wrapper-Funkion verpackt wird.
Es sollen drei verschiedene Lösungen erstellt werden:
1. Ausführliche Variante mit eigenem Promise-Objekt als Ummantelung
2. Kurze Variante mit Promises-Unterobjekt (dns.promises)
3. Promisify-Variante mit util.promisify(…)
4. Async await Variante
*/
@@ -0,0 +1,16 @@
{
"name": "u13_dns-lookup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "module",
"dependencies": {
"chalk": "^6.0.0"
}
}
@@ -0,0 +1,49 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 14: Durchschnittsnoten berechnen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 14: Durchschnittsnoten berechnen</h2>
<p>
Gegeben ist eine Tabelle (gradesTable) mit Noten verschiedener Schüler in unterschiedlichen Fächern. Deine
Aufgabe ist es, zwei Funktionen zu schreiben, um die Daten auszuwerten.
</p>
<ol>
<li>
<strong>Durchschnitt pro Schüler (calculateAvgGrades):</strong> Schreibe eine Funktion, die die
Durchschnittsnote jedes Schülers (zeilenweise) berechnet. Das Ergebnis soll ein Array mit den
Durchschnittswerten der Schüler (Anna, Ben, Clara, David) sein.
</li>
<li>
<strong>Durchschnitt pro Fach (calculateAvgSubjects):</strong> Schreibe eine Funktion, die die
Durchschnittsnote jedes Fachs (spaltenweise) berechnet. Das Ergebnis soll ein Array mit den
Durchschnittswerten der Fächer (Mathematics, English, Biology, History) sein.
</li>
</ol>
<p>
<strong>Hinweis:</strong> Die erste Zeile der Tabelle enthält Überschriften, und die erste Spalte enthält
Namen. Diese müssen bei der Berechnung ignoriert werden. Runde alle Ergebnisse auf zwei Dezimalstellen.
</p>
</div>
</div>
</main>
<script>
'use strict';
const gradesTable = [
['Name', 'Mathematics', 'English', 'Biology', 'History'],
['Anna', 85, 92, 78, 88],
['Ben', 90, 88, 84, 79],
['Clara', 76, 95, 89, 91],
['David', 82, 79, 91, 85],
];
</script>
</body>
</html>
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 15: Einkaufsliste bearbeiten</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 15: Einkaufsliste bearbeiten</h2>
<p>
Erstelle eine Einkaufsliste als zweidimensionales Array mit Kategorien und Artikeln. Führe folgende
Änderungen durch:
</p>
<ol class="list">
<li>Entferne das zweite Element aus jeder Kategorie.</li>
<li>Füge jeweils ein neues Element hinzu.</li>
</ol>
</div>
</div>
</main>
<script>
'use strict';
const shoppingList = [
['Fruits', 'Apples', 'Bananas', 'Oranges'],
['Vegetables', 'Carrots', 'Broccoli', 'Spinach'],
['Dairy', 'Milk', 'Cheese', 'Yogurt'],
];
// Your code here
</script>
</body>
</html>
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 16: Geoquiz</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 16: Geoquiz</h2>
<p>
Eine Schule gibt die Entwicklung eines Geoquiz in Auftrag, bei dem Schüler die Hauptstädte verschiedener
Staaten nennen müssen. Deine Aufgabe besteht in der Entwicklung der Lösungsfunktion
<code>getCapitalOf</code>, die eine Hauptstadt zum übergebenen Staat (<code>country</code>) zurückliefert.
</p>
<ol class="list">
<li>Entferne das zweite Element aus jeder Kategorie.</li>
<li>Füge jeweils ein neues Element hinzu.</li>
</ol>
</div>
</div>
</main>
<script>
'use strict';
const countriesWithCapital = [
['UK', 'London'],
['France', 'Paris'],
['Germany', 'Berlin'],
['Switzerland', 'Bern'],
['Austria', 'Vienna'],
['Russia', 'Moscow'],
];
const getCapitalOf = () => {};
</script>
</body>
</html>
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 17: Lagerbestand erweitern</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 17: Lagerbestand erweitern</h2>
<p>
Füge eine neue Kategorie <strong>«Books»</strong> zu dem bestehenden dreidimensionalen Lagerbestandssystem
hinzu und trage zwei neue Produkte mit deren Lagerorten und Mengen ein.
</p>
</div>
</div>
</main>
<script>
'use strict';
const inventory = [
[
// Category: Electronics
['Shelf 1', 'Laptop', 10],
['Shelf 2', 'Smartphone', 25],
],
[
// Category: Clothing
['Shelf 1', 'T-Shirts', 50],
['Shelf 2', 'Jeans', 30],
],
[
// Category: Groceries
['Shelf 1', 'Milk', 100],
['Shelf 2', 'Bread', 80],
],
];
// Your code here
console.log(inventory);
/* Expected outcome:
[
[ // Electronics
['Shelf 1', 'Laptop', 10],
['Shelf 2', 'Smartphone', 25],
],
[ // Clothing
['Shelf 1', 'T-Shirts', 50],
['Shelf 2', 'Jeans', 30],
],
[ // Groceries
['Shelf 1', 'Milk', 100],
['Shelf 2', 'Bread', 80],
],
[ // Books
['Shelf 1', 'Novels', 40],
['Shelf 2', 'Non-fiction', 35],
],
]
*/
// Your code here
</script>
</body>
</html>
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 18: 3D Array Zugriff</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 18: 3D Array Zugriff</h2>
<p>
Greife auf das zweite Produkt in der <strong>«Clothing»</strong>-Kategorie zu und ändere die Menge von
<strong>«Jeans»</strong> von 30 auf 25.
</p>
</div>
</div>
</main>
<script>
'use strict';
const inventory = [
[
// Category: Electronics
['Shelf 1', 'Laptop', 10],
['Shelf 2', 'Smartphone', 25],
],
[
// Category: Clothing
['Shelf 1', 'T-Shirts', 50],
['Shelf 2', 'Jeans', 30],
],
[
// Category: Groceries
['Shelf 1', 'Milk', 100],
['Shelf 2', 'Bread', 80],
],
[
// Category: Books
['Shelf 1', 'Novels', 40],
['Shelf 2', 'Non-fiction', 35],
],
];
// Your code here
console.log(inventory);
/*
Expected outcome:
[
[ // Electronics
['Shelf 1', 'Laptop', 10],
['Shelf 2', 'Smartphone', 25],
],
[ // Clothing
['Shelf 1', 'T-Shirts', 50],
['Shelf 2', 'Jeans', 25], // Changed quantity
],
// ...
]
*/
</script>
</body>
</html>
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 19: Bildbearbeitung – Helligkeit erhöhen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 19: Bildbearbeitung – Helligkeit erhöhen</h2>
<p>
Schreibe eine Funktion <code>increaseBrightness</code>, die die Helligkeit aller Pixel in einem 3D Bildarray
um einen bestimmten Wert erhöht. Stelle sicher, dass die RGB-Werte nicht über <code>255</code> hinausgehen.
</p>
<p>
Die Funktion nimmt ein dreidimensionales Array <code>image</code> und einen Wert <code>value</code> als
Parameter. Ziel ist es, die Helligkeit jedes Pixels im Bild zu erhöhen, indem jeder RGB-Wert um
<code>value</code> erhöht wird. Stelle dabe sicher, dass kein RGB-Wert den maximalen Wert von
<code>255</code> überschreitet.
</p>
</div>
</div>
</main>
<script>
'use strict';
const image = [
[
// Row 1
[100, 150, 200], // Pixel 1
[50, 100, 150], // Pixel 2
],
[
// Row 2
[25, 75, 125], // Pixel 3
[200, 225, 250], // Pixel 4
],
];
const increaseBrightness = (image, value) => {
// Your code here
};
const newImage = increaseBrightness(image, 30);
console.log(newImage);
/*
Expected outcome:
[
[
[130, 180, 230],
[80, 130, 180],
],
[
[55, 105, 155],
[230, 255, 255],
],
]
*/
</script>
</body>
</html>
Binary file not shown.
@@ -5,17 +5,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Vorlage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Vorlage</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const boardInStartPosition = [
const outputEl = document.querySelector('.output');
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
@@ -26,11 +40,11 @@
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
console.log(boardInStartPosition[7][6]); // => '♘'
console.log(boardInStartPosition[5][5]); // => '◻'
// console.log(boardInStartPosition()[7][6]); // => '♘'
// console.log(boardInStartPosition()[5][5]); // => '◻'
// Im Schachjargon: 'g1f3'
const emptyBoard = [
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
@@ -40,6 +54,50 @@
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4' -> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4' -> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => 'e' -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num; // => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
board[originY][originX] = emptyBoard()[originY][originY];
return board;
};
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
console.log(board2String(execMove(boardInStartPosition(), 'e2e4')));
outputEl.innerHTML = board2Html(execMove(boardInStartPosition(), 'e2e4'));
</script>
</body>
</html>
@@ -0,0 +1,113 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Vorlage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 2rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Vorlage</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
// console.log(boardInStartPosition()[7][6]); // => '♘'
// console.log(boardInStartPosition()[5][5]); // => '◻'
// Im Schachjargon: 'g1f3'
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4' -> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4' -> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => 'e' -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num; // => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
board[originY][originX] = emptyBoard()[originY][originY];
return board;
};
const execMoves = (moves = []) => {
// [[BOARD], 'e2e4', 'e7e5', 'f2f4'].reduce((board,move) => execMove(board,move))
return moves.reduce((board, move) => {
return execMove(board, move);
}, boardInStartPosition());
// return moves.reduce(execMove, boardInStartPosition());
};
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
console.log(board2String(execMoves(['e2e4', 'e7e5', 'f2f4'])));
outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
</script>
</body>
</html>
@@ -0,0 +1,29 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>History Values in einem Array definieren</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>History Values in einem Array definieren</h1>
<p>Alle vergangenen Schachzüge in einer Array Position vorliegen</p>
</div>
</main>
<script>
'use strict';
const getMovesHistoryArray = (moves = []) => {
return moves.map((_, idx, ar) => {
return ar.slice(0, idx + 1);
});
};
console.log(getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']));
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
</script>
</body>
</html>
@@ -0,0 +1,137 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Vorlage</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 2rem;
}
.chess-board {
margin: 2rem 0;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Vorlage</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
// console.log(boardInStartPosition()[7][6]); // => '♘'
// console.log(boardInStartPosition()[5][5]); // => '◻'
// Im Schachjargon: 'g1f3'
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4' -> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4' -> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => 'e' -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num; // => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
board[originY][originX] = emptyBoard()[originY][originY];
return board;
};
const execMoves = (moves = []) => {
// [[BOARD], 'e2e4', 'e7e5', 'f2f4'].reduce((board,move) => execMove(board,move))
return moves.reduce((board, move) => {
return execMove(board, move);
}, boardInStartPosition());
// return moves.reduce(execMove, boardInStartPosition());
};
const getMovesHistoryArray = (moves = []) => {
return moves.map((_, idx, ar) => {
return ar.slice(0, idx + 1);
});
};
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
// Mehrere Schachzüge visualisiert (jedes Board einzeln)
const allMoves = getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']);
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
let htmlBuffer = '';
allMoves.forEach((moves) => {
htmlBuffer += board2Html(execMoves(moves));
htmlBuffer += '<hr />';
console.log(board2String(execMoves(moves)));
console.log('===============');
});
outputEl.innerHTML = htmlBuffer;
// console.log(board2String(execMoves(['e2e4', 'e7e5', 'f2f4'])));
// outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
</script>
</body>
</html>