aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-07-27 17:36:01 +0200
committerlonkaars <loek@pipeframe.xyz>2021-07-27 17:36:01 +0200
commitae34111f773264cb44dd86ce304cc69c9d83fd23 (patch)
tree083e202951d7ce0f97c8b589fa655506e9ab8079
parent1d71bf0c49693c9a896a653d9755e612ead8f6e4 (diff)
menu bar physics looking very saucy :tada:
-rw-r--r--components/controls.tsx34
-rw-r--r--styles/presentation.css13
2 files changed, 38 insertions, 9 deletions
diff --git a/components/controls.tsx b/components/controls.tsx
index d544c6b..111c6ec 100644
--- a/components/controls.tsx
+++ b/components/controls.tsx
@@ -1,4 +1,6 @@
-import { useEffect, useRef } from 'react';
+import { CSSProperties, useEffect, useRef } from 'react';
+import { animated, useSpring } from 'react-spring';
+// import { useDrag } from 'react-use-gesture';
interface controlsPropsType {
next: () => void;
@@ -14,11 +16,20 @@ export function FullScreenControls({ next, previous, menu }: controlsPropsType)
</div>;
}
+var menuBarPosApi: SpringRef<{ x: number; y: number; }>;
export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
var canvasRef = useRef(null);
+ var [menuBarSpring, api] = useSpring(() => ({
+ x: 0,
+ y: 0,
+ config: { mass: 1.6, tension: 300, friction: 20 },
+ }));
+
+ menuBarPosApi = api;
+
var options = {
- margin: 24, // screen margin
+ margin: 48, // screen margin
friction: 0.2, // friction
edgeForce: 0.4, // force outside margin (inwards to edges)
centerForce: 0.4, // force inside margin (outwards to edges)
@@ -140,13 +151,12 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
physicsObject.velocity[1] += offset[1];
}
- ctx.fillStyle = '#ff00ff';
- ctx.fillRect(physicsObject.position[0], physicsObject.position[1], 10, 10);
-
- physicsObject.position[0] += physicsObject.velocity[0];
- physicsObject.position[1] += physicsObject.velocity[1];
physicsObject.velocity[0] *= 1 - options.friction;
physicsObject.velocity[1] *= 1 - options.friction;
+ physicsObject.position[0] += physicsObject.velocity[0];
+ physicsObject.position[1] += physicsObject.velocity[1];
+
+ menuBarPosApi.start({ x: physicsObject.position[0], y: physicsObject.position[1] });
requestAnimationFrame(draw);
}
@@ -166,7 +176,13 @@ export function MenuBarControls({ next, previous, menu }: controlsPropsType) {
}, []);
return <div className='fullscreenControls posabs a0'>
<canvas ref={canvasRef} />
- <div className='menuBar'>
- </div>
+ <animated.div
+ className='menuBar'
+ style={{
+ '--x': menuBarSpring.x,
+ '--y': menuBarSpring.y,
+ } as CSSProperties}
+ >
+ </animated.div>
</div>;
}
diff --git a/styles/presentation.css b/styles/presentation.css
index 4f872e2..4d199ea 100644
--- a/styles/presentation.css
+++ b/styles/presentation.css
@@ -77,3 +77,16 @@
#menu .info .buttons .inner .MuiButton-root { margin: 8px; }
#menu .info .buttons .inner { margin: -8px; }
+.menuBar {
+ position: absolute;
+ width: 200px;
+ height: 50px;
+ background-color: #ffff00;
+
+ top: calc(var(--y) * 1px);
+ left: calc(var(--x) * 1px);
+
+ transform: translate(-50%, -50%);
+ pointer-events: none;
+}
+