changed code -> You can now move pieces, removed temp. debug code

code.js

@@ -12,6 +12,7 @@ let bottomRight;
 let bottomLeft;
 let rowMin;
 let rowMax;
+let selectedPiece;
 let somethingIsSelected = false;
 
 for(let i = 0; i < 64; i++){
@@ -29,11 +30,6 @@ for(let i = 0; i < 8; i++){
     document.getElementById("field"+fieldId).piece = 2;                                                                 //Setzt die piece Variable von Feld 0 bis 8 auf 1 -> Diese Felder haben einen Spielstein von Spieler 1
 }
 
-/* ---------- DEBUG, NICHT PERMANENT ---------- */
-document.getElementById("field41").piece = 1;
-document.getElementById("field34").piece = 2;
-/* ---------- DEBUG, NICHT PERMANENT ---------- */
-
 drawPieces();
 resetValidMoves();
 
@@ -62,18 +58,26 @@ function selectField(field){
         field.style.backgroundColor = "rgb(16,43,202, 0.3)";
         field.selected = 1;
         if(field.piece === 1){
+            selectedPiece = field;
             validMovesPlayer1(field);
         } else if (field.piece === 2){
+            selectedPiece = field;
             validMovesPlayer2(field);
         }
     } else if (field.selected === 1){
-        for (let i = 0; i < 64; i++) {
-            fieldId = i.toString();
-            document.getElementById("field" + fieldId).style.backgroundColor = "rgb(255,255,255, 1)";
-            document.getElementById("field" + fieldId).validMove = 0;
-        }
         field.selected = 0;
         somethingIsSelected = false;
+        resetValidMoves();
+    } else if (field.validMove !== 0){
+        field.piece = selectedPiece.piece;
+        selectedPiece.piece = 0;
+        drawPieces();
+        resetValidMoves();
+        for(let i = 0; i < 64; i++){
+            fieldId = i.toString();
+            document.getElementById("field"+fieldId).selected = 0;
+            somethingIsSelected = false;
+        }
     }
 }
 function validMovesPlayer1(field){
@@ -136,13 +140,13 @@ function validMovesPlayer1(field){
             right.validMove = 2;
         }
     }
-    if((field.fieldNum - 9) >= (rowMin - 8)) {
+    if((field.fieldNum - 9) >= (rowMin - 8) && (field.fieldNum - 9) >= 0) {
         topLeft = document.getElementById("field" + (field.fieldNum - 9).toString());
         if (topLeft.piece === 2){
             topLeft.validMove = 2;
         }
     }
-    if((field.fieldNum - 7) <= (rowMax - 8)) {
+    if((field.fieldNum - 7) <= (rowMax - 8) && (field.fieldNum - 7) >= 0) {
         topRight = document.getElementById("field" + (field.fieldNum - 7).toString());
         if (topRight.piece === 2){
             topRight.validMove = 2;
@@ -217,13 +221,13 @@ function validMovesPlayer2(field){
             right.validMove = 2;
         }
     }
-    if((field.fieldNum + 7) >= (rowMin + 8)) {
+    if((field.fieldNum + 7) >= (rowMin + 8) && (field.fieldNum + 7) < 64) {
         bottomLeft = document.getElementById("field" + (field.fieldNum + 7).toString());
         if (bottomLeft.piece === 1){
             bottomLeft.validMove = 2;
         }
     }
-    if((field.fieldNum + 9) <= (rowMax + 8)) {
+    if((field.fieldNum + 9) <= (rowMax + 8) && (field.fieldNum + 9) < 64) {
         bottomRight = document.getElementById("field" + (field.fieldNum + 9).toString());
         if (bottomRight.piece === 1){
             bottomRight.validMove = 2;
@@ -242,5 +246,6 @@ function resetValidMoves(){
     for(let i = 0; i < 64; i++){
         let fieldId = i.toString();
         document.getElementById("field"+fieldId).validMove = 0;
+        document.getElementById("field" + fieldId).style.backgroundColor = "rgb(255,255,255, 1)";
     }
 }