timeline zooooooom

3 files changed, 41 insertions, 19 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index 53f7397..01cd989 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 import { loopSlide } from '../timeline';
 import { TimedVideoPlayer } from './present';
 
@@ -6,7 +6,10 @@ import AppBar from '@material-ui/core/AppBar';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
 import Fab from '@material-ui/core/Fab';
+import Slider from '@material-ui/core/Slider';
 import Toolbar from '@material-ui/core/Toolbar';
+import ZoomInRoundedIcon from '@material-ui/icons/ZoomInRounded';
+import ZoomOutRoundedIcon from '@material-ui/icons/ZoomOutRounded';
 import Icon from '@mdi/react';
 
 import { PressureIcon, SlideKeyframe } from '../components/icons';
@@ -68,6 +71,8 @@ export default function Index() {
 	var rerender = () => setDummy(!dummy);
 	var [player, setPlayer] = useState(new TimedVideoPlayer());
 
+	var [timelineZoom, setTimelineZoom] = useState(4);
+
 	useEffect(() => {
 		var videoEL = document.getElementById('player') as HTMLVideoElement;
 		player.registerPlayer(videoEL);
@@ -165,8 +170,27 @@ export default function Index() {
 						</div>
 					</Button>
 				</ButtonGroup>
+				<div className='zoom'>
+					<ZoomOutRoundedIcon />
+					<div className='spacing'>
+						<Slider
+							value={timelineZoom}
+							onChange={(event: any, newValue: number | number[]) => {
+								setTimelineZoom(newValue as number);
+							}}
+							min={0}
+							step={0.00000001}
+							max={1}
+							aria-labelledby='continuous-slider'
+						/>
+					</div>
+					<ZoomInRoundedIcon />
+				</div>
 			</div>
-			<div className='timeline posrel'>
+			<div
+				className='timeline posrel'
+				style={{ '--zoom': (12 - 0.5) * timelineZoom ** (1 / 0.4) + 0.5 } as CSSProperties}
+			>
 				<TimelineEditor
 					player={player}
 				/>
diff --git a/styles/editor.css b/styles/editor.css
index 3d84c22..9e315ca 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -50,10 +50,24 @@
 	color: var(--gruble);
 }
 
-.appGrid .tools .MuiButtonGroup-root {
+.appGrid .tools .MuiButtonGroup-root,
+.appGrid .tools .zoom {
 	margin-top: 8px;
 }
 
+.appGrid .tools .zoom {
+	display: grid;
+	grid-template-columns: 24px 1fr 24px;
+}
+
+.appGrid .tools .zoom .spacing {
+	margin: -4px 8px;
+}
+
+.appGrid .tools .zoom .spacing .MuiSlider-root {
+	color: var(--gruble);
+}
+
 .appGrid .tools .MuiButtonGroup-root .MuiButton-root {
 	border-width: 2px;
 	padding: 8px;
diff --git a/styles/util.css b/styles/util.css
index a2381ae..8a86a04 100644
--- a/styles/util.css
+++ b/styles/util.css
@@ -1,13 +1,3 @@
-.drop-1 { box-shadow: var(--drop-level-1); }
-.drop-2 { box-shadow: var(--drop-level-2); }
-
-.pad-s { padding: var(--spacing-small); }
-.pad-m { padding: var(--spacing-medium); }
-.pad-l { padding: var(--spacing-large); }
-
-.round-l { border-radius: var(--loose-corner); }
-.round-t { border-radius: var(--tight-corner); }
-
 .bg-100 { background-color: var(--gray-100); }
 .bg-200 { background-color: var(--gray-200); }
 .bg-300 { background-color: var(--gray-300); }
@@ -18,10 +8,6 @@
 .fg-100 { color: var(--gray-100); }
 .fg-900 { color: var(--gray-900); }
 
-.outcome.win { color: var(--disk-a-alt); }
-.outcome.lose { color: var(--disk-b-alt); }
-.outcome.draw { color: var(--gray-600); }
-
 .posabs { position: absolute; }
 .posrel { position: relative; }
 .posfix { position: fixed; }
@@ -59,8 +45,6 @@
 
 .w1fr { width: 1fr; }
 
-.w100m2m { width: calc(100% - var(--spacing-medium)); }
-
 .w100vw { width: 100vw; }
 .h100vh { height: 100vh; }