solved Lab
This commit is contained in:
schrom01
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
<!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 src="render-sjdon.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
|
||||
let element = []
|
||||
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 = ["div", {"class": state.board[row][column] + " piece"}]
|
||||
element.push(["div", attributes, children])
|
||||
}
|
||||
}
|
||||
renderSJDON(element, board)
|
||||
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 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
|
||||
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 loadStateToLocalStorage() {
|
||||
console.log("loading State from LocalStorage")
|
||||
if(localStorage.getItem("state")){
|
||||
state = JSON.parse(localStorage.getItem("state"))
|
||||
} else {
|
||||
console.log("no saved State in Localstorage")
|
||||
}
|
||||
showBoard()
|
||||
}
|
||||
|
||||
function saveStateFromLocalStorage() {
|
||||
console.log("saving State to LocalStorage")
|
||||
localStorage.setItem("state", JSON.stringify(state))
|
||||
}
|
||||
|
||||
function clearLocalStorage() {
|
||||
console.log("clearing localStorage")
|
||||
localStorage.clear()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="board"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="loadStateFromServer()">Load from Server</button>
|
||||
<button onclick="saveStateToServer()">Save to Server</button>
|
||||
<button onclick="loadStateToLocalStorage()">Load from LocalStorage</button>
|
||||
<button onclick="saveStateFromLocalStorage()">Save to LocalStorage</button>
|
||||
<button onclick="clearLocalStorage()">Clear LocalStorage</button>
|
||||
<p id="state-text"><a id="actualPlayer"></a>'s turn</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
initGame()
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
function renderSJDON(elements, appRoot) {
|
||||
const htmlNodes = []
|
||||
|
||||
if(Array.isArray(elements[0])){
|
||||
elements.forEach(element => {
|
||||
htmlNodes.push(createHTMLNode(element, appRoot))
|
||||
})
|
||||
} else {
|
||||
htmlNodes.push(createHTMLNode(elements, appRoot))
|
||||
}
|
||||
|
||||
htmlNodes.forEach(node => {
|
||||
appRoot.appendChild(node)
|
||||
})
|
||||
}
|
||||
|
||||
function addAttributes(htmlNode, attributes) {
|
||||
for (const key in attributes) {
|
||||
htmlNode.setAttribute(key, attributes[key])
|
||||
}
|
||||
}
|
||||
|
||||
function createHTMLNode(element, appRoot){
|
||||
if(Array.isArray(element)) {
|
||||
let htmlNode = document.createElement(element[0])
|
||||
if(element.length == 3) {
|
||||
addAttributes(htmlNode, element[1])
|
||||
renderSJDON(element[2], htmlNode)
|
||||
} else if(typeof element[1] === "string") {
|
||||
renderSJDON(element[1], htmlNode)
|
||||
} else {
|
||||
addAttributes(htmlNode, element[1])
|
||||
}
|
||||
return htmlNode
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.board {
|
||||
width: 84vmin;
|
||||
margin: auto;
|
||||
outline: 1px solid black;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.board .field {
|
||||
border: 1px solid black;
|
||||
width: 12vmin;
|
||||
height: 12vmin;
|
||||
}
|
||||
|
||||
.board .field .piece {
|
||||
width: 10vmin;
|
||||
height: 10vmin;
|
||||
border-radius: 50%;
|
||||
margin: 1vmin;
|
||||
}
|
||||
.board .field .blue {
|
||||
background-color: blue;
|
||||
}
|
||||
.board .field .red {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
}
|
||||
.controls button {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
}
|
||||
Reference in New Issue
Block a user