keybind selection and deletion :tada:

3 files changed, 73 insertions, 17 deletions

diff --git a/components/keybindselector.tsx b/components/keybindselector.tsx
index 084d748..1d11b6b 100644
--- a/components/keybindselector.tsx
+++ b/components/keybindselector.tsx
@@ -1,32 +1,64 @@
 import FilledInput from '@material-ui/core/FilledInput';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 
 function Keybind(props: {
 	keyName: string;
+	onClick?: () => any;
 }) {
-	return <span className='keybind'>{props.keyName}</span>;
+	return <span className='keybind' onClick={props.onClick}>{props.keyName}</span>;
 }
 
-function KeybindSelectorInner(props: {
-	value: string[];
-}) {
-	return <div className='keybind-selector-inner'>
-		{props.value.map(s => <Keybind keyName={s} />)}
-	</div>;
-}
+var keyBlacklist = [
+	'Shift',
+	'Control',
+	'Alt',
+	'Meta',
+];
+var keyMap = {
+	' ': 'Space',
+};
 
 export default function KeybindSelector(props: {
 	label: string;
 	value: string[];
 	onChange?: (newValue: string[]) => any;
 }) {
-	var [tempID, _setTempID] = useState(uuid());
+	var [inputID, _setInputID] = useState(uuid());
+
+	function KeybindSelectorInner() {
+		return <div className='keybind-selector-inner'>
+			{props.value.map(s =>
+				<Keybind
+					keyName={s}
+					onClick={() => {
+						props.onChange && props.onChange(props.value.filter(v => v != s));
+					}}
+				/>
+			)}
+		</div>;
+	}
+
+	return <FormControl
+		variant='filled'
+		className='keybind-selector'
+		tabIndex={0}
+		onKeyDown={e => {
+			e.preventDefault();
+			var key = e.key;
+
+			if (key in keyMap) key = keyMap[key];
+			if (keyBlacklist.includes(key)) return;
+
+			var newArr = Array.from(props.value);
+			if (!newArr.includes(key)) newArr.push(key);
 
-	return <FormControl variant='filled' className='keybind-selector' tabIndex={0}>
-		<InputLabel htmlFor={tempID} shrink>{props.label}</InputLabel>
-		<FilledInput id={tempID} inputComponent={() => <KeybindSelectorInner value={props.value} />} />
+			props.onChange(newArr);
+		}}
+	>
+		<InputLabel htmlFor={inputID} shrink>{props.label}</InputLabel>
+		<FilledInput id={inputID} inputComponent={() => <KeybindSelectorInner />} />
 	</FormControl>;
 }
diff --git a/pages/editor.tsx b/pages/editor.tsx
index 73bcd93..c34d3bd 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -631,6 +631,10 @@ function DefaultSettings() {
 	var setPlaying = usePlaying((st: any) => st.setPlaying);
 	var setWorkingTimeline = useWorkingTimeline((st: any) => st.setTimeline);
 
+	var [nextSlideKeybinds, setNextSlideKeybinds] = useState(['Space', 'n', 'Enter']);
+	var [previousSlideKeybinds, setPreviousSlideKeybinds] = useState(['Backspace', 'p']);
+	var [showMenuKeybinds, setShowMenuKeybinds] = useState(['Escape', 'm']);
+
 	return <>
 		<h2 className='title posabs h0 t0'>Presentation settings</h2>
 		<div className='scroll posabs h0 b0'>
@@ -693,9 +697,13 @@ function DefaultSettings() {
 			</div>
 			<div className='section'>
 				<span className='title'>Keybindings</span>
-				<KeybindSelector label='Next slide' value={['Space', 'n', 'Enter']} />
-				<KeybindSelector label='Previous slide' value={['Backspace', 'p']} />
-				<KeybindSelector label='Show menu' value={['Escape', 'm']} />
+				<KeybindSelector label='Next slide' value={nextSlideKeybinds} onChange={setNextSlideKeybinds} />
+				<KeybindSelector
+					label='Previous slide'
+					value={previousSlideKeybinds}
+					onChange={setPreviousSlideKeybinds}
+				/>
+				<KeybindSelector label='Show menu' value={showMenuKeybinds} onChange={setShowMenuKeybinds} />
 			</div>
 			<div className='section'>
 				<span className='title'>Cool temporary buttons</span>
diff --git a/styles/keybindselector.css b/styles/keybindselector.css
index b510dee..cc57501 100644
--- a/styles/keybindselector.css
+++ b/styles/keybindselector.css
@@ -1,17 +1,33 @@
 .keybind-selector-inner { padding: 27px 12px 10px; }
 
+.keybind-selector > * { cursor: pointer !important; } 
+
 .keybind-selector-inner .keybind {
 	padding: 2px 4px 1px;
 	margin-right: 3px;
 	border-radius: 4px;
 	user-select: none;
+	cursor: pointer;
+	transform: scale(1);
+	display: inline-block;
 
-	transition-property: background-color;
+	transition-property: background-color, opacity, transform;
 	transition-duration: 100ms;
 	background-color: var(--c800);
 	color: var(--c100);
 }
 
+.keybind-selector-inner .keybind:hover {
+	opacity: .7;
+}
+
+.keybind-selector-inner .keybind.new {
+	opacity: 0;
+	transform: scale(.85);
+}
+
+.keybind-selector * { font-family: "Inter", sans-serif !important; }
+
 .keybind-selector:focus .keybind-selector-inner .keybind { background-color: var(--gruble); }
 .keybind-selector:focus label { color: var(--gruble) !important; }
 .keybind-selector:focus .MuiFilledInput-underline:after { transform: scaleX(1); }