solved lab

code/public/connect4-winner.js

@@ -0,0 +1,64 @@
+let checkLine = function (color, board, y, x, length){
+    if (length === 4){
+        return true;
+    } else if(y === board.length || x === board[1].length){
+        return false
+    }
+    else if(board[y][x+1] === color){
+        return checkLine(color, board,y, x+1, length + 1)
+    } else {
+        return false;
+    }
+}
+let checkDownRight = function (color,board, y, x, length){
+    if (length === 4){
+        return true;
+    } else if((y + 1) === board.length || (x + 1) === board[1].length){
+        return false
+    }
+    else if(board[y+1][x+1] === color){
+        return checkDownRight(color,board,y + 1, x + 1, length + 1)
+    } else {
+        return false;
+    }
+}
+let checkDownLeft = function (color,board, y, x, length){
+    if (length === 4){
+        return true;
+    } else if((y + 1) === board.length || (x - 1)< 0){
+        return false
+    }
+    else if(board[y+1][x-1] === color){
+        return checkDownLeft(color,board,y + 1, x - 1, length + 1)
+    } else {
+        return false;
+    }
+}
+
+let checkDown = function (color,board, y, x, length){
+    if (length === 4){
+        return true;
+    } else if((y + 1)=== board.length){
+        return false
+    }
+    else if(board[y + 1][x] === color){
+        return checkDown(color,board,y + 1, x, length + 1)
+    } else {
+        return false;
+    }
+}
+
+
+let connect4Winner = function (color, board) {
+    for(let y = 0; y < board.length; y++){
+        for(let x = 0; x < board[y].length; x++){
+            if(board[y][x] === color){
+                if (checkLine(color,board,y,x,1) || checkDown(color,board,y,x,1) || checkDownRight(color,board,y,x,1) || checkDownLeft(color,board,y,x,1)){
+                    console.log('win')
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}

code/public/connect4.html

@@ -4,13 +4,13 @@
   <meta charset="UTF-8">
   <title>Vier gewinnt</title>
   <link rel="stylesheet" href="styles.css">
+  <script src="connect4-winner.js"></script>
   <script>
-
 /*
  *  This solution sould be considered as a proof of concept – the code 
  *  definitely needs some cleanup and documentation
  */
- 
+let datakey = ''
 let state = {
   board: [
     [ '', '', '', '', '', '', '' ],
@@ -20,15 +20,24 @@ let state = {
     [ '', '', '', '', '', '', '' ],
     [ '', '', '', '', '', '', '' ]
   ],
-  next: 'b'
+  next: 'blue'
 }
-
+const url = "http://localhost:3000/"
 const SERVICE = "http://localhost:3000/api/data/c4state?api-key=c4game"
 
 
 //  Initialize game
 //
 function initGame () {
+  console.log("initializing game")
+  fetch(url + "api/data/" + datakey + "?api-key=c4game", {
+    method: 'POST',
+    headers: { 'Content-type': 'application/json' },
+    body: JSON.stringify(state)
+  }).then(response => response.json()) 
+  .then(data => {
+    datakey = data.id
+  })
   let board = showBoard()
   attachEventHandler(board)
 }
@@ -37,14 +46,26 @@ function initGame () {
 //  Show board
 // 
 function showBoard () {
+  console.log("showing board")
+  let actualPlayerText = document.getElementById("actualPlayer")
+  if(actualPlayerText){
+    actualPlayerText.innerText = state.next
+  }
+  
+  
   let board = document.querySelector(".board")
 
   // first remove all fields
   while (board.firstChild) { board.removeChild(board.firstChild) }
 
-  // ...
   // your implementation
-  // ...
+  for(row = 0; row < state.board.length; row++) {
+        for(column = 0; column < state.board[0].length; column++) {
+          let attributes = {"id": column.toString() + ":" + row.toString(), "class": "field"}
+          let children = elt("div", {"class": state.board[row][column] + " piece"})
+          board.append(elt("div", attributes, children))
+        }
+      }
 
   return board
 }
@@ -68,38 +89,92 @@ function elt (type, attrs, ...children) {
 //  Attach event handler to board
 //
 function attachEventHandler (board) {
-  board.addEventListener("click", (e) => {
-    
-    // ...
+  console.log("attaching Eventhandler")
     // your implementation
-    // ...
-     
-    showBoard()
+    board.addEventListener("click", event => {
+      let field = event.target
+      if(field.classList.contains("piece")){
+        field = field.parentNode
+      }
+      let column = Number(field.id.split(":")[0])
+      console.log("calculated column")
+      setColumn(column)
+    
+      showBoard()
   })
 }
 
+function setColumn(column) {
+  console.log("setting Column")
+      let row = state.board.length - 1
+      const column_number = column
+      while(row >= 0){
+        if(state.board[row][column_number] !== ''){
+          row--
+        } else {
+          if(state.next === ''){
+            console.log("not setting Field becuase there is a winner.")
+          } else {
+            setField(row, column_number)
+          }
+          break
+        }
+      }
+  }
+
+  function setField(row, column) {
+      state.board[row][column] = state.next
+      showBoard()
+      if(connect4Winner(state.next, state.board)){
+        document.getElementById("state-text").innerText = "Player " + state.next + " won!"
+        state.next = ''
+      } else {
+        switchNextColor()
+      }      
+    }
+
+    function switchNextColor() {
+      if(state.next === "red") {
+        state.next = "blue"
+      } else {
+        state.next = "red"
+      }
+    }
+
 
 //  Get current state from server and re-draw board
 //
 function loadState () {
-
   // ...
   // your implementation
   // ...
-
+  console.log("loading State")
+  fetch(url + "api/data/" + datakey + "?api-key=c4game", {
+    method: 'GET',
+    headers: { 'Content-type': 'application/json' }
+  }).then(response => response.json()) 
+  .then(data => {
+    state = data
+    showBoard()
+  })
 }
 
 //  Put current state to server
 //
 function saveState () {
-
-  // ...
-  // your implementation
-  // ...
-
+  console.log("saving state")
+  fetch(url + "api/data/" + datakey + "?api-key=c4game", {
+    method: 'PUT',
+    headers: { 'Content-type': 'application/json' },
+    body: JSON.stringify(state)
+  }).then(response => response.json()) 
+  .then(data => {
+    state = data
+    showBoard()
+  })
 }
 
-  </script>
+</script>
 
 </head>
 <body>
@@ -109,6 +184,7 @@ function saveState () {
   <div class="controls">
     <button onclick="loadState()">Load</button>
     <button onclick="saveState()">Save</button>
+    <p id="state-text"><a id="actualPlayer"></a>'s turn</p>
   </div>
 
   <script>
@@ -116,4 +192,4 @@ function saveState () {
   </script>
 
 </body>
-</html>
+</html>