proto: working spinning robot and cross image but no translate worky uwu

4 files changed, 61 insertions, 36 deletions

diff --git a/cross.png b/cross.png
new file mode 100644
index 0000000..404d45f
--- /dev/null
+++ b/cross.png
diff --git a/index.html b/index.html
index 9de4f62..1623c45 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,12 @@
             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%)">
+        <div id="robot">
+            <img src="robot.png" alt="robot image" style="height: 10vh;">
+        </div>
+        <div id="cross">
+            <img src="cross.png" alt="cross image" style="height: 20px">
+        </div>
         <canvas id="drawing-board">
         </canvas>
 
diff --git a/index.js b/index.js
index e0d065f..b987340 100644
--- a/index.js
+++ b/index.js
@@ -3,19 +3,20 @@ const ctx = canvas.getContext('2d');
 const reset = document.getElementById("reset");
 
 robot = document.getElementById('robot');
+cross = document.getElementById('cross');
 
 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 = 1
+let scale = 2
 
 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}
+//robot.style.top = canvas.height/2 - robot.height/2 - canvasOffsetY;
+//robot.style.left = canvas.width/2 - robot.width/2 - canvasOffsetX;
+
+const tr = {x: 0, y: 0, a: 0}
 ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)
 
 reset.style.top = canvasOffsetY * 2 + "px";
@@ -24,7 +25,6 @@ reset.style.right = canvasOffsetX * 2 + "px";
 let lineWidth = 2;
 let strokeColor = "red"
 let drawings = [];
-let crosses = [];
 
 ctx.lineWidth = lineWidth;
 ctx.lineCap = 'square';
@@ -32,43 +32,48 @@ ctx.strokeStyle = strokeColor;
 ctx.fillStyle = "red";
 
 const wall = (x, y) => {
-    console.log(x * canvas.width - canvasOffsetX - robot.width/2, y * canvas.height - canvasOffsetY, robot.width, 5);
-    ctx.fillRect(x * canvas.width - canvasOffsetX - robot.width/2, y * canvas.height - canvasOffsetY, robot.width, 5);
-    ctx.stroke();
-    ctx.beginPath();
-}
-
-const drawCross = (x, y) => {
-    ctx.moveTo(x - 5, y - 5);
-    ctx.lineTo(x + 5, y + 5);
-    ctx.moveTo(x + 5, y - 5);
-    ctx.lineTo(x - 5, y + 5);
+    ctx.fillRect(x * canvas.width - canvasOffsetX - robot.offsetWidth/2, y * canvas.height - canvasOffsetY, robot.offsetWidth, 5);
     ctx.stroke();
     ctx.beginPath();
 }
 
 canvas.addEventListener('mousedown', (e) => {
-    crosses.push({x: e.layerX - canvasOffsetX, y: e.layerY - canvasOffsetY});
+    cross.style.visibility = "visible";
+
+    cross.style.left = e.layerX - canvasOffsetX + "px"
+    cross.style.top = e.layerY - canvasOffsetY + "px"
+
     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.atan((e.layerX - document.querySelector('body').clientWidth/2)/(e.layerY - document.querySelector('body').clientHeight/2))
+    if ( e.layerY < canvas.height/2 )
     {
         tr.a += Math.PI
     }
+    robot.style.transform = 'translate(-50%, -50%) rotate('+ -(tr.a+Math.PI)+'rad)';
 
+    // (-(e.layerX - canvasOffsetX - canvas.width/2) * scale, -(e.layerY - canvasOffsetY - canvas.height/2) * scale)
     update()
 });
 
 client.on('message', function (topic, message) {
     let val = message.toString();
-    if (message[0] >= 48 && message[0] < 58)
-	drawings.push({x: 0, y: -((parseInt(val) - 30) * scale + canvasOffsetY + robot.height)/canvas.height, tr: {x: tr.x, y: tr.y, a: tr.a}}) // add a wall
-    update();
+    var n = parseInt(val);
+    if (!isNaN(n)){
+        if (n < 150){
+	        drawings.push({x: (n - 30) * Math.sin(tr.a)/canvas.width, y: ((n - 30) * Math.cos(tr.a))/canvas.height, tr: {x: tr.x, y: tr.y}}) // add a wall
+            tr.x -= (n - 30) * Math.sin(tr.a) / 2
+            tr.y -= (n - 30) * Math.cos(tr.a) / 2
+        }
+        else{
+            tr.x -= (n - 30) * Math.sin(tr.a)
+            tr.y -= (n - 30) * Math.cos(tr.a)
+        }
+        update();
+    }
 });
 /* 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)
 
     tr.a = Math.atan((-e.targetTouches[0].layerX + canvasOffsetX + canvas.width/2)/(e.targetTouches[0].layerY - canvasOffsetY - canvas.height/2))
@@ -86,10 +91,11 @@ client.on('message', function (topic, message) {
 
 reset.onclick = () => {
     drawings = [];
-    crosses = [];
-    tr.x = canvas.width/2 + canvasOffsetX
-    tr.y = canvas.height/2 + canvasOffsetY
+    tr.x = 0
+    tr.y = 0
     tr.a = 0
+
+    robot.style.transform = 'translate(-50%, -50%) rotate(0deg)';
     update();
 }
 
@@ -105,23 +111,21 @@ function resizeCanvas() {
 }
 
 function redrawCanvas(){
+    ctx.translate(canvas.width/2 + canvasOffsetX, canvas.height/2 + canvasOffsetY)
     drawings.forEach(element => {
-        ctx.setTransform(1, 0, 0, 1, 0, 0)
+        //ctx.setTransform(1, 0, 0, 1, 0, 0)
 
-	ctx.translate(tr.x, tr.y)
+        //ctx.translate(tr.x, tr.y)
         // ctx.translate(element.tr.x, element.tr.y)
-	ctx.rotate(tr.a)
+        // ctx.rotate(tr.a)
         // ctx.rotate(element.tr.a)
-        wall(element.x, element.y);
+        wall(element.x + element.tr.x, element.y + element.tr.y);
     });
 }
 
 function update(){
     resizeCanvas();
     ctx.setTransform(1,0,0,1,0,0);
-    for (let cross of crosses){
-        drawCross(cross.x, cross.y)
-    }
     redrawCanvas();
 }
 
@@ -131,4 +135,4 @@ const updateOnFrame = () => {
 }
 
 //updateOnFrame();
-window.onresize = update;
+window.onresize = update;
\ No newline at end of file
diff --git a/style.css b/style.css
index 06b066c..376bd42 100644
--- a/style.css
+++ b/style.css
@@ -24,4 +24,20 @@ canvas {
 
 #reset {
     position: absolute;
+}
+
+#robot {
+    transform-origin: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+
+#cross {
+    visibility: hidden;
+    position: absolute;
+    opacity: 1;
+    pointer-events: none;
 }
\ No newline at end of file