no more canvas + boi is turning

2 files changed, 33 insertions, 25 deletions

diff --git a/components/controls.tsx b/components/controls.tsx
index 111c6ec..f94d25c 100644
--- a/components/controls.tsx
+++ b/components/controls.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties, useEffect, useRef } from 'react';
-import { animated, useSpring } from 'react-spring';
+import { CSSProperties, useEffect } from 'react';
+import { animated, SpringRef, useSpring } from 'react-spring';
 // import { useDrag } from 'react-use-gesture';
 
 interface controlsPropsType {
@@ -16,13 +16,17 @@ export function FullScreenControls({ next, previous, menu }: controlsPropsType)
 	</div>;
 }
 
-var menuBarPosApi: SpringRef<{ x: number; y: number; }>;
+interface menuBarSpringProps {
+	x: number;
+	y: number;
+	vertical: number;
+}
+var menuBarPosApi: SpringRef<menuBarSpringProps>;
 export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
-	var canvasRef = useRef(null);
-
 	var [menuBarSpring, api] = useSpring(() => ({
 		x: 0,
 		y: 0,
+		vertical: 0,
 		config: { mass: 1.6, tension: 300, friction: 20 },
 	}));
 
@@ -42,9 +46,6 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
 	var slopeAverage: [number, number][] = [];
 
 	useEffect(() => {
-		var canvas = canvasRef.current as HTMLCanvasElement;
-		var ctx = canvas.getContext('2d');
-
 		var physicsObject = {
 			velocity: [0, 0],
 			position: [0, 0],
@@ -52,6 +53,8 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
 
 		var mouseX = 0;
 		var mouseY = 0;
+		var windowWidth = 0;
+		var windowHeight = 0;
 		var mouseDown = false;
 
 		function draw() {
@@ -62,22 +65,22 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
 				outer: {
 					x: 0,
 					y: 0,
-					width: canvas.width,
-					height: canvas.height,
+					width: windowWidth,
+					height: windowHeight,
 				},
 				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),
+					width: Math.max(0, windowWidth - 2 * options.margin),
+					height: Math.max(0, windowHeight - 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;
+				var ratio = box.inner.width / box.inner.height;
+				var coolZone = (Math.abs(ratio - 1) * box.inner.height) / 2;
+				var hw = box.inner.width / 2;
+				var hh = box.inner.height / 2;
 
 				if (ratio > 1) {
 					if (x < hw - coolZone) {
@@ -100,9 +103,6 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
 				}
 			}
 
-			ctx.clearRect(0, 0, canvas.width, canvas.height);
-			ctx.lineWidth = 2;
-
 			var center = findCenter(physicsObject.position[0], physicsObject.position[1]);
 			var position = physicsObject.position;
 
@@ -156,31 +156,39 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
 			physicsObject.position[0] += physicsObject.velocity[0];
 			physicsObject.position[1] += physicsObject.velocity[1];
 
-			menuBarPosApi.start({ x: physicsObject.position[0], y: physicsObject.position[1] });
+			var verticalThreshold = 25;
+			menuBarPosApi.start({
+				x: physicsObject.position[0],
+				y: physicsObject.position[1],
+				vertical: physicsObject.position[0] <= box.inner.x + verticalThreshold
+						|| physicsObject.position[0] >= box.inner.x + box.inner.width - verticalThreshold
+					? 1
+					: 0,
+			});
 
 			requestAnimationFrame(draw);
 		}
 		draw();
 
 		function onresize() {
-			canvas.width = window.innerWidth;
-			canvas.height = window.innerHeight;
+			windowWidth = window.innerWidth;
+			windowHeight = window.innerHeight;
 		}
 		onresize();
 		window.addEventListener('resize', onresize);
-		canvas.addEventListener('mousemove', e => {
+		window.addEventListener('mousemove', e => {
 			mouseX = e.clientX;
 			mouseY = e.clientY;
 			mouseDown = (e.buttons & (1 << 0)) > 0;
 		});
 	}, []);
 	return <div className='fullscreenControls posabs a0'>
-		<canvas ref={canvasRef} />
 		<animated.div
 			className='menuBar'
 			style={{
 				'--x': menuBarSpring.x,
 				'--y': menuBarSpring.y,
+				'--vertical': menuBarSpring.vertical,
 			} as CSSProperties}
 		>
 		</animated.div>
diff --git a/styles/presentation.css b/styles/presentation.css
index 4d199ea..75f7776 100644
--- a/styles/presentation.css
+++ b/styles/presentation.css
@@ -86,7 +86,7 @@
 	top: calc(var(--y) * 1px);
 	left: calc(var(--x) * 1px);
 
-	transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%) rotate(calc(var(--vertical) * 90deg));
 	pointer-events: none;
 }