Initial commit

mikkosiikaniemi · Oct 7, 2023 · 289a53a · 289a53a
commit 289a53a
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 0 deletions.
diff --git a/finger.svg b/finger.svg
diff --git a/grass.svg b/grass.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Touch Sprint</title>
+	<link rel="stylesheet" href="touchsprint.css">
+</head>
+
+<body>
+	<!-- <h1>Touch Sprint</h1> -->
+	<div id="draggable" class="draggable-element"></div>
+	<div id="distance">0</div>
+	<script src="touchsprint.js"></script>
+</body>
+</html>
diff --git a/touchsprint.css b/touchsprint.css
@@ -0,0 +1,59 @@
+body {
+	/*
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	*/
+	height: 100vh;
+	overflow: hidden;
+	margin: 0;
+	background-image: url('grass.svg');
+	background-position: 0 0;
+	/* background-size: 50%; */
+}
+
+h1 {
+	color: #ffd3ae;
+	font-family: sans-serif;
+	font-weight: bold;
+	text-align: center;
+	text-transform: uppercase;
+	font-size: 7em;
+	/* letter-spacing: -.07em; */
+	line-height: 1;
+	-webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+	-webkit-text-stroke: min(.6vw, 8px ) #333;
+}
+
+.draggable-element {
+	background-image: url('finger.svg');
+	transform:scaleY(-1);
+	width: 30vw;
+	height: 30vw;
+	/* background-color: #FFF2;
+	outline: 3px solid white;
+	border-radius: 100%; */
+	cursor: pointer;
+	position: absolute;
+	/* margin: 0 auto; */
+	top: 100px;
+	left: calc( 50% - 15vw );
+	/* margin-left: -50px; */
+	/* transform: translateX(-50%); */
+	/* top: 50%; */
+	/* justify-content: center; */
+	/* align-self: center; */
+	/*transform: translateX(-50%) translateY(-50%);*/
+}
+
+#distance {
+	position: absolute;
+	right: 1%;
+	bottom: 0;
+	color: #FFF2;
+	font-family: sans-serif;
+	text-transform: uppercase;
+	font-size: 7em;
+}
diff --git a/touchsprint.js b/touchsprint.js
@@ -0,0 +1,98 @@
+const draggableElement = document.getElementById("draggable");
+const body = document.body;
+const distanceDisplay = document.getElementById("distance");
+
+const originalPositionY = draggableElement.style.top;
+const originalPositionX = draggableElement.style.left;
+const originalDistanceFromTop = draggableElement.offsetTop;
+
+let isDragging = false;
+let offsetX, offsetY;
+let initialPositionX, initialPositionY;
+let totalDistance = 0;
+
+// Add mouse and touch event listeners
+draggableElement.addEventListener("mousedown", startDrag);
+draggableElement.addEventListener("touchstart", startDrag);
+
+document.addEventListener("mousemove", drag);
+document.addEventListener("touchmove", drag);
+
+document.addEventListener("mouseup", endDrag);
+document.addEventListener("touchend", endDrag);
+
+function startDrag(e) {
+	isDragging = true;
+
+	// Handle both mouse and touch events
+	if (e.type === "mousedown") {
+		offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
+		offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
+	} else if (e.type === "touchstart") {
+		const touch = e.touches[0];
+		offsetX = touch.clientX - draggableElement.getBoundingClientRect().left;
+		offsetY = touch.clientY - draggableElement.getBoundingClientRect().top;
+		console.log(offsetY);
+	}
+
+	// Store the initial position of the element
+	initialPositionX = parseInt(draggableElement.style.left) || 0;
+	initialPositionY = parseInt(draggableElement.style.top) || 0;
+
+	// Set the element's position to "fixed" so it can be dragged freely
+	draggableElement.style.position = "fixed";
+	draggableElement.style.zIndex = "1000";
+}
+
+function drag(e) {
+	if (!isDragging) return;
+
+	// Handle both mouse and touch events
+	let clientX, clientY;
+	if (e.type === "mousemove") {
+		clientX = e.clientX;
+		clientY = e.clientY;
+	} else if (e.type === "touchmove") {
+		const touch = e.touches[0];
+		clientX = touch.clientX;
+		clientY = touch.clientY;
+	}
+
+	// Calculate the new position of the element
+	const newY = clientY - offsetY;
+	const newX = clientX - offsetX;
+
+	// Calculate the distance moved during this drag
+	let distanceY = newY - initialPositionY;
+
+	// Deduct the original elemtent distance from the top of the viewport
+	if (distanceY === newY) {
+		distanceY -= originalDistanceFromTop;
+	}
+
+	// Update the element's position based on the mouse/touch position and offset
+	draggableElement.style.left = newX + "px";
+	draggableElement.style.top = newY + "px";
+
+	// Update the background position to move it together with the element
+	body.style.backgroundPositionY = totalDistance + "px";
+
+	// Update the total distance
+	totalDistance += distanceY;
+	distanceDisplay.textContent = totalDistance.toFixed(0);
+
+	// Update the initial position for the next drag
+	initialPositionY = newY;
+}
+
+function endDrag() {
+	if (!isDragging) return;
+
+	// Reset the element's position to "absolute" and return it to its original place
+	draggableElement.style.position = "absolute";
+	draggableElement.style.zIndex = "0";
+	draggableElement.style.left = originalPositionX;
+	draggableElement.style.top = originalPositionY;
+
+	isDragging = false;
+}