fix: fixed the placing of walls and added the robot image

4 files changed, 74 insertions, 45 deletions

diff --git a/index.html b/index.html
index f24f75a..9de4f62 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,8 @@
             Click anywhere on the screen to move the robot!
         </p>
         <button id="reset">Reset map</button>
+        <img id="robot" src="robot.png" alt="robot image" style="height: 15vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
         <canvas id="drawing-board">
-            <div id="robot"></div>
         </canvas>
 
         <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
diff --git a/index.js b/index.js
index 4498115..fef1073 100644
--- a/index.js
+++ b/index.js
@@ -2,32 +2,37 @@ const canvas = document.getElementById('drawing-board');
 const ctx = canvas.getContext('2d');
 const reset = document.getElementById("reset");
 
+robot = document.getElementById('robot');
+
 const canvasOffsetX = canvas.offsetLeft;
 const canvasOffsetY = canvas.offsetTop;
 
+robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
+robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
+
+let scale = 2.5
+
 canvas.width = window.innerWidth - canvasOffsetX * 2;
 canvas.height = window.innerHeight - canvasOffsetY * 2;
 
+const tr = {x: canvas.width/2 + canvasOffsetX, y: canvas.height/2 + canvasOffsetY, a: 0}
+ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)
+
 reset.style.top = canvasOffsetY * 2 + "px";
 reset.style.right = canvasOffsetX * 2 + "px";
 
-let isPainting = false;
 let lineWidth = 2;
 let strokeColor = "red"
 let drawings = [];
+let crosses = [];
 
 ctx.lineWidth = lineWidth;
 ctx.lineCap = 'square';
 ctx.strokeStyle = strokeColor;
+ctx.fillStyle = "red";
 
-const draw = (x, y) => {
-    if (!isPainting) {
-        return;
-    }
-    
-
-    ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY);
-    drawings.push({x : (x - canvasOffsetX)/canvas.width, y : (y - canvasOffsetY)/canvas.height});
+const wall = (x, y) => {
+    ctx.fillRect(x * canvas.width - canvasOffsetX, y * canvas.height - canvasOffsetY, 30, 30);
     ctx.stroke();
     ctx.beginPath();
 }
@@ -39,60 +44,84 @@ const drawCross = (x, y) => {
     ctx.lineTo(x - 5, y + 5);
     ctx.stroke();
     ctx.beginPath();
-    setTimeout( ()=>{
-        ctx.fillStyle = "aliceblue";
-        ctx.fillRect(x - 7, y - 7, 14, 14);
-    }, 1 * 1000);
 }
 
 canvas.addEventListener('mousedown', (e) => {
-    isPainting = true;
-    drawCross(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
+    crosses.push({x: e.layerX - canvasOffsetX, y: e.layerY - canvasOffsetY});
+    // moveTo((e.layerX - canvasOffsetX - canvas.width/2) * scale, (e.layerY - canvasOffsetY - canvas.height/2) * scale)
 
+    tr.a = Math.atan((-e.layerX + canvasOffsetX + canvas.width/2)/(e.layerY - canvasOffsetY - canvas.height/2))
+    if ( e.layerY - canvasOffsetY > canvas.height/2 )
+    {
+        tr.a += Math.PI
+    }
+
+    // if wall detected then 
+    // drawings.push({x: (canvasOffsetX - robot.width/2)/canvas.width, y: -(20 * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
+    
+    update()
 });
 
-/* canvas.addEventListener('mouseup', (e) => {
-    isPainting = false;
-    drawings.push({x : -1, y : -1})
-    ctx.stroke();
-    ctx.beginPath();
-}); */
+/* canvas.addEventListener('touchstart', (e) => {
+    drawCross(e.targetTouches[0].layerX, e.targetTouches[0].layerY);
+    crosses.push({x: e.targetTouches[0].layerX - canvasOffsetX, y: e.targetTouches[0].layerY - canvasOffsetY});
+    // moveTo((e.targetTouches[0].layerX - canvasOffsetX - canvas.width/2) * scale, (e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2) * scale)
 
-// canvas.addEventListener('mousemove', (e) => draw(e.clientX, e.clientY));
+    tr.a = Math.atan((-e.targetTouches[0].layerX + canvasOffsetX + canvas.width/2)/(e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2))
+    if ( e.targetTouches[0].layerY - canvasOffsetY > canvas.height/2 )
+    {
+        tr.a += Math.PI
+    }
 
-canvas.addEventListener('touchstart', (e) => {
-    isPainting = true;
-    drawCross(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
+    // if wall detected then 
+    // drawings.push({x: (canvasOffsetX - robot.width/2)/canvas.width, y: -(20 * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
+    
+    update()
 });
+ */
 
-/* canvas.addEventListener('touchend', (e) => {
-    isPainting = false;
-    drawings.push({x : -1, y : -1})
-    ctx.stroke();
-    ctx.beginPath();
-}); */
-
-// canvas.addEventListener('touchmove', (e) => draw(e.targetTouches[0].clientX, e.targetTouches[0].clientY));
 reset.onclick = () => {
     drawings = [];
-    redrawCanvas();
+    crosses = [];
+    tr.x = canvas.width/2 + canvasOffsetX
+    tr.y = canvas.height/2 + canvasOffsetY
+    tr.a = 0
+    update();
 }
-function redrawCanvas() {
+
+function resizeCanvas() {
     canvas.width = window.innerWidth - canvasOffsetX * 2;
     canvas.height = window.innerHeight - canvasOffsetY * 2;
     ctx.strokeStyle = strokeColor;
     ctx.lineWidth = lineWidth;
     ctx.lineCap = 'round';
+    ctx.fillStyle = "red";
+    robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
+    robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
+}
+
+function redrawCanvas(){
     drawings.forEach(element => {
-        if (element.x >= 0 && element.y >= 0){
-            ctx.lineTo(element.x * canvas.width, element.y * canvas.height);
-            ctx.stroke();
-        }
-        else {
-            ctx.stroke();
-            ctx.beginPath();
-        }
+        ctx.setTransform(1, 0, 0, 1, 0, 0)
+        ctx.translate(element.tr.x, element.tr.y)
+        ctx.rotate(element.tr.a)
+        wall(element.x, element.y);
     });
 }
 
-window.onresize = redrawCanvas;
\ No newline at end of file
+function update(){
+    resizeCanvas();
+    ctx.setTransform(1,0,0,1,0,0);
+    for (let cross of crosses){
+        drawCross(cross.x, cross.y)
+    }
+    redrawCanvas();
+}
+
+const updateOnFrame = () => {
+    update();
+    requestAnimationFrame(updateOnFrame)
+}
+
+//updateOnFrame();
+window.onresize = update;
\ No newline at end of file
diff --git a/robot.pdn b/robot.pdn
index e40503c..b5d40b1 100644
--- a/robot.pdn
+++ b/robot.pdn
diff --git a/robot.png b/robot.png
new file mode 100644
index 0000000..1c654b2
--- /dev/null
+++ b/robot.png