Fix canvas dragging & z-index

MaMpf-HD · Oct 25, 2023 · 6d8d330 · 6d8d330
1 parent 16c762d
commit 6d8d330
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
@@ -15,12 +15,14 @@
 }
 
 #signin-box {
+    z-index: 2;
     padding: 70px 40px;
     background: linear-gradient(7deg,
             rgba(255, 255, 255, 0.85) 0%, white 70%);
 }
 
 #announcement-box {
+    z-index: 1;
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
@@ -51,6 +53,10 @@
     }
 }
 
+footer {
+    z-index: 1;
+}
+
 #footer-bar {
     background-color: rgba(255, 255, 255, 0.95);
 }
@@ -99,4 +105,6 @@
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 0;
+    cursor: grab;
 }
diff --git a/public/monotile/hat.js b/public/monotile/hat.js
@@ -1,7 +1,8 @@
 // BSD-3-Clause licensed by Craig S. Kaplan
 // adapted from: https://github.com/isohedral/hatviz
 
-let to_screen = [20, 0, 0, 0, -20, 0];
+const INITIAL_TO_SCREEN = [20, 0, 0, 0, -20, 0];
+let to_screen = INITIAL_TO_SCREEN;
 let tiles;
 let level;
 let box_height = 10;
@@ -325,7 +326,6 @@ function addButton(name, f) {
 function setup() {
 	let canvas = createCanvas(windowWidth, windowHeight);
 	canvas.id('einstein-monotile-canvas');
-	canvas.style('display', 'content');
 	canvas.parent('einstein-monotile');
 
 	tiles = [initH(), initT(), initP(), initF()];
@@ -339,16 +339,16 @@ function setup() {
 	monotile_btn.style('height', '35px');
 
 	// Little animation at the beginning
+	setTimeout(monotile, 50);
+	setTimeout(monotile, 90);
+	setTimeout(monotile, 150);
 	setTimeout(monotile, 200);
-	setTimeout(monotile, 400);
-	setTimeout(monotile, 700);
-	setTimeout(monotile, 1100);
 }
 
 function reset() {
 	tiles = [initH(), initT(), initP(), initF()];
 	level = 1;
-	to_screen = [20, 0, 0, 0, -20, 0];
+	to_screen = INITIAL_TO_SCREEN;
 	monotile();
 	loop();
 }
@@ -381,23 +381,42 @@ function windowResized() {
 
 
 /* Mouse movement */
-
+let dragging = false;
 DELTA_THRESHOLD = 5;
 
+function mousePressed() {
+	dragging = true;
+	loop();
+}
+
 function mouseDragged(event) {
+	if (!dragging) {
+		return true;
+	}
+
+	// Only move if the mouse has moved a certain amount
 	const diffX = mouseX - pmouseX;
 	const diffY = mouseY - pmouseY;
 	if (diffX <= DELTA_THRESHOLD && diffY == DELTA_THRESHOLD) {
-		return;
+		return true;
 	}
 
+	// Recalculate the transformation matrix
 	to_screen = mul(ttrans(diffX, diffY), to_screen);
+
 	loop();
+	return false;
 }
 
 $(document).ready(function () {
 	// Prevent mousemove on divs to propagate to canvas
 	$('#signin-box').on('mousemove', function (event) {
 		event.stopPropagation();
 	});
+	$('#footer-bar').on('mousemove', function (event) {
+		event.stopPropagation();
+	});
+	$('#announcement-box').on('mousemove', function (event) {
+		event.stopPropagation();
+	});
 });