From 72b15be40377fd58fd63a8e52b90524c5b4b0bd2 Mon Sep 17 00:00:00 2001
From: Richard Halsall <–richard-glyn.halsall@informatik.hs-fulda.e>
Date: Wed, 8 Feb 2023 11:56:47 +0100
Subject: [PATCH] =?UTF-8?q?Funktion=20hinzugef=C3=BCgt,=20um=20Schlangen?=
 =?UTF-8?q?=20und=20Leitern=20auf=20dem=20Spielbrett=20zu=20zeichnen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 schlangen_und_leitern/js/Bridge.js    |   7 +-
 schlangen_und_leitern/js/makeBoard.js | 123 +++++++++++++++++++++-----
 2 files changed, 106 insertions(+), 24 deletions(-)

diff --git a/schlangen_und_leitern/js/Bridge.js b/schlangen_und_leitern/js/Bridge.js
index b9381a5..a83b074 100644
--- a/schlangen_und_leitern/js/Bridge.js
+++ b/schlangen_und_leitern/js/Bridge.js
@@ -28,8 +28,13 @@ function init(playerCount){
     
     ////////experiemnt
     var canvasPointArr= [];
-    canvasPointGen(canvasPointArr);
     drawCanavas();
+    canvasPointGen(canvasPointArr);
+    createBoardObjects(canvasPointArr, objectArr)
+
+
+
+
 }
 
 function gameloop (boardArr, playerArray, playerCount){
diff --git a/schlangen_und_leitern/js/makeBoard.js b/schlangen_und_leitern/js/makeBoard.js
index 59d8330..fbf55a7 100644
--- a/schlangen_und_leitern/js/makeBoard.js
+++ b/schlangen_und_leitern/js/makeBoard.js
@@ -116,7 +116,7 @@ function drawCanavas(){
 
 //canvas point objects
 function canvasPoint () {
-    this.cellNumber
+    this.cell
     this.x
     this.y
 }
@@ -126,63 +126,140 @@ function canvasPointGen(canvasPointArr){
     //get canvas size
     var canvas = document.getElementById("canvas");
     //get induvidual cell sizes
-    cellSize = (canvas.width/10)
-    halfCell = (cellSize/2)
+    canvasWidth = canvas.width
+    cellSize = canvas.width/10
+
+    halfCell = cellSize/2
     //starting position for both axises 
-    xTracker = halfCell
     yTracker = halfCell
     //tracker for cell count
     let count = 100 
+    
+    //flip to account for direction change
+    let direction = true // 0 is left to right, 1 is right to left
 
-//for each cell create a point at its center
+    //for each cell create a point at its center
     for(let y = 0; y < 10; y++){
-        for(let x = 0; x < 10; x++ ){
-            //create new cell point obj
-            let newPoint = new canvasPoint()
-            //set new objects variables
-            newPoint.cellNumber = count
-            newPoint.x = xTracker
-            newPoint.y = yTracker
-            canvasPointArr.push(newPoint)
-            //advance x and count
-            xTracker += cellSize
-            count--
+
+        if (direction == true){
+            var xTracker = halfCell
+            
+            for(let x = 0; x < 10; x++ ){
+                //create new cell point obj
+                let newPoint = new canvasPoint()
+                //set new objects variables
+                newPoint.cell = count
+                newPoint.x = xTracker
+                newPoint.y = yTracker
+                console.log("new point"+ newPoint.cell, newPoint.x, newPoint.y)
+                canvasPointArr.push(newPoint)
+                //advance x and count
+                xTracker += cellSize
+                //toggle direction
+                count--
+            }
+        }
+        else if (direction == false){
+            var xTracker = (canvasWidth - halfCell)
+            for(let x = 10; x > 0; x--){
+                //create new cell point obj
+                let newPoint = new canvasPoint()
+                //set new objects variables
+                newPoint.cell = count
+                newPoint.x = xTracker
+                newPoint.y = yTracker
+                console.log("new point"+ newPoint.cell, newPoint.x, newPoint.y)
+                canvasPointArr.push(newPoint)
+                //advance x and count
+                xTracker -= cellSize
+                //toggle direction
+                count--
+            }
         }
 
         yTracker += cellSize
+        if (direction == true){
+            direction = false
+        }
+        else if (direction == false){
+            direction = true
         }
     }
+    
+    
+}
+
 
 
 //function that draws a line using x,y cooridinates of two points
-function drawLine(startPosX, startPosY, endPosX, endPoseY){
+function drawLine(type, startPosX, startPosY, endPosX, endPosY){
 
     var c = document.getElementById("canvas");
     var ctx = c.getContext("2d");
     ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(537, 537);
+    ctx.moveTo(startPosX, startPosY);
+    ctx.lineTo(endPosX, endPosY);
     ctx.stroke();
+    ctx.lineWidth = 10;
+    switch (type) {
+        case "l":
+            ctx.strokeStyle = '#0FD71D';
+            break;
+    
+        case "s":
+            ctx.strokeStyle = '#E21317';
+            break;
+        default:
+    }
     ctx.strokeStyle;
 
 }
 
-function boardObjects(){
-
-
+function createBoardObjects(canvasPointArr, objectArray){
+    //loop through all object in the object array 
+        for(let i = 0; i < objectArray.length; i++){
+
+            let startCell = objectArray[i].start
+            let endCell = objectArray[i].end
+            
+            let startPointX;
+            let startPointY;
+            let endPointX;
+            let endPointY;
+
+                //find cell points on canvas
+            for(let j = 0; j < canvasPointArr.length; j++){
+               
+
+            if(canvasPointArr[j].cell == startCell){
+                    startPointX = canvasPointArr[j].x;
+                    startPointY =canvasPointArr[j].y
+                    console.log("start found")        
+            }
 
+            else if(canvasPointArr[j].cell == endCell){
+                endPointX = canvasPointArr[j].x;
+                endPointY =canvasPointArr[j].y
+                
+                console.log(endPointX, endPointX)        
+                }
 
 
 
 
-}
+            drawLine(objectArray[i].type,startPointX, startPointY, endPointX, endPointY)
 
 
 
+            
 
+    }
+          
 
 
+}
 
+}