WBE_Praktikum_7/code/public/connect4.html

<!doctype html>
<html lang="en">
<head>
  <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: [
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ]
  ],
  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)
}


//  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
}


//  Helper function for DOM manipulation
// 
function elt (type, attrs, ...children) {
  let node = document.createElement(type)
  for (a in attrs) {
    node.setAttribute(a, attrs[a])
  }
  for (let child of children) {
    if (typeof child != "string") node.appendChild(child)
    else node.appendChild(document.createTextNode(child))
  }
  return node
}


//  Attach event handler to board
//
function attachEventHandler (board) {
  console.log("attaching Eventhandler")
    // your implementation
    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 () {
  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>

</head>
<body>

  <div class="board"></div>
  
  <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>
    initGame()
  </script>

</body>
</html>