diff options
| -rw-r--r-- | components/controls.tsx | 34 | ||||
| -rw-r--r-- | styles/presentation.css | 13 |
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; +} + |