WBE_Miniprojekt/code/public/gamelogic.js

/*
 *  This solution sould be considered as a proof of concept – the code 
 *  definitely needs some cleanup and documentation
 */
import { render } from "./lib/suiweb.js"

let datakey = ''
let state = {
  board: [
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ],
    [ '', '', '', '', '', '', '' ]
  ],
  next: 'blue'
}
let stateSeq = []

const App = () => [Board, {board: state.board}]  
 
const Board = ({board}) => { 
  let flatBoard = [].concat(...board) 
  let fields = flatBoard.map((type) => [Field, {type}]) 
  return ( 
    ["div", {className: "board"}, ...fields] 
  ) 
} 

const Field = ({type}) => {  
  return (
    ["div", {className: "field"}, 
    ["div", {className: ("piece " + type)}]]
  )
} 

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)

  document.getElementById("loadFromServer").addEventListener("click", event => {loadStateFromServer() })
  document.getElementById("saveToServer").addEventListener("click", event => {saveStateToServer() })
  document.getElementById("loadFromStorage").addEventListener("click", event => {loadStateFromLocalStorage() })
  document.getElementById("saveToStorage").addEventListener("click", event => {saveStateToLocalStorage() })
  document.getElementById("clearStorage").addEventListener("click", event => {clearLocalStorage() })
  document.getElementById("undo").addEventListener("click", event => {undo() })

}


//  Show board

function showBoard () {  

  console.log("showing board")
  let actualPlayerText = document.getElementById("actualPlayer")
  if(actualPlayerText){
    actualPlayerText.innerText = state.next
  }
  const app = document.querySelector(".app") 
  render([App], app)
  return app 
} 


//  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 = Array.prototype.indexOf.call(field.parentNode.children, field) % state.board[1].length
      console.log("calculated column", 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) {
      stateSeq.push(state)
      state = setInObj(state, "board", setInList(state.board, row, setInList(state.board[row], column, state.next)))
      //state.board[row][column] = state.next
      showBoard()
      if(connect4Winner(state.next, state.board)){
        document.getElementById("state-text").innerText = "Player " + state.next + " won!"
        state = setInObj(state, "next", "")
        //state.next = ''
      } else {
        switchNextColor()
      }
    }

    function switchNextColor() {
      if(state.next === "red") {
        state = setInObj(state, "next", "blue")
        //state.next = "blue"
      } else {
        state = setInObj(state, "next", "red")
        //state.next = "red"
      }
    }


//  Get current state from server and re-draw board
//
function loadStateFromServer () {
  // ...
  // your implementation
  // ...
  console.log("loading State from Server")
  fetch(url + "api/data/" + datakey + "?api-key=c4game", {
    method: 'GET',
    headers: { 'Content-type': 'application/json' }
  }).then(response => response.json()) 
  .then(data => {
    state = data
    stateSeq = []
    showBoard()
  })
}

//  Put current state to server
//
function saveStateToServer () {
  console.log("saving state To Server")
  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()
  })
}

function loadStateFromLocalStorage() {
  console.log("loading State from LocalStorage")
  if(localStorage.getItem("state")){
    state = JSON.parse(localStorage.getItem("state"))
    stateSeq = []
  } else {
    console.log("no saved State in Localstorage")
  }
  showBoard()
}

function saveStateToLocalStorage() {
  console.log("saving State to LocalStorage")
  localStorage.setItem("state", JSON.stringify(state))
}

function clearLocalStorage() {
  console.log("clearing localStorage")
  localStorage.clear()
}

function undo() {
    if(stateSeq.length > 0) {
        console.log("undo")
        state = stateSeq.pop()
        showBoard()
    }
}

function setInList(lst, idx, val) {
    const newList = []
    lst.forEach(element => {
       newList.push(element) 
    });
    newList[idx] = val
    return newList
}

function setInObj(obj, attr, val) {
    const newObject = {}
    Object.keys(obj).forEach(key => {
        newObject[key] = obj[key]
    })
    newObject[attr] = val
    return newObject
}

export {initGame}