195 lines
4.6 KiB
HTML
195 lines
4.6 KiB
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> |