feat: dynamic toolbar resizing for mobile

Author: Oskar Widmark

TODO.md

@@ -6,14 +6,14 @@ Features:
 - [x] 2D color matrix visualization
 - [ ] Spiral visualization
 - [x] Highlight color based on action type
-- [ ] Mobile browser support
+- [x] Mobile browser support
 
 Fixes:
 
 - [ ] Heap sort wrong when unsorted first element is smallest
 - [x] Improve Bully Sort
 - [x] Cleaner draw logic with no gaps
-- [ ] Handle resizing to smaller height correctly
+- [x] Handle resizing to smaller height correctly
 - [ ] Make parallel highlight work for recursive sorting networks
 - [ ] Separate highlight types for parallel highlighting to work properly
 - [ ] Optimize current 2D color matrix visualization

src/App.css

@@ -33,6 +33,7 @@
     flex: 1 1 auto;
     width: 100%;
     line-height: 0;
+    min-height: 0vh;
 }
 
 .chevron-wrapper {

src/AppBar.tsx

@@ -1,17 +1,52 @@
-import { PlayCircle, StopCircle } from '@mui/icons-material';
+import {
+  BarChart,
+  Brush,
+  MusicNote,
+  MusicOff,
+  PlayCircle,
+  Refresh,
+  StopCircle,
+} from '@mui/icons-material';
 import {
   Toolbar,
   Button,
   FormControlLabel,
-  Switch,
   Typography,
   CircularProgress,
   IconButton,
   AppBar,
+  useTheme,
+  useMediaQuery,
+  Checkbox,
+  Grid2,
+  ButtonProps,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { AppState, SortSettings, SortValue } from './types';
 
+type AppBarButtonProps = {
+  isCompact: boolean;
+  text: string;
+  icon: React.ReactElement;
+} & ButtonProps;
+
+const AppBarButton = ({
+  isCompact,
+  icon,
+  text,
+  ...props
+}: AppBarButtonProps) => (
+  <Button
+    variant="contained"
+    color="secondary"
+    disableElevation
+    startIcon={!isCompact ? icon : undefined}
+    {...props}
+  >
+    {!isCompact ? text : icon}
+  </Button>
+);
+
 interface AppBarProps {
   startSorting: (arr: SortValue[]) => Promise<void>;
   arr: SortValue[];
@@ -44,70 +79,78 @@ export function SortAppBar({
     shouldPlaySound,
   },
 }: AppBarProps) {
+  const theme = useTheme();
+  const isSm = useMediaQuery(theme.breakpoints.down('md'));
+  const isM = useMediaQuery(theme.breakpoints.down('lg'));
+
+  const sortIcon = !isSorting ? <PlayCircle /> : <StopCircle />;
+
   return (
     <AppBar position="relative">
-      <Toolbar className="toolbar" onClick={onClick}>
+      <Toolbar variant="dense" className="toolbar" onClick={onClick}>
         <div>
-          <Button
-            variant="contained"
-            color="secondary"
+          <AppBarButton
+            isCompact={isM}
+            text="Sort"
+            icon={sortIcon}
             onClick={() => startSorting(arr)}
-            disableElevation
-            startIcon={!isSorting ? <PlayCircle /> : <StopCircle />}
-          >
-            Sort
-          </Button>
+          />
         </div>
         <div>
-          <Button
-            variant="contained"
-            color="secondary"
+          <AppBarButton
+            isCompact={isM}
+            text="Shuffle"
+            icon={<BarChart />}
             onClick={shuffleAndRedraw}
-            disableElevation
-          >
-            Shuffle
-          </Button>
+          />
         </div>
         <div>
-          <Button
-            variant="contained"
-            color="secondary"
+          <AppBarButton
+            isCompact={isM}
+            text="Reset"
+            icon={<Refresh />}
             onClick={resetAndDraw}
-            disableElevation
-          >
-            Reset
-          </Button>
+          />
         </div>
-        <div>
+        <Grid2
+          container
+          direction="row"
+          sx={{ flexWrap: 'nowrap', alignItems: 'center', flexShrink: 0 }}
+        >
           <FormControlLabel
             control={
-              <Switch
+              <Checkbox
                 checked={canDraw}
                 onChange={toggleCanDraw}
                 name="canDraw"
                 color="secondary"
+                icon={<Brush />}
+                checkedIcon={<Brush />}
               />
             }
-            sx={{ marginRight: '0px' }}
-            label="Draw Mode"
+            sx={{ marginRight: isSm ? '0px' : undefined, marginLeft: '0px' }}
+            label={!isSm ? 'Draw Mode' : ''}
+            slotProps={{ typography: { whiteSpace: 'nowrap' } }}
           />
-        </div>
-        <div>
           <FormControlLabel
             control={
-              <Switch
+              <Checkbox
                 checked={shouldPlaySound}
                 onChange={togglePlaySound}
                 name="shouldPlaySound"
                 color="secondary"
+                icon={<MusicOff />}
+                checkedIcon={<MusicNote />}
               />
             }
-            label="Play Sound"
+            sx={{ marginRight: isSm ? '0px' : undefined, marginLeft: '0px' }}
+            label={!isSm ? 'Play Sound' : ''}
+            slotProps={{ typography: { whiteSpace: 'nowrap' } }}
           />
-        </div>
+        </Grid2>
         <div>
-          <Typography className="counter" align="left" color="white">
-            Swaps:{' '}
+          <Typography className="counter" align="left" color="white" noWrap>
+            {!isM ? 'Swaps:' : 'S:'}{' '}
             {swapTime || !isSorting ? (
               nbrOfSwaps
             ) : (
@@ -121,8 +164,8 @@ export function SortAppBar({
           </Typography>
         </div>
         <div>
-          <Typography className="counter" align="left" color="white">
-            Comparisons:{' '}
+          <Typography className="counter" align="left" color="white" noWrap>
+            {!isM ? 'Comparisons:' : 'C:'}{' '}
             {compareTime || !isSorting ? (
               nbrOfComparisons
             ) : (
@@ -136,8 +179,8 @@ export function SortAppBar({
           </Typography>
         </div>
         <div>
-          <Typography className="counter" align="left" color="white">
-            Aux. writes:{' '}
+          <Typography className="counter" align="left" color="white" noWrap>
+            {!isM ? 'Aux. writes:' : 'AW:'}{' '}
             {auxWriteTime || !isSorting ? (
               nbrOfAuxWrites
             ) : (

src/AppWithSound.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import App from './App';
-import { useSoundPlayer } from './useSoundPlayer';
+import { useSoundPlayer } from './hooks/useSoundPlayer';
 import { NonCustomOscillatorType } from 'tone/build/esm/source/oscillator/OscillatorInterface';
 import { gainToDb } from 'tone';
 import { DEFAULT_SOUND_TYPE, DEFAULT_SOUND_VOLUME } from './constants';
+import { RotationRequest } from './RotationRequest';
+import { useIsPortrait } from './hooks/useIsPortrait';
 
 export function AppWithSound(): React.ReactElement {
   const [soundType, setSoundType] =
@@ -16,6 +18,12 @@ export function AppWithSound(): React.ReactElement {
     volume: gainToDb(volume / 100), // Convert volume percentage to decibels
   });
 
+  const isPortrait = useIsPortrait();
+
+  if (isPortrait) {
+    return <RotationRequest />;
+  }
+
   return (
     <App
       playSound={play}

src/RotationRequest.tsx

@@ -0,0 +1,20 @@
+import { RotateLeft } from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+
+export const RotationRequest = () => (
+  <Box
+    className="App"
+    sx={(theme) => ({
+      alignItems: 'center',
+      justifyContent: 'center',
+      display: 'flex',
+      height: '100vh',
+      textAlign: 'center',
+      p: 2,
+      backgroundColor: theme.palette.background.default,
+    })}
+  >
+    <RotateLeft color="primary" sx={{ marginRight: '4px' }} />
+    <Typography color="primary">Please rotate to landscape mode.</Typography>
+  </Box>
+);

src/hooks/useIsPortrait.ts

@@ -0,0 +1,6 @@
+import { useMediaQuery, useTheme } from '@mui/material';
+
+export const useIsPortrait = () => {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down('sm'));
+};