Level editor: add UI for adding and removing columns and rows

src/Components/LevelEditor.module.css

@@ -0,0 +1,55 @@
+.rowColumnEdits {
+	position: relative;
+	margin-bottom: 4rem;
+}
+
+.rowColumnEdit {
+	position: absolute;
+	z-index: 20;
+	display: flex;
+	gap: 0.5rem;
+	justify-content: center;
+	opacity: 0;
+	transition-property: opacity;
+	transition-duration: 0.2s;
+	transition-delay: 0.5s;
+	padding: 0.5rem;
+}
+
+.rowColumnEdit:hover,
+.rowColumnEdit:focus-within {
+	opacity: 1;
+	transition-delay: 0s;
+}
+
+@media (prefers-reduced-motion) {
+	.rowColumnEdit {
+		transition-timing-function: step-start;
+	}
+}
+
+.rowColumnEdit.is_position_left,
+.rowColumnEdit.is_position_right {
+	flex-direction: column;
+}
+
+.rowColumnEdit.is_position_top {
+	bottom: 100%;
+	left: 0;
+	right: 0;
+}
+.rowColumnEdit.is_position_bottom {
+	top: 100%;
+	left: 0;
+	right: 0;
+}
+.rowColumnEdit.is_position_left {
+	right: 100%;
+	top: 0;
+	bottom: 0;
+}
+.rowColumnEdit.is_position_right {
+	left: 100%;
+	top: 0;
+	bottom: 0;
+}

src/Components/LevelEditor.tsx

@@ -1,12 +1,16 @@
+import AddIcon from '@mui/icons-material/Add'
+import RemoveIcon from '@mui/icons-material/Remove'
 import {
 	Button,
 	Container,
 	FormControl,
+	IconButton,
 	InputLabel,
 	MenuItem,
 	Select,
 } from '@mui/material'
 import Typography from '@mui/material/Typography'
+import clsx from 'clsx'
 import {
 	useMemo,
 	useState,
@@ -21,6 +25,7 @@ import {
 	environmentFoundations,
 } from '../data/levels'
 import { EnvironmentGrid } from './Environment'
+import styles from './LevelEditor.module.css'
 
 type EnvironmentGridProps = ComponentProps<typeof EnvironmentGrid>
 
@@ -69,50 +74,74 @@ export const LevelEditor: FunctionComponent = () => {
 			<Typography variant="h5" component="h1" gutterBottom mt={4}>
 				Level editor
 			</Typography>
-			<EnvironmentGrid
-				foundations={foundations}
-				elements={elements}
-				playerState={playerState}
-				onSegmentClick={(x, y) => {
-					if (tool === 'erase') {
-						setElements((elements) =>
-							elements.filter(
-								({ x: elementX, y: elementY }) =>
-									x !== elementX || y !== elementY,
-							),
+			<div className={styles.rowColumnEdits}>
+				<RowColumnEdit
+					position="top"
+					onAdd={() => undefined}
+					onRemove={() => undefined}
+				/>
+				<RowColumnEdit
+					position="left"
+					onAdd={() => undefined}
+					onRemove={() => undefined}
+				/>
+				<RowColumnEdit
+					position="right"
+					onAdd={() => undefined}
+					onRemove={() => undefined}
+				/>
+				<RowColumnEdit
+					position="bottom"
+					onAdd={() => undefined}
+					onRemove={() => undefined}
+				/>
+				<EnvironmentGrid
+					foundations={foundations}
+					elements={elements}
+					playerState={playerState}
+					onSegmentClick={(x, y) => {
+						if (tool === 'erase') {
+							setElements((elements) =>
+								elements.filter(
+									({ x: elementX, y: elementY }) =>
+										x !== elementX || y !== elementY,
+								),
+							)
+							return
+						}
+						if (tool === 'player') {
+							setStartRowIndex(y)
+							return
+						}
+						const element = environmentElement.find(
+							({ value }) => value === tool,
+						)
+						if (element) {
+							setElements((elements) => [
+								...elements,
+								{
+									type: element.value,
+									x,
+									y,
+								},
+							])
+							return
+						}
+						const foundation = environmentFoundations.find(
+							({ value }) => value === tool,
 						)
-						return
-					}
-					if (tool === 'player') {
-						setStartRowIndex(y)
-						return
-					}
-					const element = environmentElement.find(({ value }) => value === tool)
-					if (element) {
-						setElements((elements) => [
-							...elements,
-							{
-								type: element.value,
-								x,
-								y,
-							},
-						])
-						return
-					}
-					const foundation = environmentFoundations.find(
-						({ value }) => value === tool,
-					)
-					if (foundation) {
-						setFoundations((foundations) => {
-							const newFoundations = [...foundations]
-							newFoundations[y] = [...foundations[y]]
-							newFoundations[y][x] = foundation.value
-							return newFoundations
-						})
-						return
-					}
-				}}
-			/>
+						if (foundation) {
+							setFoundations((foundations) => {
+								const newFoundations = [...foundations]
+								newFoundations[y] = [...foundations[y]]
+								newFoundations[y][x] = foundation.value
+								return newFoundations
+							})
+							return
+						}
+					}}
+				/>
+			</div>
 			<FormControl fullWidth>
 				<InputLabel id="tool-label">Zvolený nástroj</InputLabel>
 				<Select
@@ -178,3 +207,22 @@ export const LevelEditor: FunctionComponent = () => {
 		</Container>
 	)
 }
+
+const RowColumnEdit: FunctionComponent<{
+	position: 'top' | 'left' | 'right' | 'bottom'
+	onAdd: () => void
+	onRemove: () => void
+}> = ({ position }) => {
+	return (
+		<div
+			className={clsx(styles.rowColumnEdit, styles[`is_position_${position}`])}
+		>
+			<IconButton color="success">
+				<AddIcon />
+			</IconButton>
+			<IconButton color="error">
+				<RemoveIcon />
+			</IconButton>
+		</div>
+	)
+}