Initial commit

Grnscrnr's live version
2019-06-28 15:18:08 +02:00
commit ba54156da9
6 changed files with 322 additions and 0 deletions
@@ -0,0 +1,50 @@
+let mouseDown = false;
+let mouseDownEver = false;
+document.onmousedown = function(e) {
+    if (e.button === 0) {
+        mouseDown = true;
+        mouseDownEver = true;
+    }
+};
+document.onmouseup = function(e) {
+    if (e.button === 0) {
+        mouseDown = false;
+        document.getElementById("slingshot").classList.add("ungrabbed");
+    }
+};
+document.ontouchend = function(e) {
+    document.getElementById("slingshot").classList.add("ungrabbed");
+};
+document.ontouchstart = function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+};
+function distance(p1, p2) {
+    return Math.sqrt((p1.x-p2.x)**2 + (p1.y-p2.y)**2);
+}
+
+document.addEventListener("mousemove", (e) => {
+    if (mouseDown) {
+        document.getElementById("slingshot").classList.remove("ungrabbed");
+        cursorX = e.pageX;
+        cursorY = window.innerHeight - e.pageY;
+        const slingshot = document.getElementById("slingshot");
+        slingshot.style.width = distance({x: cursorX, y: cursorY}, {
+            x: window.innerWidth / 2,
+            y: window.innerHeight / 2
+        }) + "px";
+        const angle = cursorX >= window.innerWidth / 2 ? -Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) : (-Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) - Math.PI);
+        slingshot.style.transform = "rotate(" + angle + "rad)";
+    }
+});
+
+
+document.addEventListener("touchmove", (e) => {
+    document.getElementById("slingshot").classList.remove("ungrabbed");
+    cursorX = e.touches[0].clientX;
+    cursorY = window.innerHeight - e.touches[0].clientY;
+    const slingshot = document.getElementById("slingshot");
+    slingshot.style.width = distance({x: cursorX, y: cursorY}, {x: window.innerWidth/2, y: window.innerHeight/2}) + "px";
+    const angle = cursorX >= window.innerWidth/2 ? -Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) : (-Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) - Math.PI);
+    slingshot.style.transform = "rotate(" + angle + "rad)";
+});