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,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>The Fancy N</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./main.css">
+    <script src="controller.js"></script>
+    <meta name="viewport" content="width=300px, initial-scale=1">
+    <style>
+        body {
+            touch-action: none;
+            overscroll-behavior: none;
+        }
+    </style>
+</head>
+<body>
+<div id="slingshot">
+<span class="n">n&#x200A;</span>
+</div>
+</body>
+</html>
@@ -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)";
+});
@@ -0,0 +1,52 @@
+.anN {
+  font-family: 'Roboto Slab', serif;
+  font-size: xx-large;
+  margin: 0;
+  padding: 0;
+  position: fixed; }
+
+#slingshot {
+  position: fixed;
+  height: 20px;
+  left: 50%;
+  top: calc(50% - 10px);
+  width: 50px;
+  border: saddlebrown solid 5px;
+  border-right: chocolate solid 15px;
+  border-left: #3e1f12 solid 5px;
+  text-align: right;
+  font-family: 'Roboto Slab', serif;
+  font-size: 23px;
+  line-height: 0px;
+  writing-mode: vertical-rl;
+  transform: rotate(90deg);
+  transform-origin: left center;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Safari */
+  -khtml-user-select: none;
+  /* Konqueror HTML */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently supported by Chrome and Opera */ }
+  #slingshot.ungrabbed {
+    width: 0 !important;
+    transition: width 0.1s cubic-bezier(0.02, 0.9, 0.64, 0.98); }
+    #slingshot.ungrabbed > .n {
+      animation: n-fling .2s ease-out .1s; }
+@keyframes n-fling {
+  0% {
+    right: 0; }
+  50% {
+    right: 100px; }
+  100% {
+    right: 0; } }
+  #slingshot .n {
+    position: relative;
+    right: 0px; }
+
+/*# sourceMappingURL=main.css.map */