From 67c7e71c8d43c9179451c53d0e72f869aed30225 Mon Sep 17 00:00:00 2001
From: Richard Halsall <–richard-glyn.halsall@informatik.hs-fulda.e>
Date: Tue, 7 Feb 2023 14:27:32 +0100
Subject: [PATCH] =?UTF-8?q?Funktion=20zur=20Erstellung=20von=20Koordinaten?=
 =?UTF-8?q?=20auf=20der=20Canvas=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 schlangen_und_leitern/HTML.html       |  1 +
 schlangen_und_leitern/js/Bridge.js    |  9 ++++--
 schlangen_und_leitern/js/makeBoard.js | 40 ++++++++++++++++++++++++---
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/schlangen_und_leitern/HTML.html b/schlangen_und_leitern/HTML.html
index 88d001f..b6f01fb 100644
--- a/schlangen_und_leitern/HTML.html
+++ b/schlangen_und_leitern/HTML.html
@@ -27,6 +27,7 @@
 
 
     <div calss = container id="playArea" >    
+        <canvas id= "canvas"></canvas>
             <table id = "board"></table>
         <div class = container id="würfelBereich" style="display: none;" >
             <img src="/img/wurfle/f(1).png" id="face">
diff --git a/schlangen_und_leitern/js/Bridge.js b/schlangen_und_leitern/js/Bridge.js
index 4166766..b9381a5 100644
--- a/schlangen_und_leitern/js/Bridge.js
+++ b/schlangen_und_leitern/js/Bridge.js
@@ -23,8 +23,13 @@ function init(playerCount){
     document.getElementById("rollButton").addEventListener("click", function(){gameloop(boardArr,playerArray, playerCount);});
     
     playerInit(playerArray);
-    drawCanavas()
-    drawLine()
+    
+    
+    
+    ////////experiemnt
+    var canvasPointArr= [];
+    canvasPointGen(canvasPointArr);
+    drawCanavas();
 }
 
 function gameloop (boardArr, playerArray, playerCount){
diff --git a/schlangen_und_leitern/js/makeBoard.js b/schlangen_und_leitern/js/makeBoard.js
index 41c12e7..59d8330 100644
--- a/schlangen_und_leitern/js/makeBoard.js
+++ b/schlangen_und_leitern/js/makeBoard.js
@@ -106,20 +106,52 @@ function drawCanavas(){
     var board = document.getElementById("board");
     //get the tables measurements
     tableMes = board.getBoundingClientRect()
-
     tableWidth = tableMes.width;
     tableHight = tableMes.height;
     console.log(tableHight, tableWidth)
     //set canavas to table size 
     ctx.height = tableHight 
     ctx.width = tableHight 
-    //divide canvas x and y by the number of rows // coloums 
-
-    //find center of each cell
+}
 
+//canvas point objects
+function canvasPoint () {
+    this.cellNumber
+    this.x
+    this.y
 }
 
+function canvasPointGen(canvasPointArr){
+
+    //get canvas size
+    var canvas = document.getElementById("canvas");
+    //get induvidual cell sizes
+    cellSize = (canvas.width/10)
+    halfCell = (cellSize/2)
+    //starting position for both axises 
+    xTracker = halfCell
+    yTracker = halfCell
+    //tracker for cell count
+    let count = 100 
+
+//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--
+        }
 
+        yTracker += cellSize
+        }
+    }
 
 
 //function that draws a line using x,y cooridinates of two points