Skip to content
Snippets Groups Projects
Commit 0f9ff3cb authored by MaikoVoigt's avatar MaikoVoigt
Browse files

Tutorial 5 - aktualisierte Projektstruktur

parent 9117ad48
No related branches found
No related tags found
No related merge requests found
This diff is collapsed.
public/favicon.ico

18.9 KiB

export function placePieces(fen){
// es wir von korrekten FEN ausgegangen
// FEN wird aus Sicht von Weiß beschrieben
let board = document.getElementById("chessboard");
board.FEN = fen;
// POV Weiß
let row = ['8', '7', '6', '5', '4', '3', '2', '1'];
let col = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
// Array aus Unicode für Schachfiguren
let placement = convertFEN(fen);
// Suche nach Schachfigur über ID
for (let i of row) {
for (let j of col) {
let square = document.getElementById(j+i);
let chessPiece = square.getElementsByClassName("chessPiece");
chessPiece[0].innerHTML = placement.shift(); // entfernt ersten Eintrag aus Array und gibt ihn zurück
}
}
}
function convertFEN(fen){
// wandelt placement-String in Schachfiguren-Unicode Liste um
let FEN = fen.split(" ");
let placement = FEN[0];
// E steht für leeres (empty) Feld
placement = placement.replaceAll("8", "EEEEEEEE");
placement = placement.replaceAll("7", "EEEEEEE");
placement = placement.replaceAll("6", "EEEEEE");
placement = placement.replaceAll("5", "EEEEE");
placement = placement.replaceAll("4", "EEEE");
placement = placement.replaceAll("3", "EEE");
placement = placement.replaceAll("2", "EE");
placement = placement.replaceAll("1", "E");
placement = placement.replaceAll("/", "");
placement = placement.split("");
// Austausch aller Buchstaben mit Unicode für Schachfiguren
for (let i = 0; i < placement.length; i++) {
switch(placement[i]){
case "K":
placement[i] = "&#9812";
break;
case "Q":
placement[i] = "&#9813";
break;
case "R":
placement[i] = "&#9814";
break;
case "B":
placement[i] = "&#9815";
break;
case "N":
placement[i] = "&#9816";
break;
case "P":
placement[i] = "&#9817";
break;
case "k":
placement[i] = "&#9818";
break;
case "q":
placement[i] = "&#9819";
break;
case "r":
placement[i] = "&#9820";
break;
case "b":
placement[i] = "&#9821";
break;
case "n":
placement[i] = "&#9822";
break;
case "p":
placement[i] = "&#9823";
break;
default:
placement[i] = "";
break;
}
}
return placement;
}
async function getPossibleMoves(FEN, id) {
return await (await fetch(`${window.location.origin}/posibleMoves?FEN=${encodeURIComponent(FEN)}&id=${id}`, {method: "GET",}));
}
export async function clickField(event){
let id = event.currentTarget.id;
let board = document.getElementById("chessboard");
console.log(id);
let posibleFields = await getPossibleMoves(board.FEN, id);
console.log(posibleFields);
}
\ No newline at end of file
import * as chessPieceFunctionality from './chessPieceFunctionality.js'
window.clickField = chessPieceFunctionality.clickField;
chessPieceFunctionality.placePieces('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1');
\ No newline at end of file
// Tutorial 3
// Task 2
function renderChessboard_task2(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 + '">' + j + i + '</td>';
}
HTML += '</tr>';
}
HTML += '</table>';
return HTML;
}
// 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 renderChessboard_task4(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'];
// Array aus Unicode für Schachfiguren
let FEN = convertFEN(fen);
if (pov == 'w') {
// POV Weiß
row.reverse();
col.reverse();
}
else {
// POV Schwarz, FEN wird aber aus Sicht von Weiß beschrieben
FEN.reverse();
}
// Tabelle erstellen
let table = document.createElement("table");
table.id = "chessboard";
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);
}
// 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>';
return HTML;
}
function placePieces(fen){
// es wir von korrekten FEN ausgegangen
// FEN wird aus Sicht von Weiß beschrieben
// POV Weiß
let row = ['8', '7', '6', '5', '4', '3', '2', '1'];
let col = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
// Array aus Unicode für Schachfiguren
let FEN = convertFEN(fen);
// Suche nach Schachfigur über ID
for (let i of row) {
for (let j of col) {
let square = document.getElementById(j+i);
let chessPiece = square.getElementsByClassName("chessPiece");
chessPiece[0].innerHTML = FEN.shift(); // entfernt ersten Eintrag aus Array und gibt ihn zurück
}
}
}
\ No newline at end of file
var express = require('express');
var router = express.Router();
const chessboard = require('../server/renderChessboard.js');
// Task 5
function renderChessboard(pov){
// Erstellung eines HTML-Strings
const {createGrpcClient} = require('../server/grpcClient.js')
// POV Schwarz
let row = ['1', '2', '3', '4', '5', '6', '7', '8'];
let col = ['H', 'G', 'F', 'E', 'D', 'C', 'B', 'A'];
let moveGen = createGrpcClient;
if (pov == 'w') {
// POV Weiß
row.reverse();
col.reverse();
}
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Schachspiel', pov: chessboard.renderChessboard('b') });
});
let HTML = '';
HTML += '<table id="chessboard">';
router.get('/posibleMoves', function(req, res, next){
let FEN = req.query.FEN;
let id = req.query.id;
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>';
moveGen.GetPossibleMoves({current_boars: FEN, from: id,}, function(error, response) {
console.log("AAAAAAAAAAAAAAA");
if(error) response.sendStatus(500);
else {
console.log("HI");
let posibleFields = [];
for (let field of response.posible_moves){
posibleFields.push(field.to);
}
HTML += '</tr>';
res.send(posibleFields);
}
HTML += '</table>';
return HTML;
}
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Schach', pov: renderChessboard('b'), fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR' });
});
});
module.exports = router;
const grpc = require('@grpc/grpc-js');
const path = require('path');
const protoLoader = require('@grpc/proto-loader');
let PROTO_PATH = path.resolve(__dirname, 'protobuf', 'move_generator.proto');
let packageDefinition = protoLoader.loadSync(
PROTO_PATH,
{keepCase: true,
longs: String,
enums: String,
defaults: true,
oneofs: true
});
let moveGenDef = grpc.loadPackageDefinition(packageDefinition).move_generator ;
let moveGen = new moveGenDef.MoveGenerator("vsrstud02.informatik.tu chemnitz.de:50051", grpc.credentials.createInsecure());
const createGrpcClient = () => {
return new moveGenDef.MoveGenerator("vsrstud02.informatik.tu chemnitz.de:50051", grpc.credentials.createInsecure());
};
module.export = {createGrpcClient};
\ No newline at end of file
File moved
function renderChessboard(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 + '" onclick="clickField(event)" ><span class="boardPosition">' + j + i + '</span><span class="chessPiece"></span></td>';
}
HTML += '</tr>';
}
HTML += '</table>';
return HTML;
}
module.exports = {renderChessboard};
\ No newline at end of file
......@@ -17,4 +17,158 @@
return list.flat();
}
flatten()
\ No newline at end of file
flatten()
// Tutorial 3
// Task 2
function renderChessboard_task2(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 + '">' + j + i + '</td>';
}
HTML += '</tr>';
}
HTML += '</table>';
return HTML;
}
// 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 renderChessboard_task4(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'];
// Array aus Unicode für Schachfiguren
let FEN = convertFEN(fen);
if (pov == 'w') {
// POV Weiß
row.reverse();
col.reverse();
}
else {
// POV Schwarz, FEN wird aber aus Sicht von Weiß beschrieben
FEN.reverse();
}
// Tabelle erstellen
let table = document.createElement("table");
table.id = "chessboard";
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);
}
\ No newline at end of file
<!-- Tutorial 3 -->
<!-- Task 2 -->
<div id="chessboardElement">{{{pov}}}</div>
<div id="chessboardElement">{{{pov}}}</div>
<script src="javascripts/renderChessboard.js"></script>
<script>
placePieces("{{fen}}");
</script>
\ No newline at end of file
<script src="javascripts/main.js" type="module"></script>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment