Speed setup for responsiveness

src/apps/path-finder/components/controller/controller.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 20px 20px 16px;
+  margin: 20px 10px 16px;
 
   .operation {
     display: flex;
@@ -67,6 +67,12 @@
   .play {
     display: none;
   }
+
+  .time {
+    font-weight: 600;
+    min-width: 3ch;
+    display: inline-block;
+  }
 }
 
 @media (width >= 768px) {

src/apps/path-finder/components/controller/controller.tsx

@@ -8,12 +8,15 @@ import classes from './controller.module.scss';
 import { getDimensionsFromScreenSize } from '../../helpers/grid';
 import Info from './info';
 import Timer from './timer';
+import { defaultSpeeds } from '../../config';
 
 function Controller() {
   const dispatch = useAppDispatch();
   const rows = useAppSelector((state) => state.pathFinder.rows);
   const cols = useAppSelector((state) => state.pathFinder.cols);
   const { width, height } = useWindowSize();
+  const defaultSpeed =
+    width < 768 ? defaultSpeeds.mobile : defaultSpeeds.desktop;
 
   useDebounce(
     () => {
@@ -33,10 +36,10 @@ function Controller() {
 
   return (
     <section className={classes.controller}>
-      <Operations />
+      <Operations defaultSpeed={defaultSpeed} />
       <Info />
       <Timer />
-      <Execution />
+      <Execution defaultSpeed={defaultSpeed} />
     </section>
   );
 }

src/apps/path-finder/components/controller/execution.tsx

@@ -1,20 +1,23 @@
 import { useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@/host/store/hooks';
 import { clearGrid } from '../../store/path-finder.slice';
-
 import { Play, RefreshCcw } from 'lucide-react';
 import classes from './controller.module.scss';
 
 import { useDebounce } from 'react-use';
 import { pathFinders } from '../../algorithms';
-import { searchSpeeds } from '../../config';
+import { speeds } from '../../config';
 import { Status } from '../../models/interfaces';
 import { searchPath } from '../../store/search-thunk';
 
-function Execution() {
+interface Props {
+  defaultSpeed: string;
+}
+
+function Execution({ defaultSpeed }: Props) {
   const dispatch = useAppDispatch();
   const [pathFinder, setPathFinder] = useState('');
-  const [speed, setSpeed] = useState([...searchSpeeds.values()][1]);
+  const [speed, setSpeed] = useState(speeds.get(defaultSpeed)!);
   const entry = useAppSelector((state) => state.pathFinder.entry);
   const exit = useAppSelector((state) => state.pathFinder.exit);
   const status = useAppSelector((state) => state.pathFinder.status);
@@ -69,7 +72,7 @@ function Execution() {
         disabled={disabled}
       >
         <option value="" disabled>
-          Select path finder
+          Select a Path finder
         </option>
         {[...pathFinders.entries()].map(([key, { name }]) => (
           <option key={key} value={key}>
@@ -86,7 +89,7 @@ function Execution() {
         onChange={(e) => setSpeed(+e.target.value)}
         disabled={disabled}
       >
-        {[...searchSpeeds.entries()].map(([key, value]) => (
+        {[...speeds.entries()].map(([key, value]) => (
           <option key={key} value={value}>
             {key}
           </option>

src/apps/path-finder/components/controller/operations.tsx

@@ -6,12 +6,16 @@ import { generateMaze } from '../../store/maze.thunk';
 import { Play, Trash } from 'lucide-react';
 import { resetGrid } from '../../store/path-finder.slice';
 import { mazeGenerators } from '../../algorithms';
-import { mazeSpeeds } from '../../config';
+import { speeds } from '../../config';
 
-function Operations() {
+interface Props {
+  defaultSpeed: string;
+}
+
+function Operations({ defaultSpeed }: Props) {
   const dispatch = useAppDispatch();
   const [maze, setMaze] = useState<string>('');
-  const [speed, setSpeed] = useState([...mazeSpeeds.values()][1]);
+  const [speed, setSpeed] = useState(speeds.get(defaultSpeed)!);
   const status = useAppSelector((state) => state.pathFinder.status);
   const mazeAlgo = maze ? mazeGenerators.get(maze) : null;
   const disabled = status === Status.Generating || status === Status.Searching;
@@ -43,7 +47,7 @@ function Operations() {
         disabled={disabled}
       >
         <option value="" disabled>
-          Select Maze Algo
+          Select a Maze
         </option>
         {[...mazeGenerators.entries()].map(([key, { name }]) => (
           <option key={key} value={key}>
@@ -60,7 +64,7 @@ function Operations() {
         onChange={(e) => setSpeed(+e.target.value)}
         disabled={disabled}
       >
-        {[...mazeSpeeds.entries()].map(([key, value]) => (
+        {[...speeds.entries()].map(([key, value]) => (
           <option key={key} value={value}>
             {key}
           </option>

src/apps/path-finder/components/controller/timer.tsx

@@ -2,6 +2,7 @@ import { useAppSelector } from '@/host/store/hooks';
 import useTimer from '../../hooks/use-timer.hook';
 import { useEffect } from 'react';
 import { Status } from '../../models/interfaces';
+import classes from './controller.module.scss';
 
 function Timer() {
   const status = useAppSelector((state) => state.pathFinder.status);
@@ -23,9 +24,9 @@ function Timer() {
   }, [status, startTimer, stopTimer, isRunning, resetTimer]);
 
   return (
-    <span>
-      Time: <strong>{time}</strong>
-    </span>
+    <p>
+      Time: <span className={classes.time}>{time}</span>
+    </p>
   );
 }
 

src/apps/path-finder/config.ts

@@ -1,23 +1,19 @@
 export const cellSize = 25;
 
-export const mazeSpeeds = new Map([
+export const speeds = new Map([
   ['∞', 0],
   ['4x', 1],
-  ['2x', 10],
-  ['1x', 25],
-  ['0.7x', 50],
-  ['0.5x', 100],
+  ['2x', 25],
+  ['1x', 50],
+  ['0.7x', 75],
+  ['0.5x', 120],
   ['0.1x', 250],
 ]);
 
-export const searchSpeeds = new Map([
-  ['∞', 0],
-  ['4x', 1],
-  ['2x', 20],
-  ['1x', 30],
-  ['0.5x', 50],
-  ['0.1x', 250],
-]);
+export const defaultSpeeds = {
+  mobile: '1x',
+  desktop: '4x',
+};
 
 export const cellColors = {
   clear: 'transparent',

src/index.scss

@@ -60,6 +60,7 @@ button.primary-outline {
   border-radius: 4px;
 }
 
+select:disabled,
 button:disabled {
   cursor: not-allowed;
 }