Tutorial 5 - gRPC-Dienst funktioniert endlich

app.js

@@ -7,8 +7,6 @@ var logger = require('morgan');
 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
 
-//const {createGrpcClient} = require('./server/grpcClient.js')
-
 var app = express();
 
 // view engine setup
@@ -24,11 +22,6 @@ app.use(express.static(path.join(__dirname, 'public')));
 app.use('/', indexRouter);
 app.use('/users', usersRouter);
 
-//let moveGen = createGrpcClient;
-
-// console.log(moveGen);
-// app.locals["moveGen"] = moveGen;
-
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
   next(createError(404));

public/javascripts/chessPieceFunctionality.js

@@ -95,23 +95,36 @@ function convertFEN(fen){
     }
     return placement;
 }
-
 async function getPossibleMoves(FEN, id) {
-    return await (await fetch(`${window.location.origin}/posibleMoves?FEN=${encodeURIComponent(FEN)}&id=${id}`, {method: "GET",}));
+    const response = await fetch(`${window.location.origin}/possibleMoves?FEN=${encodeURIComponent(FEN)}&id=${id}`);
+    return await response.json(); // Konvertiert die Antwort in ein JSON-Objekt
+}
+
+async function ValidateMove(){
+
+    console.log("Hier geht#s weiter!");
 }
 
 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);
-
-
+    if (document.getElementById(id).classList.contains('highlighted')){
+        let validatedMove = await ValidateMove();
 
+    }
+    else {
+        let possibleFields = await getPossibleMoves(board.FEN, id);
 
+        let highlightedElements = document.querySelectorAll('.highlighted');
+        highlightedElements.forEach(function(element) {element.classList.remove('highlighted');});
 
-}
\ No newline at end of file
+        for(let field of possibleFields){
+            let element = document.getElementById(field);
+            element.classList.add("highlighted");
+        }
+    }
+    
+    
+    
+}

public/stylesheets/style.css

@@ -68,3 +68,23 @@ a {
 #chessboard tr:nth-child(2n+1) td:nth-child(2n+1) .boardPosition{
   color: var(--square-dark-color);
 }
+
+@keyframes blink {
+  0%, 100% { opacity: 0; }
+  50% { opacity: 1; }
+}
+
+.highlighted::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ef6b3f85;
+  opacity: 0;
+  animation: blink 2s infinite;
+  z-index: 1;
+}
+

routes/index.js

@@ -10,26 +10,46 @@ let moveGen = createGrpcClient();
 
 /* GET home page. */
 router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Schachspiel', pov: chessboard.renderChessboard('b') });
+  res.render('index', { title: 'Schachspiel', pov: chessboard.renderChessboard('w') });
 });
 
-router.get('/posibleMoves', function(req, res, next){
+router.get('/possibleMoves', function(req, res, next){
   let FEN = req.query.FEN;
   let id = req.query.id;
 
   // Erstelle das Anfrageobjekt entsprechend der Proto-Datei
   let request = {
     current_board: { fen: FEN },
-    from: id // Stelle sicher, dass 'id' dem Enum 'Square' entspricht.
+    from: id 
+  };
+
+  moveGen.GetPossibleMoves(request, function(error, response) {
+    if(error) res.sendStatus(500);
+    else {
+      let posibleFields = []; // !!! Ich brauche alle Daten später für Validate
+      for (let field of response.possible_moves){
+        posibleFields.push(field.to);
+      }
+      res.send(posibleFields);
+    }
+  });
+});
+
+router.get('/validate', function(req, res, next){
+  let FEN = req.query.FEN;
+  let id = req.query.id;
+
+  // Erstelle das Anfrageobjekt entsprechend der Proto-Datei
+  let request = {
+    current_board: { fen: FEN },
+    from: id
   };
 
   moveGen.GetPossibleMoves(request, function(error, response) {
-    console.log(error)
     if(error) res.sendStatus(500);
     else {
-      console.log("HI");
       let posibleFields = [];
-      for (let field of response.posible_moves){
+      for (let field of response.possible_moves){
         posibleFields.push(field.to);
       }
       res.send(posibleFields);

server/grpcClient.js

@@ -16,7 +16,7 @@ let packageDefinition = protoLoader.loadSync(
 let moveGenDef = grpc.loadPackageDefinition(packageDefinition).move_generator;
 
 const createGrpcClient = () => {
-    let moveGen = new moveGenDef.MoveGenerator("vsrstud02.informatik.tu chemnitz.de:50051", grpc.credentials.createInsecure());
+    let moveGen = new moveGenDef.MoveGenerator("vsrstud02.informatik.tu-chemnitz.de:50051", grpc.credentials.createInsecure());
     return moveGen;
 };