addedd speed modifyer

src/core/static/css/main.css

@@ -43,6 +43,12 @@ input {
     z-index: -999;
 }
 
+#canvas {
+    position: relative;
+    width: 98%;
+    min-height: 800px;
+}
+
 #singleClickBtn, #doubleClickBtn {
     background-color: #62c462;
     border-style: dashed;

src/core/static/js/events.js

@@ -1,6 +1,8 @@
 const socket = io();
+let intervalTimer = null;
 let px       = 0;
 let py       = 0;
+let mod      = 1;
 
 
 socket.on('connect', function() {
@@ -13,28 +15,28 @@ $(function () {
     $("#canvas").on("mousedirection", function (e) {
         if (e.direction == "up") {
             px = 0;
-            py = -1;
+            py = -1 - mod;
         } else if (e.direction == "down") {
             px = 0;
-            py = 1;
+            py = 1 + mod;
         } else if (e.direction == "left") {
-            px = -1;
+            px = -1 - mod;
             py = 0;
         } else if (e.direction == "right") {
-            px = 1;
+            px = 1 + mod;
             py = 0;
         } else if (e.direction == "top-left") {
-            px = -1;
-            py = -1;
+            px = -1 - mod;
+            py = -1 - mod;
         } else if (e.direction == "top-right") {
-            px = 1;
-            py = -1;
+            px = 1 + mod;
+            py = -1 - mod;
         } else if (e.direction == "bottom-left") {
-            px = -1;
-            py = 1;
+            px = -1 - mod;
+            py = 1 + mod;
         } else if (e.direction == "bottom-right") {
-            px = 1;
-            py = 1;
+            px = 1 + mod;
+            py = 1 + mod;
         }
 
         updateText (px, py);
@@ -73,6 +75,23 @@ function touchHandler(event) {
     event.preventDefault();
 }
 
+
+function beginTimerModBump() {
+    intervalTimer = setInterval(function () {
+        mod += 1;
+    }, 800);
+}
+
+function endTimerModBump() {
+    clearInterval(intervalTimer);
+    mod = 1;
+}
+
+
+document.addEventListener("mousedown", beginTimerModBump, true);
+document.addEventListener("mouseup", endTimerModBump, true);
+
+
 document.addEventListener("touchstart", touchHandler, true);
 document.addEventListener("touchmove", touchHandler, true);
 document.addEventListener("touchend", touchHandler, true);

src/core/templates/index.html

@@ -27,7 +27,7 @@
                 X coords: 0, Y coords: 0
             </div>
 
-            <canvas id="canvas" width="650" height="650" style="border:1px solid #c3c3c3;"></canvas>
+            <canvas id="canvas" style="border:1px solid #c3c3c3;"></canvas>
         </div>
     </div>
 </div>