Merge branch 'master' of github.com-private:chevreaux/chicory-data

chicory-pizza · Apr 18, 2023 · 0596389 · 0596389
2 parents b9aa569 + b324e5e
commit 0596389
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 21 deletions.
diff --git a/src/levelEditor/LevelInspector.jsx b/src/levelEditor/LevelInspector.jsx
@@ -55,7 +55,7 @@ export default function LevelInspector({
 	const prevCoordinates = useRef<?[number, number]>(null);
 
 	const [editorToolType, setEditorToolType] =
-		useState<EditorToolType>('Select');
+		useState<EditorToolType>('SELECT');
 	const [paintColor, setPaintColor] = useState<number>(0);
 	const [brushSize, setBrushSize] = useState<number>(1);
 
@@ -113,7 +113,7 @@ export default function LevelInspector({
 	}
 
 	function onMapMouseUp(ev: SyntheticMouseEvent<HTMLDivElement>) {
-		if (editorToolType === 'Brush') {
+		if (editorToolType === 'BRUSH') {
 			if (isPainting) {
 				setIsPainting(false);
 				prevCoordinates.current = null;
@@ -199,12 +199,12 @@ export default function LevelInspector({
 				return;
 			}
 			if (ev.buttons === 1 && !addingEntityLabel) {
-				if (editorToolType === 'Brush') {
+				if (editorToolType === 'BRUSH') {
 					setIsPainting(true);
 					paint(mapMouseMoveCoordinates);
-				} else if (editorToolType === 'Fill') {
+				} else if (editorToolType === 'FILL') {
 					doFloodFill(mapMouseMoveCoordinates);
-				} else if (editorToolType === 'Eyedropper') {
+				} else if (editorToolType === 'EYEDROPPER') {
 					doEyedropper(mapMouseMoveCoordinates);
 				}
 			}
@@ -224,7 +224,7 @@ export default function LevelInspector({
 			// Without this code, if the user holds down the button while quickly moving the
 			// cursor to be outside the geo preview, `onMapMouseMove` will not fire to paint
 			// the pixels between `prevCoordinates` and the cursor. We need `onMapMouseLeave` to cover this.
-			if (editorToolType === 'Brush' && isPainting) {
+			if (editorToolType === 'BRUSH' && isPainting) {
 				const rect = ev.currentTarget.getBoundingClientRect();
 
 				const mouseMapCoords = [
@@ -347,7 +347,7 @@ export default function LevelInspector({
 		setActiveUiViews((activeUiViews) => {
 			if (activeUiViews.includes(uiView)) {
 				if (uiView === 'GEO') {
-					setEditorToolType('Select');
+					setEditorToolType('SELECT');
 				}
 				return activeUiViews.filter((index) => index !== uiView);
 			}

diff --git a/src/levelEditor/preview/LevelPreviewDecos.jsx b/src/levelEditor/preview/LevelPreviewDecos.jsx
@@ -75,7 +75,7 @@ function LevelPreviewDecos(props: Props): React$Node {
 					' ' +
 					(props.entityIndexHover === index ? styles.hover : '') +
 					' ' +
-					(props.editorToolType !== 'Select' ? styles.disabled : '')
+					(props.editorToolType !== 'SELECT' ? styles.disabled : '')
 				}
 				key={index}
 				mapMouseMoveCoordinates={props.mapMouseMoveCoordinates}

diff --git a/src/levelEditor/preview/LevelPreviewObjects.jsx b/src/levelEditor/preview/LevelPreviewObjects.jsx
@@ -60,7 +60,7 @@ function LevelPreviewObjects(props: Props): React$Node {
 					' ' +
 					(props.entityIndexHover === index ? styles.hover : '') +
 					' ' +
-					(props.editorToolType !== 'Select' ? styles.disabled : '')
+					(props.editorToolType !== 'SELECT' ? styles.disabled : '')
 				}
 				key={index}
 				mapMouseMoveCoordinates={props.mapMouseMoveCoordinates}

diff --git a/src/levelEditor/toolbar/LevelToolbar.jsx b/src/levelEditor/toolbar/LevelToolbar.jsx
@@ -1,5 +1,7 @@
 // @flow strict
 
+import {useHotkeys} from 'react-hotkeys-hook';
+
 import SelectableButton from '../../common/SelectableButton';
 import {
 	PIXEL_COLORS,
@@ -10,6 +12,9 @@ import type {EditorToolType} from '../types/EditorToolType';
 
 import styles from './LevelToolbar.module.css';
 
+const MIN_BRUSH_SIZE = 1;
+const MAX_BRUSH_SIZE = 20;
+
 type Props = $ReadOnly<{
 	onEditorToolTypeUpdate: (toolType: EditorToolType) => mixed,
 	editorToolType: EditorToolType,
@@ -20,7 +25,28 @@ type Props = $ReadOnly<{
 }>;
 
 export default function LevelToolbar(props: Props): React$Node {
-	const toolTypes = ['Select', 'Brush', 'Fill', 'Eyedropper'];
+	useHotkeys('v', () => props.onEditorToolTypeUpdate('SELECT'));
+	useHotkeys('b', () => props.onEditorToolTypeUpdate('BRUSH'));
+	useHotkeys('g', () => props.onEditorToolTypeUpdate('FILL'));
+	useHotkeys('i', () => props.onEditorToolTypeUpdate('EYEDROPPER'));
+
+	useHotkeys('[', () => {
+		if (props.editorToolType === 'BRUSH') {
+			props.onBrushSizeUpdate(Math.max(props.brushSize - 1, MIN_BRUSH_SIZE));
+		}
+	});
+	useHotkeys(']', () => {
+		if (props.editorToolType === 'BRUSH') {
+			props.onBrushSizeUpdate(Math.min(props.brushSize + 1, MAX_BRUSH_SIZE));
+		}
+	});
+
+	const toolTypes: Array<{type: EditorToolType, description: string}> = [
+		{type: 'SELECT', description: 'Select (V)'},
+		{type: 'BRUSH', description: 'Brush (B)'},
+		{type: 'FILL', description: 'Fill (G)'},
+		{type: 'EYEDROPPER', description: 'Eyedropper (I)'},
+	];
 
 	const colorDescription = TOOLBAR_COLOR_LOOKUP.get(props.currentPaintColor);
 
@@ -32,18 +58,18 @@ export default function LevelToolbar(props: Props): React$Node {
 					{toolTypes.map((toolType) => {
 						return (
 							<SelectableButton
-								key={toolType}
-								onClick={() => props.onEditorToolTypeUpdate(toolType)}
-								selected={props.editorToolType === toolType}
+								key={toolType.type}
+								onClick={() => props.onEditorToolTypeUpdate(toolType.type)}
+								selected={props.editorToolType === toolType.type}
 							>
-								{toolType}
+								{toolType.description}
 							</SelectableButton>
 						);
 					})}
 				</span>
 			</div>
 
-			<div className={props.editorToolType !== 'Select' ? '' : styles.hidden}>
+			<div className={props.editorToolType !== 'SELECT' ? '' : styles.hidden}>
 				Current color:
 				<div className={styles.colorContainer}>
 					<span
@@ -54,12 +80,12 @@ export default function LevelToolbar(props: Props): React$Node {
 				</div>
 			</div>
 
-			<div className={props.editorToolType === 'Brush' ? '' : styles.hidden}>
+			<div className={props.editorToolType === 'BRUSH' ? '' : styles.hidden}>
 				Brush size: {props.brushSize}
 				<input
 					className={styles.range}
-					max="20"
-					min="1"
+					max={MAX_BRUSH_SIZE}
+					min={MIN_BRUSH_SIZE}
 					onChange={(e) => {
 						props.onBrushSizeUpdate(e.target.value);
 					}}
@@ -68,7 +94,7 @@ export default function LevelToolbar(props: Props): React$Node {
 				/>
 			</div>
 
-			<div className={props.editorToolType !== 'Select' ? '' : styles.hidden}>
+			<div className={props.editorToolType !== 'SELECT' ? '' : styles.hidden}>
 				Palette selection:
 				{PIXEL_COLORS_EXPLANATIONS.map((color) => {
 					return color.colors.map((colorIndex, arrayIndex) => {

diff --git a/src/levelEditor/types/EditorToolType.js b/src/levelEditor/types/EditorToolType.js
@@ -1,3 +1,3 @@
 // @flow strict
 
-export type EditorToolType = 'Select' | 'Brush' | 'Fill' | 'Eyedropper';
+export type EditorToolType = 'SELECT' | 'BRUSH' | 'FILL' | 'EYEDROPPER';
diff --git a/src/levelEditor/types/GameEntityType.js b/src/levelEditor/types/GameEntityType.js
@@ -1,3 +1,3 @@
-//@flow strict
+// @flow strict
 
 export type GameEntityType = 'OBJECT' | 'DECO';