Added tool image

jwillbold · jwillbold · commit fa6b99ce9919 · 2020-02-19T13:59:06.000+01:00
diff --git a/backend/images/driller.png b/backend/images/driller.png
diff --git a/backend/index.html b/backend/index.html
@@ -14,9 +14,9 @@
   </div>
   <canvas id="canvas" width="1000" height="800"></canvas>
   <div style="display:none;">
-    <img id="source" src="bpfactory.png"
+    <img id="source" src="bpfactory.png"></img>
   </div>
-  <div>Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+  <div style="display:none;">Icons made by <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
   <script type="text/javascript" src='./script.js'>
   </script>
 </body>
diff --git a/backend/script.js b/backend/script.js
@@ -8,7 +8,7 @@ const recvMargin = 100;
 const recvRadius = 20;
 const recvColor = "blue";
 
-const toolRadius = 15;
+const toolRadius = 40;
 const toolColor = 'orange';
 const toolTrack = [
                     // idle in middle
@@ -53,9 +53,12 @@ const toolTrack = [
 var drillingMachine = new Image();
 drillingMachine.src = '/images/driller.png';
 
+let drillerLoaded = false;
+
 drillingMachine.onload = function() {
   console.log("Loadded");
-    ctx.drawImage(drillingMachine, 100, 100);
+  drillerLoaded = true;
+
 };
 
 
@@ -102,7 +105,14 @@ async function update() {
     }
     console.log("await: ", x, y);
 
-    drawDot((bw-recvMargin)*x + recvMargin, (bh-recvMargin)*y + recvMargin, toolRadius, toolColor);
+    const toolX = (bw-recvMargin)*x + recvMargin;
+    const toolY = (bh-recvMargin)*y + recvMargin;
+
+    if(drillerLoaded) {
+      ctx.drawImage(drillingMachine, toolX-toolRadius/2, toolY-toolRadius/2, toolRadius, toolRadius);
+    } else {
+      drawDot(toolX, toolY, toolRadius, toolColor);
+    }
   }
 
   setTimeout(update, 200);
