add navigation mobile

Author: Fedorse

src/App.jsx

@@ -10,6 +10,7 @@ import PlayIcon from "./components/icon/PlayIcon";
 import PauseIcon from "./components/icon/PauseIcon";
 import ResumePlay from "./components/icon/ResumePlay";
 import Player from "./components/Player/Player";
+import { disableScroll } from "./utils/disableScroll";
 
 // type AlgState = 'started' | 'notStarted' | 'paused' | 'finished'
 
@@ -147,6 +148,7 @@ const App = () => {
   };
 
   const barWidth = window.screen.width / array.length;
+  disableScroll()
 
   return (
     <section>
@@ -160,7 +162,6 @@ const App = () => {
         history={history}
         currentStep={currentStep}
       />
-      {/* <Select selectedAlgorithm={selectedAlgorithm} onChange={selectAlgorithm}/> */}
       <Player
         selectAlgorithm={selectAlgorithm}
         goToNextStep={goToNextStep}

src/components/Array/Array.css

@@ -5,10 +5,9 @@
   justify-content: center;
   align-items: end;
   box-sizing: border-box;
-  /* gap: 0.2rem; */
 }
 @media (max-width: 768px) {
   .arr {
-    height: 85vh;
+    height: 84vh;
   }
 }

src/components/Button/Button.jsx

@@ -1,9 +1,9 @@
 import './Button.css'
 
 
-const Button = ({onClick, children, className}) => {
+const Button = ({onClick, children, className,onMouseDown,onMouseUp,onMouseLeave, onTouchCancel, onTouchStart, onTouchEnd}) => {
   return (
-    <button className={`button ${className}`} onClick={onClick}>{children}</button>
+    <button className={`button ${className}`} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onMouseLeave={onMouseLeave} onClick={onClick} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onTouchStart={onTouchStart}>{children}</button>
       )
 }
 

src/components/Player/Player.css

@@ -1,12 +1,14 @@
 .player-container {
-  width: 400px;
+  width: 700px;
   height: auto;
   position: fixed;
-  inset: auto 0 0 0;
+  inset: auto 0 0 30%;
   z-index: 1000;
   background-color: black;
   opacity: 80%;
   border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+
 }
 .controls {
   display: flex;
@@ -24,3 +26,13 @@
   display: flex;
   color: wheat;
 }
+
+@media(max-width: 768px){
+  .player-container{
+    width:100%; 
+    inset: auto 0 0 0;
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+  }
+
+}

src/components/Player/Player.jsx

@@ -4,6 +4,7 @@ import { NextStepIcon } from "../icon/NextStepIcon";
 import { ResetIcon } from "../icon/ResetIcon";
 import DropDown from "../DropDown/DropDown";
 import Button from "../Button/Button";
+import { useRef } from "react";
 
 const Player = ({
   selectAlgorithm,
@@ -16,6 +17,32 @@ const Player = ({
   handleAlgorithmRun,
   selectedAlgorithm,
 }) => {
+
+  const intervalRef = useRef(null)
+
+  const startInterval = (action) => {
+    if(intervalRef.current === null){
+      intervalRef.current = setInterval(()=>{
+          action()
+      },100)
+    }
+  }
+
+  const clearTimer = () => {
+    if(intervalRef.current !== null){
+      clearInterval(intervalRef.current)
+    }
+    intervalRef.current = null
+  }
+
+  const handleMouseDown = (action) =>{
+    action()
+    startInterval(action)
+  } 
+  const handleMouseUpOrLeave = () =>{
+    clearTimer()
+  }
+
   return (
     <div className="player-container">
       <div className="controls">
@@ -24,11 +51,26 @@ const Player = ({
           selectedAlgorithm={selectedAlgorithm}
         />
         <div className="step-buttons">
-          <Button onClick={goToPreviousStep}>
+          <Button 
+            onMouseDown={() => handleMouseDown(goToPreviousStep)}
+            onMouseUp={handleMouseUpOrLeave}
+            onMouseLeave={handleMouseUpOrLeave}
+            onTouchStart={()=> handleMouseDown(goToPreviousStep)}
+            onTouchEnd={handleMouseUpOrLeave}
+            onTouchCancel = {handleMouseUpOrLeave}
+            
+            >
             <PreviousStepIcon />
           </Button>
           <Button onClick={handleAlgorithmRun}>{getButtonText()}</Button>
-          <Button onClick={goToNextStep}>
+          <Button 
+                    onMouseDown={()=>handleMouseDown(goToNextStep)}
+                    onMouseUp = {handleMouseUpOrLeave}
+                    onMouseLeave = {handleMouseUpOrLeave}
+                    onTouchStart={()=> handleMouseDown(goToNextStep)}
+                    onTouchEnd={handleMouseUpOrLeave}
+                    onTouchCancel = {handleMouseUpOrLeave}
+>
             <NextStepIcon />
           </Button>
         </div>
@@ -39,7 +81,7 @@ const Player = ({
       <div className="controls-speed">
         <div>
           <input
-            style={{ width: "320px" }}
+            style={{ width: "320px", opacity: '70%' }}
             type="range"
             id="speed"
             value={speed}

src/index.css

@@ -6,6 +6,7 @@
 body {
   background-color: rgb(98, 97, 97);
 }
+
 section {
   display: flex;
   height: 100vh;
@@ -14,7 +15,7 @@ section {
 }
 
 .title-algorithm {
-  color: white;
+  color: rgb(255, 253, 253);
   text-align: center;
   margin-top: 50px;
   font-size: xx-large;

src/utils/disableScroll.js

@@ -0,0 +1,4 @@
+export const disableScroll = () =>{
+    document.body.style.position = 'fixed'
+    document.body.style.width = '100%'
+}

src/utils/generateRandomArray.js

@@ -1,5 +1,7 @@
 export const generateRandomArray = (length, min, max) => {
-    const array = Array.from({length}, () => Math.floor(Math.random () * ( max - min + 1 )) + min)
-    return array
-    }
-    
+  const array = Array.from(
+    { length },
+    () => Math.floor(Math.random() * (max - min + 1)) + min,
+  );
+  return array;
+};

src/utils/pause.js

@@ -1,11 +1,10 @@
 import { sleep } from "./sleep";
 
 export const pause = async (evalStateRef) => {
-
-    if(evalStateRef.current === 'paused'){
-        await sleep(100)
-        return pause(evalStateRef)
-    } else {
-        return undefined
-    }
-}
+  if (evalStateRef.current === "paused") {
+    await sleep(100);
+    return pause(evalStateRef);
+  } else {
+    return undefined;
+  }
+};

src/utils/sleep.js

@@ -1,4 +1,3 @@
-export const sleep = (ms,speedFactor) => {
-    return new Promise((resolve) => 
-      setTimeout((resolve), ms / speedFactor ))
-  }
+export const sleep = (ms, speedFactor) => {
+  return new Promise((resolve) => setTimeout(resolve, ms / speedFactor));
+};