This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user