janky beginnings of menu bar physics

1 files changed, 161 insertions, 0 deletions

diff --git a/components/controls.tsx b/components/controls.tsx
new file mode 100644
index 0000000..b7df330
--- /dev/null
+++ b/components/controls.tsx
@@ -0,0 +1,161 @@
+import { useEffect, useRef } from 'react';
+
+interface controlsPropsType {
+	next: () => void;
+	previous: () => void;
+	menu: () => void;
+}
+
+export function FullScreenControls({ next, previous, menu }: controlsPropsType) {
+	return <div className='fullscreenControls posabs a0'>
+		<div className='control previous' onClick={previous} />
+		<div className='control menu' onClick={menu} />
+		<div className='control next' onClick={next} />
+	</div>;
+}
+
+export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
+	var canvasRef = useRef(null);
+
+	var options = {
+		margin: 100, // screen margin
+		friction: 0.0, // friction
+		edgeForce: 1.0, // force outside margin (inwards to edges)
+		centerForce: 0.6, // force inside margin (outwards to edges)
+		maxForce: 50, // limit force to not go over this value
+		doneTolerance: 0.5, // if movement per frame goes below this value the animation is considered done
+	};
+
+	useEffect(() => {
+		var canvas = canvasRef.current as HTMLCanvasElement;
+		var ctx = canvas.getContext('2d');
+
+		function line([x1, y1]: [number, number], [x2, y2]: [number, number]) {
+			ctx.beginPath();
+			ctx.moveTo(x1, y1);
+			ctx.lineTo(x2, y2);
+			ctx.stroke();
+		}
+
+		var mouseX = 0;
+		var mouseY = 0;
+
+		function draw() {
+			var box = {
+				outer: {
+					x: 0,
+					y: 0,
+					width: canvas.width,
+					height: canvas.height,
+				},
+				inner: {
+					x: options.margin,
+					y: options.margin,
+					width: Math.max(0, canvas.width - 2 * options.margin),
+					height: Math.max(0, canvas.height - 2 * options.margin),
+				},
+			};
+
+			function findCenter(x: number, y: number): [number, number] {
+				var ratio = canvas.width / canvas.height;
+				var coolZone = (Math.abs(ratio - 1) * canvas.height) / 2;
+				var hw = canvas.width / 2;
+				var hh = canvas.height / 2;
+
+				if (ratio > 1) {
+					if (x < hw - coolZone) {
+						return [hw - coolZone, hh];
+					} else if (x > hw + coolZone) {
+						return [hw + coolZone, hh];
+					} else {
+						return [x, hh];
+					}
+				} else if (ratio < 1) {
+					if (y < hh - coolZone) {
+						return [hw, hh - coolZone];
+					} else if (y > hh + coolZone) {
+						return [hw, hh + coolZone];
+					} else {
+						return [hw, y];
+					}
+				} else {
+					return [hw, hh];
+				}
+			}
+
+			ctx.clearRect(0, 0, canvas.width, canvas.height);
+			ctx.lineWidth = 2;
+
+			ctx.strokeStyle = '#ff00ff';
+
+			var center = findCenter(mouseX, mouseY);
+			var mouse = [mouseX, mouseY];
+			// line(center, mouse as [ number, number ]);
+
+			var slope = (mouse[1] - center[1]) / (mouse[0] - center[0]);
+			if (Math.abs(slope) < 1) {
+				var right = mouse[0] > center[0];
+				if (right) {
+					var x = box.inner.x + box.inner.width;
+					var y = (x - mouseX) * slope + mouseY;
+				} else {
+					var x = box.inner.x;
+					var y = (mouseX - x) * -slope + mouseY;
+				}
+			} else {
+				var slope = (mouse[0] - center[0]) / (mouse[1] - center[1]);
+				var bottom = mouse[1] > center[1];
+				if (bottom) {
+					var y = box.inner.y + box.inner.height;
+					var x = (y - mouseY) * slope + mouseX;
+				} else {
+					var y = box.inner.y;
+					var x = (mouseY - y) * -slope + mouseX;
+				}
+			}
+			var offset = [mouse[0] - x, mouse[1] - y];
+			var outside = mouse[0] < box.inner.x
+				|| mouse[0] > box.inner.x + box.inner.width
+				|| mouse[1] < box.inner.y
+				|| mouse[1] > box.inner.y + box.inner.height;
+			offset = offset.map(o => o * options[outside ? 'edgeForce' : 'centerForce']);
+			var distance = Math.sqrt(offset[0] ** 2 + offset[1] ** 2);
+			offset = offset.map(o => o * -Math.min(1, options.maxForce / distance));
+
+			ctx.strokeStyle = '#ff0000';
+			line([mouseX + offset[0], mouseY + offset[1]], [mouseX, mouseY]);
+
+			ctx.strokeStyle = '#00ffff';
+
+			line([box.inner.x, box.inner.y], [box.inner.x + box.inner.width, box.inner.y]);
+			line([box.inner.x + box.inner.width, box.inner.y + box.inner.height], [
+				box.inner.x + box.inner.width,
+				box.inner.y,
+			]);
+			line([box.inner.x, box.inner.y + box.inner.height], [
+				box.inner.x + box.inner.width,
+				box.inner.y + box.inner.height,
+			]);
+			line([box.inner.x, box.inner.y], [box.inner.x, box.inner.y + box.inner.height]);
+
+			requestAnimationFrame(draw);
+		}
+		draw();
+
+		function onresize() {
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+		}
+		onresize();
+		window.addEventListener('resize', onresize);
+		canvas.addEventListener('mousemove', e => {
+			mouseX = e.clientX;
+			mouseY = e.clientY;
+		});
+	}, []);
+	return <div className='fullscreenControls posabs a0'>
+		<canvas ref={canvasRef} />
+		<div className='menuBar'>
+		</div>
+	</div>;
+}